Filters and sorting

Let customers discover products quickly by filtering your products by availability, price, type, vendor, and your variant options.

When filters are enabled, Cornerstone also displays a price slider, color swatches, and product chips for easy navigation.

Filter sidebar with swatches
Filter sidebar with price slider

Set up filters

By default, the filter drawer includes a price slider and In stock only option. You can add more filter options with Shopify's Search & Discovery app.

  1. In the Shopify Search & Discovery app, go to Filters, and then click Add filter.

  2. Select a Source for the filter options. Sources can be variant options, tags, or metafields.

  3. Add a Filter label to change the filter group name that appears in the filter drawer.

  4. Click Save.

Learn more about customizing filter options in Shopify's Search & Discovery manual.

STEPS

In your theme editor (Customize):

  1. Click on the Product grid section to open the settings.

  2. Choose whether to Enable sorting to let customers sort products by Price, Date, Best Selling, Featured, or Alphabetically.

    Sorting is a Shopify feature. Learn how to change the default sort order ↗.

  3. Choose whether to Enable filters to callow customers to filter by product options, product type, price, availability, and more.

    To select which filter options to enable, go to your Online Store > Navigation settings in your Shopify admin. In the Collection and search filters section, you can add, remove, and reorder your filter options.

    See Shopify's manual for their guide on collection filters ↗.

  4. Select a Desktop filter location to change where to display the filter options.

    Select Top bar to display filters above the product grid.

    Select Sidebar to display filters to the left of the product grid.

  5. If Top bar is selected, choose whether to Enable sticky top bar to keep the filters visible at the top of the screen when visitors scroll down.

  6. If Sidebar is selected, choose whether to Enable sticky filter sidebar to keep the filters visible when visitors scroll down.

  7. Choose to Collapse filter bar on desktop to hide filter and sorting options until visitors click to open the "Filter" bar.

  8. Choose to Collapse filter groups to hide filter options until visitors click to open the available filter groups.

    You can select this option for both desktop and mobile.

  9. If you have product swatches enabled, check the Show swatch filters box to display those variant options as swatches.

  10. If you have product chips, check the Show chip filters box to display those variant options as chips.

    Select a Chip layout. Either 2 Column, 3 Column, or Natural.

    Natural matches the width of the chip to the length of the variant name.

  11. Click Save.

Click Product grid section to find settings

Setting
Description
Options

Enable sorting

Allow visitors to sort products by availability, price, or date released.

Default: Enabled

Enable filters

When enabled, visitors can filter products by type, price, availability, and other options.

Default: Enabled

Enable filters search

Display a search bar for filter groups that have a long list of filter values.

Click Product grid section to find settings

Setting
Description

Filter search groups

Enter filter group names to enable searching. Visitors can enter a search term to refine the list of filter values. To enable search for multiple filter groups, enter the filter group names in a comma-separated list. For example: Brand, Color, Format, Material

Change filters layout

Change the appearance of filters and sorting by collapsing the sidebar or filter groups, truncating longer filter lists, and showing variant swatches and chips as filter options.

Click Product grid section to find settings

Setting
Description

Collapse filter sidebar

Hide the filter sidebar when the collection page loads. Visitors can click the Filter button to reveal the sidebar.

Collapse filter groups on desktop

Hide values of filter groups until visitors click to reveal them.

Truncate filter list

Choose to limit how many filter values to show in filter groups. Visitors can click "Show more".

Truncate filter list amount

Select the number of filter values to show before hiding additional values.

Show product filter swatches

By default, filter options use swatches and chips, when enabled in your theme settings.

To display options as names, click to open the Product grid section settings and de-select Show variant option swatch filters.

Cornerstone's swatch filters option is separate from Shopify's Visual filters ↗, which allows you to add visual swatches to filter options, separately from product variants.

Click Product grid section to find settings

Setting
Description

Show swatch filters

If you have Variant swatches enabled, choose to display those variant options as swatches.

Show chip filters

Choose to display chips instead of variants names.

Chip layout

Choose to display chips in 2 or 3 column grid. Select Natural to display a layout that adapts to the natural length of the chips.

Related links Collections template Product grid Banner Shopify's Adding filters guide ↗

Last updated

Was this helpful?