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.
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:
Open shop.js or theme.js and find the correct code
Pipeline 3 - Use this link:
Pipeline 4 - Use this link:
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:
Add the autoplay code
Below the dots: true, line - Add these 2 lines:
autoplay: true, autoplaySpeed: 2000,
Save the file.
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.