Framework choices
- Hydrogen — Shopify's official React framework
- Next.js — most popular, Shopify partnership
- Nuxt — Vue equivalent
- SvelteKit — lightweight
Variants in headless
Query via Storefront API GraphQL. Render custom variant picker (buttons, swatches, dropdown). Add to cart via cartLinesAdd.
Personalization
Line-item properties as attributes on cart lines. Personalizer apps expose their own API (Print It My Way, Zakeke).
Checkout — still Shopify
Even headless storefront uses Shopify Checkout URL. Send customer to myshop.com/cart/c/{cartId} for checkout.
Frequently asked questions
Should I go headless on Shopify?
For custom UX beyond theme customization, yes. Cost: developer team + Hydrogen or Next.js setup.
Best framework for headless Shopify?
Hydrogen (official). Next.js (popular). Both have starter templates.
Variants in headless — same limits?
Yes — 3 options / 2,048 variants per product apply regardless of frontend.
Personalization apps in headless?
Depends on app. Print It My Way, Zakeke expose APIs. Others may require theme block.
Headless checkout on Shopify?
Uses Shopify Checkout URL. Cart created via Storefront API, checkout redirects to Shopify domain.
SEO for headless Shopify?
SSR (Server-Side Rendering) required. Hydrogen + Next.js both SSR-capable.
Cost of headless Shopify?
Shopify plan + hosting (Vercel, Netlify, Oxygen) + developer time. Total $500-$5,000/mo depending on scale.
Migrate theme to headless?
Rebuild storefront in Hydrogen/Next.js. Preserve products + orders (Shopify backend unchanged).
Related reading
Try it free on Shopify
Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install Print It My Way