Filter Customization

FilterIQ provides multiple ways to customize the appearance of your filter UI without modifying your theme code.

CSS Variables

The filter UI uses CSS custom properties (variables) for theming. You can override these in your theme's CSS to match your brand colors.

Add the following to your theme's CSS (via Online Store > Themes > Customize > Theme settings or a custom CSS file):

:root {
  /* Primary accent color (used for selected states, active filters) */
  --ssf-accent: #008060;
  --ssf-accent-hover: #006e52;

  /* Text colors */
  --ssf-text: #1a1a1a;
  --ssf-text-secondary: #6b7280;
  --ssf-text-muted: #9ca3af;

  /* Background colors */
  --ssf-bg: #ffffff;
  --ssf-bg-hover: #f9fafb;
  --ssf-bg-selected: #f0fdf4;

  /* Border colors */
  --ssf-border: #e5e7eb;
  --ssf-border-active: #008060;

  /* Filter section spacing */
  --ssf-section-gap: 1.5rem;
  --ssf-option-gap: 0.5rem;

  /* Border radius */
  --ssf-radius: 0.5rem;
  --ssf-radius-sm: 0.25rem;

  /* Swatch sizing */
  --ssf-swatch-size: 32px;

  /* Font settings */
  --ssf-font-family: inherit;
  --ssf-font-size: 14px;
  --ssf-heading-size: 13px;
}

CSS Class Reference

All filter elements use the ssf- prefix for their CSS classes. You can target these classes in your theme CSS for fine-grained control.

Container Classes

Class	Element
`.ssf-filter-sidebar`	Main sidebar container
`.ssf-filter-toolbar`	Horizontal toolbar container
`.ssf-filter-drawer`	Mobile drawer container
`.ssf-filter-section`	Individual filter group wrapper
`.ssf-filter-heading`	Filter group heading (e.g., "Color", "Size")

Filter Option Classes

Class	Element
`.ssf-checkbox`	Checkbox filter option
`.ssf-checkbox--selected`	Selected checkbox
`.ssf-radio`	Radio button option
`.ssf-swatch`	Color/image swatch
`.ssf-swatch--selected`	Selected swatch
`.ssf-size-btn`	Size selector button
`.ssf-range-slider`	Price/numeric range slider
`.ssf-toggle`	Boolean toggle switch
`.ssf-star-rating`	Star rating filter

State Classes

Class	Meaning
`.ssf-loading`	Applied to body during initial load (CLS guard)
`.ssf-filter--disabled`	Filter option with zero matching products
`.ssf-filter--collapsed`	Collapsed filter section
`.ssf-filter--expanded`	Expanded filter section

Product Grid Classes

Class	Element
`.ssf-product-card`	Product card in search results
`.ssf-product-image`	Product thumbnail
`.ssf-product-title`	Product title text
`.ssf-product-price`	Product price
`.ssf-product-compare-price`	Compare-at (strikethrough) price

Layout Presets

Layout presets control the structural arrangement of your filters. You can manage these in Filters > Presets > Layout Presets.

Preset Options

Option	Values	Description
Container	sidebar, toolbar, drawer	Where filters appear
Collapse Defaults	per-filter	Whether each filter starts collapsed or expanded
Zone Settings	per-zone	Configuration specific to each display zone

Creating a Custom Layout Preset

Go to Filters > Presets > Layout Presets
Click Create Preset
Set a name (e.g., "Holiday Layout")
Choose the container type
Configure collapse defaults for each filter
Click Save

You can then assign this preset to specific filter sets (e.g., use "sidebar" for desktop collections and "drawer" for seasonal sale pages).

Config Presets

Config presets control behavioral settings for your filters.

Option	Default	Description
Show Counts	On	Display product count next to each filter option
Auto Apply	Off	Apply filters immediately on selection vs. requiring an "Apply" button
SEO Indexing	Off	Allow search engines to index filtered URLs
Target Collection	On	Show filters on collection pages
Target Search	On	Show filters on search results pages

Filter-Specific Settings

Each individual filter can be customized:

Label -- The display name shown to shoppers
Position -- Drag-and-drop ordering in the filter panel
Default Collapsed -- Whether the filter starts collapsed
Show Search -- Add a search box within the filter (useful for filters with many options)
Multi-Select -- Allow selecting multiple values simultaneously
Sort Order -- Sort options by count, alphabetically, or custom order

Merge Groups (Value Grouping)

For filters with inconsistent values (e.g., "Red", "red", "Crimson" all meaning the same thing), you can create merge groups:

Go to the filter configuration
Find the Merge Groups section
Set a primary value (e.g., "Red")
Add synonyms (e.g., "red", "Crimson", "Scarlet")
Save -- shoppers will see "Red" as a single filter option that matches all grouped values

Examples

Matching Shopify Polaris colors

:root {
  --ssf-accent: #008060;
  --ssf-bg: #ffffff;
  --ssf-border: #c9cccf;
  --ssf-text: #202223;
}

Matching a dark theme

:root {
  --ssf-accent: #00e5ff;
  --ssf-bg: #1a1a1a;
  --ssf-bg-hover: #222222;
  --ssf-text: #f0f0f0;
  --ssf-text-secondary: #94a3b8;
  --ssf-border: #333333;
}