Solved

Image Border Radius only for product page, collection product images, home page product thumbnails

CaelanBassett
Excursionist
24 1 5

Good evening! How's it going?

I'm looking to add a bit of a visual tweak to my site so I can have rounded corners (10px preferred or anything close) for product images/thumbnails that appear on:

  • the home page
  • collection pages
  • product pages.

I hope there is a way to keep embedded images on a page and home page visual tiles from being affected, since I'm using full-width imagery you can easily notice on the home page. Searching around it seems it may need done using liquid code, but I'm not too versed on editing liquid files. I purchased a premium theme.

Website: https://vhhess.com

Any help would be appreciated, thanks in advance!

“Get it now, #OnVHHess!”
Accepted Solution (1)

Muhammad_Ali_S
Shopify Partner
664 121 183

This is an accepted solution.

@CaelanBassett,

Add the following code at the bottom of your assets >> theme.css file.
Do let me know if you need any assistance.

.grid-product__image-mask {
    border-radius: 10px !important;
}

 

Do let me know if it works for you!
Good Luck!

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142

View solution in original post

Replies 5 (5)

Muhammad_Ali_S
Shopify Partner
664 121 183

This is an accepted solution.

@CaelanBassett,

Add the following code at the bottom of your assets >> theme.css file.
Do let me know if you need any assistance.

.grid-product__image-mask {
    border-radius: 10px !important;
}

 

Do let me know if it works for you!
Good Luck!

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
CaelanBassett
Excursionist
24 1 5

Yes, I think this will work out for me.

now, it seems like some of the premium themes or rather the animations involved in them such as showing a second product image when your mouse over the thumbnail, interferes with the rounded corner display of the product tiles but I think since most people will be shopping on mobile it won’t really matter much.

I think the main product pages should be left as is so I think this will get the job done; the code did not affect product pages but again that is ok. Thank you very much for your help. You’ve been awesome. 

“Get it now, #OnVHHess!”
Muhammad_Ali_S
Shopify Partner
664 121 183

 

@CaelanBassett,

This is for the product page, I hope this is what you're looking for.

.product-image-main .image-wrap {
    border-radius: 10px;
}

.product__thumb-item .image-wrap {
    border-radius: 10px;
}

.product__thumb-item a.is-active:before {
    border-radius: 10px;
}

 

Do let me know it works fine.

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
Gcochoni
New Member
10 0 0

Hello, Will this work for the dawn theme? I need to change this border www.vir-gil.com

border.jpg

Raphaeldn
New Member
4 0 0

Hi, Your code did work but on the mobile, it will first be viewed squared and after a second it is switched to round, is there anything to do to make sure that it will be round on the first moment of seeing the picture?