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.
Copied!
12 comments
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