Re: adding borders to product images

Solved

How to add borders to product images on Minimal theme?

sweetstylesbtq
Excursionist
36 1 12

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.

Accepted Solutions (2)

dmwwebartisan
Shopify Partner
12321 2552 3729

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12321 2552 3729

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 11 (11)

dmwwebartisan
Shopify Partner
12321 2552 3729

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
sweetstylesbtq
Excursionist
36 1 12

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
12321 2552 3729

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
sweetstylesbtq
Excursionist
36 1 12

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
12321 2552 3729

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
sweetstylesbtq
Excursionist
36 1 12

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

Gorilla17
Excursionist
28 0 12

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
Shopify Partner
12321 2552 3729

@Gorilla17 

Please share Your webshop URL & Password.

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Hammargruppen
Tourist
3 0 2

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
Shopify Partner
12321 2552 3729

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
sweetstylesbtq
Excursionist
36 1 12

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