Wonpa docs

Appearance

Filtering and sorting ​

Collection and search pages can show a filter panel and a sort menu. Buyers narrow a large catalog by color, size, price, or any other filter, then reorder what's left.

Wonpa renders the filters. Which filters exist, and the order of their values, come from Shopify's Search & Discovery app.

Note: Filters are configured in the free Search & Discovery app, not in the theme editor. Install it from the Shopify App Store, then open Search & Discovery → Filters to add or reorder them. Until at least one filter is set up, the panel stays empty.

Turn the panel on ​

  1. In the theme editor, open a collection page and select the Collection section.
  2. Toggle Enable filtering and Enable sorting.

Both are on by default. The same two settings live on the Search results section.

The filter panel open beside a collection, with color swatches and price fields

The filter panel on a collection page — theme editor, Collection section, Enable filtering.

Desktop panel and mobile drawer ​

On desktop the panel sits in a sticky sidebar to the left of the grid and stays open. On screens below 990px it collapses into a Filters button that opens a drawer; the page behind it stops scrolling while the drawer is open.

Filter values render by type. A filter named Color (or Colour) shows as a grid of swatch dots. Other list filters show as checkboxes with a result count. Price shows as From and To number fields. Values with no matching products are disabled.

Active filters and clearing ​

Applied filters appear as chips above the grid. Each chip removes that one filter when clicked. A Clear all link at the end of the row resets every filter at once.

Sorting keeps filters ​

The sort menu submits through the same form as the filters. Changing the sort order carries the active filters and the search term with it, so the result set stays narrowed. Clear all also keeps the current sort.

Size order ​

Sizes sort the way you order their values in Search & Discovery, not alphabetically. To get S, M, L, XL instead of L, M, S, XL, open Search & Discovery → Filters, select the size filter, and drag its values into the order you want.