Video banner

This section is to add relevant autoplay videos to your brand to attract clients.

Configure video banner

Go to Customize theme. Click the dropdown menu at the top of the page and select the Home page template.

From the left side menu, select “Video banner.”

Customize this section by using the setting on the right side of the theme editor, as described in the following table:

General

Section visibility Select from the options to select the visibility of this section: -Always -Small devices only(On selecting this, the section will be visible on mobile devices only.) -Large devices only Make section fullwidth Tick this checkbox to show the full width of the video section. Enable autoplay Tick this checkbox to auto-play the video. Desktop height Select the height of the video: -550px -665px -750px -Fullscreen -Auto Mobile height Select the height of the video: -350px -450px -650px -Fullscreen -Auto

Video

Cover Image Add any image. (Note: 1920 x 720px recommended. This cover image will not be visible if video autoplay is enabled.) Link Add the link to the video you want to show in the video banner. It accepts YouTube or Vimeo links. Shopify hosted video Select the video available from the store files.

Content

Heading

Add heading text. (Note: Wrap your text between [ ] to add the markers. For example, This [marker] will underline marker text.)

Heading size Select the heading size from the H1-H6 options. Heading tag Specify heading code types from H1-H6 for SEO and search engines for crawling purposes. Description Add the description text. Play button text Add text for the play button. Width Select the content width from the following options: -Small -Medium -Large Position Select the content position from the following options: -Top -Center Alignment Select the content alignment from the following options: -Left -Center -Right

Marquee

Enable heading marquee Select this checkbox to enable the marquee of the heading text. Direction Select the direction:

-Right to left

-Left to Right Desktop scrolling speed Adjust the range bar to set the scrolling speed between 5s to 100s on the desktop. Mobile scrolling speed Adjust the range bar to set the scrolling speed between 5s to 100s on the mobile. Desktop heading size Adjust the range bar to set the heading size between 20s to 100s on the desktop. Mobile heading size Adjust the range bar to set the heading size between 20s to 50s on the mobile.

Colors

Color scheme Select any color scheme defined in the Theme settings>Colors>Schemes. Text Select the text color. Button background Select the button background color. Button text Select the button text color. Button hover background Select the button background color on hover. Button hover text Select the button text color on hover. Overlay background Select the background overlay color. Overlay opacity Adjust the range bar to determine the opacity.

Section padding

Top spacing (desktop)

Adjust the range bar to add spacing at the top of the section for desktop view.

Bottom spacing (desktop)

Adjust the range bar to add spacing at the bottom of the section for desktop view.

Top spacing (mobile)

Adjust the range bar to add spacing at the top of the section for mobile view.

Bottom spacing (mobile) Adjust the range bar to add spacing at the bottom of the section for mobile view.

Last updated