Note: If you have Dawn theme version 2.5 and above, this code will not work. For updated code, check this instead.
Do you Debut theme's product slider? Create a product page just like Debut theme.
I have been working on Dawn theme product slider and had encounter some issues with it. One thing is the number counter does not make sense. My way around on creating a product slider in Dawn theme is copy the Debut theme.
Have a Debut product page in your Dawn theme with working radio buttons, zoom, and product slider.
NOTE: You need to log-in before you can see the code.
Follow the instructions below.
1. Go to your Online store > Themes > Actions > Edit code
2. Go to Section folder and open the main-product.liquid
3. To make things simple, we will replace the main-product.liquid
4. Go to section folder and open the main-product.liquid."
5. Delete the code inside the file, paste the code below
{% comment %}theme-check-disable TemplateLength{% endcomment %} { |
6. Next, we need to create a new Asset file. Go to Asset folder, and click "Add a new asset." Make sure it is a CSS file. Name it "product-slider"
7. Open the file and paste the code below, then click SAVE
.slider-container { margin: 0 auto; width: 90%; display: flex; flex-flow: column wrap; align-items: center; position: relative; } .large-image { width: 100%; height: 100%; position: relative; overflow:hidden; } .large-image-item { max-width: 100%; min-width: 50%; max-height: 100%; padding: 0; position: relative; margin: 0 auto; } .xoomImage { position: absolute; top: 0; left: 0; } .large-image-item:not(:first-child){ display: none !important; } ul { padding-inline-start: 0px !important; } slider-component { position: relative; display: block; width:100%; } .slider-wrapper { display: flex; justify-content: center; } .slider__slide { scroll-snap-align: start; flex-shrink: 0; } .product-slider-box { flex-wrap: inherit; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; width: 85%; display: flex; z-index: 1; } .product-slider { height: 100%; width: 31.5%; padding: 10px; display: inline-block; } .product-slider:not(:first-child){ margin-left: 1rem; } .slide-image { width: 100%; object-fit: cover; } .slider { scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04); -ms-overflow-style: none; scrollbar-width: none; } .slider::-webkit-scrollbar { height: 0.4rem; width: 0.4rem; display: none; } .no-js .slider { -ms-overflow-style: auto; scrollbar-width: auto; } .no-js .slider::-webkit-scrollbar { display: initial; } .slider::-webkit-scrollbar-thumb { background-color: rgb(var(--color-foreground)); border-radius: 0.4rem; border: 0; } .slider::-webkit-scrollbar-track { background: rgba(var(--color-foreground), 0.04); border-radius: 0.4rem; } /*=== buttons === */ .button-wrapper { height: 100%; width: 105%; position: absolute; display: flex; justify-content: space-between; align-items: center; } .slider-container::-webkit-scrollbar { display: none; } .slider-buttons { display: flex; align-items: center; justify-content: center; } .slider-button { color: rgba(var(--color-foreground), 0.75); background: transparent; border: none; cursor: pointer; width: 44px; height: 44px; } .slider-button:not([disabled]):hover { color: rgb(var(--color-foreground)); } .slider-button .icon { height: 1.2rem; } .slider-button[disabled] .icon { color: rgba(var(--color-foreground), 0.3); } .slider-button--next .icon { margin-right: -0.2rem; transform: rotate(-90deg) translateX(0.15rem); } .slider-button--prev .icon { margin-left: -0.2rem; transform: rotate(90deg) translateX(-0.15rem); } .slider-button--next:not([disabled]):hover .icon { transform: rotate(-90deg) translateX(0.15rem) scale(1.07); } .slider-button--prev:not([disabled]):hover .icon { transform: rotate(90deg) translateX(-0.15rem) scale(1.07); } /* video button when image is a video type */ .video-btn { width: 100%; height: 100%; position: relative; } .v-btn { top: 2% !important; left: 2% !important; } .active-thumb { border: 3px solid white; outline: 2px solid black; } /* ==== custom codes in editing the product page ==== */ @media screen and (min-width: 750px) { .custom-width { padding: 0 10% !important; } } @media screen and (min-width: 990px) { .product__media-wrapper { max-width: 50% !important; width: calc(50% - 1rem / 2); } .product__info-wrapper { padding-left: 5rem !important; max-width: 50% !important; width: calc(50% - 1rem / 2); } } /* hide modal */ #large-image > li:nth-child(1) > modal-opener > span { display: none !important; } #large-image > li:nth-child(1) > modal-opener > button { display: none !important; } #large-image > li > modal-opener > div { padding-top: 0 !important; } #large-image > li > modal-opener > div > img { overflow: hidden; position: relative !important; } |
8. Next, we need to adjust the global.js file under the Asset folder.
9. We will adjust the slider first. Find the slider-component. After the " this.nextButton = this.querySelector('button[name="next"]');", paste the code below. See the image and video for reference.
this.productSlider = this.querySelector('.product-slider-box'); |
Code should look like this.:

10. Next, we need to find and replace the onButtonClick(event) function with the code below. Please make sure to check the video on this so you don't delete other stuff.
onButtonClick(event) { event.preventDefault(); if (this.productSlider) { const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (this.slider.clientWidth): this.slider.scrollLeft - (this.slider.clientWidth); this.slider.scrollTo({ left: Math.floor(slideScrollPosition) }); this.currSlide = Math.round(slideScrollPosition / this.slider.clientWidth); if (this.currSlide === 0 ) { this.prevButton.setAttribute('disabled', true); } else { this.prevButton.removeAttribute('disabled'); } if (this.currSlide === this.totalPages / 3 ) { this.nextButton.setAttribute('disabled', true); } else { this.nextButton.removeAttribute('disabled'); } } else { const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderLastItem.clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth; this.slider.scrollTo({ left: Math.floor(slideScrollPosition) }); } } |
Code should look like this:

12. Last one. Find the VariantSelects, and add the code under updateMedia(), before "window.setTimeout(()". See image below, and video for instruction.
const newId = newMedia.dataset.mediaId; const newThumb = document.querySelector(`[data-thumb-id="${newId}"]`); const thumbLocate = newThumb["offsetLeft"]; document.querySelectorAll('.slide-image').forEach(thumb => thumb. classList.remove('active-thumb')); document.querySelector(`[data-thumb-id="${newId}"] > img`).classList.add('active-thumb'); const sliderBox = document.querySelector(".product-slider-box"); sliderBox.scrollTo({left: thumbLocate}); zoom(); |

That is it! I hope it was not too hard. If so, please follow the video. (",)
Update 11/08/21: Fix the issue in Mozilla with scrollbar showing. Just deleted the overflow CSS in slider-container. Added code to hide the buttons whenever the variant images is less than three.
12 comentários
There’s a problem with the codes to add and replace, I think ?
Hi, thank you for this tutorial. I cannot add product in the cart. Required parameter missing or invalid: items. On the YouTube comments, I did the whole steps again twice since you did some changes to the code for the global.js, and I still have the same problem. I tried without variant, and still the same issue. No apps installed yet to interfere. Thank you