---
date: 2026-07-29
title: Shopify AJAX collection filtering
description: Build Shopify AJAX collection filtering with @studiometa/ui. Filter and sort a collection in place with a form and the Section Rendering API, keep the URL shareable.
tags: shopify, collection-filtering, section-rendering-api, progressive-enhancement, studiometa-ui
---
# Shopify AJAX collection filtering
29/07/2026 in #shopify #collection-filtering #progressive-enhancement
> **The series**
>
> **Part 3 of 7** of the series [Building a Shopify storefront with @studiometa/ui](/articles/building-a-shopify-storefront-with-studiometa-ui).
>
Collection filtering is a common AJAX feature on a storefront. A customer ticks a facet or changes the sort order, and the product grid updates in place, without a full reload and without losing their scroll position. Shopify already filters and sorts collections server-side from URL parameters, so with [`@studiometa/ui`](https://ui.studiometa.dev), built on [`@studiometa/js-toolkit`](https://js-toolkit.studiometa.dev), you only enhance the form.
Tick a facet or change the sort below. The grid and the count update in place, without a full reload:
```twig
```
```ts
// demo.ts
import { registerComponents } from '@studiometa/js-toolkit';
import { Action, FetchShopifySection, Transition } from '@studiometa/ui';
// --- Simulated collection endpoint ------------------------------------------
// Filtering and sorting normally happen server-side: Shopify reads the query
// string, renders the collection, and returns the requested sections. Here we
// do the same in memory. Delete this block to hit the real endpoint.
type Product = { title: string; price: number; tags: string[] };
const products: Product[] = [
{ title: 'Cap', price: 25, tags: ['apparel'] },
{ title: 'Tee', price: 30, tags: ['apparel'] },
{ title: 'Tote', price: 18, tags: ['accessories'] },
{ title: 'Mug', price: 12, tags: ['accessories'] },
];
const grid = (items: Product[]) =>
`
${
items.length
? items.map((p) => `
${p.title} · €${p.price}
`).join('')
: '
No products match these filters.
'
}
`;
const count = (items: Product[]) =>
`
${items.length} products
`;
const realFetch = window.fetch.bind(window);
window.fetch = async (input, init) => {
const url = new URL(typeof input === 'string' ? input : input instanceof URL ? input.href : input.url, 'http://localhost');
if (url.searchParams.has('sections')) {
const tags = url.searchParams.getAll('tag');
const sort = url.searchParams.get('sort_by');
let items = tags.length ? products.filter((p) => tags.some((t) => p.tags.includes(t))) : [...products];
if (sort === 'price-ascending') items.sort((a, b) => a.price - b.price);
if (sort === 'price-descending') items.sort((a, b) => b.price - a.price);
await new Promise((resolve) => setTimeout(resolve, 400)); // fake latency
const body = JSON.stringify({ 'product-grid': grid(items), 'results-count': count(items) });
return new Response(body, { headers: { 'content-type': 'application/json' } });
}
return realFetch(input, init);
};
// ---------------------------------------------------------------------------
registerComponents(Action, FetchShopifySection, Transition);
```
The form submits its state to the server, which does the filtering and returns the rendered sections; the browser only swaps them in. This builds directly on the [Section Rendering API](/articles/shopify-section-rendering-api-example), so read that first if the `?sections=` pattern is new to you.
## A form drives the request
Shopify already filters and sorts collections from URL parameters. Storefront filtering reflects every applied facet in the URL, and `sort_by` controls the order. So the browser's job is small: gather the customer's choices into those parameters and ask the server to re-render.
A `
```
Two things carry the behaviour. `data-component="FetchShopifySection"` enhances the form, and the `sections` option lists the sections to render — the component appends them to the request as `?sections=…` and unwraps the JSON response, so it swaps each section by `id` with no `response` boilerplate, exactly as in the Section Rendering article. `data-option-history` is safe here: `FetchShopifySection` strips the `sections` parameter from the URL it pushes, so the address bar keeps the shareable, refresh-safe facet URL and a reload never loads raw section JSON.
## Submitting on change
Customers expect the grid to react as soon as they tick a box, so submit the form on `change`. [`Action`](https://ui.studiometa.dev/components/Action/) wires that up declaratively: listen for `change` on the form and submit it.
```html
```
`requestSubmit()` fires the form's submit event, which `FetchShopifySection` intercepts. The same element carries the loader wiring: [`Transition`](https://ui.studiometa.dev/components/Transition/) shows a spinner between `fetch-before` and `fetch-after`. Keep a `