Image with video (Home)

What is the Image with video (Home) section?

The Image with Video (Home) section is a specialized and enhanced version of the classic Image with Video section, crafted specifically for use in Header Group layouts. With its extended settings, such as precise content positioning, it offers unparalleled flexibility and customization.

This section integrates seamlessly with the 'Transparent menu' header layout, allowing for a visually cohesive and polished design. When paired with advanced header settings like header blur, it creates an immersive and modern browsing experience that captivates your audience.

Main settings

General Settings

• Make section full width: Enable this option to stretch the section across the full width of the page.

Content Position

• Content over: Choose whether the content displays over the Image or Video.
  Note: Works only with Shopify-hosted videos on desktop resolution. For YouTube/Vimeo, select 'Image'.

Section Height

• Height: Choose between "Adapt to Image" or "Fixed Height" to control the section's height.
• Desktop fixed height: Set a specific height (in pixels) for desktop devices when "Fixed Height" is selected.
• Mobile fixed height: Set a specific height (in pixels) for mobile devices when "Fixed Height" is selected.

Shopify-Hosted Video

• Video: Upload or select a Shopify-hosted video to use as the background. The video plays on loop without sound.
• Mobile Layout: Choose how the video behaves on mobile devices (e.g., hide the video or display it).
• Layout: Select the video layout style (e.g., First Video or Hero First).

Colors

• Section background color: Set the section’s background color.
• Background opacity: Adjust the transparency level of the section’s background.
• Text color: Choose the color for the text.
• Text container color: Define the color of the text background container.
• Text container background opacity: Adjust the opacity of the text container background.

Large Screen Version

• Image: Upload or select an image for large screens.
• Large screen text alignment: Align text vertically (Top, Center, or Bottom) and horizontally (Left, Center, or Right).

Mobile Version

• Image: Upload or select an image for mobile devices.
• Mobile text alignment: Align text vertically (Top, Center, or Bottom) and horizontally (Left, Center, or Right).

Section Spacing

• Distance from the top: Adjust the spacing between the section and the top of the page.
• Distance from the bottom: Adjust the spacing between the section and the bottom of the page.

‍

Customize Heading block

Customize Text block

Customize Button block

Mobile view example