Custom storefronts overview

What's a custom storefront?

A custom storefront is an example of a headless commerce model. Headless commerce is an architecture where the frontend and backend of your storefront are independent.

Merchants can use Shopify as the commerce engine behind their independently-built storefront experiences.

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

How custom storefronts work

When you create a custom storefront, you're creating a new channel to engage with customers that is designed, built, and managed by you — the frontend.

Data and commerce capabilities

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

You can use your preferred tech stack and the development framework you already know to build faster.

Channels

You can continue to use the Shopify admin to manage your commerce data across multiple channels, including the online store, to make sure that all customer touchpoints are in sync. You can also create a custom channel complementary to your online store channel, such as a mobile app, or create your own custom website to replace your online store.

Regardless of which custom storefronts you choose to build, Shopify provides the foundational commerce capabilities you need.

Examples of custom storefronts

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

Hydrogen is a front-end web development framework used for building Shopify custom storefronts. It includes the structure, components, and tooling you need to get started so you can spend your time styling and designing features that make your brand unique.

Hydrogen contains commerce components, hooks, and utilities that support features and concepts that exist in Shopify. It provides boilerplate code that you can use to build custom storefront, which enables you to spend more time on building unique experiences.

Storefront API

The Storefront API powers the set of actions that customers can perform in a digital store. This includes viewing products and collections, adding products to a cart, and checking out.

Hydrogen is built and optimized to use data coming from the Storefront API. The shape of the data passed to components, hooks, and utilities corresponds and conforms to the structure based on the GraphQL types from the Storefront API.

Developer tools

While the Storefront API lets you build custom storefronts with any language and technology, Shopify also provides a number of software development kits and libraries to simplify your development process.

For more information, refer to Developer tools for custom storefronts.

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.

Key benefits

Building a custom storefront offers the following key benefits:

• Flexibility: The Storefront API is device and platform-agnostic. You can build a custom storefront using any programming language, which adds flexibility to your workflow.
• Customization: You can build a solution that grows and adapts with the 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.

When should I consider building a custom storefront?

Consider building a custom storefront if one or more of the following scenarios apply:

• You are 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 are either using or looking to use a 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.

Next steps

• Get started with Hydrogen and begin building a custom storefront.