Shopify Headless

Quickly build highly customized user experiences with Shopify APIs

What is Shopify Headless

In the Headless architecture, the front- and back-end interoperate via APIs, while the front-end can be deployed using any technology stack (React, Vue.js, Next.js, etc.)

Flexible Content Management

Headless CMS (e.g. Contentful, Sanity, etc.) can be integrated to separate content and e-commerce functions

Fast performance

Improve page load speed and SEO performance through server-side rendering (SSR) and static page generation (SSG)

Scalability and flexibility

Flexibly integrate third-party services and tools, such as CRM, ERP, PIM, etc., to build an e-commerce system that conforms to business processes.

GraphQL API provided by Shopify for data interaction with the front-end

How the Storefront API works

Hydrogen: The official Shopify headless e-commerce framework based on React;
Oxygen: Edge hosting solution provided by Shopify for deploying the Hydrogen app;

View API Documentation

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

Multipass Single Sign-On

With Multipass, merchants can improve user experience and conversions by automatically logging customers into their Shopify store after they've logged in on their existing website, eliminating the need to re-enter login information!

Read the technical guide

Shopify Plus offers powerful omnichannel selling capabilities to help brands achieve a consistent shopping experience across multiple channels

Expanding globalized e-commerce capabilities

Shopify Payments is the native payment system of Shopify Plus

GraphQL Storefront API

Hydrogen Shopify

Integrated Payments

Global payment support: 133+ currencies supported

Payments

Accelerated checkout: one-click checkout through Shop Pay

Native Payment Systems

Shopify Payments is Shopify's native payment system

Multiple Payment Methods
Unified Order Management
Fraud prevention tools
3D Secure and Risk Control Rules

Shopify Payments

Save 15%

Shopify POS

Real-time synchronization of online and offline inventory to avoid out-of-stocks and oversales

multichannel integration

"Support across 100+ social media platforms and 80+ online marketplaces

Brand Expansion Sales

Facebook, Instagram, Amazon, eBay and other channels

Dynamic product customization
Multi-channel distribution
Harmonization of inventory management
Flexible shopping

Order channel distribution

Shopify Flow

No coding required to create automated labels, customer grouping, inventory management, etc.

Functions

Customize checkout logic for personalized promotions and pricing strategies

Automated Promotions

Event Posting, Inventory Updates, Discount Applications, Flash Sales

Webhooks Event Subscription
Shopify Functions
Shopify Audiences
Automatic tag grouping

Deployment to production

Hydrogen is the official React base framework from Shopify!

Front-end framework integration

Next.js

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

Excellent SEO support, suitable for e-commerce sites that need good search engine rankings, can be used with Vercel, Netlify and other platforms to provide high availability and fast deployment

Quickly build highly customized user experiences with Shopify APIs

Hydrogen (official recommendation)

Works with Shopify's hosting platform, Oxygen, to provide globally distributed deployments

Built-in deep integration with Shopify Storefront API, providing functional components such as shopping cart, checkout, internationalization, etc.

Ideal for e-commerce sites that require a high degree of customization and responsiveness, especially for Shopify Plus users

Vue.js / Nuxt.js

Vue.js is a progressive JavaScript framework and Nuxt.js is its official server-side rendering framework

Vue.js provides a clean API and responsive data binding that's easy to get started with, and Nuxt.js supports server-side rendering and static generation for building high-performance websites.

For Vue.js developers, especially in scenarios that require server-side rendering

Astro

Astro is an emerging front-end framework that supports a combination of UI frameworks for building rapid e-commerce sites

Support React, Vue, Svelte and other combinations of UI frameworks, through the componentization of the way to build the page, improve development efficiency

For e-commerce sites seeking extreme performance and flexible combinations

Gatsby

Gatsby is a React-based static site generator for building content-driven e-commerce sites

Query data and build static pages with GraphQL for great performance and SEO support.

For content-driven e-commerce sites, especially blogs and content marketing-oriented brands

Svelte / SvelteKit

Svelte is an emerging front-end framework, and SvelteKit is its official full-stack framework

Generates efficient JavaScript code with compile-time optimizations that can be integrated with the Shopify Storefront API via the Apollo Client.

For e-commerce sites seeking high performance and a modern development experience

Shopify Headless Commerce Technology and APIs in Depth