Build or Buy Headless Preview Environments on Shopify?
Headless preview environments are a WAIT on Shopify: Hydrogen on Oxygen gives every deployment its own preview URL at no extra cost, with shareable reviewer links on Basic plan or above (verified Sep 2026). Self-hosted storefronts get the same from Netlify's free tier or Vercel Pro at $20/month (verified Sep 2026). Build only the piece no host provides: a preview data path for unpublished products and draft content, $8,000–$20,000 (Deploi estimate, illustrative).
Your profile — see how the verdict shifts
- Confidence
- High — Read Shopify's Hydrogen deployments and fundamentals docs: every deployment has its own unique preview URL to view, test or approve changes before merging; stores on Basic or above can create shareable links so anyone can view a deployment; Oxygen is included at no additional charge on Starter, Basic, Grow, Advanced, Plus and Pause and Build plans but isn't available on Agentic plans (verified Sep 2026). Read Vercel's and Netlify's pricing pages for deploy-preview terms and add-on prices. Searched the App Store for preview or staging-environment apps for headless storefronts and found none; the capability lives in the host, not the App Store. The preview-data-path build band is a Deploi estimate.
- Reference scenario
- $20M–$100M revenue · Hydrogen storefront on Oxygen, or Next.js on Vercel · a merchandising team of 3–6 reviewing weekly campaign changes · in-house or agency dev bench
- As of
- September 2026
Decision at a Glance
| Your profile | Verdict | Why |
|---|---|---|
| Hydrogen deployed to Oxygen | WAIT | Every deployment already has a unique preview URL, and Basic plan or above can share links so reviewers see it without a login (verified Sep 2026). The preview link the merchandiser asked for exists today; someone has to send it. |
| Hydrogen or Next.js self-hosted on Vercel or Netlify | WAIT | Deploy previews are a project setting, not a purchase: Netlify includes unlimited deploy previews on its $0 Free tier and Vercel Pro is $20/month (verified Sep 2026). No Shopify app is involved at any point. |
| Merchandisers need to preview unpublished products, draft content or scheduled campaigns | CUSTOMIZE | A deploy preview renders the branch against the published catalog, so the product the campaign is about previews empty. A staff-only preview data path that reads drafts fixes it, $8,000–$20,000 (Deploi estimate, illustrative), and no host ships one. |
| Several storefronts or markets on one codebase, with brand or legal sign-off gates | CUSTOMIZE | One preview per market means one Storefront API token per environment and an approval recorded against each preview before merge. The host gives you the environments; the approval trail and the token map are yours to build. |
What Headless preview environments Actually Drives
| Outcome | Impact | How it works |
|---|---|---|
| Operational efficiency | High | A merchandiser who opens a link and approves a change before it merges ends the loop where every campaign page goes live first and gets fixed second. |
| Customer experience | Medium | Changes reviewed on a preview against real catalog data ship without the broken-layout hour that a live-first workflow produces on launch morning. |
| Revenue — indirect | Low | Preview environments protect revenue rather than create it; the value is the campaign that launches on time with the right product visible. |
| Data & insight | Low | An approval trail on previews records who signed off on which page, which starts to matter once brand or legal review becomes a merge gate. |
Spend ceiling: Spend nothing on the deploy preview itself: Oxygen includes it, Netlify's free tier includes unlimited deploy previews and Vercel Pro is $20/month (verified Sep 2026). Reserve budget for the one thing no host gives you, a preview data path for unpublished content at $8,000–$20,000 (Deploi estimate, illustrative), and only once merchandisers ask to see drafts.
What buying enables (top apps)
- + A unique preview URL for every deployment on Oxygen, with shareable links for reviewers on Basic plan or above (verified Sep 2026)
- + Unlimited deploy previews and branch or pull-request previews on every Netlify tier, including the free one (verified Sep 2026)
- + Vercel preview deployments on Pro at $20/month, with custom preview URL suffixes and deployment protection as paid add-ons (verified Sep 2026)
- + Zero maintenance: the host owns the build pipeline, the ephemeral environments and the TLS
What building additionally unlocks
- + A preview mode that renders unpublished products, draft metaobject content and scheduled campaign pages, which deploy previews never show
- + Per-market or per-storefront preview environments pointed at different Storefront API tokens from one codebase
- + An approval trail: who reviewed which preview, and a merge gate that waits for merchandising sign-off
Find Your Verdict in 3 Questions
Is the storefront Hydrogen deployed to Oxygen?
Yes: Your verdict: WAIT — every deployment already has a unique preview URL, and Basic plan or above can share links with reviewers (verified Sep 2026).
No: Go to question 2.
Is the storefront on Vercel or Netlify with deploy previews switched on for pull requests?
Yes: Go to question 3.
No: Your verdict: WAIT — switch previews on in project settings; Netlify includes unlimited deploy previews on its free tier and Vercel Pro is $20/month (verified Sep 2026). No Shopify app is involved.
Do merchandisers need to see unpublished products, draft content or scheduled campaign pages in the preview?
Yes: Your verdict: CUSTOMIZE — keep the host's previews and build a staff-only preview data path, $8,000–$20,000 (Deploi estimate, illustrative).
No: Your verdict: WAIT — the host's deploy previews already cover code review; spend nothing more.
The TCC Scorecard — 12 Dimensions
TCC — Total Cost of Capability: what it actually costs to have this capability over three years, whichever way you get it. Each dimension is scored 0–5 for both paths. How we score →
| Dimension | Buy | Build | Why |
|---|---|---|---|
| Cost | |||
| Acquisition & implementation | Oxygen preview URLs exist the moment you deploy and Vercel or Netlify previews are a project setting; a preview data path plus access control is a 3–6 week build (Deploi estimate, illustrative). | ||
| Recurring fees | Oxygen is included at no additional charge on Basic through Plus, Netlify's free tier includes unlimited deploy previews and Vercel Pro is $20/month (verified Sep 2026); the build's recurring line is upkeep only. | ||
| Maintenance & upgrades | The host maintains the build pipeline, the ephemeral environments and the TLS; a custom preview data path owns its Admin API version bumps and token rotation. | ||
| Switching & exit | Preview URLs hold no data; moving between Oxygen, Vercel and Netlify is a deployment-adapter and DNS change, and a custom data path is repo code that moves with the storefront. | ||
| Risk | |||
| Vendor risk | Oxygen is first-party and Vercel and Netlify are established hosts; the live risk is plan gating, since Oxygen isn't available on Agentic plans (verified Sep 2026), not vendor collapse. | ||
| Security & compliance surface | Preview URLs expose unreleased pricing and campaigns; Oxygen shareable links are plan-gated and Vercel sells Advanced Deployment Protection at $150/month (verified Sep 2026), while a custom route that reads drafts through the Admin API needs staff-only auth you maintain. | ||
| Platform-deprecation exposure | Oxygen worker limits of 10MB, 400ms startup, 30 seconds CPU per request and 128MB memory (verified Sep 2026) bound what runs there; a self-hosted storefront trades that for host-platform churn. | ||
| Value | |||
| Fit to requirement | Deploy previews show a code branch against the live published catalog; only a built preview data path shows a merchandiser the unpublished product or the draft campaign page, which is what the review request usually means. | ||
| Time to market | A shareable preview link today; a draft-content preview mode in 3–6 weeks (Deploi estimate, illustrative). | ||
| Performance & scale | Previews scale with the host plan, and Netlify adds preview servers at $15 each on Personal and Pro (verified Sep 2026); a custom data path adds Admin API calls that count against the store's rate limit. | ||
| Data ownership & AI-readiness | Nothing here is customer data; the asset is the review trail of who approved which page and when, which no host records for merchandisers and a custom approval gate does. | ||
| Focus & opportunity cost | Preview infrastructure is undifferentiated; every hour spent rebuilding what Oxygen or Netlify gives away is an hour not spent on the storefront itself. | ||
The App Landscape
| App | Status | Pricing | Best for |
|---|---|---|---|
| Oxygen (Hydrogen deployments) | Native — First-party hosting for Hydrogen. Every deployment has its own unique preview URL so you can view, test or approve changes before merging and deploying to production; stores on the Basic plan or above can create shareable links that let anyone view deployments. Redeployments and rollbacks are available for production and custom environments, not the preview environment. Workers are capped at 10MB size, 400ms startup, 30 seconds CPU per request and 128MB memory. | Included at no additional charge on Starter, Basic, Grow, Advanced, Plus and Pause and Build plans; not available on Agentic plans (verified Sep 2026) | Any Hydrogen storefront; the preview link the merchandiser asked for already exists |
| Vercel | Live — Platform integration; no App Store listing. A general frontend host whose preview deployments come with the plan; a custom Preview Deployment Suffix and Advanced Deployment Protection for preview and production URLs are paid add-ons. Pro developer seats are $20/month each with unlimited viewer seats included. | Hobby $0 / Pro $20 per month / Enterprise custom; Preview Deployment Suffix add-on $100/month, Advanced Deployment Protection $150/month (verified Sep 2026) | Next.js storefronts already deployed there; reviewers cost nothing as viewer seats |
| Netlify | Live — Platform integration; no App Store listing. Every tier, including Free, includes unlimited deploy previews and branch and pull-request previews, with one Preview Server included; additional preview servers are $15 each on Personal and Pro. | Free $0 forever / Personal $9 per month / Pro $20 per month with unlimited members / Enterprise custom (verified Sep 2026) | Self-hosted storefronts that want previews at no cost before any plan decision |
| Preview data path for unpublished content (custom) | Build lane — A staff-only preview route in the storefront that resolves unpublished products, draft metaobject entries and scheduled pages through an authenticated Admin API read or a staging store, plus a visible preview banner and an approval check on the pull request. Sits on top of the host's own deploy previews rather than replacing them. | $8,000–$20,000 one-time plus ~15–20% a year in upkeep (Deploi estimate, illustrative) | Merchandising teams who need to see the campaign before the catalog goes live |
The Build Path
- Environment wiring: One Storefront API token and one set of environment variables per environment (production, staging, preview), so a preview never reads the wrong store. On Oxygen this is the custom-environment feature; on Vercel or Netlify it is project environment settings. A day of work, and the part most teams skip.
- Preview data path: A staff-only preview route that resolves unpublished products and draft metaobject entries through an authenticated Admin API call, or points at a staging store where drafts are published, so merchandisers see the campaign page before the catalog goes live.
- Access control: Previews expose unreleased pricing and campaigns. Use Oxygen's plan-gated shareable links, Vercel's deployment protection (Advanced Deployment Protection is $150/month, verified Sep 2026) or SSO in front of Netlify previews, and rotate the preview token separately from production.
- Optional: approval gate: A pull-request check that waits for a merchandising approval recorded against the preview URL, so nothing merges without the sign-off the review request was really asking for.
- Effort band
- $8,000–$20,000 build — Deploi estimate (illustrative); lands in the $10–25K contact-form band. The deploy previews themselves cost nothing to build
- Typical timeline
- 3–6 weeks (Deploi estimate, illustrative) for the preview data path, access control and approval gate; environment wiring is a day
- Maintenance, honestly
- ~15–20% of build cost per year (Deploi estimate): roughly $1,500–$4,000/yr (Deploi estimate, illustrative) for Storefront and Admin API version bumps and token rotation. There is no subscription line beyond the host plan you already pay.
- What you own — and what you take on
- You own: the preview data path, the environment map and the approval trail. You take on: keeping the preview route staff-only, and the Admin API calls it makes against your store's rate limit.
3-Year Total Cost of Capability
| Buy (app path) | Build (custom path) | |
|---|---|---|
| Year 0 (setup) | $0–$1,000 (project configuration) | $8,000–$20,000 |
| Years 1–3 (recurring) | $0–$720 | $4,500–$12,000 (maintenance) |
| 3-year total | ≈$0–$1,720 | ≈$12,500–$32,000 |
- † All figures illustrative samples for the reference scenario — not quotes, not verified pricing.
- † Buy path: Oxygen (included) or Netlify's free tier at $0, up to Vercel Pro at $20/month (verified Sep 2026); Vercel's $100/month preview-suffix and $150/month deployment-protection add-ons are excluded.
- † Build path: the preview data path, access control and approval gate on top of the host's own previews, which stay in place; three-year horizon with upkeep at 15–20% of build cost.
What the Sticker Price Hides
On the buy path
- — Vercel's Preview Deployment Suffix ($100/month) and Advanced Deployment Protection ($150/month) add-ons (verified Sep 2026) cost more than the Pro plan itself; decide whether a custom preview domain is worth 5x the plan
- — Oxygen's preview environment cannot be redeployed or rolled back; only production and custom environments can (verified Sep 2026)
- — Oxygen isn't available on Agentic plans (verified Sep 2026); a plan change removes the hosting, not just the previews
- — A shareable preview link exposes unreleased pricing and campaigns to anyone holding it; treat the link as a credential
On the build path
- — A preview route that reads drafts through the Admin API is staff-only by design; skip the auth and you have published your drafts
- — Admin API calls from previews count against the store's rate limit alongside every installed app
- — A staging store drifts from production within weeks unless catalog sync is automated
- — ~$1,500–$4,000/yr upkeep (Deploi estimate, illustrative)
What Merchants Say
Headless teams describe the same first week: the merchandiser asks for the preview link and gets a Git branch name, and the campaign page ends up reviewed on production at 6 a.m. on launch day.
The recurring headless complaint is not the preview itself but what it shows: the branch renders, but the product the campaign is about is still unpublished, so the page previews empty.
If You Change Your Mind Later
If you bought and outgrow it
Preview environments hold no data, so leaving Oxygen for Vercel or Netlify, or the reverse, is a deployment-adapter and DNS change with a day of CI work. The one thing to carry across is the environment map: which Storefront API token each environment uses, so a preview never points at production by accident.
If you built and want out
The preview data path is application code in your storefront repo and moves with it to any host. If Shopify later ships a native draft-preview mode for the Storefront API, you delete a route, and the approval trail you kept remains yours.
When This Answer Changes
We're watching for:
- ▸ Oxygen adding redeploys or rollbacks to the preview environment (as of September 2026, only production and custom environments support them)
- ▸ Shopify shipping a draft-content preview mode for the Storefront API or Hydrogen (none as of September 2026)
- ▸ Your store moving to an Agentic plan, where Oxygen isn't available (verified Sep 2026)
Verdict change log:
No changes since first publication (September 2026).
Common Questions
Does Hydrogen on Oxygen give merchandisers a preview link?
Yes. Every Oxygen deployment has its own unique preview URL to view, test or approve changes before merging to production (verified Sep 2026). Stores on Basic or above can also create shareable links so anyone can view a deployment. Oxygen is included at no additional charge on Starter, Basic, Grow, Advanced, Plus and Pause and Build plans, and isn't available on Agentic plans. The preview renders the branch against the published catalog, not unpublished products.
Do Vercel and Netlify charge for preview deployments?
Netlify includes unlimited deploy previews and branch or pull-request previews on every tier, including the $0 Free plan (verified Sep 2026). One Preview Server is included, with additional preview servers at $15 each on Personal and Pro. Vercel previews come with Hobby at $0 and Pro at $20/month; a custom Preview Deployment Suffix is a $100/month add-on and Advanced Deployment Protection is $150/month (verified Sep 2026). Neither path involves a Shopify app.
Why does a headless preview show the campaign page empty?
A headless preview shows the page empty because the Storefront API serves only the catalog as published to your headless sales channel. A deploy preview renders the branch against live data, so an unpublished product or a draft metaobject entry never appears. The fix is a preview data path: a staff-only route reading drafts through the Admin API or a staging store, an $8,000–$20,000 build (Deploi estimate, illustrative). No host or Shopify app provides one.
Your Next Steps
If you're going with WAIT(matches your selected profile)
- Confirm where the storefront deploys: Oxygen, Vercel or Netlify; the preview link already exists in one of them
- Switch on pull-request previews and send one link to the merchandising lead this week
- Map one Storefront API token per environment so a preview never reads the wrong store
- Gate preview links: Oxygen shareable links, Vercel deployment protection or SSO in front of Netlify previews
- Diary a re-check the first time a merchandiser asks why an unpublished product is missing from the preview
If you're going with CUSTOMIZE
- Write down what merchandisers need to preview: unpublished products, draft metaobjects, scheduled pages or price changes
- Choose the data path: Admin API reads behind staff auth, or a staging store with automated catalog sync
- Build the staff-only preview route with a visible preview banner so nobody mistakes it for production
- Add the approval check to the pull request so merges wait for merchandising sign-off
Official Docs & Sources
- Hydrogen deployments and preview URLs — shopify.dev
- Getting started with Hydrogen — shopify.dev
- Theme architecture — shopify.dev
Official documentation linked for verification — our verdicts and estimates are our own.
Related Decisions
Build or Buy an Admin Activity Audit Log on Shopify?
Shopify records who signed in, never who changed a price. No app provides a field-level admin audit log, which makes this a build or nothing at all.
Build or Buy API and Webhook Deprecation Tracking on Shopify?
Shopify warns the whole world when an API version sunsets. Nothing tells you which of your own integrations still depends on it, and no app fills that gap.
Build or Buy API Rate-Limit and Throttling Management on Shopify?
No app manages Shopify Admin API rate limits across the apps on a store. Each app gets its own plan-sized bucket; your integrations need a rate-aware queue you own.
Build or Buy Checkout Extension and Theme App Conflict Debugging?
No app detects two Shopify apps fighting over the same extension point or cart drawer. The fix is a bisect runbook, an app register and a synthetic monitor you own.
Build or Buy Performance Monitoring & App Audits on Shopify?
Measurement is free on Shopify; storefront speed comes from an audit-and-remediation program, not a speed app.
Ready to give merchandising a real preview link?
On Oxygen, Vercel or Netlify the deploy preview is already yours, and we'll say so. When the team needs to see unpublished products and draft campaigns before they ship, we build the preview data path and the approval gate on top.
Contact us todayVerdict scored for the reference scenario above. Estimates are not quotes; platform pricing carries its verification date and gets re-verified quarterly. Full scoring anchors: see the TCC methodology.
Read how we score these decisions (the TCC Framework). No affiliate links, no paid placement — no app vendor pays to appear here.