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.

Result:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1

Open shop.js or theme.js and find the correct code

Pipeline 3 - Use this link:

assets/shop.js.liquid

Pipeline 4 - Use this link:

theme.js

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

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

dots: true

Example:

2

Add the autoplay code

Below the dots: true, line - Add these 2 lines:

autoplay: true, 
autoplaySpeed: 2000,

Example:

Save the file.


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.


Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. 

Still need help? Contact Us Contact Us