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
@NUNYA BIDNESS
Please be aware that this does not work on Dawn version 2.5 or higher as mentioned above. We have encountered that error before this due to the app installed. Please check your app that interfer with the cart.
This ruined add to cart option on my product page, now when i try to add to cart i get:
Required parameter missing or invalid: items
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!————-
DON’T USE IF YOU HAVE DAWN THEME
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!————-
THIS IS A LIFE-SAVER!! So happy I came across your tutorial
If you replace the OnButtonClick coding with yours, the mobile menu button becomes disabled…i had to revert to the original….
For me the image doesn’t switch when I select a different color in the variant selector?