Autromatically change product images

Store Design
, , ,

Topic summary

A Shopify store owner seeks help implementing an automatic image slider for product pages. They want product images to cycle through automatically like a slideshow.

Proposed Solution:

  • Add JavaScript code before the closing </body> tag in theme.liquid
  • Add CSS styling before the <head> tag to highlight active thumbnails with orange borders and opacity transitions

Current Status:

  • The initial solution provided did not work when implemented
  • The helper has requested a screenshot showing where the code was placed to troubleshoot the issue
  • Discussion remains open and unresolved

Technical Details:
Store access provided (Foodease.ai, password: 1234) for direct review. The CSS targets .product__thumb-item classes with active state styling.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone :slightly_smiling_face:

I’m working on a Shopify store and am stuck on an issue. Can anyone please help?

I want the product image to automatically change like a slider on the product page. Is there any solution for this? If you can provide the code, I would highly appreciate it.

Store URL: Foodease.ai

Password: 1234

2

Hi @Digital_Imran

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Edit code > theme.liquid
  2. Add this code before the close tag https://prnt.sc/LihO9oW3K5Tp

Then add this code before https://prnt.sc/jxdXC3UhhWxf

{% style %}
.product__thumb-item.active {
    border: 2px solid #ff6600;
    opacity: 1;
}
.product__thumb-item img {
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out;
}
.product__thumb-item.active img {
    opacity: 1;
}
{% endstyle %}

I hope this helps

Best,

Daisy

3

Hello @DaisyVo Thank you for replying. However, this solution is not working. Could you please check again and try to help? I would highly appreciate your assistance.

4

Hi @Digital_Imran

Can you take a picture of where you added the code?