Custom storefronts

Commerce is constantly evolving. As a developer, you can build commerce integrations in all the places where merchants want to sell and where their customers want to buy. This guide introduces you to building headless with Shopify by explaining custom storefronts, how they work, and how they accelerate your commerce development.

What is a custom storefront?

Anchor link to section titled "What is a custom storefront?"

A custom storefront is a model of building headless, where the frontend and backend of your storefront are independent of each other. You build the frontend. Merchants use Shopify's commerce engine behind their bespoke storefront experiences.

A headless commerce model where the frontend and backend of the storefront are independent

How custom storefronts work

Anchor link to section titled "How custom storefronts work"

A custom storefront is designed, built, and managed by you. This is the frontend. You can use your preferred tech stack and a development framework that you already know to build faster. You build headless by integrating your custom frontend with Shopify's powerful commerce primitives, capabilities, and backend operations.

Data and commerce capabilities

Anchor link to section titled "Data and commerce capabilities"

Your custom storefront uses data and commerce capabilities from Shopify. This is the backend. Data might include products, collections, and customers. Commerce capabilities might include cart and international pricing.

A subset of customer-facing experiences that you can build, such as websites and mobile apps

Building on an API-first platform

Anchor link to section titled "Building on an API-first platform"

Headless commerce doesn't apply just to websites. For example, Shopify can also be used in other kinds of shopping experiences such as mobile apps, video games, smart devices, and more.

The benefit of building on an API-first platform is the flexibility and power of enabling new customer touchpoints, while using the same shared commerce data and backend tools that the Shopify platform provides.

Complex solutions can involve connecting other business systems to the frontend or backend, such as the following:

Content management systems (CMS)
Customer relationship management (CRM)
Enterprise resource planning (ERP) systems
Product information management (PIM) systems

When should I build a custom storefront?

Anchor link to section titled "When should I build a custom storefront?"

If a merchant's desired business system architecture, business process, or customer experience can't be achieved with Shopify's existing sales channels, custom themes, and apps, then consider building a custom storefront.

Consider building a custom storefront in the following scenarios:

You're building a unique storefront experience that isn't possible or easily achievable with existing web or mobile tools.
You have an existing web frontend technology stack that doesn't include Liquid.
You want to integrate Shopify-powered commerce into an existing infrastructure.
You have robust omni-channel needs, with multiple channels not being offered out of the box.
You're either using or looking to use a content management system (CMS) for more complex content needs that are integrated into your storefront experience.

However, before taking on the commitment, make sure that the merchant is comfortable with taking on the added costs and complexity of managing a custom storefront solution. The merchant should also have development resources available to manage the ongoing integration after launch.

Key benefits

Anchor link to section titled "Key benefits"

Building a custom storefront offers the following key benefits:

Flexibility: The Storefront API is device-agnostic and platform-agnostic. You can build a custom storefront using any programming language, which makes your workflow flexible.
Customization: You can build a solution that grows and adapts with a merchant's business. As customer trends and interactions change, the commerce solution can adapt quickly to long-term market shifts in customer acquisition.
Integration: Bring your own tools, technology stack, and experience, and integrate your custom backend with Shopify commerce data.

Examples

Anchor link to section titled "Examples"

With a custom storefront solution, you have complete flexibility in your frontend tech stack and development framework. The following examples describe some of the ways that you can customize a storefront:

Sell products from a native mobile app or a progressive web application (PWA)
Sell products in augmented reality (AR) or virtual reality (VR) game experiences
Sell products in video livestreams
Sell products through the Internet of things (IoT), such as selling food directly from a smart fridge
Sell products through a buy button added to an existing website

Hydrogen demo store

Anchor link to section titled "Hydrogen demo store"

The Hydrogen demo store is Shopify's example custom storefront. You can refer to it to understand how a custom storefront can be put together, or fork it as a starting point to build your own custom storefront.