At Domaine, we focus on building unique ecommerce experiences for brands and retailers on Shopify. Over the years, we’ve tried different frontend architecture to best serve the business needs. We always believe there’s no “one size fit all” solution and defining the frontend architecture is one of the most critical decisions to be made before starting building the website.
At a high level, there are 4 different approaches we’ve used at Domaine and we’ll dive into each one shortly:
1. Shopify Online Store 2.0 Theme
Shopify has announced the release of Online Store 2.0 in June, 2021, which includes major updates for sections everywhere, themes app extension, native metafields management, GitHub Integration and Shopify CLI. Online Store 2.0 established a true modular approach which makes content sections easy to create, reuse and manage in Shopify admin.
70-80% of the Shopify implementations are using this approach - it covers the majority of ecommerce use cases and brands benefit the most from what the platform can offer out of the box. It is the simplest and fastest approach on Shopify.
2. Hybrid: Shopify Theme + React
As the complexity grows, our team often uses a hybrid model where a certain part of the site is built in React. The benefit of this approach is that it can handle complex workflows & states seamlessly by leveraging React framework while still relying on the Shopify theme to power standard ecommerce flows and pages. For example, we’ve developed quite a few complex product customizers and used React to power the frontend experience. It connects directly with middleware APIs and saves the configuration back to Shopify once the customization is completed.
This option also has flexibility in terms of which parts of the application are powered via Liquid vs React. On the other spectrum, we’ve also done implementations where Shopify theme was used as the shell for a React app. In this case, it is usually used as a bridge to migrate to full headless implementation.
3. Hydrogen and Oxygen
Headless architecture has clear advantages in speed, SEO and frontend flexibility - and we believe it’s the future for ecommerce Storefronts. For a long time, there isn’t a standard way of building a headless site on Shopify and brands have the freedom to use their own stack to build a headless website using Shopify APIs.
While it’s an advanced architecture and great for brands who have a strong internal technology team, it can cause challenges for maintaining such an application that isn’t fully powered by an ecommerce platform. Many of the app integrations need to be built from scratch, theme upgrades will be performed by the brands rather than the platform itself and infrastructure will need to be supported separately.
We are very excited that Shopify has announced the launch of Hydrogen + Oxygen which is a SAAS headless platform. In our opinion, this approach is very aligned with Shopify’s value proposition - make it simple for the brands to run their ecommerce business online and let the platform handle the complexity for the infrastructure, upgrades and the majority of the integrations. This approach we’ll get all the benefits of headless architecture and a better foundation for growing with the platform as more features are released.
Currently, an external CMS is still required to manage all the content.
4. Custom Headless
Prior to Hydrogen + Oxygen, custom headless architecture has been the most common approach when the brands are going headless. While we strongly recommend using Hydrogen + Oxygen as the future state, a custom frontend architecture will still make sense if Shopify is part of a bigger digital strategy. For example, if a brand already has a headless architecture with all of their content and core business logic built - the best route to add Shopify as their shopping cart feature will be to integrate directly with Shopify APIs. This approach will normally require an external CMS for managing all the content on the website.