adding borders to product images

[sweetstylesbtq]

Hi everyone I have tried so many different codes and for some reason can't get my images to have borders and if they do it only goes around 2 sides of the image left and bottom. I am using the minimal theme and my shop is sweetstylesboutique.com thanks so much.

[dmwwebartisan · Accepted solution]

Hey @sweetstylesbtq,

Try to add the following code at the end of your assets/timber.scss.liquid file.

.product__img-wrapper.supports-js .product__img {
border: 1px solid red;
}

For now, I added a red color if you see in above code. You can change the color code as per your need.

Thanks! 

[dmwwebartisan · Accepted solution]

Hey @sweetstylesbtq,

Try to add the following code at the end of your assets/timber.scss.liquid file.

.product__img-wrapper.supports-js .product__img {
border: 1px solid red;
}

For now, I added a red color if you see in above code. You can change the color code as per your need.

Thanks! 

[sweetstylesbtq]

That worked but now its only on three sides of the image on the main page maybe a spacing issue because the other ones worked ! 

[dmwwebartisan]

Hey @sweetstylesbtq,

My side looking like this

[sweetstylesbtq]

Well that is super strange mine is missing the bottom well as long as you can see it that's great thank you how do i also add it to my images on my product page ?

[dmwwebartisan · Accepted solution]

Hey @sweetstylesbtq,

For the product page. Please add the following code at the bottom of your assets/timber.scss.liquid file.

.product-single__photos a, .product-single__photos img, .product-single__thumbnails a, .product-single__thumbnails img{
border: 1px solid red;
}

Hope this will work.

Thanks! 

[sweetstylesbtq]

eeeek omg your amazing thank you so much I swear I looked all over tried like a million different codes

[Gorilla17]

Hi, your code worked like a charm but there is another thing.
Whenever I hover over the image, the border disappears.

What to do? Please help

[dmwwebartisan]

@Gorilla17 

Please share Your webshop URL & Password.

Thanks!

[Hammargruppen]

I have the same question, but we use the Theme Prestige 

We also would like to add a thin grey border to the products that shows when you hoover over the products.

Help please 🙂

[dmwwebartisan]

@sweetstylesbtq 

Please try to add the following code at the bottom of your assets/timber.scss.liquid file.

.product-single__image-wrapper {border: 1px solid #575b63;}

Let me know if this works,

Thanks!

[sweetstylesbtq]

Please don’t tag me someone else has added replies not me thank you so much