Project portfolio Browse selected work

Shopify Plus: up to US$4,800 development credit

Shopify headless storefront development

Build a storefront around your brand, with Shopify handling products, cart and checkout.

chatbot-hero-dark
shapes
shapes

What is Shopify headless?

Build the storefront separately. Use the Storefront API for products and cart, and Shopify for checkout.

image

Flexible content management

Connect a content management system if you need separate editing for articles or landing pages. Keep products in Shopify.

image

Improve speed where it matters

Choose how pages load and cache based on content and traffic. Test load times on real devices.

image

Connect existing systems

Before connecting product, inventory or customer systems, decide who maintains the data and how to handle failed updates. Explore WESWOO's integration service.

Connect your storefront with the Storefront API

Hydrogen: Shopify’s toolkit for custom storefronts. It handles tasks such as variant selection and cart, and works with different frameworks.
Oxygen: Shopify’s hosting platform for the official React Router starter.

Version note: Hydrogen 2026-10 works with different frameworks. For a legacy project, consult the official migration guide for migration steps.

View API Documentation
explore
summery
summery
summery
explore
summery

Multipass and customer sign-in

Eligible Plus stores already using Multipass can keep it. New stores can’t enable it; new integrations should use a third-party identity provider.

Read the technical guide

Connect the buying journey

Connect products and cart to Shopify checkout, then test sign-in and ordering.

Start building

Set up payments and channels by market

Shopify Payments and sales channel availability depend on your location, business type and account eligibility.

Online payments

Choose payment methods based on your business location and eligibility.

Faster checkout

Use Shop Pay for faster checkout where available.

Run a test order

Use a test order to check that customers can pay.

  • Currency and payment methods
  • Mobile checkout
  • Fraud checks and authentication
Shopify Payments
Channel setup

Shopify POS

Connect online and in-store inventory.

Sales channels

Connect social or marketplace channels based on market and account eligibility.

Check syncing first

Check store inventory, then test online and in-person orders.

  • Product availability
  • Order syncing
  • Inventory syncing
Discuss channel integration

Shopify Flow

Send low-stock alerts or tag orders automatically.

Shopify Functions

Customize discounts, payment or delivery rules within your plan and app limits.

Test rules first

Check triggers and exceptions in a test environment.

  • Triggers
  • Apps and permissions
  • Exception handling
Discuss workflow automation

Choose a frontend framework

Next.js

A React framework for server-rendered and prebuilt pages.

Plan rendering, caching and hosting. Search visibility depends on content and implementation.

An option for teams already using React.

Shopify Hydrogen

Start with a React Router or Next.js starter, or add Hydrogen to an existing framework.

Use Shopify's commerce tooling for product data, cart interactions, and checkout handoff.

Check your framework, hosting and maintenance needs before choosing a setup.

Review Hydrogen migration and maintenance scope

Vue.js / Nuxt.js

Use Vue to build a custom storefront.

Check rendering, data access and deployment before connecting Shopify.

Start here if your team already works with Vue.

Astro

An option for content-led sites that need interaction on some pages.

Plan client-side interactions and keep commerce data up to date.

Test products, cart and checkout before choosing it.

Gatsby

Consider Gatsby if you already run a Gatsby or content-heavy React site.

Check maintenance, integrations and build requirements.

Check product updates and content previews.

Svelte / SvelteKit

Build a custom storefront with Svelte.

Svelte compiles components; connect to Shopify with a client of your choice, such as Apollo.

An option if your team knows Svelte and can maintain it.

Launch and maintenance

Test checkout and how failures are handled before publishing the live store.

  • Test peak traffic
  • Cache and refresh pages
  • Track API errors
Discuss your project
company image

Shopify Hydrogen development, migration and maintenance

Plan a new Hydrogen storefront or review an existing build for an upgrade or handover. Start with the current code and the shopping journeys you need to keep working.

What to share before a quote

Versions and runtime
Share the Hydrogen and framework versions from package.json, plus the Node.js version or other runtime. Flag any legacy Remix dependencies.
Hosting and preview
Name the current and target host, such as Oxygen or Vercel, and tell us whether a preview environment is available.
Shopping and accounts
Identify the target markets, product variants, cart, checkout handoff and customer sign-in flows that need to be tested.
Search and redirects
List the product and collection URLs to keep, along with redirect rules, server-rendered metadata and structured data.
Integrations
List the apps, content systems and business integrations the storefront depends on. Include any Liquid app blocks that need an API-based replacement.

Launch acceptance and ongoing support

Agree the checks for redirects, search metadata and the shopping path in preview, and record how to roll back the release. Scope support separately from the build. Confirm who will track Storefront and Customer Account API versions, check rendering and caching, and investigate API errors after launch.

Open the Hydrogen upgrade checklist or compare build and running costs.

View WESWOO’s Shopify Partner Directory profile.

Discuss your Hydrogen project

Shopify headless questions before you build

What does Shopify headless mean?

Shopify headless keeps Shopify as the commerce backend while a custom frontend presents the storefront. Your frontend connects to Shopify APIs for commerce data and customer journeys, with checkout handed off to Shopify.

When is a headless Shopify build a fit?

Consider headless when your storefront experience, content workflows or system connections are difficult to deliver with the existing theme and apps. The decision also depends on account requirements, target markets and the resources available to maintain the frontend and integrations after launch.

What determines the cost of a headless storefront?

Liquid theme or separate frontend
First test whether a theme and apps meet your market, product and purchase needs. Prototype any missing editing, interaction or integration features before choosing headless.
Four one-off workstreams
Price architecture, design, frontend and API work, and integration testing separately. Define templates, markets, accounts and checkout; include redirects, data migration, analytics and rollback for rebuilds.
First-year running costs
Account for Shopify subscription and transaction fees, hosting, CMS, search, app changes, monitoring and support. Check hosting costs against your plan and runtime.

Open the Headless budget checklist

Explore the TERMINO Framer and Shopify Storefront API case study for an implementation covering product configuration, enquiry and showroom entry points.

Common implementation challenges

Review the constraints before choosing a custom frontend

Ask a Shopify Expert
  • Load speed optimization
    Review third-party scripts and their loading cost

  • Theme architecture
    Liquid-theme JSON templates or section groups can render up to 25 sections; assess a custom frontend against its own architecture.

  • Interaction design
    Balance animation, usability, and page performance

Agree the delivery scope, then validate the launch

Assess both the customer journey and ongoing maintenance. Use these items to discuss project scope and acceptance evidence; agreed deliverables depend on the project.

Architecture and ownership
Map Shopify, the frontend, content systems and accounts. Record hosting, versions and maintenance owners.
Shopping and checkout
Validate product, variant, cart, account and checkout-handoff journeys with test records and failure-recovery paths.
Content and search
Check accessible main content, canonical URLs, language relationships and internal links. Technical acceptance does not guarantee indexing or AI citations.
Performance and operations
Agree devices, networks, pages and measurement windows. Record cache refresh, API errors, monitoring and rollback steps.