Shopify features and tools
Convert Dawn Product Page Like Debut Theme  with Product Slider

Convert Dawn Product Page Like Debut Theme with Product Slider

Log in or Sign up to ensure access to FREE code across multiple devices.

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

Product slider image

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:

Dawn to debut product page image

12. Last one. Find the VariantSelects, and add the code under updateMedia(), before  "window.setTimeout(()". See image below, and video for instruction. 


Dawn to debut product page global.js file image

 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. 



Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Back to blog


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

nunya bidness

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?

Daniël Staples

Leave a comment