Exit Text Size on Product Grid Filter Buttons

Topic summary

Goal: change the font size of the “remove” button in active product filters on a Shopify product grid.

Context and attempts:

  • Custom CSS adjusted the filter label (product type) via .active-facets__button-wrapper, .active-facets__button-inner { font-size: 10px; text-transform: uppercase; } but did not affect the “remove” button.
  • Edits were tried in the theme’s custom CSS and component.facets.css without success initially. Store URL and password were shared for troubleshooting.

Solution provided:

  • Add a specific rule at the end of component-facets.css targeting the remove button: .active-facets__button-remove.underlined-link { font-size: 1rem; } (1rem is a CSS unit relative to the root font size).
  • A screenshot illustrated where to change the value to 1rem in the theme editor.

Outcome:

  • The user confirmed the change worked. No further issues reported.

Notes:

  • Images were used to show where to update the CSS, but the key fix is the selector and font-size value.

Status: Resolved; no open questions.

Summarized with AI on December 24. AI used: gpt-5.

Hi, @riveringroots

Please share the store URL so that I can assist you.