{"id":20665,"date":"2025-08-26T10:00:00","date_gmt":"2025-08-26T04:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=20665"},"modified":"2025-10-04T11:59:06","modified_gmt":"2025-10-04T06:29:06","slug":"add-video-slider-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-video-slider-shopify\/","title":{"rendered":"How to Add a Video Slider in Shopify? (3 Steps)"},"content":{"rendered":"\n

Your brand has a story, and a single video can’t tell it all. A video slider is a smart path for your Shopify store, replacing traditional video content with a dynamic gallery of moving visuals. <\/p>\n\n\n\n

Instead of a lone video, you can lead customers through a series of product demos, behind-the-scenes looks, and customer spotlights, all in one seamless browsing experience. <\/p>\n\n\n\n

In this blog, I am going to explain how to add a video slider in Shopify without using any apps.<\/p>\n\n\n\n

How to Add a Video Slider in Shopify? (Technically)<\/h2>\n\n\n\n

Here is the simple 3-step process to add a video slider in Shopify for free. <\/p>\n\n\n\n

    \n
  1. Create Shopify Video Slider Section<\/li>\n\n\n\n
  2. Add the Video Slider Code<\/li>\n\n\n\n
  3. Show Video Slider in the Frontend <\/li>\n<\/ol>\n\n\n\n

    Step 1: Create Shopify Video Slider Section<\/h3>\n\n\n\n

    Firstly, you need to create a new section for this in your theme.  <\/p>\n\n\n\n

    For that, navigate to Online store > Themes > (…) three dots > Edit Code<\/strong><\/p>\n\n\n

    \n
    \"Create<\/figure>\n<\/div>\n\n\n

    Then, in the left sidebar, click Sections, <\/strong>add a file, and name it as videoslider.liquid<\/strong><\/p>\n\n\n

    \n
    \"name<\/figure>\n<\/div>\n\n\n

    And you have created a section, now time to add the code<\/p>\n\n\n\n

    Step 2: Add the Video Slider Code<\/h3>\n\n\n\n

    Paste the following Shopify video slider code in the created video_slider section and Save <\/strong>it.<\/p>\n\n\n\n

    <div class=\"video-slider-wrapper\">\n  {% comment %} Section title, heading size, and alignment {% endcomment %}\n  {% if section.settings.section_title != blank %}\n    <{{ section.settings.heading_size }} class=\"video-slider-title\" style=\"text-align: {{ section.settings.heading_alignment }};\">\n      {{ section.settings.section_title }}\n    <\/{{ section.settings.heading_size }}>\n  {% endif %}\n\n  <div class=\"swiper video-slider\">\n    <div class=\"swiper-wrapper\">\n      {% for block in section.blocks %}\n        <div class=\"swiper-slide\">\n          <video\n            src=\"{{ block.settings.video_url }}\"\n            controls\n            {% if block.settings.autoplay %} autoplay muted loop {% endif %}\n            style=\"width:100%; height:auto;\"\n          ><\/video>\n        <\/div>\n      {% endfor %}\n    <\/div>\n\n    <div class=\"swiper-button-next\"><\/div>\n    <div class=\"swiper-button-prev\"><\/div>\n    <div class=\"swiper-pagination\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .video-slider-wrapper {\n    max-width: 1000px;\n    margin: auto;\n    \/* Apply spacing settings *\/\n    padding-top: {{ section.settings.padding_top }}px;\n    padding-bottom: {{ section.settings.padding_bottom }}px;\n    margin-top: {{ section.settings.margin_top }}px;\n    margin-bottom: {{ section.settings.margin_bottom }}px;\n  }\n  .video-slider video {\n    border-radius: 8px;\n    border: 1px solid #ddd; \/* Added thin border *\/\n  }\n  .video-slider-title {\n    margin-bottom: 20px; \/* Adjust as needed for spacing below the title *\/\n  }\n\n  \/* Force Swiper to display horizontally if external CSS is overriding *\/\n  .swiper-container, .swiper {\n    overflow: hidden; \/* Ensures content stays within bounds *\/\n  }\n  .swiper-wrapper {\n    display: flex !important; \/* Force flex display to ensure horizontal layout *\/\n    box-sizing: content-box; \/* Important for preventing issues with padding\/border *\/\n    width: fit-content !important; \/* Allows wrapper to take natural width of slides *\/\n    gap: {{ section.settings.space_between }}px;\n\n\n  }\n  .swiper-slide {\n    flex-shrink: 0 !important; \/* Ensure slides don't shrink *\/\n    \/* For 3 slides, each should ideally take 1\/3rd of the wrapper width, minus spaceBetween *\/\n    width: calc((100% - (2 * {{ section.settings.space_between  }}px)) \/ 3) !important; \/* DYNAMICALLY CALCULATED WIDTH *\/\n    position: relative; \/* Needed for absolute positioning of video controls if any *\/\n    transition-property: transform; \/* Smooth transitions *\/\n  }\n\n  \/* Basic styling for navigation buttons and pagination dots *\/\n  .swiper-button-next,\n  .swiper-button-prev {\n    color: #000; \/* Adjust color as needed *\/\n  }\n  .swiper-pagination-bullet {\n    background: #ccc; \/* Inactive dot color *\/\n  }\n  .swiper-pagination-bullet-active {\n    background: #000; \/* Active dot color *\/\n  }\n<\/style>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ Check if Swiper is loaded before initializing\n    if (typeof Swiper !== 'undefined') {\n      new Swiper(\".video-slider\", {\n        loop: true,\n        navigation: {\n          nextEl: \".swiper-button-next\",\n          prevEl: \".swiper-button-prev\",\n        },\n        pagination: {\n          el: \".swiper-pagination\",\n          clickable: true,\n        },\n        slidesPerView: 3, \/\/ Changed to 3 to show three videos\n        spaceBetween: {{ section.settings.space_between }}, \/\/ DYNAMIC SPACING VALUE\n      });\n    } else {\n      console.error(\"Swiper.js library not found. Please ensure it's loaded in theme.liquid.\");\n    }\n  });\n<\/script>\n\n{% schema %}\n{\n  \"name\": \"Video Slider\",\n  \"settings\": [\n    {\n      \"type\": \"text\",\n      \"id\": \"section_title\",\n      \"label\": \"Videos title\",\n      \"default\": \"Video slider\"\n    },\n    {\n      \"type\": \"radio\",\n      \"id\": \"heading_size\",\n      \"label\": \"Heading size\",\n      \"options\": [\n        { \"value\": \"h1\", \"label\": \"H1\" },\n        { \"value\": \"h2\", \"label\": \"H2\" },\n        { \"value\": \"h3\", \"label\": \"H3\" }\n      ],\n      \"default\": \"h2\"\n    },\n    {\n      \"type\": \"radio\",\n      \"id\": \"heading_alignment\",\n      \"label\": \"Heading alignment\",\n      \"options\": [\n        { \"value\": \"left\", \"label\": \"Left\" },\n        { \"value\": \"center\", \"label\": \"Center\" },\n        { \"value\": \"right\", \"label\": \"Right\" }\n      ],\n      \"default\": \"center\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"space_between\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Space between videos\",\n      \"default\": 20\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"padding_top\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Padding top\",\n      \"default\": 36\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"padding_bottom\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Padding bottom\",\n      \"default\": 36\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"margin_top\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Margin top\",\n      \"default\": 0\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"margin_bottom\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Margin bottom\",\n      \"default\": 0\n    }\n  ],\n  \"blocks\": [\n    {\n      \"type\": \"video\",\n      \"name\": \"Video\",\n      \"settings\": [\n        {\n          \"type\": \"url\",\n          \"id\": \"video_url\",\n          \"label\": \"Video URL (MP4)\"\n        },\n        {\n          \"type\": \"checkbox\",\n          \"id\": \"autoplay\",\n          \"label\": \"Autoplay\",\n          \"default\": false\n        }\n      ]\n    }\n  ],\n  \"max_blocks\": 10,\n  \"presets\": [\n    {\n      \"name\": \"Video Slider\",\n      \"category\": \"Custom\"\n    }\n  ]\n}\n{% endschema %}\n<\/pre>\n\n\n\n
    Step 3: Show Video Slider in the Frontend <\/h3>\n\n\n\n
    Now that the section is ready, add it to a page.<\/p>\n\n\n\n
    Navigate back to the Shopify admin ><\/strong> Online Store > Themes<\/strong> > Customize<\/strong> <\/p>\n\n\n
    \n
    \"Show<\/figure>\n<\/div>\n\n\n
    On the page you want to add the slider (e.g., the homepage), click + <\/strong>to add the section<\/p>\n\n\n\n
    Find the newly created Video Slider<\/strong> section and open it. The section will appear on your page in the left sidebar <\/p>\n\n\n
    \n
    \"Find<\/figure>\n<\/div>\n\n\n
    Click Video Slider<\/strong> to expand its settings on the right-hand side; from there, you can make changes as you want. <\/p>\n\n\n
    \n
    \"Click<\/figure>\n<\/div>\n\n\n
    Then you need to add videos to the slider. For that, click Video<\/strong> and paste the video URL (MP4) for each video you want to display.<\/p>\n\n\n
    \n
    \"paste<\/figure>\n<\/div>\n\n\n
    You can get a video link from Shopify admin > Content > Files <\/strong>and upload your MP4 and copy its URL directly from there. <\/p>\n\n\n\n
    You can also enable the Autoplay button for each video if you wish. Click Save<\/strong> to apply the changes<\/p>\n\n\n\n
    That’s it! Your video slider is now ready. You can go back to the code at any time to adjust the styling or add more advanced features.<\/p>\n\n\n\n
    This is how it looks<\/p>\n\n\n
    \n
    \"Output\"<\/figure>\n<\/div>\n\n\n
    How to Add a Video List Using An App? (Quick & Easy)<\/h2>\n\n\n\n
    A perfect video slider list should be clean and well-structured, showing videos in an easy-to-browse grid. It should work well on all devices and load quickly, with clear thumbnails that invite shoppers to watch.<\/p>\n\n\n\n
    Here\u2019s how it should look.<\/p>\n\n\n
    \n
    \"Video<\/figure>\n<\/div>\n\n\n
    Opting for our MIT Pro Sections <\/strong>app, you can get numerous options to modify, such as clickable buttons, a separate heading for each video, infinite video playing, and more. Using our app will be a win-win for you.<\/p>\n\n\n\n
    Let\u2019s see the steps to use it.<\/p>\n\n\n\n
    Step 1: Install and Choose Your Suitable Section<\/h3>\n\n\n\n
    Install the MIT Pro Sections<\/a> from the Shopify App Store, then from the app dashboard, click Browse Section <\/strong>and search for the Video list slider <\/strong>section. Here, we will move forward with video list slider 3.<\/strong><\/p>\n\n\n
    \n
    \"Search<\/figure>\n<\/div>\n\n\n
    Step 2: Click the \u201cTry for Free\u201d Button<\/h3>\n\n\n\n
    Select the section and click Try for Free <\/strong>to claim this section without any cost. <\/p>\n\n\n
    \n
    \"Click<\/figure>\n<\/div>\n\n\n
    During the free trial, you will be redirected to the MIT demo store. After purchasing the section, you can add it to your store’s theme.<\/p>\n\n\n\n
    From here, click the Add section <\/strong>and select Meetanshi Video list 3.<\/strong><\/p>\n\n\n
    \n
    \"Add<\/figure>\n<\/div>\n\n\n
    Step 3: Edit and Save the Section<\/h3>\n\n\n\n
    From the theme editor, you can make changes as per your requirements. Here you get 40+ customization options to edit the video grid.<\/p>\n\n\n\n
    Once you are done, save <\/strong>the changes. <\/p>\n\n\n
    \n
    \"Meetanshi<\/figure>\n<\/div>\n\n\n
    Bonus customization: <\/strong>Add scrolling logos<\/a> to your homepage to build trust among your shoppers. This helps you add animated sections in your store without affecting your page speed.<\/p>\n\n\n\n
    Create Stunning Video List with MIT Sections Pro<\/h2>\n\n\n\n
    A video list section boosts engagement and enhances browsing experience by showcasing your brand effectively. <\/p>\n\n\n\n
    Follow these tips to add a video grid to Shopify that converts visitors into customers.<\/p>\n\n\n\n