Headless Shopify, without the headaches

Shopify handles payments, inventory, and checkout better than anything I'd build myself. But its themes box you in. Headless keeps the commerce engine and hands you a blank canvas for the front end.

Keep the data layer in one place

Every storefront I build centralises its GraphQL queries and types in a single typed module, so the rest of the app never touches the network directly:

export async function getCollection(handle: string) {
  const data = await storefront<CollectionQuery>(COLLECTION_QUERY, { handle });
  return data.collection;
}

Hand checkout back to Shopify

Don't reinvent checkout. Build the cart yourself for full control over the experience, then redirect to Shopify's hosted checkout for the part that has to be bulletproof:

1. Cart state lives client-side, persisted to localStorage.
2. On "Checkout", create a cart via the Storefront API.
3. Redirect to the returned checkoutUrl.

Content stays fresh with ISR

Product copy and blog posts authored in Shopify Admin appear within a minute using incremental static regeneration, no redeploy:

export const revalidate = 60; // seconds

The payoff: a storefront that looks bespoke and loads like a static site, with Shopify still doing the heavy lifting behind the scenes.