Video banner settings

The Video Banner section is a visually striking element that can be displayed in full-width or contained layout, allowing flexible integration into your website design. Featuring a prominent video alongside an engaging headline and a customizable call-to-action button, this section captures visitors’ attention and encourages interaction. Whether showcasing product launches, promotional campaigns, or telling your brand story, the Video Banner delivers an immersive experience that enhances your store’s visual appeal and drives customer engagement.

Setting	Description
Heading	To add a main heading to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading, such as making it bold, italic, or adding a hyperlink.
Heading size	The heading size setting offers three options to control the size of your site's headings: Small Medium Large
Description	To add a description to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize text, such as making its font bold or light, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to the body text. Furthermore, you can click the dynamic source button to insert a dynamic source as the description of the section.

Button settings

Setting	Description
Button label	Decide whether the section includes a button: To display the button, enter text into the field as the label. To hide the button, leave the text field empty.
Button link (paste a link or search)	Input the URL you want the button to direct to, or select a page from the dropdown list of options that appears when you click on the field. Also, you can click the source button to add a dynamic source as a URL.
Button style	In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store.
Button type	Button type: Choose how the button will be displayed: Button – a solid button. Button with icon – a button that includes an icon. Link – text styled as a hyperlink. Link with icon – a hyperlink that includes an icon.
Icon	Select an icon from the dropdown list; it will be displayed in the button before the text.

Shopify-hosted video

Setting	Description
Video	Click the "Select video" button and upload your chosen video file.

Style settings

Setting	Description
Make section full width	Click the "Select video" button and upload your chosen video file.
Banner height	Controls the height of the video. Choose one of four available options: Adapt to video Small Medium Large.
Banner height mobile	Controls the height of the video on mobile. Choose one of four available options: Adapt to video Small Medium Large.
Content alignment	Determines the horizontal alignment of the content within the section. Choose whether to align content to the left, center, or right to best fit your design and improve readability.
Content alignment mobile	Determines the horizontal alignment of the content within the section on mobile. Choose whether to align content to the left, center, or right to best fit your design and improve readability.
Color scheme	Applying a color scheme to a video section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.
Container color scheme	Sets the color scheme for the content container, including the heading, description, and button, to ensure consistent and visually appealing styling.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.