adding borders to product images

Solved
sweetstylesbtq
Excursionist
23 1 6

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.

0 Likes
dmwwebartisan
Shopify Partner
6409 1491 1946

This is an 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! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
sweetstylesbtq
Excursionist
23 1 6

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
Shopify Partner
6409 1491 1946

Hey @sweetstylesbtq,

My side looking like this

image-border.jpg

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
sweetstylesbtq
Excursionist
23 1 6

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
Shopify Partner
6409 1491 1946

This is an 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! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
sweetstylesbtq
Excursionist
23 1 6

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

Hammargruppen
New Member
1 0 0

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

 

0 Likes
Gorilla17
Excursionist
17 0 9

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

0 Likes
dmwwebartisan
Shopify Partner
6409 1491 1946

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes