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.
Table Of Contents
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 %}
Hey there
I watched your video multiple times, I cannot figure out what is going wrong with how the slider is displayed. Appreciate the help.
Thank you
You are almost there:) I see everything is good expect the html. You put the class outside the quote.
This is where you made the mistake: https://prnt.sc/QzxdXoXk00p1
This is the solution: https://prnt.sc/97cFUWyKFfbZ
Hope it helps:)
Thank you so much Jak, you’ve made my day. This works perfectly now. I look forward for more tips and collaborations maybe 🙂
Hi Jak
Thanks for this amazing Tutorial- I want to add the slider but to the stacked images in Dawn 6.0.2 would you be able to let me know if this will be possible by changing the style headings from product thumbnail to product stacked? Also will the arrow work with only one selected variant images? Thanks
Hey:)
Yeah it’s possible that you can enable the slider on stacked. Arrow is not connected to variations so it will work for sure.
Thanks you very much for your swift reply. Super appreciated!!!!!
I have tried the code as you mentioned but the slider is not working.I am using dawn 12.0.0v
could you share you store url please, specifically the product page url you applied.
Check the product page please
it’s password protected, can’t view it
the password is: yahbri
this code is different from your video
check the updated version: https://www.youtube.com/watch?v=ouhYdxGSfhc&feature=youtu.be