This article explores the options for Shopify retailers when deciding on their ecommerce tech stack. We’ll present some of the main differences between a theme or headless approach, and discuss how to identify which solution may be best suited to your business.
Shopify themes vs. headless: What are the key differences?
Shopify offers its retailers two primary build options for structuring their ecommerce architecture:
- Shopify themes – particularly Shopify’s “native” Online Store 2.0 using the Liquid templating engine.
- A headless approach – employing frameworks like Hydrogen, Next.js, or Gatsby.
Shopify themes offer a user-friendly, integrated environment with pre-designed themes that are easy to set up and manage. This makes them a great choice for small or medium sized businesses looking for an ecommerce solution that is cost-effective and easy to maintain and update.
In contrast, headless commerce systems, which decouple the frontend from Shopify’s backend, allow for greater customisation and flexibility, using frontend technologies like React. This approach suits larger businesses or those with specific needs, since it offers more control over the user experience and integration capabilities. However, it requires greater technical expertise and increased resources for ongoing development and maintenance.
For a full deep-dive into taking a composable commerce approach using Shopify, take a look at our CTO’s Guide to Composable Commerce & Headless Technologies on Shopify.
Let’s take a closer look at each of these options, and the technology powering them.
Shopify themes & Online Store 2.0 architecture
Shopify’s Online Store 2.0 leverages Liquid, a Ruby-based templating language, to power its native storefront themes. This architecture is built on the Ruby on Rails tech stack, a mature and stable framework that powers the underlying functionality of the Shopify platform and which satisfies the requirements of most Shopify retailers.
Store 2.0 is particularly well suited for retailers seeking a balance between performance and usability. It comes with an integrated theme editor, enabling dynamic template editing and the use of metafields within sections to power dynamic content experiences. You can easily move around, edit or replace elements of the frontend of your store, without the need for a developer. This flexibility allows you to create bespoke shopping experiences, whilst also guaranteeing a stable, secure system and ease of maintenance.
With over 8,000 apps in the Shopify App Store, Shopify themes also come with considerable extensibility. These apps can be implemented to enhance both frontend and admin functionalities, ranging from subscriptions to complex discounting, with typically straightforward integration using app widgets in the theme editor.
That said, when it comes to custom functionality, Shopify themes do have their limits. The Liquid API is primarily a templating language, and therefore developers are unable to write complex functional code for custom business logic on the server-side without the help of a separate middleware application. This typically requires a custom Shopify app solution, which can be costly to develop.
Shopify’s full-stack headless architecture
Headless commerce represents a versatile alternative to a Shopify theme. A headless approach allows you to build fully custom storefronts with a full-stack framework that integrate seamlessly with Shopify’s Storefront API.
In contrast to Shopify themes, with a full-stack framework – where the server-side and client-side code is closely integrated – developers can write complex code within the unified codebase with access to both the server-side and frontend code. This offers your technical team greater control over the entire user journey, and the option to integrate any third-party tooling you require. In this instance, custom apps are only needed to provide enhanced functionality in separate areas such as checkout.
Shopify’s own headless solution, Hydrogen, is built with the popular React framework Remix, offering flexibility and a range of prebuilt components that expedite development.
Retailers using Hydrogen benefit from quicker development and reduced time-to-market. However, choosing the right framework depends on specific business needs and technical requirements. The core component library of Hydrogen React is platform agnostic, so you may choose to integrate it with your preferred React framework, such as Next.js or Gatsby. Popular choices include Remix for its deeper integration with Shopify, as well as Shopify’s Oxygen network or Next.js (typically hosted on Vercel or Netlify) for its flexibility and broader framework architecture.
Unless you already have an existing headless stack, you’ll need to decide on which framework is best suited to your business requirements. You can find more detail on Hydrogen and Shopify’s full-stack headless solution in Swanky’s guide to composable commerce on Shopify’s headless tech stack.
A fully composable tech stack for enterprise brands
In early 2023, Shopify launched a new service offering named Commerce Components by Shopify (CCS), specifically targeting enterprise-level retailers with a gross merchandise value (GMV) exceeding $500 million. This service introduced a range of benefits, including tiered pricing structures, enhanced API limits, and dedicated support for custom engineering needs.
A key feature of CCS is its modular approach to Shopify’s technology stack. It allows larger enterprises to selectively integrate components like checkout and Shop Pay based on their requirements, with a pricing model that corresponds to usage. This initiative represents Shopify’s strategic move into the enterprise market.
Although Shopify’s technology has been suitable for enterprise use since 2021, the introduction of CCS has led to some confusion. It is crucial to differentiate CCS from Shopify’s primary offerings such as Hydrogen and Oxygen, which cater more broadly to mid-market retailers for the development of custom, headless storefronts. CCS adds an extra dimension of flexibility for larger retailers but remains distinct from the core technologies that underpin Shopify’s composable ecommerce architectures.
When should Shopify Plus retailers consider going headless?
Thanks to continued advancements in Shopify themes – with Store 2.0 offering flexible design, and Shopify Markets powering international expansion – the need for retailers to consider headless architecture is evolving.
Prior to the release of Markets and Store 2.0, many Shopify retailers required a headless setup in order to manage the complexities around international store management, and to reduce the overhead on content management teams by enabling the integration of more powerful content management systems such as Sanity or Contentful.
However, since internationalisation and dynamic content management are now offered natively by Shopify with the introduction of Shopify Markets and the Store 2.0 architecture, many brands have in fact moved back towards a theme approach, in order to reduce costs and development complexities.
The choice between Shopify themes vs headless is primarily a choice between a higher level of control vs simplicity and costs savings.
For brands who have traditionally been put off Shopify due to the restrictive nature of its closed code system, a headless approach provides them with the flexibility to develop their own bespoke store, whilst still benefiting from the core Shopify platform functionality. There are however still gaps within Shopify’s native functionality, which means headless will remain a necessary approach for some brands.
However, a headless approach does come at an additional cost, both in terms of initial set-up and ongoing management. Therefore, brands choosing to go headless should have a clear reason for doing so.
If you are debating whether headless is the right direction for your brand, here are some elements to consider:
Development capabilities
Building headless stores requires specialist developer skills. Whether you choose to use an in-house team to build the store, or outsource this to an agency, there will be increased overheads and a need for ongoing developer expertise to manage future changes to the store.
Control over your functionality
If there is specific functionality you require on your store that cannot be accommodated in a theme, it could be that the additional cost of a headless stack is worth the investment to provide the flexibility and resiliency you want.
Cost savings vs benefits
Building within a Shopify theme is likely to be the most cost-effective solution. However, this cost saving still needs to be weighed up against the potential revenue gains and operations cost savings – for example, allowing you to internationalise more easily – which specific bespoke functionality may afford you. Check out our article comparing the total cost of ownership of various ecommerce setups.
Internationalisation
Whilst Shopify Markets has expanded the native capabilities of Shopify for internationalisation, it still does not meet the requirements of many large international brands with diverse teams managing different regions. Read our comparison of Shopify Markets vs expansion stores for more details.
Staying ahead in the market
Investing in a headless tech stack could enable you to be more nimble in adopting new technologies going forward. Being the first to offer a superior user experience could put you at a distinct advantage over your competitors.
Limited App Store extensibility
Available pre-made app integrations on the Shopify App Store for Hydrogen or any headless Shopify stack are currently still limited. Whilst most apps that extend backend capabilities will continue to work uninhibited, storefront apps are particularly affected. At present, the integration of new features will typically require custom development, making you reliant on experienced technical teams to deliver frontend changes.
Non-Shopify technologies
On the other hand, you can easily incorporate functionality from the wider technology ecosystem beyond Shopify, making full-stack architecture more adaptable. Rather than be tied to the app architecture, you can install node.js packages to run functional code on both the frontend and backend, and integrate other microservices as needed.
Generally speaking, the two types of brand most likely to benefit from a headless approach are the following:
- Experiential brands that want to offer an immersive user experience, and therefore need a higher level of control over user journeys.
- Large enterprises that require complex functionality, access to the backend, greater performance and scalability.
Still wondering if Shopify themes or headless is the best fit for your brand?
Swanky has successfully managed over 200 end-to-end Shopify Plus projects, and completed our first headless project back in 2016. We recreated HelloFresh’s bespoke subscription store functionality on Shopify and have helped scores of international brands expand into new markets.
If you are looking for further guidance to help you identify if a headless build with Shopify is the best solution for your brand, Swanky’s technical team will be happy to assist. We can help you to analyse the specific functionality you require, and advise on a build that will give you the right balance of flexibility and control.
Get in touch with our solutions team today to book a consultation.