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 is a product card automatic carousel slider?

A product card automatic carousel slider is a feature that allows you to display multiple images of a product on a product page in a rotating carousel. This can be a great way to show customers different angles of a product, or to highlight different features of a product.

Why use the product card automatic carousel slider?

There are a number of reasons why you might want to use the product card automatic carousel slider. One reason is to show customers different angles of a product, or to highlight different features of a product. This can help customers to get a better understanding of the product and make a more informed decision about whether or not to purchase it.

Another reason to use the product card automatic carousel slider is to increase the click-through rate on your product pages. Studies have shown that product pages with multiple images tend to have higher click-through rates than product pages with only one image.

Additional Considerations:

Beyond the basic setup, several additional factors can significantly impact the effectiveness of your product card carousel sliders:

  • Image Optimization: High-resolution images are essential for a professional look, but they can also slow down your site's loading speed. Optimize your images for web use by compressing them without sacrificing too much quality. Tools like TinyPNG or similar services can help.
  • Mobile Responsiveness: Ensure your carousel adapts seamlessly to different screen sizes. Test it thoroughly on various mobile devices to guarantee a smooth and visually appealing experience. Consider using a responsive image solution that serves different image sizes based on the device.
  • Autoplay and Looping: Decide whether you want the carousel to autoplay and loop continuously. Autoplay can be engaging, but it can also be distracting for some users. Provide clear controls (arrows or dots) so users can manually navigate the images if they prefer.
  • Transition Effects: Experiment with different transition effects (e.g., fade, slide) to find what looks best with your product images and brand aesthetic. Keep the transitions smooth and not too jarring.

 

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

Steps on how to add product card automatic carousel slider?

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

 

Step #2. Create a new section file

In Section folder, create a new section, and name it "universal-carousel", then paste the code below.

 

Step #3. Add javascipt.

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.

 

Step #4. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Conclusion

Implementing a product card automatic carousel slider on your Shopify store is a smart way to showcase your products and enhance the customer experience. By providing multiple visual perspectives, you empower customers to make informed decisions, potentially increasing conversions and reducing returns.  However, simply adding a carousel isn't enough.  Optimizing images, ensuring mobile responsiveness, carefully considering autoplay and looping, and paying attention to accessibility are crucial for maximizing its effectiveness.  Through thoughtful implementation and ongoing monitoring, your product image carousel can become a valuable asset in driving sales and elevating your brand's online presence.

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

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

Copied!
Back to blog

1 comment

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

Tom

Leave a comment