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
