How to Create a Dynamic YouTube Video Slider in Shopify

 A visually engaging website can make all the difference in capturing customer attention and increasing conversions. One powerful way to achieve this is by adding a dynamic YouTube video slider to your Shopify store. A video slider can showcase your brand’s story, highlight product features, or share customer testimonials, all in an interactive format. In this blog, we’ll walk you through the step-by-step process to create a YouTube video slider in Shopify.

Why Add a YouTube Video Slider to Your Shopify Store?

Before diving into the technical steps, here are a few reasons to add a video slider to your site:

1. Enhanced User Engagement: Videos are more engaging than static images or text. They grab attention and convey more information in a shorter time.
2. Improved SEO: Embedding YouTube videos can boost your website’s SEO as videos keep visitors on your page longer.
3. Mobile-Friendly Content: Video sliders are responsive and look great on all devices, ensuring a seamless shopping experience.
4. Showcase Brand Identity: Videos can tell your story, demonstrate product use, and build trust with your audience.

Add a Video Slider Section to Your Theme

To manually add a video slider, you’ll need to edit your theme code.

1. Log in to Shopify Admin:

• Go to Online Store > Themes.
• Click on Actions > Edit Code for your active theme.

2. Create a New Section:

• In the left sidebar, under the Sections directory, click Add a new section.
• Name the section youtube-video-slider

Full Code

 
            {%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">

<style>
    .youtube-video-wrapper-{{section.id}} {
        width: 100%;
        background: {{ section.settings.bg_color}};
    }
    .youtube-video-container-{{section.id}}  {
        margin: 0 auto;
    }
    .youtube-slider-{{section.id}}  .slick-slide {
      margin: 10px;
    }
    .youtube-slider-{{section.id}}  .slick-list {
      margin: 0px;
    }
    .youtube-video-wrapper-{{section.id}} .slick-initialized {
        visibility: visible !important;
    }
    .youtube-slider-{{section.id}}  .slick-dots li button:before {
        font-size: 15px;
    }
    .youtube-slider-{{section.id}}  ul.slick-dots {
        position: relative;
        top: -15px;
    }
     .youtube-slider-video-frame-{{section.id}}  {
        overflow: hidden;
        border-radius: 20px;
        aspect-ratio: 330 / 590;
        border: none;
    }
    .youtube-slider-video-frame-{{section.id}}  video {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 330 / 590;
        border: none;
    }
    .youtube-slider-video-content-{{section.id}}  {
        padding: 20px 0;
        text-align: center;
    }
    .youtube-slider-video-content-{{section.id}}  p {
        font-size: 18px;
    }
    .youtube-slider-{{section.id}}  .slick-arrow:before {
        display: none !important;
    }
    .youtube-slider-{{section.id}}  .slick-arrow {
        width: 40px;
        height: 40px;
        border: 1px solid #000;
        border-radius: 50px;
    }
    .youtube-slider-{{section.id}}  .slick-arrow svg {
        width: 10px;
    }
    .youtube-slider-{{section.id}}  .slick-arrow {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        border-radius: 50px;
        z-index: 1;
    }
    .youtube-slider-{{section.id}}  button.slick-prev.pull-left.slick-arrow {
        left: 10px;
        background: {{ section.settings.arrow_bg_color}};
        fill: {{ section.settings.arrow_color }}
    }
    .youtube-slider-{{section.id}}  button.slick-next.pull-right.slick-arrow {
        right: 10px;
        background: {{ section.settings.arrow_bg_color}};
        fill: {{ section.settings.arrow_color }}
    }
    .youtube-video-top-content-{{section.id}}   {
        text-align: center;
        margin-bottom: 40px;
    }
    .youtube-video-top-content-{{section.id}}   h2 b {
        display: block;
    }
    .youtube-video-wrapper-{{section.id}} .youtube-video-top-content-{{section.id}}   h2 {
        width: 60%;
        margin: 0px auto 10px;
        font-size: 30px;
        line-height: 40px;
        color: {{ section.settings.heading_color}};
    }
    .youtube-video-wrapper-{{section.id}} iframe.youtube {
        width: 100%;
        height: 100%;
         border: none;
    }
    .youtube-video-wrapper-{{section.id}}  .youtube-video-top-content-{{section.id}}   p {
        max-width: 60%;
        margin: 0 auto 20px;
        font-size: 20px;
        line-height: 24px;
        color: {{ section.settings.desc_color}};
    }
    .youtube-video-top-content-{{section.id}}   h2 strong {
        display: block;
    }
    .youtube-slider-video-content-{{section.id}}  h2 {
        font-size: 20px;
        line-height: 28px;
    }
    .youtube-slider-video-content-{{section.id}}  h4 {
        margin: 0;
        font-size: 20px;
    }
    .youtube-slider-video-button-{{section.id}}  {
        text-align: center;
    }
    .youtube-slider-video-button-{{section.id}}  a{
      background: {{ section.settings.btn_bg_color}};
      color: {{ section.settings.btn_text_color}};
    }
    @media (min-width:1200px){
    .youtube-video-container-{{section.id}}  {
        max-width: 1180px;
        padding: 0 20px;
    }
    }
    @media (max-width:991px){
    .youtube-slider-{{section.id}}  .slick-slide {
      margin: 0 15px;
    }
    .youtube-slider-{{section.id}}  .slick-list {
      margin: 0 -15px;
    }
    .youtube-video-top-content-{{section.id}}   h2 {
        font-size: 26px;
    }
    }
    @media only screen and (max-width: 589px) {
      .youtube-video-wrapper-{{section.id}} .youtube-video-top-content-{{section.id}}   h2 {
        width: 100%;
        margin: 0px auto 10px;
        font-size: 30px;
        line-height: 40px;
    }

    .youtube-video-wrapper-{{section.id}}  .youtube-video-top-content-{{section.id}}   p {
        max-width: 100%;
        margin: 0 auto 5px;
        font-size: 20px;
        line-height: 24px;
      }
    }

  {% if section.settings.round_dot == false %}
    .youtube-slider-{{section.id}}  .slick-dots li button:before{
      display: none;
    }
   .youtube-video-wrapper-{{section.id}} .slick-dots li.slick-active{
      opacity:.75;
    }
   .youtube-video-wrapper-{{section.id}} .slick-dots li{
       opacity: 0.1;
    }
   .youtube-video-wrapper-{{section.id}} .slick-dots li button{
      background: black;
      width: 24px;
      height: 4px;
      padding: 2px;
    }
    {% endif %}
</style>

<div class="youtube-video-wrapper-{{section.id}} section-{{ section.id }}-padding">
  <div class="youtube-video-container-{{section.id}}  page-width">
    <div class="youtube-video-top-content-{{section.id}}  ">
      {% if section.settings.main_heading != blank %}
        <h2>{{ section.settings.main_heading }}</h2>
      {% endif %}

      {% if section.settings.main_description != blank %}
        <p>
          {{ section.settings.main_description }}
        </p>
      {% endif %}
    </div>
    <div class="youtube-slider-{{section.id}} ">
      {%- for block in section.blocks -%}
        {%- liquid
          assign video_id = block.settings.video_url.id | default: block.settings.video_url.id
        -%}
        <div class="youtube-slider-video-{{section.id}} ">
          <div class="youtube-slider-video-frame-{{section.id}} ">
            <iframe
              src="https://www.youtube.com/embed/{{ video_id }}"
              class="youtube"
              allow="autoplay; encrypted-media"
              title=""
            ></iframe>
          </div>
          <div class="youtube-slider-video-content-{{section.id}} ">
            {% if block.settings.review_content != blank %}
              <h2>{{ block.settings.review_content }}</h2>
            {% endif %}
            {% if block.settings.review_name != blank %}
              <h4>{{ block.settings.review_name }}</h4>
            {% endif %}
            {% if block.settings.review_location != blank %}
              <p>{{ block.settings.review_location }}</p>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
    <div class="youtube-slider-video-button-{{section.id}} ">
      {%- if section.settings.button_label != blank -%}
        <a
          {% if section.settings.button_link == blank %}
            role="link" aria-disabled="true"
          {% else %}
            href="{{ section.settings.button_link }}"
          {% endif %}
          class="button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
        >
          {{- section.settings.button_label | escape -}}
        </a>
      {% endif %}
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
  $('.youtube-slider-{{section.id}}').slick({
    dots: true,
    infinite: true,
    speed: 100,
    slidesToShow: 4,
    slidesToScroll: 1,
      cssEase: 'linear',
      autoplay: false,
      autoplaySpeed: 1500,
      arrow: true,
      prevArrow:"<button type='button' class='slick-prev pull-left'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/></svg></button>",
      nextArrow:"<button type='button' class='slick-next pull-right'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/></svg></button>",
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          infinite: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          centerMode: true,
          dots: true,
          arrows: true
        }
      }
    ]
  });
</script>
{% schema %}
{
  "name": "Youtube video slider",
  "settings": [
    {
      "type":"color",
      "id":"bg_color",
      "label":"Background color"
    },
    {
      "type": "inline_richtext",
      "id": "main_heading",
      "default": "What is Lorem Ipsum?Why do we use it?",
      "label": "Heading"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Color",
      "default": "#000000"
    },
    {
      "type": "inline_richtext",
      "id": "main_description",
      "default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "label": "Content"
    },
    {
      "type": "color",
      "id": "desc_color",
      "label": "Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button Label",
      "label": "Button Label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "color",
      "id": "btn_bg_color",
      "label": "Button background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "btn_text_color",
      "label": "Button text color",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "round_dot",
      "default": false,
      "label": "Round dot"
    },
    {
      "type": "color",
      "id": "arrow_bg_color",
      "label": "Arrows background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Arrows color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 52
    }
  ],
  "blocks": [
    {
      "name": "Block",
      "type": "block",
      "settings": [
          {
          "type": "video_url",
          "id": "video_url",
          "accept": ["youtube", "vimeo"],
          "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
          "label": "t:sections.video.settings.video_url.label",
          "info": "For shorts: https://youtu.be/hrufydtI"
        },
        {
          "type": "textarea",
          "id": "review_content",
          "label": "Content",
          "default": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
        },
        {
          "type": "inline_richtext",
          "id": "review_name",
          "default": "Name.",
          "label": "Inline rich text"
        },
        {
          "type": "inline_richtext",
          "id": "review_location",
          "default": "Location,USA",
          "label": "Location"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Youtube video slider"
    }
  ]
}
{% endschema %}

Conclusion
Adding a dynamic YouTube video slider to your Shopify store is an effective way to enhance user engagement and boost conversions. Whether you use a Shopify app or code it manually, the slider can elevate your store’s visual appeal and storytelling capabilities. Follow the steps outlined above, and start captivating your audience with engaging video content today!