Autromatically change product images

Digital_Imran · ‎03-02-2025

Hello everyone 🙂

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

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.

DaisyVo · ‎03-02-2025

Hi @Digital_Imran

To complete your requests, please follow these steps:

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

<script>
    document.addEventListener("DOMContentLoaded", function () {
    let thumbnails = document.querySelectorAll(".product__thumb-item"); 
    let mainPhoto = document.querySelector(".product__main-photos img"); 
    let currentIndex = 0;
    function changeImage() {
        thumbnails.forEach(thumb => thumb.classList.remove("active"));
        let currentThumb = thumbnails[currentIndex];
        currentThumb.classList.add("active");
        let newImagesrc=currentThumb.querySelector("img").src;
        mainPhoto.src=newImageSrc;
        currentIndex = (currentIndex + 1) % thumbnails.length;
    }
    setInterval(changeImage, 3000);
});
</script>

Then add this code before <head> 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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Digital_Imran · ‎03-02-2025

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.

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.

DaisyVo · ‎03-04-2025

Hi @Digital_Imran

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Autromatically change product images

Autromatically change product images

Community Blog Articles