---
date: 2026-07-31
title: Shopify AJAX cart drawer
description: Build a Shopify AJAX cart drawer with @studiometa/ui. Add to cart and open an accessible slide-in drawer with the Cart AJAX API and progressive enhancement.
tags: shopify, cart-drawer, ajax-cart, progressive-enhancement, studiometa-ui
---
# Shopify AJAX cart drawer
31/07/2026 in #shopify #cart-drawer #progressive-enhancement
> **The series**
>
> **Part 5 of 7** of the series [Building a Shopify storefront with @studiometa/ui](/articles/building-a-shopify-storefront-with-studiometa-ui).
>
A cart drawer confirms an add-to-cart in a panel that slides in, without leaving the page. It also has the most moving parts: an accessible overlay, a focus trap, a scroll lock, and a cart that stays in sync. [`@studiometa/ui`](https://ui.studiometa.dev) gives you the drawer and the AJAX wiring as components, on top of [`@studiometa/js-toolkit`](https://js-toolkit.studiometa.dev).
Add a product below. The item posts to the cart, the drawer refreshes and slides in, and the count updates:
```twig
My shop
Adding…
Cap · €25
Tote · €18
Mug · €12
```
```css
/* demo.css */
/* The native ::backdrop cannot be class-transitioned; animate our own. */
dialog::backdrop { background: transparent; }
/* Pin the panel above the backdrop; some Chromium versions mis-order the
top-layer view-transition snapshots and grey the panel out otherwise. */
::view-transition-group(cart-panel) { z-index: 2; }
::view-transition-group(cart-backdrop) { z-index: 1; }
/* The panel slides in from / out to the right edge. */
@keyframes cart-slide-in { from { transform: translateX(100%); } }
@keyframes cart-slide-out { to { transform: translateX(100%); } }
::view-transition-new(cart-panel) { animation: 300ms ease-out both cart-slide-in; }
::view-transition-old(cart-panel) { animation: 300ms ease-in both cart-slide-out; }
/* Backdrop fades in / out. */
@keyframes cart-fade-in { from { opacity: 0; } }
@keyframes cart-fade-out { to { opacity: 0; } }
::view-transition-new(cart-backdrop) { animation: 300ms ease-out both cart-fade-in; }
::view-transition-old(cart-backdrop) { animation: 300ms ease-in both cart-fade-out; }
```
```ts
// demo.ts
import { registerComponents } from '@studiometa/js-toolkit';
import { Action, Fetch, Dialog, ViewTransition, Transition } from '@studiometa/ui';
// --- Simulated Cart AJAX API ------------------------------------------------
// Shopify's POST /cart/add.js returns the added line item (id, key, quantity,
// title, …), and when a `sections` parameter is sent it also includes a
// `sections` key with the rendered HTML for each requested section (bundled
// section rendering). We reproduce that here with an in-memory cart. Delete
// this block to hit the real endpoint.
type Line = { id: string; title: string; price: number; qty: number };
const catalog: Record = {
'101': { title: 'Cap', price: 25 },
'102': { title: 'Tote', price: 18 },
'103': { title: 'Mug', price: 12 },
};
const cart: Line[] = [];
function drawerSection() {
if (!cart.length) {
return '
Your cart is empty.
';
}
const items = cart
.map(
(l) =>
`
${l.title} × ${l.qty}€${l.price * l.qty}
`,
)
.join('');
return `
${items}
`;
}
function countSection() {
const n = cart.reduce((sum, l) => sum + l.qty, 0);
return `${n}`;
}
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.pathname.endsWith('/cart/add.js')) {
const body = init?.body;
const id = body instanceof FormData ? String(body.get('id')) : '101';
const product = catalog[id];
let line = cart.find((l) => l.id === id);
if (line) line.qty += 1;
else if (product) {
line = { id, title: product.title, price: product.price, qty: 1 };
cart.push(line);
}
await new Promise((resolve) => setTimeout(resolve, 400)); // fake latency
// /cart/add.js returns the added line item, plus a `sections` object because
// the form sent a `sections` param (bundled section rendering).
const payload = {
id: line?.id,
quantity: line?.qty,
title: line?.title,
sections: { 'cart-drawer': drawerSection(), 'cart-count': countSection() },
};
return new Response(JSON.stringify(payload), { headers: { 'content-type': 'application/json' } });
}
return realFetch(input, init);
};
// ---------------------------------------------------------------------------
registerComponents(Action, Fetch, Dialog, ViewTransition, Transition);
```
The drawer traps focus, closes on Escape and locks the background scroll; all three come from the native `