Skip to Content

Filters

Faceted filters let shoppers narrow a collection by attributes — price, color, size, brand, availability. Citera renders them either as a sidebar or a top bar.

Filters are configured in Shopify’s Search & Discovery app

Install Search & Discovery

Free app from Shopify — search “Search & Discovery” in your Shopify App Store and install it.

Open the app

Once installed, it appears under Apps → Search & Discovery in your admin.

Go to Filters

Add filters

Click Add filter and pick from:

  • Availability (in stock / out of stock)
  • Price — range slider
  • Product type — the “Type” field from Shopify
  • Vendor
  • Product tag — any tag you use
  • Product option — any option like Color, Size, Material
  • Metafield — any metafield you’ve created

Configure each filter

For each, pick which values to show. E.g. a Color filter can show all colors or just specific ones. You can also rename filter labels shoppers see.

Save

Filters appear on your collection pages immediately — no theme setting needed.

Color filters render as swatches

If you add a Color filter built from your product’s Color option, Citera renders it as swatches automatically (not text labels). This uses the same swatch resolution logic as the variant picker — see Variants & swatches.

Filter layout: sidebar vs top bar

Open the theme editor on a collection page

Click the Product grid section

Find Filter layout

Options:

  • Sidebar (default) — filters on the left, grid on the right (desktop)
  • Horizontal top bar — filters above the grid in a row (feels editorial)
  • Drawer — filters hidden until shopper clicks “Filter”, opens as a slide-in

Save

Mobile always uses a drawer. Regardless of desktop layout, filters on mobile collapse into a drawer accessed via a “Filter” button. This is standard because sidebars don’t fit on phones.