Customize category filter chip colors

Category choices can appear as a dropdown or a row of selectable chips. Chip colors are configured on the category control that renders them, whether it is inside a Search form or added as a standalone Category filter widget.

Category field inside a Search form

1. Go to Store Locator → Builder.
2. Open the Search form selected by your locator.
3. Select its category field.
4. Set the display/render option to Chips.
5. Open the field's style settings.
6. Configure the background and text colors for the normal and selected states.
7. Configure hover and keyboard focus so both remain visible.
8. Save the Search form.

Standalone Category filter widget

1. Open the locator under Store Locator → Builder.
2. Select the Category filter widget in the layout.
3. Set its display option to Chips.
4. Configure the chip colors in the widget inspector.
5. Save the locator.

The standalone widget exposes the same essential color controls as a Search-form category field. If styling appears unchanged, verify that you edited the control actually used by the published locator.

Choose accessible states

Selected chips must differ from unselected chips by more than a slight shade change. Use a strong background/border difference and sufficient text contrast. Keep a visible focus outline for keyboard users.

Test long category names, multiple selected categories, wrapping on mobile, hover, focus, and deselection. Also test the loading transition: existing results should remain stable while the new filtered result set loads rather than flashing a temporary text-only state.