Styling Filters

Nobi renders a row of filter dropdowns above product grids so shoppers can narrow results by attributes like color, size, or category. This page describes the global CSS classes and CSS custom properties you can use to match the filters to your site's look and feel.

Global CSS Classes

The following global class names are stable and safe to target from your own stylesheet.

Class Name	Description
`.nobi-attribute-filters`	Root container that wraps the entire filter row. Use this as the scoping selector for CSS variable overrides.
`.nobi-attribute-filter-button`	Applied to every dropdown trigger button, populated or not.
`.nobi-attribute-filter-button-active`	Applied to a dropdown trigger when the shopper has selected a value (the filter is populated).
`.nobi-attribute-filter-button-inactive`	Applied to a dropdown trigger when no value is selected.
`.nobi-attribute-filter-menu`	The open dropdown menu panel that lists selectable values.
`.nobi-attribute-filter-clear-all`	The "Clear all" button that removes every active filter at once.

CSS Custom Properties

Override these on the .nobi-attribute-filters container (or any ancestor) to retheme every filter dropdown in one place.

Container

Variable Name	Description	Default Value
`--nobi-filter-bg`	Background color of the root container that wraps the filter row.	`transparent`

Dropdown Trigger Buttons (Unpopulated)

Variable Name	Description	Default Value
`--nobi-filter-border-radius`	Corner radius of the trigger button.	`6px`
`--nobi-filter-font-size`	Font size of the trigger label.	`13px`
`--nobi-filter-border-color`	Border color in the unpopulated state.	`#d1d5db`
`--nobi-filter-button-bg`	Background color in the unpopulated state.	`#ffffff`
`--nobi-filter-button-color`	Text color in the unpopulated state.	`#374151`
`--nobi-filter-button-hover-bg`	Background color on hover.	`#f9fafb`
`--nobi-filter-border-hover-color`	Border color on hover.	`#9ca3af`

Dropdown Trigger Buttons (Populated)

Variable Name	Description	Default Value
`--nobi-filter-active-bg`	Background color when a value is applied.	`#1f2937`
`--nobi-filter-active-color`	Text color when a value is applied.	`#ffffff`
`--nobi-filter-active-border-color`	Border color when a value is applied.	`#1f2937`
`--nobi-filter-active-hover-bg`	Background color on hover while populated.	`#374151`
`--nobi-filter-badge-bg`	Background of the small indicator dot on a populated trigger.	`rgba(255, 255, 255, 0.9)`
`--nobi-filter-badge-color`	Text color used inside count badges.	`#1f2937`

Dropdown Menu And Options

Variable Name	Description	Default Value
`--nobi-filter-menu-bg`	Background of the open dropdown menu.	`#ffffff`
`--nobi-filter-menu-border-color`	Border color of the open dropdown menu.	`#e4e4e7`
`--nobi-filter-option-color`	Text color of options inside the menu.	`#1f2937`
`--nobi-filter-clear-all-color`	Text color of the "Clear all" button.	`#6b7280`

Applied-Filter Chips

Variable Name	Description	Default Value
`--nobi-filter-applied-chip-bg`	Background of each applied-filter chip.	`#f3f4f6`
`--nobi-filter-applied-chip-color`	Text color of each applied-filter chip.	`#1f2937`
`--nobi-filter-applied-chip-border-color`	Border color of each applied-filter chip.	`#d1d5db`
`--nobi-filter-applied-chip-hover-bg`	Background color of the chip's remove button on hover.	`#e5e7eb`

Usage Examples

Basic Brand Color Override


/* Retheme the populated state to match a brand accent color. */
.nobi-attribute-filters {
  --nobi-filter-active-bg: #ff6600;
  --nobi-filter-active-color: #ffffff;
  --nobi-filter-active-border-color: #ff6600;
  --nobi-filter-active-hover-bg: #e65c00;
}

Style Populated And Unpopulated Buttons Separately

Use the state classes when you want per-state rules that the CSS variables cannot express on their own.


/* Unpopulated: soft pill look. */
.nobi-attribute-filter-button-inactive {
  background: #f5f5f5;
  border-color: transparent;
  font-weight: 500;
}

/* Populated: bolder outline with a brand-colored border. */
.nobi-attribute-filter-button-active {
  border-width: 2px;
  border-color: #4338ca;
}

Dropdown Menu And Chips


/* Match the menu to your site's surface color. */
.nobi-attribute-filters {
  --nobi-filter-menu-bg: #ffffff;
  --nobi-filter-menu-border-color: #e5e7eb;
  --nobi-filter-option-color: #111827;

  --nobi-filter-applied-chip-bg: #eef2ff;
  --nobi-filter-applied-chip-color: #4338ca;
  --nobi-filter-applied-chip-border-color: #c7d2fe;
}

Larger Tap Targets


/* Increase font size and corner radius across every filter dropdown. */
.nobi-attribute-filters {
  --nobi-filter-font-size: 15px;
  --nobi-filter-border-radius: 999px; /* fully rounded */
}

Styling Filters Global CSS Classes CSS Custom Properties Container Dropdown Trigger Buttons (Unpopulated)Dropdown Trigger Buttons (Populated)Dropdown Menu And Options Applied-Filter Chips Usage Examples Basic Brand Color Override Style Populated And Unpopulated Buttons Separately Dropdown Menu And Chips Larger Tap Targets