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
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
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.
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.
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.
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.