How to create product slider in Shopify Dawn theme 2023

July 9, 2023

In this tutorial we are going to create product slider using dawn theme. Please follow the video guide.
This is going to work on other free themes such as refresh, craft and sense.

If you are using an older version of the dawn theme like 5.0.0, search for main-product.liquid, in my case I am using 10.0.0 that’s why I need to work on product-media-gallery.liquid file.

Enable arrows for slider

{% if section.settings.gallery_layout == 'thumbnail_slider' %} enable_desktop_slider slider--tablet-up {% endif %}

Add css for arrows

{% if section.settings.gallery_layout == 'thumbnail_slider' %} 
     .product--thumbnail .product__media-item:not(.is-active),
    .product--thumbnail_slider .product__media-item:not(.is-active)
    {
      display:block !important;
    }
    .slider-buttons {
       position: absolute;
       bottom: 0;
       right: 0;
       background: wheat;
       display: flex !important;
       z-index: 999;
    }
   .enable_desktop_slider li{
     width:calc(100% - 3rem)!important;
  }
{% endif %}

Add css for vertical slider

{% if section.settings.gallery_layout == 'thumbnail_slider' and section.settings.enable_vertical_slider  %}
            [data-desktop-layout="thumbnail_slider"] {
                display: flex;
                flex-direction: row-reverse;
            }
            slider-component{
                width:90%;
                height:fit-content;
            }
            .product--thumbnail_slider .thumbnail-slider{
                align-items: start;
            }
            .thumbnail-slider .thumbnail-list.slider--tablet-up {
                flex-direction: column;
                padding-top: 0;
                overflow-y: auto;
                scroll-snap-type: y mandatory;
                scroll-behavior: smooth;
                overflow-x: hidden;
                max-height: 365px;
            }
            .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
                width: calc(100% - .8rem);
                align-self: center;
            }
            .slider-button {
                display: none !important;
            }
            .enable_desktop_slider {
                margin-bottom: 0;
            }
            .enable_desktop_slider + .slider-buttons .slider-button {
                display: block !important;
            }
{% endif %}