Main issue: Round the edges of all collection product images without editing 300+ products individually. The generic CSS rule “img { border-radius: 10px; }” did not apply.
Solution provided: Add a targeted CSS rule in the theme.css file for the grid image element: .grid__image-ratio { border-radius: 10px !important; }. The !important flag forces this style to override existing theme styles. A screenshot was shared confirming the visual result.
Hover image concern: The grid changes to a secondary image on hover, which also needed rounded corners.
Update to solution: Extend the CSS to include both selectors: .grid-product__secondary-image, .grid__image-ratio { border-radius: 10px !important; }. This rounds the default and hover images consistently.
Technical notes: border-radius controls corner rounding; !important increases priority of the rule; theme.css is the stylesheet for site-wide styles.
Status: Issue appears resolved with the updated CSS selectors; no remaining open questions or disagreements.
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.
Someone told me to try this
img {
border-radius: 10px;
}
But it didn’t work.
wesbite: SaleStylist.com
hi @luvopps
This is PageFly - Free Landing Page Builder.
You can add this code into the theme.css file
.grid__image-ratio {
border-radius: 10px !important;
}
This is how its look : https://prnt.sc/EOmrOnYR3N2T
Hope this can help you solve the issue
Best regards,
PageFly
I also Have the hover option on the grid image where it changes to the second product image when hovering over it, how do I make that round too.
hi @luvopps please update the code to be like this
.grid-product__secondary-image , .grid__image-ratio {
border-radius: 10px !important;
}