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.
Settings
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.
Video
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.
Borders
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.
Blocks
Heading
Heading font style will be the heading font chosen in Typography/Theme settings.
Heading
The text for the block.
Heading size
Select the size of the text for the heading.
Subheading
Subheading font style will be the accent font chosen in Typography/Theme settings.
Subheading
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
Text will be the body font chosen in Typography/Theme settings.
Text
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
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://".