Shopify features and tools
Showcase Your Featured Products with Product Image slider for Shopify Dawn theme

Showcase Your Featured Products with Product Image slider for Shopify Dawn theme

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

Compatibility:   Shopify 2.0 FREE themes  only 

Looking for a way to showcase your featured products on your website's homepage? A product collection slider can be a great solution! With this simple and customizable code, you can easily create a stylish and responsive slider that highlights your top products in an eye-catching way.

Whether you're looking to promote specific products, sales, or just want to showcase your best-sellers, a product collection slider can help draw attention to your key offerings. Check out our step-by-step guide and start customizing your product collection slider today!

However, it's important to note that this code may not work with the updated Dawn theme on Shopify. In that case, we recommend checking out our updated product collection slider instead.


To start: 

1. Go to your Online store > Themes > Actions > Edit code
2. Go to Section folder and create a section, we will name it "collection-slider"
3. In the new section, paste the code below, then click SAVE

4. Go to Asset folder, create a new file, name it "collection-slider"

5. Open the newly created CSS folder and paste the code below, then click SAVE


6. We need to go to the Asset folder again. Open the global.js file and find the slider-component. At the connstructor, lets add this code below


7. At the initPages section, replace the this.totalPages with the code below

8.  At the update() section, replace the this.currentPage with the code below

Your code at global.js should look like below

Javascript code


Updated 10/19/21: For issues with the image has a different height with the ones.

Updated 11/12/21: Added a product-limit range.

Updated 11/24/21: Added a show all button. See the section settings to click the show all button.

Updated 05/22/23: Works with all version of Shopify FREE themes

That's it (",). Let me know if you have questions 



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 contact us using “Chat with us” for prompt solution.


I can’t copy a code. There is no button to copy. It is like picture, uncopiable


This is a really neat feature, but is there a way to activate the list counter at the bottom? The one that looks like < 1/50 >? Nothing happens when I click the < or > symbols, and there’s no way to adjust the 1/50 value. Thanks!

Erin Rado

Hi Dheeraj,

If you are using this code in particular, you shouldn’t have any problem on having multiple sliders since the code is embed to the theme.


thank you for sharing the code. Appreciate you helping us.
I too implemented this code and it will works well for one collection-slider. But i have added 2 more collection-slider on to the home page and both have one common issue. Only 2 products are showing on screen. i tried removing and adding again or changing the collection but still only 2 products are show. Could you please advise what modification is required. thank you.


Leave a comment