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
Please also make a video on how to make thumbnail sliders vertical on the side of product
your code on this page is not showing correctly, this tutorial is not useful like this.
Hi,
@KEVIN MCCULLAGH. Sorry, you need to explain more on your problem.
@SIMONE You might have done the steps wrong.
@Laura I think you need to elaborate also.
I hope you guys are doing well. Take note though, this code is good for a new DAWN theme. If you made alterations to the code or added an app, this code might not be the best for you, since those codes may alter the cart code and the code provided above is not made to accommodate with the changes you’ve made.
Hi, when I “Add media from URL” it shows up on product slider with an image on the top, then with the video down below it directly. This doesn’t occur with the actual Debut theme. Do you have any idea how to resolve. It only happens when on mobile display also.
I have a problem with the variants when I select them the photo does not change by itself and also the arrows to change the photo do not work