Filter & Sort
Controls the appearance of collection filter and sort dropdowns, including border radius, shadows, and colors.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Filter & sort
Settings
General
| Setting | Description | Default | Options |
|---|---|---|---|
| Dropdown radius | Sets the corner rounding of the filter and sort dropdown menus. | Large | None, Rounded, Medium, Large, Extra large |
| Item radius | Sets the corner rounding of individual items inside the dropdown. | Rounded | None, Small, Rounded, Medium |
| Pill radius | Sets the corner rounding of the active filter pills that appear after a filter is applied. | Full rounded | Rounded, Medium, Large, Full rounded |
| Dropdown shadow | Controls the shadow depth behind the dropdown menus. | Large | None, Small, Medium, Large, Extra large |
Light mode
| Setting | Description | Default |
|---|---|---|
| Heading / label color | The color used for dropdown headings and filter labels in light mode. | #1f2937 |
| Secondary text color | The color used for supporting text inside the dropdown in light mode. | #6b7280 |
| Hint / count color | The color used for hint text and result counts in light mode. | #9ca3af |
| Dropdown background | The background color of the dropdown panel in light mode. | #ffffff |
| Dropdown border color | The border color around the dropdown panel in light mode. | #e5e7eb |
| Divider color | The color of horizontal dividers between groups inside the dropdown in light mode. | #f3f4f6 |
| Item hover background | The background color of a dropdown item when hovered in light mode. | #f9fafb |
| Item active background | The background color of a dropdown item when selected in light mode. | #f9fafb |
| Item hover text | The text color of a dropdown item when hovered in light mode. | #1f2937 |
| Item active text | The text color of a dropdown item when selected in light mode. | #1f2937 |
| Active pill background | The background color of an active filter pill in light mode. | #f3f4f6 |
| Active pill hover background | The background color of an active filter pill when hovered in light mode. | #e5e7eb |
Dark mode
| Setting | Description | Default |
|---|---|---|
| Heading / label color | The color used for dropdown headings and filter labels in dark mode. | #e5e7eb |
| Secondary text color | The color used for supporting text inside the dropdown in dark mode. | #9ca3af |
| Hint / count color | The color used for hint text and result counts in dark mode. | #6b7280 |
| Dropdown background | The background color of the dropdown panel in dark mode. | #1f2937 |
| Dropdown border color | The border color around the dropdown panel in dark mode. | #374151 |
| Divider color | The color of horizontal dividers between groups inside the dropdown in dark mode. | #374151 |
| Item hover background | The background color of a dropdown item when hovered in dark mode. | #283041 |
| Item active background | The background color of a dropdown item when selected in dark mode. | #283041 |
| Item hover text | The text color of a dropdown item when hovered in dark mode. | #e5e7eb |
| Item active text | The text color of a dropdown item when selected in dark mode. | #e5e7eb |
| Active pill background | The background color of an active filter pill in dark mode. | #374151 |
| Active pill hover background | The background color of an active filter pill when hovered in dark mode. | #4b5563 |