Shopify’s Hydrogen VS Instant Commerce

With Shopify Editions 2022, Shopify announced Hydrogen and Oxygen. While there are not many similarities between these two and Instant Commerce it does deserve an explanation. Let’s dive into what’s similar and what’s different.

What is Shopify Hydrogen?

With headless commerce, you decouple the frontend from the backend. In the case of going headless with Shopify, you keep using Shopify as your backend and built a frontend from scratch. When building the custom frontend you work with the Shopify Storefront API to enable communication between the frontend and backend.

Building a frontend from scratch is quite an expensive and time-consuming endeavor. To make the lives of developers easier Shopify built Hydrogen. So what is Shopify Hydrogen? Hydrogen is a front-end web development framework used for building headless storefronts with Shopify.

In essence, it’s a new framework for building Shopify stores based on JavaScript and React. Until now Shopify store development was only possible with Liquid, the company's own coding language, whilst it’s a solid solution it does have a lot of limitations.

By using the more popular code languages Javascript and React, Shopify aims to make building headless storefronts easier and accessible to more developers. 

For more details on the hydrogen framework: https://shopify.dev/custom-storefronts/hydrogen

What is Shopify Oxygen?

Oxygen is Shopify's recommended deployment platform for Hydrogen storefronts. Hosting and deploying a headless storefront is quite the hassle for developers. Oxygen removes the need to maintain server infrastructure and enables you to manage and deploy Hydrogen storefronts easier.

For more details on the hydrogen framework: https://shopify.dev/custom-storefronts/oxygen

What are the benefits of Shopify Hydrogen and Oxygen?

Hydrogen and Oxygen aim to help developers build headless storefronts in an easier and more fun way. As such they have pre-built all the annoying and complex infrastructure that is required for a headless commerce architecture. This includes server-side rendering, hydration middleware, and client component code transformations. 

Hydrogen also includes components, hooks, and utilities that support features and concepts that exist in Shopify. Examples of these are Cookie setting storage, Shopify analytics, and image rendering from the Storefront APIs.

In addition to democratizing the built process of headless storefronts, we believe one of the main benefits for Shopify is that many more developers know JavaScript and React rather than Liquid, meaning more developers will now see opportunities to work with Shopify.

What are the drawbacks of Shopify Hydrogen?

A developer-heavy process: While this Shopify framework does make headless commerce more accessible to developers, going headless with Hydrogen still requires lots of development power.

‍There’s no preview environment: To empower non-technical users you want a preview environment that allows you to see how adding content or functionalities is impacting the storefront. Currently, Shopify Hydrogen does not have a preview environment of your store.

Minimal app support: There are not a lot of of out of the box integrations with apps. This means that you'll need to create the middleware yourself for every Shopify app that you might be using.

There is no visual manager: Once your webshop is deployed there is no visual overview of your components and blocks that allow you to easily manage and optimize pages.

How is Instant Commerce different?

To keep it short, Hydrogen is a development framework and Instant Commerce is a frontend as a service platform. One of the core differences between the two is that building a headless webshop with Hydrogen requires a large amount of work from developers. 

Frontend as a service platforms handle all of the design and coding needs for eCommerce stores. Instant Commerce provides everything you need to build a headless webshop out of the box. 

This includes:

• Integrations with best-in-class eCommerce technology 

• Automatically sync schemas to headless CMS Storyblok

• Largest library of pre-built eCommerce blocks from product slider to FAQ sections and PDPs 

• No-code and low-code tools to customize blocks

• Preview, staging, and production environments

• Enterprise-level serverless deployment

Our goal with Instant Commerce is to tenfold the productivity of your eCommerce team. We do this by making sure both technical and non-technical people can work independently and focus on what they do best. 

If you want to experience the benefits of a modern headless webshop without the hassle of building it from scratch, managing, and maintaining it? Get a demo here!