Shopify Headless — Concerns & Decisions

01

High

Checkout customisation

Shopify-hosted checkout cannot be themed beyond logo + colors + fonts unless on Shopify Plus.

Checkout Open

The problem

Headless storefronts redirect users from Next.js → Shopify-hosted checkout via the checkoutUrl returned by Storefront API. On Basic / Shopify / Advanced plans this checkout cannot be replaced with custom React — only branded.

What you can still customise on Basic ($39/mo)

Logo upload
Primary brand color (sage #949584) on buttons / links
Accent + background colors
Heading + body fonts (Google Fonts or upload)
Button shape (square → matches editorial sharp corners)
Form input style (underline vs box)
Custom checkout subdomain: checkout.housenine.co.uk

What requires Plus (~$2,300/mo)

Full checkout UI customisation via Checkout Extensibility
Custom React components on the checkout page
Pixel-perfect editorial layout matching Silver Editorial typography

Recommendation: Launch on Basic. Brand-matched hosted checkout (sage CTAs, Cardo/Karla fonts, warm bg) is acceptable for v1. Upgrade to Plus only if client demands fully editorial checkout or revenue justifies it (~$1M+/yr).

Decision

SeverityHigh

OwnerClient

BlocksPlan tier choice

EffortLow (config)

Notes

02

Medium

Customer account pages

Login, register, order history — hosted by Shopify by default; full custom requires extra dev.

Account Open

The problem

Shopify ships "New Customer Accounts" — a hosted UI for login, profile, order history, addresses. It has the same theming limits as checkout: brand colors + fonts only, no layout control.

Options

Option	Effort	Brand fit	Notes
Shopify-hosted	None	Medium	Brand colors + fonts. Off-layout, but functional.
Custom in Next.js	+5–10 days	Perfect	Use Customer Account API for auth, orders, addresses.

Recommendation: Go fully custom in Next.js. The editorial brand demands a coherent account experience — same fonts, same warm palette, same layout language as the rest of the site. Use Storefront API customer mutations for v1 (self-hosted email/password, no redirects), with a planned migration to Customer Account API later as Shopify deprecates the legacy endpoints.

Self-hosted login flow (Storefront API)

You can build the entire login UI in your Next.js app — no redirect to Shopify, no off-brand pages.

customerAccessTokenCreate — login, returns access token
customerCreate — registration
customerRecover / customerReset — password reset flow
customer(customerAccessToken:) — fetch profile, addresses, orders
customerUpdate — edit profile

Store the token in an httpOnly cookie. User stays on your domain the whole time.

Migration note: Shopify is deprecating Storefront API customer mutations in favor of the OAuth-based Customer Account API. Plan a future migration (likely 1–2 year horizon) — but this doesn't block launch.

Decision

SeverityMedium

OwnerClient / Dev

Effort+5–10 days if custom

Notes

03

Medium

Editorial content management

Homepage editorial blocks, Collabs, Vintage story, Trade page — Shopify Pages is clunky for this.

Content Open

The problem

The design has heavy editorial sections (split heroes, three-up panels, feature banners, marquee press strip, editorial features). Shopify Pages = plain rich-text editor, which can't model these structured layouts. The content team will struggle.

Options

Option	Cost	Authoring UX	Notes
Shopify Metaobjects	Free	OK	Native to Shopify. Strict schemas. Authors stay in one tool.
Sanity	Free → paid	Excellent	Best block editor. Adds a 2nd CMS for non-product content.
Contentful	$300+/mo	Good	Enterprise-ready. Probably overkill here.
Hardcoded MDX	Free	Dev-only	Fast to ship, no client edit. Only viable if content rarely changes.

Recommendation: Sanity from day one. The design is heavily editorial — homepage blocks, Collabs, Vintage story, project case studies, press features, book landing — and the content team will need a real block editor with reorderable sections, rich media, and visual previews. Metaobjects can't model that well. Sanity's authoring UX is the best in class and the free tier covers a brand at this scale.

What Sanity gives you

Visual block editor with custom Portable Text blocks per section type
Reorderable page builder (drag-drop hero / press strip / editorial blocks)
Live preview alongside Next.js with draft mode
Asset pipeline with on-the-fly image transforms
Webhooks → trigger Next.js ISR revalidation on publish

Decision

SeverityMedium

OwnerClient (content team)

Effort+3–5 days for Sanity

Notes

04

Medium

Trade programme (gated pricing)

B2B / professional discounts need customer-tag gating or Shopify Plus B2B features.

B2B Open

The problem

The Shopify "Trade" page exists, but the design doesn't specify the mechanism. Trade users typically need: (a) approval workflow, (b) discounted prices visible only after login, (c) sometimes net-30 terms.

Options on Basic plan

Customer tags — tag approved trade customers, apply automatic discount via Shopify Functions or app
Hidden products / collections — gate behind login check in Next.js
Third-party app — e.g. "Wholesale Club", "B2B Wholesale Pro"

Plus B2B (native)

Built-in catalogues, price lists, company accounts, payment terms. Cleaner but only worth it if trade is a meaningful revenue stream.

Action needed: Confirm with client what "Trade" actually means — is it just a marketing page + form, or full gated catalogue with discounted pricing?

Decision

SeverityMedium

OwnerClient

EffortDepends on scope

Notes

05

Medium

Third-party apps compatibility

Many Shopify apps inject Liquid and won't work headless. Need to audit each.

Apps Open

The problem

Themed Shopify stores rely on apps that inject Liquid snippets. In a headless Next.js store, those apps either need a Storefront/Admin API, or won't work at all.

Common app categories

Category	Headless-friendly options
Email / SMS marketing	Klaviyo ✓ (full API)
Reviews	Judge.me ✓, Yotpo ✓, Okendo ✓
Search / filters	Algolia ✓, Searchspring ✓, Shopify Search & Discovery ✓
Loyalty / rewards	Smile.io ✓, LoyaltyLion ✓
Upsell / cross-sell	Most require Liquid — check per-app
Analytics / pixels	GA4, Meta, TikTok ✓ via Next
Currency / geo	Shopify Markets native ✓

Action needed: Ask client for their must-have apps list. Vet each before scoping.

Decision

SeverityMedium

OwnerClient

EffortPer-app integration

Notes

06

Low

FAQs & policy pages

Where do Terms / Privacy / Delivery / Returns / FAQs live? Shopify Pages or Next.js?

Content Open

Options

Shopify Pages — Editable in Shopify Admin. Fetched via Storefront API. Good if client updates frequently.
Shopify Policies (Terms / Privacy / Refund / Shipping) — native section in Admin, fetched via Shop.shopPolicies query. Recommended for legal pages.
MDX in repo — Fast, version-controlled, no Shopify dependency. Client edits via Git/PR (not ideal for non-devs).

Recommendation: Since Sanity is in for editorial content, model FAQs as a Sanity document type with categories + Q&A array — gives the editorial-styled accordion the design calls for. Keep legal pages (Terms / Privacy / Refund / Shipping) on Shopify's native Policies so they stay synced with checkout footer. Delivery info also in Sanity (richer than a plain page).

Decision

SeverityLow

OwnerDev

Effort~1 day

Notes

07

Low

Vintage one-off SKUs

Single-stock pieces work fine, but sold-out UX needs design treatment.

Catalogue Open

The problem

Vintage pieces are qty = 1. Once sold, the SKU stays in the catalogue. Need a clear "Sold" state matching the editorial aesthetic — and decide whether sold items stay visible (good for SEO/social) or are hidden.

Considerations

Inventory tracking on each variant (default Shopify behaviour)
"Sold" tag/badge styling — sage outline label? Strikethrough? "Find similar" link?
Notify-me on out-of-stock? (probably not for one-offs)
Auto-hide after X days sold? (custom logic)

Recommendation: Keep sold items live with a "Sold" badge — adds editorial richness and social proof. Confirm with client.

Decision

SeverityLow

OwnerDesigner + Client

EffortDesign + ~1 day dev

Notes

08

Low

Site search & filtering

Shopify native search works, but advanced facets may need Algolia for catalogues over ~500 SKUs.

Search Open

Native search via Storefront API

Shopify's Search & Discovery API is free, supports keyword search, basic filters, predictive suggestions, and product recommendations. Works fine for small-to-medium catalogues.

When to consider Algolia / Searchspring

Catalogue > 1000 SKUs with complex faceting
Need typo-tolerance, synonyms, merchandising rules
Custom relevance scoring

Recommendation: Build with Algolia from launch. Sub-50ms search-as-you-type, typo tolerance, synonyms, merchandising rules, and dedicated analytics. The brand is editorial and discovery-driven (vintage one-offs, art store, collabs) — search needs to feel curated, not basic. Algolia free tier covers up to 10k records and 10k searches/month, enough for v1.

What Algolia gives over native

InstantSearch.js / React InstantSearch widgets for facets, filters, refinements
Typo tolerance + synonyms ("sofa" ↔ "couch")
Visual merchandising rules (pin specific products at top)
Search analytics (top queries, no-result queries, click-through)
Search-by-category, by-color, by-material via faceted attributes

Decision

SeverityLow

OwnerDev

Effort+5 days for Algolia

Notes

09

Info

Shopify plan tier — Basic is fine

Basic ($39/mo) fully supports headless + hosted-checkout redirect. Plus only needed for editorial checkout.

Cost Open

What works on Basic ($39/mo)

Feature	Available on Basic?
Storefront API (Next.js reads products/cart)	✓ Yes — free on all plans
Cart creation + `checkoutUrl` redirect	✓ Yes — built-in
Hosted checkout page	✓ Yes
Basic checkout branding (logo, colors, fonts)	✓ Yes
Custom checkout domain	✓ Yes
Full checkout UI customisation	✗ Plus only
Native B2B	✗ Plus only

Plan recommendation: Launch on Basic. Save ~$2,200/mo vs Plus. Upgrade only when revenue or trade requirements justify it.

Decision

SeverityInfo

OwnerClient

Cost (Basic)$39/mo

Cost (Plus)~$2,300/mo

Notes