Shopify Headless

Leverage the Shopify API to rapidly build highly customised user experiences

What is Shopify Headless?

In a headless architecture, the frontend and backend communicate via APIs, allowing the frontend to be deployed using any technology stack (React, Vue.js, Next.js, etc.).

Flexible content management

Integrate with Headless CMS platforms (such as Contentful, Sanity, etc.) to separate content from e-commerce functionality

Rapid performance

Enhance page loading speeds and SEO performance through Server-Side Rendering (SSR) and Static Site Generation (SSG)

Scalability and Flexibility

Flexibly integrates third-party services and tools like CRM, ERP, PIM, etc., to build e-commerce systems aligned with business processes

Shopify's GraphQL API facilitates data interaction with front-end applications

How to utilise the Storefront API

Hydrogen: Shopify's official React-based headless e-commerce framework;
Oxygen: Shopify's edge hosting solution for deploying Hydrogen applications;

View API documentation

Shopify Multipass is a single sign-on (SSO) solution exclusively for Shopify Plus merchants

Multipass Single Sign-On

Through Multipass, merchants can enable customers to automatically log in to their Shopify store after signing in on their existing website, eliminating the need for repeated login credentials and thereby enhancing user experience and conversion rates

Read the technical guide

Shopify Plus delivers powerful omnichannel capabilities, enabling brands to deliver consistent shopping experiences across multiple channels

Expand global e-commerce capabilities

Shopify Payments is the native payment system for Shopify Plus

GraphQL Storefront API

Hydrogen Shopify

Integrated Payments

Global payment support: accommodates over 133 currencies

Payments

Accelerated checkout: One-click checkout via Shop Pay

Native payment system

Shopify Payments is Shopify's native payment system

Multiple payment methods
Order Centralised Management
Anti-Fraud Tools
3D Secure and Risk Control Rules

Shopify Payments

Save 15%

Shopify POS

Real-time inventory synchronisation across online and offline channels prevents stockouts and overselling

Multi-channel integration

Supports over 100 social media platforms and 80 online marketplaces

Expand your brand's sales channels

Channels including Facebook, Instagram, Amazon, eBay, and more

Dynamic Product Customisation
Multi-channel distribution
Unified Inventory Management
Flexible Shopping Methods

Order channel distribution

Shopify Flow

Create automated tags, customer segments, inventory management and more without coding

Functions

Customise checkout logic to implement personalised promotions and pricing strategies

Automated promotions

Launch campaigns, update stock levels, apply discounts, run flash sales

Webhooks Event Subscription
Shopify Functions
Shopify Audiences
Automatic Tag Grouping

Deployment to Production

Hydrogen is the official React foundation framework from Shopify

Frontend Framework Integration

Next.js

Next.js is a React framework supporting static site generation (SSG) and server-side rendering (SSR)

Excellent SEO support, ideal for e-commerce websites requiring strong search engine rankings. Compatible with platforms such as Vercel and Netlify, offering high availability and rapid deployment.

Leverage the Shopify API to rapidly build highly customised user experiences

Hydrogen (officially recommended)

Works with Shopify's hosted platform Oxygen to provide globally distributed deployment

Deep integration with Shopify Storefront API, providing functional components such as shopping carts, checkout, and internationalisation

Ideal for e-commerce websites requiring high customisation and rapid responsiveness, particularly Shopify Plus users

Vue.js / Nuxt.js

Vue.js is a progressive JavaScript framework, with Nuxt.js being its official server-side rendering framework

Vue.js delivers a clean API and reactive data binding for ease of adoption, while Nuxt.js supports server-side rendering and static generation, ideal for building high-performance websites

Suitable for Vue.js developers, particularly in scenarios requiring server-side rendering

Astro

Astro is an emerging front-end framework supporting combinations of multiple UI frameworks, suitable for building fast e-commerce websites

Supports combinations of multiple UI frameworks including React, Vue, and Svelte, enabling component-based page construction to enhance development efficiency.

Suitable for e-commerce websites prioritising peak performance and flexible configuration

Gatsby

Gatsby is a React-based static site generator, well-suited for constructing content-driven e-commerce websites

Queries data via GraphQL to build static pages, delivering outstanding performance and SEO support.

Suitable for content-driven e-commerce sites, particularly brands focused on blogging and content marketing

Svelte / SvelteKit

Svelte is an emerging front-end framework, with SvelteKit serving as its official full-stack framework.

Generates efficient JavaScript code through compile-time optimisation, integrating with Shopify Storefront API via Apollo Client.

Suitable for e-commerce websites prioritising high performance and a modern development experience

In-depth Analysis of Shopify Headless Commerce Technology and APIs