Add automatic slider / carousel

Product Image Slider for Shopify Dawn theme

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

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify themes (Style might vary)

I was able to write an autoplay slider / carousel using scroll. This works with most of Shopify themes (work best in Dawn and Debut theme). 

In this tutorial, we are creating a slider or carousel for a card or product card. I did provide an option to choose between the two. I also included an autoplay option, of course. You can choose from 3 to 7 products per slide, or 3 - 5 cards per slide.

I also added an options for dots and number counter. Yes, the counters work.

Check DEMO store here💻. Password: made4uo

What you are buying:

  • Automatic slider for collection

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code
2. In Section folder, create a new section, and name it "universal-carousel", then paste the code below.

3. We need the file that contains the javascript. Under the asset folder, open the "theme.js" or "global.js" file and paste the code below.

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

Updated 3/18/22: You can add multiple of this section in one page. 

Back to blog

1 comment

Thanks for great video. How can I set minimum card number to 1 ?


Leave a comment