Modern e-commerce design has evolved significantly beyond static product grids and image banners. Interactive media, especially video, has become a powerful tool for improving engagement, communicating product value, and guiding customer attention toward specific products. A shoppable video section combines video content with direct product linking, allowing customers to watch a video and interact with featured products within the same interface. Unlike traditional media sections, a shoppable video section is designed not only for visual storytelling but also for conversion optimization. It enables merchants to highlight specific products, demonstrate product usage, and guide customers toward high-priority inventory. This approach reduces friction in the customer journey by eliminating the need to navigate between separate media and product pages. Shopify themes support custom sections through Liquid templates and associated CSS files. By creating a dedicated Liquid section and connecting it with a CSS file, developers and merchants can add reusable, configurable shoppable video sections directly inside the theme editor. Once implemented, the section becomes available in the theme customizer, allowing merchants to add videos, configure layouts, and associate products without modifying code again. This documentation provides a complete technical and implementation guide for adding a shoppable video section to any Shopify theme. It explains how Liquid sections work, how CSS integrates with Shopify sections, and how merchants can configure videos and product visibility through theme settings.

Shopify themes use sections to create modular, reusable content blocks. Each section is stored inside the Sections folder of the theme.

A section typically contains:

• HTML structure

• Liquid logic

• Theme settings schema

• Dynamic content rendering

Sections allow merchants to add and configure content visually through the theme editor.

CSS styling is stored separately inside the Assets folder.

This separation ensures:

• Clean architecture

• Easy maintenance

• Reusable design components

A shoppable video section improves both user experience and business outcomes.

It helps merchants:

• Showcase products visually

• Highlight priority products

• Improve conversion rates

• Reduce navigation friction

• Create modern, interactive storefronts

Customers benefit from:

• Better product understanding

• Visual product demonstration

• Faster purchasing decisions

Shoppable videos are especially effective for:

• Fashion stores

• Electronics stores

• Beauty products

• Lifestyle brands

Before implementation, it is important to understand Shopify's theme file structure.

Two files must be created:

Section file location:

Sections/shoppable-video-section.liquid

CSS file location:

Assets/shoppable-video.css

The Liquid file defines structure and settings.

The CSS file defines styling and layout behavior.

Both files must exist for proper functionality.

Follow these steps carefully:

1. Go to Shopify Admin.

2. Navigate to Online Store.

3. Click Themes.

4. Click Edit Code.

5. Open the Sections folder.

6. Click Add a new section.

7. Enter the name: shoppable-video-section

8. Click Create.

Shopify will create:

shoppable-video-section.liquid

This file will define the entire video section.

After creating the file, open:

shoppable-video-section.liquid

Paste the Liquid file content you received.

Add your code here

This Liquid file defines:

• Video container

• Product linking structure

• Section settings schema

• Block configuration logic

The section schema enables Shopify to recognize configurable settings and video blocks inside the theme customizer.

The Liquid file controls frontend rendering.

It determines:

• How videos appear

• How products are linked

• How layout behaves

CSS controls visual appearance.

Follow these steps:

1. Inside Edit Code, open Assets folder.

2. Click Add a new asset.

3. Select Create a blank file.

4. Choose CSS.

5. Enter file name: shoppable-video

6. Click Create.

Shopify will create:

shoppable-video.css

Open:

Assets/shoppable-video.css

Paste the CSS content you received.

Add your code here

This CSS file controls:

• Video layout

• Section spacing

• Product overlay positioning

• Hover effects

• Responsive behavior

Without CSS, the section may appear unstructured or misaligned.

The Liquid file must reference the CSS file.

Inside shoppable-video-section.liquid, ensure it includes CSS reference logic.

Add your code here

This instruction tells Shopify to load the CSS file when the section appears.

This ensures styling is applied correctly.

After creating both files, the section becomes available inside the theme editor.

Follow these steps:

1. Go to Online Store.

2. Click Customize.

3. Click Add Section.

4. Search for: Shoppable Video Section

5. Click to add it.

6. Save changes.

The section will now appear on your store.

The section supports video blocks.

Blocks allow multiple videos inside one section.

Follow these steps:

1. Open Theme Customizer.

2. Select the Shoppable Video Section.

3. Click Add Block.

4. Select Video Block.

5. Upload video or provide video URL.

6. Associate products if supported.

7. Save changes.

Each block represents one video item.

Blocks allow unlimited scalability.

Shopify sections have two configuration levels:

Section settings control:

• Section title

• Layout options

• Background styling

Block settings control:

• Individual videos

• Linked products

• Media positioning

The Liquid schema defines these settings.

Add your code here

This schema structure allows Shopify to dynamically generate customization controls.

Important limitations include:

• Video performance depends on file size

• Large videos may slow page load

• Mobile responsiveness must be handled in CSS

• Browser compatibility must be considered

Additionally:

• Shopify does not host extremely large videos efficiently

• External video hosting may be preferable

Many implementation issues occur due to file misplacement or naming errors.

Typical mistakes include:

• Creating the section in the wrong folder

• Incorrect file naming

• Not linking CSS file

• Forgetting to paste Liquid schema

• Not saving theme changes

• Uploading unsupported video formats

Another frequent mistake is modifying Liquid structure incorrectly, which can break dynamic rendering.