How to Create a video Slider in Shopify Free

Video sliders are an excellent way to showcase your products or collections visually and interactively on your Shopify store. In this guide, we’ll walk you through the steps to create a custom video slider in Shopify using a code snippet.

What is a Video Slider in Shopify?

A video slider in Shopify allows you to display multiple videos in a scrolling carousel format. It’s perfect for engaging customers, showing product demonstrations, or highlighting various collections in your store.

Steps to Create a Video Slider in Shopify

Follow these steps to integrate a video slider in Shopify into your store:

Step 1: Access the Shopify Admin Panel

Log in to your Shopify Admin account.
Navigate to Online Store > Themes.
Click Actions > Edit Code on your active theme.

Step 2: Add a New Section

In the theme editor, find the Sections directory.
Click Add a new section.
Name the section (e.g., video-slider).

Step 3: Paste the Code

Copy the following code snippet and paste it into the new section file you created:

<section class="section-{{ section.id }}">
  <style>
 .video_container-{{ section.id }} {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 30px;
  margin-bottom: 30px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.one_video-{{ section.id }} {
  padding-left: 1rem;
  padding-right: 1rem;
  flex: 0 0 auto;
  max-width: 200px;
  box-sizing: border-box;
  scroll-snap-align: center;
}

.one_video-{{ section.id }} video {
  width: 100%;
  max-width: 200px;
  border-radius: 10px;
}
    @media (max-width: 768px) {
  .video_container-{{ section.id }} {
    justify-content: flex-start; /* Align videos to the left on mobile */
  }
}
.section_heading-{{ section.id }}{
  text-align:center;
  }
  </style>
  <div class="">
    <div class="section_heading-{{ section.id }}">
{% if section.settings.heading != blank %}
  <h1>{{ section.settings.heading }}</h1>
{% endif %}
      
    </div>
<div class="video_container-{{ section.id }}">
    {% for block in section.blocks %}
     {% if block.settings.collection_video != blank %}
       <div class="one_video-{{ section.id }}">
         {% if block.settings.collection_url != blank %} <a href="{{ block.settings.collection_url }}">{% endif %}
      {{ block.settings.collection_video | video_tag: autoplay: true, loop: true, muted: true  }}
      {% if block.settings.collection_url != blank %} </a>{% endif %}
         {% if block.settings.collection_text != blank %}
           <span class="collection__name">{{ block.settings.collection_text}}</span>
         {% endif %}
          
       </div>
    {% endif %}
    {% endfor %}
  </div>
    </div>
  </section>

{% schema %}
{
  "name": "DevDesire Video Slider",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default":"Section Heading",
      "info": "Enter Section Heading "
    }
  ],
  "presets": [
    {
      "name": "DevDesire Video Slider"
    }
  ],
  "blocks": [
    {
      "type": "custom_block",
      "name": "Collection",
      "settings": [
        {
          "type": "video",
          "id": "collection_video",
          "label": "Collection Video",
          "info": "Collection Video will override all collection images"
        },
        {
          "type":"url",
          "id":"collection_url",
          "label":"Source URL"
        },
        {
          "type":"text",
          "id":"collection_text",
          "label":"Collection Text"
        }
      ]
    }
  ]
}
{% endschema %}

Step 4: Customize the Video Slider

Go back to your Shopify Admin Panel.
Open the Theme Customizer by clicking Customize under your theme.
Add the newly created video slider in Shopify section to your desired page.
Upload videos, add URLs, and customize text for each video block.

Step 5: Save and Preview

Save your changes.
Preview your store to see the video slider in action!

Why Use a Video Slider in Shopify?

Boost Engagement: Videos attract more attention compared to static images.
Showcase Products: Demonstrate products in use or highlight features effectively.
Enhance Mobile Experience: This slider is mobile-responsive and ensures a smooth user experience on smaller screens.

Latest Blogs

Post Views: 10