How to create a Shopify Video Slider with add to cart button

Posted on Feb 1, 2025
tl;dr: This tutorial explains how to create a Shopify video slider with an add-to-cart button. It covers the steps to set up a video slider on your Shopify store, including choosing a theme or app that supports video sliders, uploading videos, and configuring the add-to-cart button.

Video with add to cart feature


{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.video-slider .testimonial**image {
height: 500px;
max-width: 27rem;
}
.video-slider testimonials-component {
--block-width: 300px !important;
}
.video-slider .testimonial**image {
background: none;
}
.video-slider video {
height: 100% !important;
border-radius: 15px;
}
.video-slider .testimonial**image.media-wrapper {
margin-right: 0;
}
.video-slider .video-slider-list:before,
.video-slider .video-slider-list:after {
width: 0%;
}
.video-slider-item {
margin-left: 10px;
margin-right: 10px;
}
.video-slider-list {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: auto;
-webkit-overflow-scrolling: auto;
scrollbar-color: #cccccc #ffffff;
scrollbar-width: thin;
padding-bottom: 10px;
}
.video-slider-list::-webkit-scrollbar-track {
background: white;
}
.video-slider-list::-webkit-scrollbar-thumb {
background: lightgray;
border: 4px solid transparent;
border-radius: 10px;
background-clip: padding-box;
}
.video-slider:hover .video-slider-list::-webkit-scrollbar-thumb {
background: gray;
}
.video-slider-list::-webkit-scrollbar-thumb:hover {
background: black !important;
}
.video-slider-list {
position: static;
display: flex;
}
@media only screen and (max-width: 800px) {
.video-slider .testimonial**image {
margin-left: 0;
}
.video-slider .video-slider-list {
width: 100%;
}
}
.product-card-wrapper {
margin-top: 1rem;
text-align: center;
}
.product-card {
padding: 1rem;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.product-title {
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.product-price {
margin-bottom: 1rem;
}
.custom-add-button {
width: 100%;
padding: 0.8rem;
border: none;
border-radius: {{ section.settings.button_radius }}px;
background: {{ section.settings.button_background }};
color: {{ section.settings.button_text_color }};
cursor: pointer;
transition: opacity 0.3s ease;
font-size: {{ section.settings.button_font_size }}px;
}
.custom-add-button:hover {
opacity: 0.8;
background: {{ section.settings.button_background_hover }};
}
.custom-add-button:disabled {
background: #cccccc;
cursor: not-allowed;
}
.product-form {
margin: 0;
padding: 0;
}
.product-form .form {
margin: 0;
padding: 0;
}
{%- endstyle -%}

<div class="video-slider section-{{ section.id }}-padding">
  <div class="testimonials page-width">
    {%- if section.settings.title != blank -%}
      <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %} {{ section.settings.heading_alignment }}">
        {{ section.settings.title }}
      </h2>
    {%- endif -%}

    {%- assign block_count = section.blocks.size -%}
    {%- if block_count > 0 -%}
      <svg class="visually-hidden">
        <defs>
          <clipPath id="testimonial-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.11,0.09 C0.014,0.174,-0.003,0.398,0,0.499 C-0.003,0.618,0.015,0.849,0.125,0.919 C0.235,0.989,0.413,0.997,0.504,0.999 C0.604,0.999,0.719,0.999,0.869,0.924 C0.974,0.849,0.994,0.704,0.999,0.499 C1,0.295,0.984,0.155,0.879,0.075 C0.796,0.011,0.593,-0.003,0.504,0 C0.413,-0.005,0.206,0.006,0.11,0.09"></path></clipPath>
        </defs>
      </svg>
      <testimonials-component data-slider="{% if block_count > 1 %}true{% else %}false{% endif %}" data-autorotate="{{ section.settings.autorotate }}" data-autorotate-speed="{{ section.settings.autorotate_speed | times: 1000 }}" style="--block-count: {{ block_count | minus: 1 }};">
        <div class="testimonial__list-wrapper">
          <div class="video-slider-list" id="Testimonials-{{ section.id }}">
            {%- for block in section.blocks -%}
              <div class="video-slider-item{% if section.blocks.first == true or block_count == 1 %} is-selected{% endif %}" {{ block.shopify_attributes }}>
                <div class="testimonial__image media-wrapper media-wrapper--small">
                  {%- if block.settings.video != blank -%}
                    {{ block.settings.video | video_tag:
                      image_size: "3840px",
                      autoplay: true,
                      loop: true,
                      controls: false,
                      muted: true,
                      playsinline: true
                    }}
                  {%- else -%}
                    <div class="media media--square">
                      {{ 'image' | placeholder_svg_tag: 'placeholder' }}
                    </div>
                  {%- endif -%}
                </div>

                <!-- Add product card below video -->
                {%- if block.settings.product != blank -%}
                  <div class="product-card-wrapper">
                    <div class="product-card">
                      <h3 class="product-title">{{ block.settings.product.title }}</h3>
                      <div class="product-price">
                        {%- render 'price', product: block.settings.product -%}
                      </div>
                      {%- form 'product', block.settings.product, id: 'product-form-{{ block.settings.product.id }}', class: 'form' -%}
                        <input type="hidden" name="id" value="{{ block.settings.product.selected_or_first_available_variant.id }}">
                        <button
                          type="submit"
                          name="add"
                          class="custom-add-button"
                          {% if block.settings.product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                        >
                          {%- if block.settings.product.selected_or_first_available_variant.available -%}
                            {{ section.settings.button_text }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </button>
                      {%- endform -%}
                    </div>
                  </div>
                {%- endif -%}
              </div>
            {%- endfor -%}
          </div>
        </div>
      </testimonials-component>
    {%- endif -%}

  </div>
</div>
{% schema %}
{
  "name": "Videos slider",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Video slider",
      "label": "Videos title"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "H1"
        },
        {
          "value": "h1",
          "label": "H2"
        },
        {
          "value": "h0",
          "label": "H3"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "heading_tag",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "h4",
          "label": "H4"
        },
        {
          "value": "h5",
          "label": "H5"
        },
        {
          "value": "h6",
          "label": "H6"
        },
        {
          "value": "div",
          "label": "H7"
        },
        {
          "value": "span",
          "label": "H8"
        },
        {
          "value": "p",
          "label": "Normal"
        }
      ],
      "default": "h2",
      "label": "H2",
      "info": "Headings"
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button Background Color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "button_background_hover",
      "label": "Button Hover Background Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "button_radius",
      "min": 0,
      "max": 40,
      "step": 1,
      "unit": "px",
      "label": "Button Border Radius",
      "default": 4
    },
    {
      "type": "range",
      "id": "button_font_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Button Font Size",
      "default": 16
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Add to Cart"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "video",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "Video link"
        },
        {
          "type": "product",
          "id": "product",
          "label": "Product",
          "info": "Select the product to display below the video"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Videos slider",
      "blocks": [
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer", "custom.overlay"]
  }
}
{% endschema %}

Video with add to cart overlay


{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.video-slider .testimonial**image {
height: 500px;
max-width: 27rem;
}
.video-slider testimonials-component {
--block-width: 300px !important;
}
.video-slider .testimonial**image {
background: none;
}
.video-slider video {
height: 100% !important;
border-radius: 15px;
}
.video-slider .testimonial**image.media-wrapper {
margin-right: 0;
}
.video-slider .video-slider-list:before,
.video-slider .video-slider-list:after {
width: 0%;
}
.video-slider-item {
margin-left: 10px;
margin-right: 10px;
}
.video-slider-list {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: auto;
-webkit-overflow-scrolling: auto;
scrollbar-color: #cccccc #ffffff;
scrollbar-width: thin;
padding-bottom: 10px;
}
.video-slider-list::-webkit-scrollbar-track {
background: white;
}
.video-slider-list::-webkit-scrollbar-thumb {
background: lightgray;
border: 4px solid transparent;
border-radius: 10px;
background-clip: padding-box;
}
.video-slider:hover .video-slider-list::-webkit-scrollbar-thumb {
background: gray;
}
.video-slider-list::-webkit-scrollbar-thumb:hover {
background: black !important;
}
.video-slider-list {
position: static;
display: flex;
}
@media only screen and (max-width: 800px) {
.video-slider .testimonial**image {
margin-left: 0;
}
.video-slider .video-slider-list {
width: 100%;
}
}
.product-card-wrapper {
margin-top: 1rem;
text-align: center;
}
.product-card {
padding: 1rem;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.product-title {
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.product-price {
margin-bottom: 1rem;
}
.button--full-width {
width: 100%;
padding: 0.8rem;
border: none;
border-radius: 4px;
background: #1a1a1a;
color: #ffffff;
cursor: pointer;
transition: background 0.3s ease;
}
.button--full-width:hover {
background: #333333;
}
.button--full-width:disabled {
background: #cccccc;
cursor: not-allowed;
}
.custom-add-button {
width: 100%;
padding: 0.8rem;
border: none;
border-radius: {{ section.settings.button_radius }}px;
background: {{ section.settings.button_background }}{{ section.settings.button_opacity }};
color: {{ section.settings.button_text_color }};
cursor: pointer;
transition: all 0.3s ease;
font-size: {{ section.settings.button_font_size }}px;
backdrop-filter: blur(5px);
}
.custom-add-button:hover {
background: {{ section.settings.button_background_hover }}{{ section.settings.button_hover_opacity }};
}
.custom-add-button:disabled {
background: rgba(204, 204, 204, 0.8);
cursor: not-allowed;
}
/_ Remove product-form default styles _/
.product-form {
margin: 0;
padding: 0;
}
.product-form .form {
margin: 0;
padding: 0;
}
.testimonial\_\_image {
position: relative;
}
.product-overlay {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
z-index: 2;
}
{%- endstyle -%}

  <div class="video-slider section-{{ section.id }}-padding">
    <div class="testimonials page-width">
      {%- if section.settings.title != blank -%}
        <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %} {{ section.settings.heading_alignment }}">
          {{ section.settings.title }}
        </h2>
      {%- endif -%}
  
      {%- assign block_count = section.blocks.size -%}
      {%- if block_count > 0 -%}
        <svg class="visually-hidden">
          <defs>
            <clipPath id="testimonial-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.11,0.09 C0.014,0.174,-0.003,0.398,0,0.499 C-0.003,0.618,0.015,0.849,0.125,0.919 C0.235,0.989,0.413,0.997,0.504,0.999 C0.604,0.999,0.719,0.999,0.869,0.924 C0.974,0.849,0.994,0.704,0.999,0.499 C1,0.295,0.984,0.155,0.879,0.075 C0.796,0.011,0.593,-0.003,0.504,0 C0.413,-0.005,0.206,0.006,0.11,0.09"></path></clipPath>
          </defs>
        </svg>
        <testimonials-component data-slider="{% if block_count > 1 %}true{% else %}false{% endif %}" data-autorotate="{{ section.settings.autorotate }}" data-autorotate-speed="{{ section.settings.autorotate_speed | times: 1000 }}" style="--block-count: {{ block_count | minus: 1 }};">
          <div class="testimonial__list-wrapper">
            <div class="video-slider-list" id="Testimonials-{{ section.id }}">
              {%- for block in section.blocks -%}
                <div class="video-slider-item{% if section.blocks.first == true or block_count == 1 %} is-selected{% endif %}" {{ block.shopify_attributes }}>
                  <div class="testimonial__image media-wrapper media-wrapper--small">
                    {%- if block.settings.video != blank -%}
                      {{ block.settings.video | video_tag:
                        image_size: "3840px",
                        autoplay: true,
                        loop: true,
                        controls: false,
                        muted: true,
                        playsinline: true
                      }}
                    {%- else -%}
                      <div class="media media--square">
                        {{ 'image' | placeholder_svg_tag: 'placeholder' }}
                      </div>
                    {%- endif -%}
                    
                    <!-- Add product card as overlay -->
                    {%- if block.settings.product != blank -%}
                      <div class="product-overlay">
                        {%- form 'product', block.settings.product, id: 'product-form-{{ block.settings.product.id }}', class: 'form' -%}
                          <input type="hidden" name="id" value="{{ block.settings.product.selected_or_first_available_variant.id }}">
                          <button
                            type="submit"
                            name="add"
                            class="custom-add-button"
                            {% if block.settings.product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                          >
                            {%- if block.settings.product.selected_or_first_available_variant.available -%}
                              {{ section.settings.button_text }}
                            {%- else -%}
                              {{ 'products.product.sold_out' | t }}
                            {%- endif -%}
                          </button>
                        {%- endform -%}
                      </div>
                    {%- endif -%}
                  </div>
                </div>
              {%- endfor -%}
            </div>
          </div>
        </testimonials-component>
      {%- endif -%}
    </div>
  </div>
  
  {% schema %}
  {
    "name": "Videos slider",
    "tag": "section",
    "class": "section",
    "settings": [
      {
        "type": "inline_richtext",
        "id": "title",
        "default": "Video slider",
        "label": "Videos title"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h2",
            "label": "H1"
          },
          {
            "value": "h1",
            "label": "H2"
          },
          {
            "value": "h0",
            "label": "H3"
          }
        ],
        "default": "h1",
        "label": "Heading size"
      },
      {
        "type": "select",
        "id": "heading_alignment",
        "label": "Heading alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "center"
      },
      {
        "type": "select",
        "id": "heading_tag",
        "options": [
          {
            "value": "h1",
            "label": "H1"
          },
          {
            "value": "h2",
            "label": "H2"
          },
          {
            "value": "h3",
            "label": "H3"
          },
          {
            "value": "h4",
            "label": "H4"
          },
          {
            "value": "h5",
            "label": "H5"
          },
          {
            "value": "h6",
            "label": "H6"
          },
          {
            "value": "div",
            "label": "H7"
          },
          {
            "value": "span",
            "label": "H8"
          },
          {
            "value": "p",
            "label": "Normal"
          }
        ],
        "default": "h2",
        "label": "H2",
        "info": "Headings"
      },
      {
        "type": "header",
        "content": "Spacing"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Padding top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Padding bottom",
        "default": 36
      },
      {
        "type": "header",
        "content": "Button Settings"
      },
      {
        "type": "color",
        "id": "button_background",
        "label": "Button Background Color",
        "default": "#1a1a1a"
      },
      {
        "type": "select",
        "id": "button_opacity",
        "label": "Button Opacity",
        "options": [
          {
            "value": "99",
            "label": "100%"
          },
          {
            "value": "BF",
            "label": "75%"
          },
          {
            "value": "80",
            "label": "50%"
          },
          {
            "value": "40",
            "label": "25%"
          }
        ],
        "default": "80"
      },
      {
        "type": "select",
        "id": "button_hover_opacity",
        "label": "Button Hover Opacity",
        "options": [
          {
            "value": "99",
            "label": "100%"
          },
          {
            "value": "BF",
            "label": "75%"
          },
          {
            "value": "80",
            "label": "50%"
          },
          {
            "value": "40",
            "label": "25%"
          }
        ],
        "default": "BF"
      },
      {
        "type": "color",
        "id": "button_background_hover",
        "label": "Button Hover Background Color",
        "default": "#333333"
      },
      {
        "type": "color",
        "id": "button_text_color",
        "label": "Button Text Color",
        "default": "#ffffff"
      },
      {
        "type": "range",
        "id": "button_radius",
        "min": 0,
        "max": 40,
        "step": 1,
        "unit": "px",
        "label": "Button Border Radius",
        "default": 4
      },
      {
        "type": "range",
        "id": "button_font_size",
        "min": 12,
        "max": 24,
        "step": 1,
        "unit": "px",
        "label": "Button Font Size",
        "default": 16
      },
      {
        "type": "text",
        "id": "button_text",
        "label": "Button Text",
        "default": "Add to Cart"
      }
    ],
    "blocks": [
      {
        "type": "testimonial",
        "name": "video",
        "settings": [
          {
            "type": "video",
            "id": "video",
            "label": "Video link"
          },
          {
            "type": "product",
            "id": "product",
            "label": "Product",
            "info": "Select the product to display below the video"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Videos slider",
        "blocks": [
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          },
          {
            "type": "testimonial"
          }
        ]
      }
    ],
    "disabled_on": {
      "groups": ["header", "footer", "custom.overlay"]
    }
  }
  {% endschema %}

Video Slider with play and volume buttons add to cart


{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.video-slider .testimonial**image {
height: 500px;
max-width: 27rem;
}
.video-slider testimonials-component {
--block-width: 300px !important;
}
.video-slider .testimonial**image {
background: none;
}
.video-slider video {
height: 100% !important;
border-radius: 15px;
}
.video-slider .testimonial**image.media-wrapper {
margin-right: 0;
}
.video-slider .video-slider-list:before,
.video-slider .video-slider-list:after {
width: 0%;
}
.video-slider-item {
margin-left: 10px;
margin-right: 10px;
}
.video-slider-list {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: auto;
-webkit-overflow-scrolling: auto;
scrollbar-color: #cccccc #ffffff;
scrollbar-width: thin;
padding-bottom: 10px;
}
.video-slider-list::-webkit-scrollbar-track {
background: white;
}
.video-slider-list::-webkit-scrollbar-thumb {
background: lightgray;
border: 4px solid transparent;
border-radius: 10px;
background-clip: padding-box;
}
.video-slider:hover .video-slider-list::-webkit-scrollbar-thumb {
background: gray;
}
.video-slider-list::-webkit-scrollbar-thumb:hover {
background: black !important;
}
.video-slider-list {
position: static;
display: flex;
}
@media only screen and (max-width: 800px) {
.video-slider .testimonial**image {
margin-left: 0;
}
.video-slider .video-slider-list {
width: 100%;
}
}
.product-card-wrapper {
margin-top: 1rem;
text-align: center;
}
.product-card {
padding: 1rem;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.product-title {
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.product-price {
margin-bottom: 1rem;
}
.product-overlay {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
z-index: 2;
}
.custom-add-button {
width: 100%;
padding: 0.8rem;
border: none;
border-radius: {{ section.settings.button_radius }}px;
background: {{ section.settings.button_background }};
color: {{ section.settings.button_text_color }};
cursor: pointer;
transition: opacity 0.3s ease;
font-size: {{ section.settings.button_font_size }}px;
}
.custom-add-button:hover {
opacity: 0.8;
background: {{ section.settings.button_background_hover }};
}
.custom-add-button:disabled {
background: #cccccc;
cursor: not-allowed;
}
.product-form {
margin: 0;
padding: 0;
}
.product-form .form {
margin: 0;
padding: 0;
}
.video-container {
position: relative;
width: 100%;
height: 100%;
}
{%- endstyle -%}

<div class="video-slider section-{{ section.id }}-padding">
  <div class="testimonials page-width">
    {%- if section.settings.title != blank -%}
      <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %} {{ section.settings.heading_alignment }}">
        {{ section.settings.title }}
      </h2>
    {%- endif -%}

    {%- assign block_count = section.blocks.size -%}
    {%- if block_count > 0 -%}
      <svg class="visually-hidden">
        <defs>
          <clipPath id="testimonial-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.11,0.09 C0.014,0.174,-0.003,0.398,0,0.499 C-0.003,0.618,0.015,0.849,0.125,0.919 C0.235,0.989,0.413,0.997,0.504,0.999 C0.604,0.999,0.719,0.999,0.869,0.924 C0.974,0.849,0.994,0.704,0.999,0.499 C1,0.295,0.984,0.155,0.879,0.075 C0.796,0.011,0.593,-0.003,0.504,0 C0.413,-0.005,0.206,0.006,0.11,0.09"></path></clipPath>
        </defs>
      </svg>
      <testimonials-component data-slider="{% if block_count > 1 %}true{% else %}false{% endif %}" data-autorotate="{{ section.settings.autorotate }}" data-autorotate-speed="{{ section.settings.autorotate_speed | times: 1000 }}" style="--block-count: {{ block_count | minus: 1 }};">
        <div class="testimonial__list-wrapper">
          <div class="video-slider-list" id="Testimonials-{{ section.id }}">
            {%- for block in section.blocks -%}
              <div class="video-slider-item{% if section.blocks.first == true or block_count == 1 %} is-selected{% endif %}" {{ block.shopify_attributes }}>
                <div class="testimonial__image media-wrapper media-wrapper--small">
                  {%- if block.settings.video != blank -%}
                    <video-player class="video-container">
                      {{ block.settings.video | video_tag:
                        image_size: "3840px",
                        autoplay: false,
                        loop: true,
                        controls: true,
                        muted: false,
                        playsinline: true,
                        class: "video-player"
                      }}
                    </video-player>
                  {%- else -%}
                    <div class="media media--square">
                      {{ 'image' | placeholder_svg_tag: 'placeholder' }}
                    </div>
                  {%- endif -%}
                </div>

                <!-- Add product card below video -->
                {%- if block.settings.product != blank -%}
                  <div class="product-card-wrapper">
                    <div class="product-card">
                      <h3 class="product-title">{{ block.settings.product.title }}</h3>
                      <div class="product-price">
                        {%- render 'price', product: block.settings.product -%}
                      </div>
                      {%- form 'product', block.settings.product, id: 'product-form-{{ block.settings.product.id }}', class: 'form' -%}
                        <input type="hidden" name="id" value="{{ block.settings.product.selected_or_first_available_variant.id }}">
                        <button
                          type="submit"
                          name="add"
                          class="custom-add-button"
                          {% if block.settings.product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                        >
                          {%- if block.settings.product.selected_or_first_available_variant.available -%}
                            {{ section.settings.button_text }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </button>
                      {%- endform -%}
                    </div>
                  </div>
                {%- endif -%}
              </div>
            {%- endfor -%}
          </div>
        </div>
      </testimonials-component>
    {%- endif -%}

  </div>
</div>
{% schema %}
{
  "name": "Videos slider",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Video slider",
      "label": "Videos title"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "H1"
        },
        {
          "value": "h1",
          "label": "H2"
        },
        {
          "value": "h0",
          "label": "H3"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "heading_tag",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "h4",
          "label": "H4"
        },
        {
          "value": "h5",
          "label": "H5"
        },
        {
          "value": "h6",
          "label": "H6"
        },
        {
          "value": "div",
          "label": "H7"
        },
        {
          "value": "span",
          "label": "H8"
        },
        {
          "value": "p",
          "label": "Normal"
        }
      ],
      "default": "h2",
      "label": "H2",
      "info": "Headings"
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button Background Color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "button_background_hover",
      "label": "Button Hover Background Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "button_radius",
      "min": 0,
      "max": 40,
      "step": 1,
      "unit": "px",
      "label": "Button Border Radius",
      "default": 4
    },
    {
      "type": "range",
      "id": "button_font_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Button Font Size",
      "default": 16
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Add to Cart"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "video",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "Video link"
        },
        {
          "type": "product",
          "id": "product",
          "label": "Product",
          "info": "Select the product to display below the video"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Videos slider",
      "blocks": [
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer", "custom.overlay"]
  }
}
{% endschema %}