Enable filtering in Shopify

1. Shopify admin → Online Store → Navigation.
2. Open Collections filters.
3. Add filters: by product type, vendor, price, availability, and any product metafield or variant option.

How they appear in Vesperia

• Desktop — horizontal filter bar above the grid. “More filters” opens a sidebar drawer with everything.
• Mobile — single “Filter” button opens a bottom drawer. “Sort” is a separate dropdown.

Filter UI per filter type

• List filters (vendor, type) — chips with multi-select.
• Price filter — dual range slider with min/max input fields.
• Color filter — small swatch dots (uses color metafield values).
• Size filter — pill buttons.

Sorting

Sort uses Shopify’s native sort options:

• Best selling
• Featured
• Alphabetical (A-Z / Z-A)
• Price (low → high / high → low)
• Newest → oldest

Performance

Filters and sort update via Shopify’s Section Rendering API — the page does not reload; only the grid section refetches. This keeps the experience instant on every facet.