Goal: round the corners of Shopify collection filter checkboxes, which are rendered as SVGs, without degrading their appearance.
Key fix: add a CSS rule targeting the checkbox’s SVG to apply a border radius. Suggested placement: at the very bottom of the main theme CSS file (e.g., main.css/base.css/style.css/theme.css). Example selector: .facets-vertical .facet-checkbox input[type=checkbox] svg { border-radius: 5px; }.
Alternative approach: insert custom code in theme.liquid before the tag. The exact snippet wasn’t shown, but an image indicated a similar rounded result.
Artifacts: before/after images illustrate the visual change and confirm the effect is on the SVG element.
Outcome: the original poster acknowledged the help (“Thanks man!”), implying the CSS solution worked. No further issues or disagreements raised.
Status: effectively resolved. Action item: implement the CSS override; use theme.liquid insertion only if stylesheet edits don’t apply.
Hello,
I want to give the filter check buttons a border radius. But you can see where I put in the code and It seems that the check boxes are svg images, so don’t know how to give them a border radius, without making them look like this which does not look great:
My store’s collection page: https://r1vex.myshopify.com/collections/all
Hi @manbru
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.facets-vertical .facet-checkbox input[type=checkbox] svg {
border-radius: 5px;
}
And save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@manbru ,
Step 1: Go to Admin → Online store → Theme > Edit code
Step 2: Search for the file theme.liquid
Step 3: Add this code before tag
Result:
Thanks man!
