Image with video

What is the Image with video section?

The "Image with video" section is a dynamic way to engage visitors by sharing your brand's story in motion. This feature allows you to embed a video directly into your storefront.

Main settings

Heading

• Heading: Set the title for the video section to introduce the video content.

Make Section Full Width

• Make section full width: Enable this setting to make the video section span the entire width of the container.

Section Height

Height

• Height: Choose between adapting the height to the video or setting a fixed height.
• Desktop fixed height: Adjust the fixed height for desktop view (default 540px).
• Mobile fixed height: Adjust the fixed height for mobile view (default 560px).

Shopify-hosted Video

• Shopify-hosted video: Select a video hosted on Shopify. Background videos play on loop with no sound.

Or Embedded Video from URL

• Link for YouTube/Vimeo: Paste a link for a YouTube or Vimeo video.
• Mobile Layout: Choose whether to show the video on mobile or not.
• Layout: Select the layout for the video (options: First video, Hero first).

Colors

• Heading color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Section background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the background color (default 100%).
• Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Text container color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the text container background color (default 100%).

Large Screen Version

Image

• Image: Select an image for the large screen version of the section.

Large Screen Text Alignment

• Large screen text alignment: Choose the alignment of the text on the section for large screens (options: Top, Center, Bottom, Left, Center, Right).

Mobile Version

Image

• Image: Select an image for the mobile version of the section.

Mobile Screen Text Alignment

• Mobile screen text alignment: Choose the alignment of the text on the section for mobile screens (options: Top, Center, Bottom, Left, Center, Right).

Section Spacing

• Distance from the top: Adjust the spacing from the top of the section (default 0px).
• Distance from the bottom: Adjust the spacing from the bottom of the section (default 0px).

‍

Customize Heading block

• Title: "Video scene" allows you to set a compelling headline for your video content, drawing attention and setting context.
• Mobile Visibility: Choose whether to display the heading on mobile devices, allowing for a streamlined mobile experience.
• Heading Scale: Adjust the size of the heading text on large screens and mobile devices to ensure visibility and impact across all devices.

Customize Text block

• Text:  Use this block to add a brief description or teaser for the video, inviting visitors to engage with your content.
• Mobile Visibility: Similar to the heading, decide if this text will be displayed on mobile devices.

Customize Button block

• Button Style: Select "Primary" to apply your theme's primary button style, making it stand out to users.
• Button Text: "See all products" encourages users to explore your offerings further, potentially increasing engagement and conversions.
• Link: Insert the URL or site link where users will be taken upon clicking the button. This could be a product page, a promotional landing page, or any other destination of your choice.
• New Window: Toggle this option if you want the link to open in a new window, keeping your store's page open in the browser.
• Mobile Visibility: Decide if the button should be disabled on mobile devices, depending on your mobile strategy.

Mobile view example