Background video

Available in Whisk versions 4.1.0 and greater

Background videos will autoplay, loop, and have no sound. If you'd like a video with sound, use a Video or a Video with text section instead.


First section

When this section is the first one at the top of the page, make sure this box is checked. It loads any animated text immediately so it's a better experience for the customer.


Upload a video to Shopify here to show in this section. These videos can be of any aspect ratio and they will display in their native aspect ratio.

This section only supports uploading a video to Shopify to host and does not support a YouTube or Vimeo hosted video. This is because YouTube and Vimeo videos have a lot of extra settings that make them less ideal for a background video, the biggest being that they don't always autoplay. We chose to only allow Shopify hosted videos to give users to your website the best experience.

Set a video minimum height

Check this box if you want to ensure that the video is always a certain height. This is useful if you have a lot of copy in the blocks, you can make sure that the video never gets too short where all the text doesn't fit.

Video minimum height

Select a height in pixels for the smallest height the video will display in. It will auto crop the edges of the video out and this will only work if the above checkbox is checked.

Tinted overlay

Check this box if you want to add a slightly transparent overlay on top of the image. This can help make the text more easily readable. 

Overlay color

Choose a color for the overlay that will sit on top of the image. 

Text box

Font color

Choose a color for all of the text that will sit on top of the image. 

Font color contrast

If there is a button block in the image banner, the button will be the font color chosen above, and the text in the button will be this color, so make sure it has a high enough contrast against the font color.

Text animation

See the documentation for text animations for more details.

Text box position

Choose where you want the text box to be positioned over the image on desktop. It will automatically be positioned at the bottom and full screen width on mobile.

Text box max width (desktop)

Set a maximum width in percentage of browser width for the text box to display.

Text alignment (desktop or mobile)

Choose left, center, or right text alignment.


See our documentation on Border shapes and Color underneath sections to learn more about how to use the settings in this section.

Section spacing

(Whisk 5.0.0 and above)

Adjust top and bottom padding within the section.

Add space above or below

(Whisk 4.3.1 and below)

Depending on the sections that are above or below this section, you may want to add some extra space for a more pleasing layout.



Heading font style will be the heading font chosen in Typography/Theme settings.


The text for the block.

Heading size

Select the size of the text for the heading.


Subheading font style will be the accent font chosen in Typography/Theme settings.


The text for the block.

Subheading size

Select the size of the text for the heading.

Make text bold

Check this box to make the subheading text bold.


Text will be the body font chosen in Typography/Theme settings.


The text for the block.

Text size

Select the size of the text.

Make text bold

Check this box to make the text bold, which can be helpful for legibility on a transparent background.


Buttons will be automatically colored based on the color scheme chosen as the text box background. The following applies to both Button 1 & Button 2.

Button label

The text for the button. To hide either of the buttons, leave the label for that button blank. 

Button link

Add a link to the page you want the button to lead to. If it's a page outside of the store, make sure it's the full URL with "https://".



Upload the image you want to use in the block.

Image max width

This will be the width of the image in px unless it's too wide to fit the screen, then it will default to full width and scale with the screen size so it's never cut off.

Image text

If your image includes imbedded text, add that text here so that it can be picked up by screen readers for accessibility, and by Google for better search results.

Make image text h2 heading

If your image has text and is being used as the title for the section, check this box. This also benefit s accessibility and SEO.

Still need help? Contact Us Contact Us