Background video

Announcement Bar
Background video
Before and after
Benefits product
Benefits video reels
Brands
Collage
Collection feature
Collection list
Feature collection
Featured navigation
Features banner
Grid view
Header
Image banner
Image with text
Image with video
Logo banner
Lookbook
Multicolumn
Newsletter with image
Parallax section
Rich text with image
Shoppable image
Shoppable video
Shoppable video reels
Slideshow

What is the Background Video section?

The Background Video section adds a dynamic and visually engaging element to your store. Perfect for showcasing your brand's story, products, or mood, this section creates an immersive experience for your customers. By combining video content with customizable text and interactive elements, it helps highlight your key messages while keeping visitors engaged.

Main settings

General
  • ‍Heading: Set the title for the section to introduce the background video content.‍
  • Make section full width: Enable this setting to make the video span the entire width of the screen.
Shopify-Hosted Video
  • ‍Video: Select the video file to be used as the background. Shopify-hosted videos play on loop without sound.‍
  • Mobile video: Choose a mobile-specific video file for optimized display on smaller devices.‍
  • Enable autoplay: Automatically play the video when the page loads.‍
  • Show video controls: Enable this option to allow users to play, pause, or navigate through the video.
Embedded Video from URL
  • ‍Link for YouTube/Vimeo: Add a YouTube or Vimeo link if no Shopify-hosted video is selected. Ensure the link complies with Shopify's documentation.
Section Height
  • ‍Height: Choose between the original aspect ratio or a fixed height for the video display.‍
  • Desktop fixed height: Adjust the fixed height of the video for desktop screens.‍
  • Mobile fixed height: Adjust the fixed height of the video for mobile devices.
Colors
  • ‍Heading color: Set the color of the heading text. The default is ‘Transparent,’ which inherits from global settings.‍
  • Background color: Choose the background color for the section. The default is ‘Transparent.’‍
  • Background opacity: Adjust the opacity of the background color for better visual balance.‍
  • Text color: Set the color of the text within the section. The default is ‘Transparent.’
Large Screen Version
  • ‍Horizontal alignment: Choose the alignment of the video content on large screens (options: Left, Center, Right).
Mobile Version
  • ‍Horizontal alignment: Adjust the alignment of the video content specifically for mobile screens (options: Left, Center, Right).
Section Spacing
  • ‍Distance from the top: Set the spacing from the top of the section to nearby elements.‍
  • Distance from the bottom: Set the spacing from the bottom of the section to nearby elements.

Customize subheading block

Click one of the preloaded subheading block to customize it.

Customize heading block

Click one of the preloaded heading block to customize it.

Customize text block

Click one of the preloaded text block to customize it.

Customize button block

Click one of the preloaded button block to customize it.

Customize Countdown timer block

The Countdown Timer block is a dynamic feature designed to create urgency and encourage customer action by displaying a countdown to a specific date and time. This block is perfect for highlighting limited-time offers, upcoming events, or product launches. It helps drive engagement and motivates customers to act before the timer expires.

Mobile view example

Back