Complete guide for choosing between Headless (Hydrogen) and Online Store 2.0 (Liquid) on Shopify

In the land of Shopify, and in commerce overall, merchants are continuously seeking and building new experiences to give their customers better experiences, drive sales, and remain competitive. Majority of the time, merchants use Shopify's Online Store 2.0 and Shopify's Liquid templating language to create beautiful, creative storefront experiences. However, in the past few years, headless commerce has become an approach many merchants such as Drake Related, Atoms, and Denim Tears use to create custom experiences, specifically with Shopify's new headless commerce framework, Hydrogen.

However, one of the biggest questions merchants still have is understanding whether they should build out their storefront experience with a headless commerce approach or stick to Online Store 2.0/Liquid. In this guide, we'll answer this exact question and make it really easy for Shopify merchants to decide.

What is headless commerce?

Before we dive into the decision-making process, it's crucial to understand what headless commerce means. For a common commerce experience, Shopify bundles both the frontend (the part of your website visible to customers) and the backend (where your store's data is managed) into one unified system. This is what Online Store 2.0 does. In contrast, a headless commerce approach decouples these components, allowing you to use different systems for the frontend and backend. This separation provides more flexibility and enables different opportunities. This is what Hydrogen offers.

Some differences between Headless and Online Store 2.0

Advantages and disadvantages of Online Store 2.0 (Liquid)

Advantages

1. Storefronts built on Liquid are easy to use and designed for people with little or no technical expertise.

2. Comes with built-in features, such as product pages, shopping carts, and checkout pages. Merchants can start selling products right away.

3. Allows storefront customization without any external content management system.

4. Merchants can directly install and use native apps from the Shopify App Store without any development required.

5. JSON templates let one add new and existing sections to most pages in the theme and add or remove sections from any page directly in the Shopify theme editor.

6. Easier to scale branded content across the store.

7. Quick and easy to upload and amend content via metafield functionality.

8. Merchants can also add Liquid directly via the theme editor, which saves time.

9. Support for app blocks built with theme app extensions.

10. Developer tools to integrate and assist with testing, developing, and deploying new themes.

11. Build custom themes with Shopify CLI. Develop, preview, and test changes to themes inside development themes.

12. Shopify GitHub integration makes new theme development and maintenance much easier.

13. Theme Check for Liquid and JSON that scans the themes for errors and highlights the best practices.

14. Bulk Mutation API to export data in bulk to a store.

Disadvantages

1. Liquid theme binds the code to Shopify, making migrating to a different platform difficult.

2. Installing apps may incur additional fees and hamper performance.

3. Using additional app scripts can conflict with the theme code, resulting in even more redundant and non-reusable code.

4. Complex logic and custom database becomes more formidable to implement as it is a template language.

5. Business has to build new platforms from scratch for every digital touchpoint.

6. Heavily relies on custom apps and middleware solutions for advanced features.

Advantages and disadvantages of Headless (Hydrogen)

Advantages

1. Access to built-in components specifically designed for integration with Shopify's API - shopping cart, variant picker, content gallery, Shop Pay, and Analytics.

2. Businesses can switch platforms without having to start from scratch.

3. Comes with enough rendering techniques to build a performant and flexible store.

4. No need to migrate products, history, or users from Shopify if a business is already using the platform.

5. Leverages React Server Components for efficient, post-render component-level state updates.

6. Flexible page and sub-request cache policies to power dynamic and edge delivery.

7. Uses Oxygen as a hosting platform for the Hydrogen storefront without the need for a third-party hosting provider, and improves page load speed through edge computing technology.

8. Improved performance due to React's virtual DOM (Document Object Model), which only updates changed components rather than re-rendering the entire page.

9. Allows integrating third-party services as well, including stock, product data, PIM, MDM, and many more.

10. Powerful GraphQL API to build and customize the frontend completely.

11. Extremely fast due to faster GraphQL API response and React server-side rendering and caching.

12. Splits the website's head (visible to the user) from the body, which houses all the data and functionality. This gives more freedom to experiment with the layout and modify the content.

Disadvantages

1. Storefront preview is not available unless the developers build a preview environment or use one of the new page-building solutions.

2. Uses React Server Components, which means it doesn't produce a static Progressive Web App (PWA). So, developers need to develop for the Shopify server.

3. Need to connect third-party content management systems (CMS) to integrate CMS functionality with Hydrogen storefronts.

4. Shopify's app support is minimal for Hydrogen. Businesses might have to use custom middleware solutions if they want to use additional apps that they would have normally relied on from the Shopify App Store.

Which approach should you take? Online Store 2.0 (Liquid) or Headless (Hydrogen)?

Online Store 2.0 (Liquid)

Online Store 2.0 (Liquid) is most ideal for brands who are either new to the commerce landscape, growing really quickly, don't have a need for complex storefront design or logic, or are looking for an easy-to-use and cost-effective solution. It is even more ideal if your team is non-technical, don't want to be technical, and want to minimize resources.

Even some of the largest brands, such as Glossier, stick to Online Store 2.0 (Liquid) to provide incredible experiences.

You should likely use Online Store 2.0 if you...

• Are a small, medium, or large brand who is new to the ecommerce landscape and wants to simply get up-and-running.

• Have a simple, straightforward, storefront, with minimal need for custom design or interactivity.

• Are looking for an easy-to-use and cost-effective solution to design, build, and manage your storefront experience.

• Have no need to integrate an external content management system (CMS) to manage content across your storefront.

• Heavily rely on native Shopify apps or apps from the Shopify App Store to power your storefront experiences.

• Have little to no technical engineering expertise or have limited resources in-house.

Headless (Hydrogen)

Headless (Hydrogen) is most ideal if your storefront has complex designs and logic, requires integration with an external CMS, needs to deliver experiences across multiple channels and platforms, or is experiencing limitations or growing pains from Shopify's platform.

You should choose Headless (Hydrogen) if you...

• Are a brand with a complex or unique storefront design that can't easily be created with Online Store 2.0 (Liquid) - E.g. Drake Related.

• Face technical limitations around your storefront implementation such as dynamic URLs, internationalization requirements, SEO constraints, speed, experimentation efforts, and more.

• Want to use an external CMS to manage content.

• Want to deliver content and commerce experiences across multiple channels and platforms, such as web, mobile apps, and voice assistants.

• Need to handle large amounts of traffic and large amounts of data performantly and in a scalable manner.

• Want to build custom frontend software, logic, or components that are not accessible via the Shopify app store or native platform.

• Rely heavily on third-party services or APIs for specialized functionalities like payments, analytics, or inventory management outside of the services Shopify initially provides.

• Want complete control over the URL structure.

• Want to have more control over how products will be presented.

Common questions merchants ask about whether they should use Headless (Hydrogen) or Online Store 2.0 (Liquid)

To summarize...

Most of the time, Online Store 2.0 is the answer. However, there are unique circumstances where headless is the way to go. Hopefully this guide is helpful in deciding which approach you should take. If anyone is still confused or has any questions, please feel free to reach out to us at founders@lazertechnologies.com.