How to Use Shopify’s Video Setting Type for Dynamic Video Content in Custom Sections

When I’m building a Shopify theme, one of my favorite features to work with is the video setting type. It’s a super handy way to let store owners add videos directly from Shopify Files, no need to mess with external platforms like YouTube or Vimeo. In this post, I’ll walk you through how it works, break down the code, and show you why it’s a game-changer for dynamic video content.

Why Shopify’s Video Setting Type Works Perfectly

This section is specifically designed to work with Shopify-hosted videos using the video metafield type. Let’s explore why the provided code structure functions seamlessly.

1. Shopify’s Video Setting Type

The video type is a relatively new addition to Shopify’s schema settings (introduced in recent updates), making it even easier for store owners to manage their video content.

The video setting type in Shopify’s schema allows store owners to manage videos uploaded to Shopify Files.

Schema Definition for the Video Type

Here’s the schema definition for the new video type:

{
  "type": "video",
  "id": "shopify_video",
  "label": "Shopify Video",
  "info": "Select or upload a video from the Shopify Files section."
}

This new type generates a structured JSON object containing the video’s metadata, including:

• Source URLs
• File formats (e.g., MP4, WebM)
• Resolutions

Example JSON Output

When you request {{ section.settings.shopify_video | json }}, you get a structured JSON object like this:

{
  "alt": null,
  "id": 41591754260753,
  "position": null,
  "preview_image": {
    "aspect_ratio": 0.568,
    "height": 634,
    "width": 360,
    "src": "\/\/f70u5t8x5fx1rjvo-72713994516.shopifypreview.com\/cdn\/shop\/files\/preview_images\/d168fc35fa81432484032b127a278e1b.thumbnail.0000000000.jpg?v=1736787599"
  },
  "aspect_ratio": 0.567,
  "duration": 38000,
  "media_type": "video",
  "sources": [
    {
      "format": "mp4",
      "height": 480,
      "mime_type": "video\/mp4",
      "url": "\/\/f70u5t8x5fx1rjvo-72713994516.shopifypreview.com\/cdn\/shop\/videos\/c\/vp\/d168fc35fa81432484032b127a278e1b\/d168fc35fa81432484032b127a278e1b.SD-480p-0.9Mbps-40927236.mp4?v=0",
      "width": 272
    },
    {
      "format": "m3u8",
      "height": 480,
      "mime_type": "application\/x-mpegURL",
      "url": "\/\/f70u5t8x5fx1rjvo-72713994516.shopifypreview.com\/cdn\/shop\/videos\/c\/vp\/d168fc35fa81432484032b127a278e1b\/d168fc35fa81432484032b127a278e1b.m3u8?v=0",
      "width": 272
    }
  ]
}

Why This Matters

• It ensures clean, reliable video management without the need for external services.
• It simplifies video selection and uploading directly from the Theme Editor.

2. Dynamic Video URL Extraction

{% assign video_url = section.settings.shopify_video.sources[1].url %}

Here’s what happens:

• section.settings.shopify_video.sources contains an array of video source objects.
• sources[1].url dynamically retrieves the second source, typically a high-quality MP4.

Why This Works

• Shopify guarantees that the sources array includes valid video URLs.
• This dynamic approach ensures compatibility with Shopify-hosted files and adapts to any changes in the video’s structure.

3. Fallback for Missing Videos

{% if section.settings.shopify_video != blank %}
  <!-- Video logic -->
{% else %}
  <p>No video selected. Please upload or select a video in the Theme Editor.</p>
{% endif %}

This ensures a graceful fallback when no video is selected, enhancing user experience by providing clear instructions in the Theme Editor.

4. Browser Compatibility with the <video> Element

<video controls>
  <source src="{{ video_url }}" type="video/mp4">
  Your browser does not support the video tag.
</video>

The <video> element is fully supported by modern browsers, ensuring seamless playback of Shopify-hosted videos. By dynamically injecting the video_url, the section becomes adaptable and robust.

5. Metafields for Dynamic Content

This setup aligns perfectly with Shopify’s metafield-driven approach to dynamic content. Store owners can:

• Upload videos via the Files section
• Manage video content directly in the Theme Editor

No external dependencies or hardcoded URLs are required.

Best Practices for Using Shopify’s Video Setting

1. User-Friendly Management:
   • Use the video setting to enable non-technical users to easily upload and manage videos.
2. Fallback Handling:
   • Always include a fallback message for missing videos.
3. Performance Optimization:
   • Compress video files before uploading to improve load times.
4. Cross-Browser Compatibility:
   • Test videos on multiple browsers and devices to ensure consistent playback.