Filters with Search & Discovery

Casella uses Shopify’s own filters. Install the free Search & Discovery app to set them up.

Set up

1. Open Search & Discovery, then Filters.
2. Add the filters you want: availability, price, product type, color, material and width.
3. Drag them into order.
4. Save.

Collection page settings

In the theme editor, open a collection template and use these settings:

• Enable filtering shows the filters.
• Enable sorting shows the sort menu.
• Filter drawn as a ruler names the filter to draw as a ruler. The default is Width.
• Products per page (24 by default) and Columns on large screens (4 by default).
• Load more automatically adds the next page as the shopper nears the end of the list. It is off by default. The Show more button stays as a fallback. The search page has the same setting.

The width ruler

1. Create the width_band metafield (see the product setup guide).
2. Add it as a filter in Search & Discovery.
3. Keep the filter label as Width, or match it in “Filter drawn as a ruler”.

Bands written in inches, such as “30–60 in”, also show in centimeters when the shopper switches units.

Chosen filters

Chosen filters appear above the grid as quiet outlined chips in one row that scrolls sideways at every width. Select a chip to remove it, or select “Clear all”.

Colors

Color filters show swatch dots when the option has swatches.

On phones

A “Filter and sort” button opens a full-height panel. A button at the foot shows how many pieces match.

Without JavaScript

Filters still work. An Apply button appears, and “Show more” is a normal link to the next page.