Products: Autoplay product images

If you'd like to have your product images autoplay on a product page, you can add 2 lines of code to provide the functionality.


If your theme is published, use this link:

If your theme is not published, use the Code Editor and in the Assets folder, find shop.js.liquid.

If you're using Pipeline 3.0, that link will take you to the right spot. If you're on a different version or have customizations, use the Find feature (Command-F on Mac, Control-F in Win) on the right-side where the code is and search for this:

"dots: true"

You'll be looking for this:
Underneath "dots: true," add these 2 lines:

autoplay: true, 
autoplaySpeed: 2000,


Save the file.

Final notes
Autoplay will now work with all your product pages. The value of 2000 is for milliseconds (2 seconds). If you want 3 sections, change that number to 3000.
Autoplay will stop if the mouse is on top of the main product image. This allows the customer to stop and view the image.

Still need help? Contact Us Contact Us