How to add a background video section to any Shopify theme

Introduction

Create immersive, cinematic layouts with the Flexi Background Video Section — a powerful section designed to play video content seamlessly behind text and calls to action. Background videos are ideal for showcasing brand stories, lifestyle footage, or product moments that instantly capture attention.

In the video above, you’ll learn how to add a background video section to any Shopify theme using Flexi’s intuitive section settings. Discover how to configure video sources, manage performance-friendly playback, and ensure a smooth experience across devices.

Perfect for homepages, landing pages, and campaign-focused layouts, the Flexi Background Video section integrates seamlessly with any Shopify theme. Whether you’re telling a brand story or highlighting a flagship product, this section helps you create memorable first impressions without custom code.

Setup Instructions

Install the App

Visit the Shopify App Store and install Flexi Slider Sections. Start your free trial to unlock access to all Flexi sections, including the Background Video section.

Install Section

Open the Flexi app and navigate to the sections library. Search for "Background Video" and click "Add to Theme" to install it instantly.

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Navigate to the page where you want the background video to appear, click "Add section", and select "Background Video" from the available sections.

Set Section Width

In the section settings, choose how the background video should be displayed:

• Full width: Create an immersive, edge-to-edge video experience
• Fixed width: Set a custom maximum width (320px – 1440px)
• Theme width: Match your theme’s default content container

Add Content

Click "Add block" to add overlay content on top of the video. Each block can include headlines, supporting text, buttons, or other content elements layered above the background video.

This allows you to combine motion with messaging — ideal for hero sections, brand storytelling, or promotional callouts.

Customize & Style

Customize your background video section using Flexi’s built-in settings:

• Upload hosted videos or reference optimized video sources
• Control autoplay, looping, and mute behavior
• Adjust overlay colors and contrast for readability
• Fine-tune height, alignment, and mobile behavior

Works Seamlessly with Dawn & Horizon

Flexi sections are built for Shopify’s modern theme architecture, which means the Background Video section works seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.

Dawn Compatibility

Dawn is Shopify’s reference theme, and the Flexi Background Video section follows the same responsive layout patterns, accessibility standards, and performance best practices used throughout Dawn.

This ensures your video content integrates naturally with your theme’s typography, buttons, and spacing while maintaining smooth playback.

Horizon & Modern Framework Support

Horizon represents Shopify’s next-generation theme framework. The Background Video section integrates cleanly with Horizon-based themes without overriding global styles or introducing JavaScript conflicts.

Because each Flexi section is self-contained and theme-safe, you can confidently add background video sections to modern and highly customized storefronts.

Theme-Safe by Design

Every Flexi section is scoped, isolated, and performance-optimized. This means you can:

• Add or update background videos without editing theme code
• Preview video and content changes safely before publishing
• Reuse the same background video section across pages and themes
• Switch themes without rebuilding video-based layouts

Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi’s Background Video section adapts automatically — helping you add motion, depth, and storytelling to your store while maintaining performance and consistency.