Custom storefronts overview
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 custom storefronts and how they work.
What's a custom storefront?
Anchor link to section titled "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
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
How custom storefronts work
Anchor link to section titled "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
Anchor link to section titled "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.
You can 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.
Hydrogen and Oxygen
Anchor link to section titled "Hydrogen and Oxygen"Hydrogen is a front-end web development framework used for building Shopify custom storefronts. Hydrogen is built and optimized to use data coming from the Storefront API.
Oxygen is Shopify's recommended deployment platform for Hydrogen storefronts. Oxygen removes the need to maintain server infrastructure, and enables you to manage and deploy Hydrogen storefronts. You can deploy different Hydrogen storefronts to Oxygen environments, enabling you to preview and share different versions of storefronts.
You can host Hydrogen storefronts on most Worker and Node.js runtimes:
Should I build a custom storefront?
Anchor link to section titled "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
Anchor link to section titled "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?
Anchor link to section titled "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.
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.
- Get started with Hydrogen and begin building a custom storefront.
- Learn how to use the Storefront API to query products and collections.