How to Add Video to Shopify – Multiple Methods Explained

Introduction

Videos are one of the most effective ways to engage visitors, build trust, and increase conversions in your Shopify store. From product demos and tutorials to brand storytelling and customer testimonials, videos can instantly capture attention and boost sales.

Shopify makes it simple to add videos to product pages, store pages, or even custom sections with code. In this step-by-step guide, we’ll show you different methods to add video to Shopify using the admin dashboard, rich text editor, or advanced custom coding.

Why Add Video to Your Shopify Store?

Adding videos to your Shopify store offers several key benefits. Videos capture attention more quickly than images, keeping visitors engaged. They can also improve conversions, as shoppers are more likely to make a purchase after watching a product demo. From an SEO perspective, pages with rich media often rank higher on Google. Plus, videos help share your brand’s story in a more powerful and memorable way.

Methods for Adding Video to Shopify

There are different methods for adding a Video to a Shopify store. Some of these are given below.

1. Add Video using Shopify Admin (Product Pages)
2. Add Video to Shopify Pages Using the Rich Text Editor
3. Add Video using Custom Coding

Method 1: Add Video using Shopify Admin (Product pages)

You can add videos directly to your product pages from the Shopify admin. This allows you to showcase product demos, tutorials, or customer reviews alongside product details, providing shoppers with a more comprehensive buying experience. Follow these steps to add Videos using Shopify Admin.

Step 1: Navigate to Shopify Admin > Products.

Step 2: Select the product you want to update.

Step 3: Click on the Plus icon and select a video.

Step 4: You can directly add a YouTube or Vimeo video from the link

Step 5: Save the changes.

Related read: Is Shopify Good for SEO? Pros, Cons, and Key Features

Method 2: Add Video to Shopify Pages Using the Rich Text Editor

You can embed videos on Shopify pages using the built-in Rich Text Editor. Simply paste the video’s embed code (for example, from YouTube or Vimeo) to display it directly on your page without needing custom code. Follow these steps to add a Video using the Rich Text Editor.

Step 1: Navigate to Shopify Admin > Online Store > Pages.

Step 2: Select the page you want to update.

Step 3: Click on the Insert Video icon in the Content Editor.

Step 4: Add the embed code and click Insert Video.

Step 5: Save the changes.

Method 3: Add Video using Custom coding 

If your theme doesn’t include a built-in video section, you can add one with custom coding. By editing your theme’s files and inserting the appropriate HTML or Liquid code, you can create a custom section that displays videos anywhere in your Shopify store.

Step 1: Navigate to Online Store > Themes > Edit code.

Step 2: Create a new section in the Sections directory, name it something like video-section. lLiquid

Step 3: Paste this code into your video-section.liquid file.

  
    <section id="video-section-{{ section.id }}" class="custom-video-section">
      {% if section.settings.heading != blank %}
        <h2 class="video-heading">{{ section.settings.heading }}</h2>
      {% endif %}

      <div class="video-wrapper">
        {%- if section.settings.video != blank -%}
          {%- assign external_video = section.settings.video -%}
          
          {%- if external_video.type == 'youtube' -%}
            <iframe
              title="{{ section.settings.heading | escape }}"
              src="https://www.youtube.com/embed/{{ external_video.id }}?playsinline=1{% if section.settings.autoplay_video %}&autoplay=1&controls=0&mute=1&loop=1{% endif %}"
              allow="autoplay; fullscreen"
              allowfullscreen
              loading="lazy">
            </iframe>
          {%- endif -%}

          {%- if external_video.type == 'vimeo' -%}
            <iframe
              title="{{ section.settings.heading | escape }}"
              src="https://player.vimeo.com/video/{{ external_video.id }}?{% if section.settings.autoplay_video %}autoplay=1&autopause=1&background=1&loop=1&muted=1{% endif %}"
              allow="autoplay; fullscreen"
              allowfullscreen
              loading="lazy">
            </iframe>
          {%- endif -%}

        {%- else -%}
          <p style="text-align:center;">Select a video in the section settings.</p>
        {%- endif -%}
      </div>
    </section>

    <style>
      #video-section-{{ section.id }} {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
        background-color: {{ section.settings.bg_color }};
      }
      .custom-video-section .video-heading {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 20px;
      }
      .custom-video-section .video-wrapper {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 56.25%; /* 16:9 ratio */
      }
      .custom-video-section iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        border: none;
        border-radius: 8px;
      }
    </style>

    {% schema %}
        {
        "name": "Video Section",
        "settings": [
            { "type": "text", "id": "heading", "label": "Heading", "default": "Watch our video" },
            {
            "type": "video",
            "id": "video",
            "label": "YouTube or Vimeo Video"
            },
            { "type": "checkbox", "id": "autoplay_video", "label": "Autoplay (muted)", "default": false },
            { "type": "color", "id": "bg_color", "label": "Background color", "default": "#ffffff" },
            { "type": "range", "id": "padding_top", "label": "Padding top", "default": 60, "min": 0, "max": 200, "step": 10, "unit": "px" },
            { "type": "range", "id": "padding_bottom", "label": "Padding bottom", "default": 60, "min": 0, "max": 200, "step": 10, "unit": "px" }
        ],
        "presets": [{ "name": "Video Section", "category": "Media" }]
        }
    {% endschema %}
  

Step 4: Navigate to Online Store > Themes > Customize.

Step 5: Click on the Add section button and include the video section.

Step 6: Select your Video and save the changes.