Shopify’s default Slideshow section only supports images. To add a video slideshow, create a custom section: go to Edit code, add a new section file, paste the video slideshow code, and save. You can then add video slides from the theme editor using Shopify-hosted videos or YouTube links — no app required.

Video sells. Shoppers who watch a product video are dramatically more likely to buy than shoppers who only see photos, and stores that lead with motion on the homepage instantly feel more premium. That’s exactly why big DTC brands open their homepages with looping video banners instead of static images.

So you open your Shopify theme editor, add the Slideshow section, and go looking for the “add video” button.

It’s not there.

Here’s the catch that surprises almost every store owner: Shopify’s built-in Slideshow section only supports images. There’s a separate “Video” section, but it plays just one video — no slides, no rotation, no mixing multiple clips. If you want a true video slideshow, Shopify’s default tools can’t do it, and the usual advice is “install an app” — another $10+ per month for something a single section file can handle.

In this guide, I’ll show you how to add a full video slideshow in Shopify without any app. We’ll build a custom section you can drop into any Online Store 2.0 theme (Dawn, Sense, Craft, Refresh, and most paid themes), manage entirely from the theme editor, and reuse on any page. You’ll get the complete copy-paste code, upload instructions, autoplay and speed settings, plus the troubleshooting fixes I use on real client stores as a Shopify developer.

Whether you’re a beginner following along click by click or an experienced merchant who just wants the code, this tutorial has you covered. Let’s build it.

Table of Contents

• Why Use a Video Slideshow on Your Shopify Store?
• What Shopify Gives You by Default (and Where It Falls Short)
• Video Slideshow App vs. Custom Section: Honest Comparison
• Before You Start: Prepare Your Videos
  • Recommended Video Specs
  • Step 0: Duplicate Your Theme
• Step 1: Upload Your Videos to Shopify
• Step 2: Create the Custom Video Slideshow Section
• Step 3: Add the Section in the Theme Editor
• Step 4: Configure Slides, Autoplay, and Speed
• Step 5: Test on Desktop and Mobile
• Customization Ideas for Advanced Users
• Best Practices for Video Slideshows That Convert
• Common Mistakes to Avoid
• Troubleshooting: Videos Not Playing or Slideshow Not Showing
• FAQ
• Conclusion

Why Use a Video Slideshow on Your Shopify Store?

A video slideshow combines two of the highest-impact elements in eCommerce design: motion and rotation. Instead of one static hero image, you get multiple looping video banners that cycle automatically.

Here’s what that does for a store in practice:

• Instantly communicates quality. Motion signals a serious brand. A store that opens with smooth product footage feels more trustworthy than one with a stock photo banner.
• Shows products in action. Fabric moving, gadgets being used, food being poured — video answers questions photos can’t.
• Promotes multiple campaigns at once. Slide 1: new collection. Slide 2: bestseller. Slide 3: seasonal sale. Each with its own heading, text, and button.
• Increases time on page. Visitors pause to watch motion, and longer engagement correlates with better conversion and stronger behavioral signals.

The one caution: video is heavy. Done wrong, it tanks your loading speed. Done right — with compressed files, lazy loading, and muted autoplay — the impact on speed is minimal. This tutorial does it right.

What Shopify Gives You by Default (and Where It Falls Short)

Before writing custom code, it’s worth knowing exactly what’s already in your theme, because sometimes a default section is enough:

So if you only need one background video, the built-in Video section may be all you need. But if you want multiple videos rotating as slides — each with its own text and call-to-action button — you need a custom section. That’s what we’re building.

Video Slideshow App vs. Custom Section: Honest Comparison

My honest take: apps make sense if you need very complex features — shoppable video, video quizzes, TikTok-style feeds. For a homepage video slideshow, custom code wins on every measure that matters long-term: cost, speed, and ownership.

Before You Start: Prepare Your Videos

Recommended Video Specs

Video slideshows live or die on file size. Follow these specs and your slideshow will look great and load fast:

• Format: MP4 (H.264 codec) — universally supported
• Length: 8–20 seconds per slide (they loop, so short is fine)
• Resolution: 1920 × 1080 for desktop banners; 1080 × 1920 if you plan a mobile-specific version
• File size: under 10 MB per video, ideally 3–6 MB
• Audio: remove the audio track entirely — autoplay requires muted video anyway, and stripping audio cuts file size

To compress, use the free tool HandBrake (desktop) or an online compressor. A 100 MB phone clip can usually shrink to 5 MB with no visible quality loss at banner size.

Step 0: Duplicate Your Theme

We’re adding code, so protect your live store first:

1. Go to Online Store → Themes
2. Click ⋯ (three dots) next to your live theme → Duplicate
3. Rename the copy “Dev – Video Slideshow”

Do everything below in this duplicate, then publish when it works.

Step 1: Upload Your Videos to Shopify

Shopify hosts videos natively on its CDN — no YouTube account needed and no third-party embed delays:

1. In Shopify admin, go to Content → Files
2. Click Upload files and select your MP4 videos
3. Wait for processing to finish (a minute or two per video)

That’s it. The videos are now available to any video picker in your theme editor. Note that Shopify accepts video uploads up to 1 GB, but stay far below that — remember, small files are the whole game.

Step 2: Create the Custom Video Slideshow Section

Now the main event. We’ll add one new file to your theme.

1. Go to Online Store → Themes → ⋯ → Edit code on your duplicate theme
2. In the left sidebar, scroll to the Sections folder and click Add a new section
3. Choose liquid, name it video-slideshow, and click Done
4. Delete the placeholder content and paste the complete code below
5. Click Save

liquid

{{ 'video-slideshow.css' | asset_url | stylesheet_tag }}

<div class="video-slideshow" id="VideoSlideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.speed | times: 1000 }}">
  <div class="video-slideshow__track">
    {%- for block in section.blocks -%}
      <div class="video-slideshow__slide{% if forloop.first %} is-active{% endif %}" {{ block.shopify_attributes }}>

        {%- if block.settings.video != blank -%}
          {{ block.settings.video | video_tag: autoplay: true, loop: true, muted: true, controls: false, playsinline: true, class: 'video-slideshow__media' }}
        {%- elsif block.settings.video_url != blank -%}
          {%- if block.settings.video_url.type == 'youtube' -%}
            <iframe class="video-slideshow__media" src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}?autoplay=1&mute=1&loop=1&playlist={{ block.settings.video_url.id }}&controls=0&playsinline=1" title="{{ block.settings.heading | escape }}" allow="autoplay; encrypted-media" loading="lazy"></iframe>
          {%- elsif block.settings.video_url.type == 'vimeo' -%}
            <iframe class="video-slideshow__media" src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}?autoplay=1&muted=1&loop=1&background=1" title="{{ block.settings.heading | escape }}" allow="autoplay; encrypted-media" loading="lazy"></iframe>
          {%- endif -%}
        {%- endif -%}

        <div class="video-slideshow__overlay">
          {%- if block.settings.heading != blank -%}
            <h2 class="video-slideshow__heading">{{ block.settings.heading | escape }}</h2>
          {%- endif -%}
          {%- if block.settings.text != blank -%}
            <p class="video-slideshow__text">{{ block.settings.text | escape }}</p>
          {%- endif -%}
          {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
            <a href="{{ block.settings.button_link }}" class="video-slideshow__button button">{{ block.settings.button_label | escape }}</a>
          {%- endif -%}
        </div>

      </div>
    {%- endfor -%}
  </div>

  {%- if section.blocks.size > 1 -%}
    <button class="video-slideshow__arrow video-slideshow__arrow--prev" aria-label="Previous slide">&#10094;</button>
    <button class="video-slideshow__arrow video-slideshow__arrow--next" aria-label="Next slide">&#10095;</button>
    <div class="video-slideshow__dots">
      {%- for block in section.blocks -%}
        <button class="video-slideshow__dot{% if forloop.first %} is-active{% endif %}" data-index="{{ forloop.index0 }}" aria-label="Go to slide {{ forloop.index }}"></button>
      {%- endfor -%}
    </div>
  {%- endif -%}
</div>

<script>
  (function () {
    const root = document.getElementById('VideoSlideshow-{{ section.id }}');
    if (!root) return;

    const slides = root.querySelectorAll('.video-slideshow__slide');
    const dots = root.querySelectorAll('.video-slideshow__dot');
    const autoplay = root.dataset.autoplay === 'true';
    const speed = parseInt(root.dataset.speed, 10) || 7000;
    let current = 0;
    let timer = null;

    function goTo(index) {
      slides[current].classList.remove('is-active');
      if (dots.length) dots[current].classList.remove('is-active');
      current = (index + slides.length) % slides.length;
      slides[current].classList.add('is-active');
      if (dots.length) dots[current].classList.add('is-active');
    }

    function startTimer() {
      if (!autoplay || slides.length < 2) return;
      clearInterval(timer);
      timer = setInterval(function () { goTo(current + 1); }, speed);
    }

    const prev = root.querySelector('.video-slideshow__arrow--prev');
    const next = root.querySelector('.video-slideshow__arrow--next');
    if (prev) prev.addEventListener('click', function () { goTo(current - 1); startTimer(); });
    if (next) next.addEventListener('click', function () { goTo(current + 1); startTimer(); });
    dots.forEach(function (dot) {
      dot.addEventListener('click', function () { goTo(parseInt(dot.dataset.index, 10)); startTimer(); });
    });

    startTimer();
  })();
</script>

{% schema %}
{
  "name": "Video Slideshow",
  "settings": [
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Auto-rotate slides",
      "default": true
    },
    {
      "type": "range",
      "id": "speed",
      "label": "Change slides every (seconds)",
      "min": 3,
      "max": 15,
      "step": 1,
      "default": 7
    }
  ],
  "blocks": [
    {
      "type": "video_slide",
      "name": "Video Slide",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "Shopify-hosted video (recommended)"
        },
        {
          "type": "video_url",
          "id": "video_url",
          "label": "Or YouTube / Vimeo URL",
          "accept": ["youtube", "vimeo"],
          "info": "Used only if no Shopify-hosted video is selected"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Subtext"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video Slideshow",
      "blocks": [
        { "type": "video_slide" },
        { "type": "video_slide" }
      ]
    }
  ]
}
{% endschema %}

Now add the stylesheet. In the Assets folder, click Add a new asset → Create a blank file, choose .css, name it video-slideshow, and paste:

css

.video-slideshow {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  overflow: hidden;
}

.video-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.video-slideshow__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.video-slideshow__media,
.video-slideshow__slide video,
.video-slideshow__slide iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.video-slideshow__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  z-index: 2;
}

.video-slideshow__heading {
  font-size: clamp(2rem, 5vw, 4rem);
  margin: 0 0 1rem;
  color: #fff;
}

.video-slideshow__text {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  max-width: 60rem;
  margin: 0 0 2rem;
}

.video-slideshow__button {
  pointer-events: auto;
}

.video-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.85);
  border: 0;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-slideshow__arrow:hover {
  background: #fff;
}

.video-slideshow__arrow--prev { left: 1.5rem; }
.video-slideshow__arrow--next { right: 1.5rem; }

.video-slideshow__dots {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8rem;
  z-index: 3;
}

.video-slideshow__dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.video-slideshow__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

@media (max-width: 749px) {
  .video-slideshow {
    height: 60vh;
    min-height: 340px;
  }
  .video-slideshow__arrow {
    width: 3.6rem;
    height: 3.6rem;
  }
}

Click Save. The code work is done.

Step 3: Add the Section in the Theme Editor

1. Go back to Online Store → Themes and click Customize on your duplicate
2. On the page where you want the slideshow (usually the homepage), click Add section
3. Find Video Slideshow in the list and click it

The section appears with two empty video slides ready to configure.

Step 4: Configure Slides, Autoplay, and Speed

Click each Video Slide block in the left sidebar and set it up:

1. Shopify-hosted video — click Select and choose one of the videos you uploaded in Step 1. This is the recommended option: fastest loading, no YouTube branding, full autoplay control
2. Or YouTube/Vimeo URL — paste a link only if you’re not using a hosted video (external embeds load slower and are best avoided for hero banners)
3. Add a Heading, Subtext, and a Button pointing to your collection, product, or sale page
4. Click Add block → Video Slide to add more slides — the slideshow supports as many as you want, though 2–4 is the sweet spot

Then, in the section’s own settings:

• Auto-rotate slides — on by default; turn off if you want visitors to control navigation manually
• Change slides every (seconds) — default is 7. Match this roughly to your video length so each clip gets seen before rotating

Click Save.

Step 5: Test on Desktop and Mobile

Run this quick checklist before publishing:

• Videos autoplay muted and loop on desktop
• Arrows and dots switch slides with a smooth fade
• Headings and buttons are readable over the video (increase the overlay darkness in the CSS rgba(0,0,0,0.25) value if not)
• On mobile, videos still play inline (the playsinline attribute in our code handles this — without it, iPhones try to open videos fullscreen)
• Run PageSpeed Insights: with compressed videos and Shopify’s CDN, your score should barely move

When everything passes, publish the theme. Your video slideshow is live.

Customization Ideas for Advanced Users

The section is intentionally clean so you can extend it. A few upgrades I often build for clients:

Mobile-specific videos. Add a second video picker (video_mobile) to the block schema and swap sources with a media query or Liquid + JS check, so mobile users get a vertical 1080×1920 clip instead of a cropped landscape one.

Text position options. Add a select setting (left / center / right) to the block schema and toggle a CSS class on the overlay to move the content around per slide.

Poster images. Shopify’s video_tag includes the video’s poster automatically, but you can add an explicit image_picker fallback for slow connections.

Swipe support. Add basic touchstart/touchend listeners to the track for mobile swiping — about ten extra lines of JavaScript.

Reduced-motion respect. Wrap the autoplay logic in a window.matchMedia('(prefers-reduced-motion: reduce)') check to pause auto-rotation for users who disable animations — a nice accessibility touch.

Best Practices for Video Slideshows That Convert

From real client stores, these are the details that separate slideshows that sell from slideshows that just look busy:

Keep it to 2–4 slides. Most visitors never see slide 5. Put your single most important message on slide 1, because it gets the majority of views.

One message per slide. A heading, one line of text, one button. Video already demands attention; don’t fight it with paragraphs.

Design slide 1 like it’s the only one. Assume nobody rotates. If your sale matters most, it goes first.

Always use muted, short, looping clips. Browsers block autoplay with sound anyway, and shoppers hate unexpected audio. Silence is a feature.

Match rotation speed to video length. A 12-second clip on a 5-second rotation never finishes. Set the slideshow speed close to your clip length.

Compress ruthlessly. The best-converting slideshow is one that actually loads. 3–6 MB per clip is the target.

Common Mistakes to Avoid

1. Uploading raw phone footage. A 200 MB clip will destroy your load time. Compress first, always.
2. Using YouTube embeds for hero banners. They load an entire external player per slide. Shopify-hosted MP4s are dramatically faster and have no branding.
3. Editing the live theme. One misplaced bracket in the schema JSON breaks the section. Work on a duplicate.
4. Forgetting playsinline. Without it, iOS opens videos fullscreen and breaks the banner experience. (Our code includes it.)
5. Text with no contrast layer. White text on a bright video is unreadable. Keep the dark overlay, or add text shadows.
6. Auto-rotating too fast. Anything under 5 seconds feels frantic and cuts videos off mid-motion.

Troubleshooting: Videos Not Playing or Slideshow Not Showing

The section doesn’t appear in “Add section.” The schema JSON has a syntax error — usually a missing comma or bracket from an incomplete paste. Re-paste the full code exactly, and make sure the file is in the Sections folder, not Snippets.

Video shows a black box or doesn’t autoplay. Browsers only autoplay muted videos. Our video_tag sets muted: true, but if you modified the code, confirm muted and playsinline are still present. Also check the video finished processing under Content → Files.

Videos autoplay on desktop but not on iPhone. This is almost always a missing playsinline attribute, or iOS Low Power Mode, which blocks all autoplay — that one you can’t override, which is why the poster frame matters.

The slideshow shows but slides don’t rotate. Check that “Auto-rotate slides” is enabled in the section settings, and that you have at least two Video Slide blocks. With one slide, rotation is disabled by design.

Text or buttons aren’t clickable. If you customized the CSS, make sure .video-slideshow__overlay still has a higher z-index than the media and that pointer-events wasn’t removed from the button.

Everything is fine in preview but broken after publishing. Clear your browser cache or test in incognito — you’re usually looking at a cached version of the old page.

FAQ

1. Can I add a video slideshow in Shopify without an app? Yes. Shopify’s default Slideshow section doesn’t support video, but a custom section — like the copy-paste code in this guide — gives you a full video slideshow with no app and no monthly fees.

2. Does Shopify’s built-in Slideshow section support videos? No. The native Slideshow section is images-only. Shopify’s separate “Video” section plays a single video but can’t rotate multiple slides, which is why a custom section is needed.

3. Will a video slideshow slow down my store? Only if your files are too big. Compress each clip to 3–6 MB, use Shopify-hosted MP4s instead of YouTube embeds, and keep clips short — then the speed impact is minimal.

4. What video format and size should I use? MP4 (H.264), 1920 × 1080, 8–20 seconds long, under 10 MB per file. Strip the audio track since autoplay is muted anyway.

5. Should I host videos on Shopify or embed from YouTube? Host on Shopify. Native videos load faster, have no external player overhead, show no branding, and give you full control over autoplay and looping. Use YouTube only as a convenience fallback.

6. Why won’t my video autoplay? All modern browsers block autoplay unless the video is muted. The code in this tutorial sets muted autoplay correctly; if you changed it, restore the muted and playsinline attributes.

7. Will this work on the Dawn theme? Yes — and on Sense, Craft, Refresh, Studio, and virtually every Online Store 2.0 theme, because the section is self-contained with its own CSS and JavaScript.

8. Can each slide have its own heading and button? Yes. Every Video Slide block includes fields for a heading, subtext, button label, and button link, all editable from the theme editor without touching code.

9. How many video slides can I add? Technically unlimited, but 2–4 is best. Each video adds load weight, and visitors rarely watch beyond the first few slides.

10. Can I use this section on pages other than the homepage? Yes. It’s a standard section, so you can add it to any page, collection, or template through the theme editor’s “Add section” menu.

11. Do videos autoplay on mobile? Yes, as long as they’re muted and have the playsinline attribute (included in this code). The one exception is iOS Low Power Mode, which blocks autoplay at the system level.

12. Can I mix image slides and video slides? The section as written is video-focused, but you can extend it by adding an image_picker setting to the block and rendering an image when no video is selected — about five extra lines of Liquid.

13. Will my customizations survive a theme update? Theme updates replace theme files, so keep copies of video-slideshow.liquid and video-slideshow.css. Re-adding them to an updated theme takes two minutes.

14. Is video good or bad for SEO? Video itself doesn’t hurt SEO — slow pages do. A compressed, well-implemented video slideshow can actually help by increasing engagement and time on page, both positive behavioral signals.

Conclusion

Shopify’s default tools give you image slideshows and single videos — but never both together. With one custom section file and a stylesheet, you’ve now unlocked what those defaults can’t do: a fast, fully editable video slideshow with rotating slides, headings, buttons, autoplay control, and zero monthly app fees.

To recap: duplicate your theme, compress and upload your videos to Shopify Files, create the video-slideshow section and its CSS file with the code above, add the section in the theme editor, configure your slides and rotation speed, and test on both desktop and mobile before publishing.

The result is a homepage that moves — literally — and a slideshow you own outright, built into your theme the way Shopify intended.

If you’d like to keep improving your store, the resources below are a natural next step.

Keep Learning and Get Help

Prefer to follow along on video? Watch the full step-by-step walkthrough of this exact tutorial here: How To Add Videos Slideshow in Shopify — and subscribe to my channel for more Shopify customization tutorials: youtube.com/@foysalshopifyexpert

Want it built for you? If you’d rather have an expert set up your video slideshow — or handle any Shopify development, customization, or SEO project — you can hire me directly on Upwork: My Upwork Profile

Ready-made Shopify sections. If you enjoyed the copy-paste approach, I sell polished, plug-and-play Shopify sections — hero sliders, mega menus, popups, and more — with one-time payment and no subscriptions: ecommercethesis.gumroad.com

Learn Shopify professionally. Want to turn skills like this into income? My structured course covers Shopify development and freelancing from the ground up: Freelancing with Shopify — or browse all courses to expand your digital skills.

Stuck on a step? If something isn’t working on your store, you can reach me directly on WhatsApp: wa.me/8801991505652

Happy building — and enjoy your new app-free video slideshow.