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

Solved
v-h-hess
Excursionist
22 1 2

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!

0 Likes

This is an accepted solution.

@v-h-hess,

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!

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
v-h-hess
Excursionist
22 1 2

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. 

0 Likes

 

@v-h-hess,

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.

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes