Ora

How do I add a video carousel to Shopify?

Published in Shopify Development 9 mins read

Adding a video carousel to your Shopify store enhances visual appeal and product engagement by showcasing multiple videos in a dynamic, interactive format. You can achieve this through two primary methods: using a dedicated Shopify app or implementing custom code directly into your theme.

How to Add a Video Carousel to Shopify

Implementing a video carousel on Shopify involves either leveraging pre-built applications from the Shopify App Store for a quick, no-code solution, or custom-developing a section within your theme for more control and tailored design.

Method 1: Using a Shopify App (Recommended for Beginners)

The easiest way to add a video carousel without needing to touch any code is by installing a Shopify app. These apps offer pre-built functionalities, often with drag-and-drop interfaces, making the process straightforward.

  1. Search the Shopify App Store:
    • Navigate to the Shopify App Store.
    • Search for terms like "video gallery," "video slider," "video carousel," or "media gallery."
  2. Choose an App:
    • Look for apps with high ratings, positive reviews, and features that match your needs (e.g., YouTube/Vimeo integration, autoplay, responsive design, analytics).
    • Popular options often include apps like "Video Gallery & Player," "Product Video & Image Slider," or similar tools designed for rich media display.
  3. Install and Configure:
    • Click "Add app" on your chosen app's page.
    • Follow the installation prompts to connect it to your store.
    • Access the app's dashboard from your Shopify admin panel.
    • Upload or link your videos, arrange them, and customize the carousel's appearance (e.g., size, navigation arrows, autoplay settings) using the app's interface.
  4. Add to Your Theme:
    • Most apps provide an option to add their widget or section directly through the Shopify Theme Editor.
    • Go to Online Store > Themes > Customize.
    • Look for an "Add section" option in your theme editor, and you should find the app's specific section there. Drag and drop it into place.
  5. Preview and Publish:
    • Always preview your store to ensure the carousel displays correctly and functions as expected across different devices.
    • Once satisfied, save and publish your theme changes.

Pros of Using an App:

  • No Coding Required: Ideal for non-developers.
  • Quick Setup: Get a carousel running in minutes.
  • Feature-Rich: Apps often include analytics, SEO features, and advanced customization options.
  • Support: Developers typically offer customer support.

Cons of Using an App:

  • Cost: Many robust apps come with a monthly subscription fee.
  • Potential Bloat: Can sometimes add unnecessary code to your theme, potentially affecting page load speed if not well-optimized.
  • Limited Customization: While extensive, customization is still within the app's predefined boundaries.

Method 2: Custom Coding (Advanced Users)

For complete control over design, functionality, and performance, you can add a video carousel by directly editing your Shopify theme code. This method involves creating a new section with schema settings that allow you to manage videos and carousel options from the theme editor.

This process involves several steps:

Step 1: Access Your Shopify Admin Panel

Log in to your Shopify store admin. From the left sidebar, navigate to Online Store > Themes.

Step 2: Edit Your Theme Code

Under your current theme, click on Actions > Edit code. This will open the theme code editor. Always duplicate your theme before making any code changes to create a backup in case something goes wrong.

Step 3: Create a New Section

In the sections directory, click Add a new section. Name this new Liquid file something descriptive, like video-carousel.liquid. This file will contain the HTML, CSS (or links to CSS), Liquid logic, and schema for your video carousel.

Example sections/video-carousel.liquid Structure:

<div class="video-carousel-section">
  <div class="video-carousel swiper-container">
    <div class="swiper-wrapper">
      {% for block in section.blocks %}
        <div class="swiper-slide">
          {% if block.settings.video_url != blank %}
            <div class="video-wrapper">
              {% if block.settings.video_type == 'youtube' %}
                <iframe
                  src="https://www.youtube.com/embed/{{ block.settings.video_url | split: 'v=' | last | split: '&' | first }}?autoplay={{ block.settings.autoplay }}&loop={{ block.settings.loop }}&controls=1"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen
                ></iframe>
              {% elsif block.settings.video_type == 'vimeo' %}
                 <iframe
                  src="https://player.vimeo.com/video/{{ block.settings.video_url | split: '/' | last }}?autoplay={{ block.settings.autoplay }}&loop={{ block.settings.loop }}"
                  frameborder="0"
                  allow="autoplay; fullscreen; picture-in-picture"
                  allowfullscreen
                ></iframe>
              {% elsif block.settings.video_type == 'html5' and block.settings.html5_video_file != blank %}
                <video
                  src="{{ block.settings.html5_video_file | file_url }}"
                  {% if block.settings.autoplay %}autoplay{% endif %}
                  {% if block.settings.loop %}loop{% endif %}
                  {% if block.settings.muted %}muted{% endif %}
                  playsinline
                  controls
                ></video>
              {% endif %}
            </div>
          {% else %}
            <div class="placeholder-video">
              <p>Add a video from YouTube, Vimeo, or upload a file.</p>
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
    {% if section.blocks.size > 1 %}
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    {% endif %}
  </div>
</div>

{% style %}
  .video-carousel-section {
    padding: 20px 0;
  }
  .video-carousel {
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    position: relative;
  }
  .video-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
  }
  .video-wrapper iframe,
  .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .placeholder-video {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    color: #666;
  }
  /* Basic Swiper Navigation/Pagination styling - you might use your theme's default or add more */
  .swiper-button-next, .swiper-button-prev {
      color: #333; /* Example color */
  }
{% endstyle %}

{% javascript %}
  // Include Swiper.js library (or another carousel library)
  // You'd typically load this from a CDN in theme.liquid or assets/theme.js
  // For example, using a CDN link in <head> or theme.liquid:
  // <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  // <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  if (typeof Swiper !== 'undefined') {
    const swiper = new Swiper('.video-carousel', {
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      effect: 'slide', // or 'fade', 'cube', 'coverflow', 'flip'
      speed: 800,
      slidesPerView: 1,
      spaceBetween: 0,
    });
  }
{% endjavascript %}

Note: For the above code, you would need to include the Swiper.js library (CSS and JS) in your theme.liquid file or your assets/theme.js for it to function correctly. You can typically add these from a CDN.

Step 4: Customize the Section with Schema Settings

Below the Liquid code in sections/video-carousel.liquid, add the {% schema %} block. This block defines the settings that will appear in your theme editor, allowing merchants to add and configure videos without touching code.

{% schema %}
  {
    "name": "Video Carousel",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Watch Our Videos"
      }
    ],
    "blocks": [
      {
        "type": "video",
        "name": "Video Slide",
        "settings": [
          {
            "type": "select",
            "id": "video_type",
            "label": "Video Source",
            "options": [
              { "value": "youtube", "label": "YouTube" },
              { "value": "vimeo", "label": "Vimeo" },
              { "value": "html5", "label": "HTML5 Upload" }
            ],
            "default": "youtube"
          },
          {
            "type": "url",
            "id": "video_url",
            "label": "Video URL (YouTube/Vimeo)",
            "info": "Enter the full URL for YouTube or Vimeo. e.g., https://www.youtube.com/watch?v=dQw4w9WgXcQ"
          },
          {
            "type": "video",
            "id": "html5_video_file",
            "label": "Upload Video File (for HTML5)",
            "info": "Upload an .mp4, .webm, or .ogg file."
          },
          {
            "type": "checkbox",
            "id": "autoplay",
            "label": "Autoplay Video",
            "default": false
          },
          {
            "type": "checkbox",
            "id": "loop",
            "label": "Loop Video",
            "default": false
          },
          {
            "type": "checkbox",
            "id": "muted",
            "label": "Mute Video (recommended for autoplay)",
            "default": true
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Video Carousel",
        "category": "Custom Sections",
        "blocks": [
          {
            "type": "video"
          },
          {
            "type": "video"
          }
        ]
      }
    ]
  }
{% endschema %}

This schema defines a section named "Video Carousel" with repeatable "Video Slide" blocks. Each block allows for setting a video URL (YouTube/Vimeo) or uploading an HTML5 video, along with options for autoplay, looping, and muting.

Step 5: Add the Section to Your Theme

Once your video-carousel.liquid section is created, you need to add it to a template file where you want it to appear.

  • For Home Page (or other static pages): Navigate to Templates > index.json (or similar JSON template files for other pages). You can add your section name to the sections array:

    {
  "sections": {
    "header": {
      "type": "header",
      "settings": { ... }
    },
    "video-carousel": {
      "type": "video-carousel",
      "settings": {
        "heading": "Our Latest Videos"
      },
      "blocks": [
        {
          "type": "video",
          "settings": {
            "video_type": "youtube",
            "video_url": "https://www.youtube.com/watch?v=yourvideo1",
            "autoplay": false,
            "loop": false
          }
        },
        {
          "type": "video",
          "settings": {
            "video_type": "vimeo",
            "video_url": "https://vimeo.com/yourvideo2",
            "autoplay": true,
            "loop": true,
            "muted": true
          }
        }
      ]
    },
    "footer": {
      "type": "footer",
      "settings": { ... }
    }
  },
  "order": ["header", "video-carousel", "footer"]
}

    Alternatively, for older themes or sections not managed by JSON templates, you might directly include it in theme.liquid or a specific Liquid template file (e.g., templates/index.liquid):

    {% section 'video-carousel' %}

  • For Product Pages: If you want a video carousel on product pages, edit Templates > product.json or sections/main-product.liquid (depending on your theme's structure).

Step 6: Configure the Video Slider in the Theme Editor

Now that the section is integrated, go to your Shopify Admin Panel, then Online Store > Themes > Customize.

  • In the theme editor, click "Add section" and find "Video Carousel" under the "Custom sections" category.
  • Click on the new "Video Carousel" section. You will see the heading setting and options to "Add Video Slide" (your blocks).
  • For each video slide, specify the Video Source, provide the Video URL (for YouTube/Vimeo) or upload a video file (for HTML5), and set Autoplay, Loop, and Mute options.

Step 7: Preview and Test

Thoroughly preview your store on different devices (desktop, tablet, mobile) to ensure:

  • The carousel displays correctly and is responsive.
  • Videos play as expected (autoplay, loop, controls).
  • Navigation (arrows, pagination) functions.
  • There are no layout issues or conflicts with existing theme styles.

Pros of Custom Coding:

  • Full Control: Tailor the design and functionality exactly to your brand.
  • Optimized Performance: Avoid third-party app bloat and ensure only necessary code is loaded.
  • No Recurring Fees: A one-time development cost, or free if you do it yourself.
  • Seamless Integration: Blends perfectly with your existing theme's aesthetic.

Cons of Custom Coding:

  • Requires Technical Skills: Knowledge of HTML, CSS, JavaScript, and Liquid is essential.
  • Time-Consuming: Development and testing take more time.
  • Maintenance: You are responsible for maintaining the code and fixing any issues.
  • No Dedicated Support: Unless you hire a developer, you're on your own for troubleshooting.

Video Optimization Best Practices

Regardless of the method you choose, optimizing your videos is crucial for performance:

  • Compress Videos: Use tools like Handbrake or online compressors to reduce file size without significant quality loss.
  • Host Externally (if custom coding): For HTML5 videos, consider hosting large files on services like Amazon S3 or Vimeo/YouTube if you don't want to use Shopify's file storage, especially if you foresee high traffic or large video libraries.
  • Use Proper Formats: For HTML5, MP4 is widely supported. For external hosting, YouTube and Vimeo are excellent choices, as they handle streaming and optimization.
  • Responsive Design: Ensure your video embeds and carousel are built with responsive CSS so they look good on any screen size.
  • Lazy Loading: Implement lazy loading for videos so they only load when they enter the user's viewport, improving initial page load times. Many apps and carousel libraries include this feature.
  • Accessibility: Provide captions or transcripts for your videos to improve accessibility.

By carefully planning and implementing your video carousel, you can create a more dynamic and engaging shopping experience for your customers.

← Previous Article
Who is the Cutest Girl in Re:Zero?
Next Article →
How to Subtract Matrices on a Calculator?