Filter with Circles Instead of Checkboxes Dawn Theme

Store Design

Topic summary

Goal: Replace product filter checkboxes in the Dawn theme with circular indicators that fill when selected.

What was proposed:

  • Desktop (theme code change): Edit Online Store > Themes > Actions > Edit code > Assets > base.css and add CSS that:
    • Styles .facet-checkbox svg.icon.icon-checkmark (sets aspect-ratio, height, transform, background fill).
    • Hides the default square (svg > rect).
    • Adds a circular border (border + border-radius: 50%) to the svg, producing a circle that appears filled on selection. A screenshot illustrates the final look.

Mobile support:

  • Apply the same styling to mobile filters by targeting .mobile-facets__label instead of label.facet-checkbox, mirroring the hide-rect and circular border, with adjusted background color.

Other suggestions:

  • One reply recommended hiring a Shopify Expert if code changes aren’t comfortable.

Outcome/status:

  • A concrete CSS solution for desktop plus a selector update for mobile was provided. No final confirmation from the original poster, but the thread presents a workable approach for both desktop and mobile.
Summarized with AI on February 1. AI used: gpt-5.
1

Hello!

I’d like to be able to change the check boxes in the filter section on product pages to circles. When you click on the circle it would be filled instead of a check mark.

Screen Shot 2022-08-26 at 12.22.43 PM.png
Screen Shot 2022-08-26 at 12.22.43 PM.png610×920 7.85 KB

1 Like
2

Hey, @Jaclyn2

I’m not formally trained in code to provide you with an exact solution to adjust the filter buttons to circles. However, I’m confident one of our Shopify experts would be able to accomplish this at a reasonable price.

If there is anything else I can help you with, please let me know.

3

Hi @Jaclyn2 ,

Please follow the instructions below

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
.facet-checkbox svg.icon.icon-checkmark {
    aspect-ratio: 1;
    height: auto;
    transform: translate(-0.5px, -1.5px);
    background: #000;
}

label.facet-checkbox svg > rect {
    display: none;
}

label.facet-checkbox svg {
    border: 1px solid;
    border-radius: 50%;
}

Finish product below

made4Uo_0-1661551701834.png
made4Uo_0-1661551701834.png502×557 63.5 KB

4

Thank you! Is there a way for the code to also work on mobile?

5

Copy and paste his code, and replace ‘label.facet-checkbox’ with ‘.mobile-facets__label’ like this

}

.mobile-facets__label svg.icon.icon-checkmark {
    aspect-ratio: 1;
    height: auto;
    transform: translate(-0.5px, -1.5px);
    background: #FFFFFF;
}

.mobile-facets__label svg > rect {
    display: none;
}

.mobile-facets__label svg {
    border: 1px solid;
    border-radius: 50%;
}