Filters and Facets

Scale Theme's filter system lets your customers quickly find the products they're looking for. It relies on the Shopify Storefront Filtering API, which means all the filters you configure in your Shopify admin are automatically available in your theme.

Enabling Filters

Filters and sorting are configured in the Product Grid section of the collection page. You can enable one, the other, or both independently.

Filter Layouts

Scale Theme offers 3 filter layouts, each suited to a different type of store and shopping experience:

Horizontal

Filters are displayed in a row above the product grid. Each filter is a dropdown button that opens on click to reveal the options.

When to use: This is the most common layout. It works for most stores and maximizes space for the product grid.

The horizontal filter displays:

• The filter label as button text
• A colored count badge when values are selected (e.g., "2 selected")
• A dropdown panel with options, the result count per option, and a reset link
• Sorting to the right of the filter bar
• The product counter at the end of the row

Vertical (Sidebar)

Filters are displayed in a sidebar column to the left of the product grid. Each filter group is an accordion that opens/closes on click.

When to use: Ideal for stores with many filters (5+) or dense catalogs. The sidebar lets you display all filters simultaneously without cluttering the area above the products.

The vertical filter displays:

• A "Filter by" title at the top of the sidebar
• A "Clear all" button to reset all filters
• Active filters as pills with an X button to remove them
• Each filter in an accordion (the first one is open by default)
• Sorting in a selector above the grid (on the right, next to the product counter)
• A "Show more" button when a filter has more than 10 values

Drawer

Filters open in a sliding panel from the right side of the screen, triggered by a "Filter" button. This is the default mode on mobile, regardless of the desktop choice.

When to use: When you want to maximize space for the product grid while still offering a full filtering system. The drawer is also the mobile experience.

The drawer filter displays:

• A "Filter" button on the collection page (with a filter icon)
• Sorting visible directly on the page (next to the Filter button, on desktop)
• Active filters as pills on the page, without opening the drawer
• A sliding panel with accordion filters when clicked

Filter Types

The available filter types are determined by the configuration in Shopify Admin. Scale Theme supports all native types:

Checkbox Filters (List / Boolean)

The most common filter type. Each value is displayed with a checkbox, the label, and the number of matching products in parentheses.

, M (8), L (15), XL (6), some boxes checked with a green checkmark)

Features:

• Styled checkbox with a check animation on click
• Product count in parentheses for each value
• Disabled values grayed out when no products match (count at 0)
• Multiple selection possible within the same filter
• "Show more / Show less" for filters with more than 10 values (vertical layout)

Price Range Filter

A numeric filter with two input fields for setting the minimum and maximum price.

Features:

• Currency symbol displayed automatically (based on the cart currency)
• Maximum price shown as reference ("Max price: 299.00 EUR")
• Comma-decimal currency support: Automatically handles currencies that use a comma as a decimal separator (EUR, BRL, SEK, etc.)
• Numeric input fields with min/max validation

Active Filters

When filters are applied, they appear as clickable pills. Each pill shows the filter and the selected value, with an X button to remove it.

Display by Layout

Removing a Filter

There are three ways to remove active filters:

1. Click the X on a pill to remove an individual filter
2. Click "Clear all" to reset all filters
3. Click "Reset" within a specific filter's panel (horizontal only)

For price filters, the pill displays the selected range (e.g., "20.00 EUR - 50.00 EUR").

Mobile Experience

On mobile, filters are always displayed in a drawer, regardless of the layout chosen for desktop. This is a deliberate UX decision: a sliding side panel offers the best touch experience on small screens.

Open Button

The button text adapts to the enabled options:

• "Filter and sort" if both filtering AND sorting are enabled
• "Filter" if only filtering is enabled
• "Sort" if only sorting is enabled

Mobile Drawer Open

The mobile drawer offers:

• A header with the title and product count ("18 products")
• Accordion filters that open sub-menus on click
• A full-screen sub-menu for each filter when clicked
• A back button (arrow) to return to the filter list
• A fixed footer with "Clear" and "Apply" buttons

Mobile Sorting

Sorting is integrated into the mobile drawer, after the filters. It appears as a selector with all available sort options.

Product Counter

A product counter indicates how many products match the current filters. It updates automatically when filters change.

The counter is positioned differently depending on the layout:

• Horizontal: To the right of the filter bar
• Vertical: To the right of the sort selector, above the grid
• Drawer: Below the "Filter" button, next to sorting

A loading spinner briefly appears while results are being updated.

Technical Details

Shopify Storefront Filtering API

Scale Theme uses Shopify's Storefront Filtering API for filtering. This means:

• Filters are handled server-side by Shopify
• Results are always accurate (no approximate JavaScript filtering)
• Product counts per filter are reliable
• Performance is optimal even with huge catalogs
• SEO is preserved (filter URLs are crawlable)

Update Without Page Reload

When a filter is selected or removed, the page updates without a full reload. The facet-filters-form component intercepts the form and updates the product grid, pagination, and counters via an AJAX request.

During the update:

• The product grid displays a loading overlay (reduced opacity)
• The product counter shows a spinner
• The URL is updated in the browser's address bar (back/forward navigation works)

Sticky Behavior

The filter bar is sticky: it remains visible at the top of the screen as the visitor scrolls down the page. Its position automatically adjusts to the header height.

Configuration in Shopify Admin

To manage which filters appear on your store:

1. Go to Shopify Admin > Online Store > Navigation
2. Click on "Collection filters"
3. Add, remove, or reorder filters
4. Changes are immediately reflected in the theme

Common filter types:

• Availability: In stock / Out of stock
• Price: Price range
• Product type: Product categories
• Vendor: Brands
• Size: Size options
• Color: Color options
• Material, Style, and any other product metafield

Layout Comparison

Best Practices

1. Limit the number of filters: 4-6 filters are enough for most stores. Too many filters create confusion.
2. Default to horizontal layout: It's the most familiar to shoppers and maximizes product space.
3. Use sidebar for large catalogs: If you have more than 5 filters or filters with many values, the sidebar is better suited.
4. Test on mobile: Make sure the mobile drawer experience is smooth and that the most important filters are easily accessible.
5. Name your filters clearly: In Shopify Admin, give your filters short, descriptive names (e.g., "Size" rather than "Product size option").