Shopify Custom Liquid: Video Card Slider with Auto-Playing Videos

Example 

Introduction

Videos are one of the most powerful tools in Shopify store design — they increase engagement, improve conversion rates, and help customers visualize your product in action.

But Shopify’s default theme sections often feel limiting. That’s why a Custom Video Card Slider is the perfect way to:

• Showcase multiple product features in one clean section

• Deliver scrollable video content on mobile and a 3-column grid on desktop

• Keep your store looking modern and high-converting

This tutorial will guide you through building a responsive video slider using Shopify’s Custom Liquid block and CSS.

 

When to Use This

• Product demonstration (e.g., “How it works” videos)

• Customer use cases (highlight lifestyle content, testimonials, UGC)

• Feature highlights (3–5 key selling points in video format)

• Seasonal campaigns (limited-time offers with video storytelling)

Code (Custom Liquid + CSS)

<style>
  /* Container with horizontal scroll on mobile */
  #custom-video-slider {
    display: flex;
    gap: 18px; /* Card spacing */
    margin-left: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px 0px; /* Left-right padding */
  }
 
  /* Hide scrollbar */
  #custom-video-slider::-webkit-scrollbar {
    display: none;
  }
 
  /* Single video card */
  #custom-video-slider > .video-card {
    flex: 0 0 92%;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #ffffff; /* White background */
    box-shadow: 0 0px 0px rgb(0 0 0 / 0.1); 
    padding: 10px;
  }
 
  /* Video element */
  #custom-video-slider video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; 
    pointer-events: none;
    background: #000; /* Black background before play */
  }
 
  /* Info area under video */
  .video-info {
    padding: 6px 10px;
    text-align: center;
  }
 
  /* Title text */
  .video-info .title {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 6px 0 8px;
    line-height: 1.2;
  }
 
  /* Description text */
  .video-info .description {
    font-size: 16px;
    color: #444;
    line-height: 1.4;
    margin: 0;
  }
 
  /* Desktop: grid layout */
  @media screen and (min-width: 769px) {
    #custom-video-slider {
      gap: 32px;
      overflow-x: visible;
      flex-wrap: wrap;
      padding: 0 36px 20px; 
    }
    #custom-video-slider > .video-card {
      flex: 1 1 calc(33.333% - 32px);
      scroll-snap-align: unset;
      pointer-events: auto;
    }
    #custom-video-slider video {
      pointer-events: auto;
    }
    ul#custom-video-slider {
      display: flex;
    }
  }
</style>
 
<ul id="custom-video-slider" role="list" aria-label="Video slider">
  <li class="video-card" role="listitem">
    <video muted loop playsinline preload="auto" poster="cover1.png" src="https://yourvideo1.mp4"></video>
    <div class="video-info">
      <div class="title">Title 1</div>
      <div class="description">Write a description about this</div>
    </div>
  </li>
  <li class="video-card" role="listitem">
    <video muted loop playsinline preload="auto" poster="cover2.png" src="https://yourvideo2.mp4"></video>
    <div class="video-info">
      <div class="title">Title 2</div>
      <div class="description">Write a description about this</div>
    </div>
  </li>
  <li class="video-card" role="listitem">
    <video muted loop playsinline preload="auto" poster="cover3.png" src="https://yourvideo3.mp4"></video>
    <div class="video-info">
      <div class="title">Title 3</div>
      <div class="description">Write a description about this</div>
    </div>
  </li>
</ul>
 
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const videos = document.querySelectorAll('#custom-video-slider video');
    videos.forEach(video => {
      const playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise.catch(() => {
          video.muted = true;
          video.play();
        });
      }
    });
    videos.forEach(video => {
      video.addEventListener('click', e => e.preventDefault());
    });
  });
</script>

Preview

How to Use

• Go to Shopify Admin → Online Store → Themes → Customize

• Add a new Custom Liquid block in your chosen section (Home, Product, Landing Page, etc.)

• Copy and paste the HTML + CSS + JS code above

• Replace the poster and src with your own product videos

• Save and preview

Customizable parameters

Parameter	Description	Default	Example Change
title	Card/slide title text shown under each video.	e.g. Dynamic	Best dynamic effect
description	Short copy under title (one sentence).	e.g. Trusted by 100+	Your best partner
video src	Video file URL — replace with your MP4/WEBM link. Can be an array of multiple objects.	https://.../video1.mp4	https://cdn.mycdn.com/videos/product-demo.mp4
poster	Poster (thumbnail) image URL shown before video loads.	https://.../cover1.png	https://cdn.mycdn.com/images/thumb1.jpg
autoplay	Whether to attempt autoplay on load (browsers require muted).	true	false (disable autoplay for large files)
loop	Should the video loop automatically.	true	false (play once)
cardsPerRow (desktop)	How many cards to show per row on desktop (affects .video-card flex-basis).	3	2 (bigger cards, fewer per row)

Pro Tip:

• Keep videos short (< 15s) for fast loading

• Use .mov or .mp4 optimized for web

• Test on mobile first since most Shopify visitors browse on phones