The Video block is the only required block for the app to function.

Once you’ve added and configured your video, you can add additional Content Blocks to the section, which will overlay the video.

<aside> ⚠️ You may only have 1 video block per section. If you’d like to add multiple videos to the page, you need to add a new section first.

</aside>

https://vimeo.com/872750379?share=copy

Video File

Select or upload a video to your shop. Refer to Shopify’s guidelines for best results.

Video must be an mp4 or mov file.

Layout

Remove section spacing

This option will attempt to remove the theme default top and bottom spacing around the section.

Which devices to show on

Determine which screen sizes to display the section for. If you’d like to define different settings for each device, create 2 sections with the same video. Set one to Mobile only and the other to Desktop only and configure each section as desired.

Ratio

Select the ratio you’d like the video to be displayed at. If the ratio selected is different than the size of the video, it will automatically adjust to fill the selected ratio.

Fit to screen - Will adjust the ratio of the video to the device screen it is being viewed on.

Width

Percentage of the parent container that the video should span. The height will be determined by the Ratio setting above.

Audio

Show audio toggle

If you’d like to display a unmute/mute icon on the video, enable this option

Audio toggle color

Set the color of the unmute/mute icon

Content

Vertical alignment

Determines the vertical placement of any content blocks on the video.

Horizontal alignment

Determines the horizontal placement of any content blocks on the video.

Video opacity

Set the video transparency. A lower opacity will make the video more see-through, which can be helpful if you’d like the content blocks to be more readable.

Background color

The color behind the video, which will show more as the opacity is decreased.

Style

Border radius

Determines the rounded edges of the video, in relative units. The border radius will scale with the screen size.

Note: The background color of the Section will show at the edges of the video, not the video background color.

Blur

Add a blur effect to the video. This can help with readability and contrast of any content blocks on top.

Content blend mode

Add a blend mode to all of the content blocks for this video.

Custom CSS

This is an advanced field, to add any custom CSS to the block.

Note: add only CSS declarations, do not include any selectors.