How can I add a color-changing frame to product page images?

[salahdz]

I want to put a frame for the images on the product page so that the frame is gray in the images that are not specified, but when the customer clicks on the image, the color of the frame changes to blue as shown in the image below

and this image on my website

URL of Product page on my website : https://ibtiyaa.com/collections/montres-bracelets-pour-femmes/products/festina-montre-femme-f20497-2-ceramic-acier

Password site : kroklo

thnaks for all

[BSS-Commerce]

Hi @salahdz

Please follow these steps:

• Go to the Theme section and select Edit code:

• Find the file slick.css or owl.css or theme.css or global.css or base.css and add the following code:

.slick-slide.slick-active:not(div:has(.slick-zoom)) img {
    border-color: #d5d5d5;
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    box-sizing: border-box;
}

.slick-current:not(div:has(.slick-zoom)) img {
    border-color: #8484ff !important;
}

• Here is the result:

I hope that it will work for you.