Would like to round of the edges of my images on my collection product grids, I don’t know how to do it and rounding them one by one takes too long because I have 300+ products.
Would like them to be rounded like this:
Topic summary
A user seeks help rounding the edges of product images in their collection grid, noting that manually editing 300+ products is impractical. They’ve shared screenshots showing the desired rounded corner effect.
Proposed Solution:
- Add CSS code to globally apply border-radius to images
- Navigate to: Online Store → Theme → Edit code → Assets folder
- Open either
theme.css(older themes) orbase.css(Shopify 2.0 themes) - Insert:
img { border-radius: 10px; }(adjustable value)
Current Issue:
The CSS solution rounded sale badges instead of the product grid images themselves, indicating the code needs refinement to target the correct elements. The discussion remains unresolved as the initial approach didn’t achieve the intended result.
Hi @luvopps ,
You can use css to change image border radius globally.
- Go to Online Store->Theme → Edit code
- Go to Asset and open your base/theme css file:
- Vintage/ Old theme => Assets/theme.css
- Shopify 2.0/ New theme => Assets**/base.css**
- Add the following: Note: adjust your radius value according
img {
border-radius: 10px;
}
Hope you find this suggestion helpful! If you want more flexibility in customising your Online Store, give our app a try! We are an easy to use, drag & drop page-builder.
Cheers,
Layoutbase - Homepage & landing page-builder
