How does Shopify Hydrogen work?
Shopify Hydrogen is a react-based framework used to build the front end of a headless ecommerce website. However, as you'd expect, it has API connections to Shopify and security built-in. If you were to opt for an alternative headless framework such as Next.JS then you'd need to build the connections to Shopify yourself! Shopify Hydrogen also has a library of pre-built components to speed up the development phase of a Hydrogen headless store whilst still offering the customizability and flexibility you'd express from headless architecture.
Shopify's Storefront API allows headless stores to connect to Shopify's powerhouse of features, giving developers ultimate control over the tech stack. Non-headless Shopify stores use a code language called Liquid which is managed on the inside of Shopify meaning that the developer of the store is limited to the capabilities of Shopify only.
What are the advantages of Shopify Hydrogen?
Hydrogen has been coined as "the future of ecommerce" so let's dive into some of the advantages that Shopify Hydrogen has to offer for brands wanting to leap into headless ecommerce and Shopify
Powered by React.JS
- React JS is the javascript type that Hydrogen is written upon and comes with its own wealth of benefits. Benefits of React include speed, flexibility, and usability - React was voted the most loved code language amongst developers and users of the code.
Ready to launch Hydrogen template
- Shopify Hydrogen offers an entire store template that is ready to launch, meaning developers do not need to spend months building the same features but instead can focus on custom store experiences.
Shopify Hyrdogen Integrations
- pre-built integrations with Shopify Hydrogen are growing such as content management systems like Contentful, as well as leading apps such as
Klaviyo &
Gorgias.
Shopify Hydrogen Customizability
- the main reason that brands choose headless is the ability to have complete control over the frontend tech stack and not be limited by the platform of choice. Shopify Hydrogen is no different and allows developers to build entirely custom storefronts and integrations. There is also a community of developers working on the code to support and provide tips with the existing documentation
What are the disadvantages of Shopify Hydrogen?
A headless store with Shopify Hydrogen isn't all roses and should be carefully considered. Some of the disadvantages of Hydrogen and headless include:
Developer heavy - the biggest consideration about any headless e-commerce store is you will be highly reliant on developers. A headless front end is entirely separate from Shopify and the backend meaning you'll need third-party tools to manage content and onsite features. A big benefit of Shopify themes is the amazing content editing tool called Online Store 2.0 which even allows you to create new pages without developers. Any onsite changes are likely to require a developer to do them.
You'll need your own CMS - Shopify Hydrogen is only the react framework that powers the frontend code - it does not offer a content management system that you may be used to with Shopify Themes.
Minimal App Support - One of the great benefits of Shopify is the rich amount of apps in the app store to extend the features and functionality of your store. If you want to relish in features you'll need to rely on apps having a native integration, open API or have a developer build it for you.
How to get started on Shopify Hydrogen?
There are lots of ways to get started with Shopify Hydrogen, whether you're an experienced developer or just starting out. The official docs provide a comprehensive overview of the technology and its various features, as well as example projects and lots of helpful information on everything from runtime variables to channel bundles.
If you're looking for even more information, there are a number of great resources available online. For example, the Shopify Hydrogen GitHub repository contains lots of example projects and code snippets, while the official Shopify developer blog frequently publishes articles on new features and best practices for working with the technology.
To get started with Shopify Hydrogen, you'll need to have Node.js and Yarn installed on your machine. From there, you can use a tool like Vite to quickly create a new project, or you can start from scratch and configure everything manually.
Shopify Hydrogen VS Liquid
Shopify's templating language called
Liquid is used to piece together HTML, CSS & Javascript to form a Shopify Theme. The language is proprietary to Shopify and the platform can read Liquid to generate the frontend experience for customers. In addition to this, it allows merchants to use Shopify's built-in content management system. Not only does Liquid mean customers can remain in control of the store, but it also is what thousands of accredited Shopify apps are integrated with allowing merchants to quickly and easily install new features to their store. However as Liquid is built by Shopify and hosted within their theme architecture, it means that developers are limited by the capabilities of Liquid and Shopify.
React is an open-source javascript framework meaning that it is not built by Shopify and the flexibility and customizability are almost limitless. Merchants that use React or Shopify's opinionated framework, Hydrogen, will not be closed within the Shopify architecture but instead have a custom frontend built and hosted on a hosting server of their choice. The main benefit of Hydrogen or React is that you are not limited by the Shopify platform or Liquid.
Shopify Hydrogen VS Other React Frameworks
Hydrogen uses React Server components as its base for the framework, allowing page rendering from both the browser and the server which ultimately improves site speed. The main benefit to choosing Hydrogen over another React framework such as Next.JS is the connectivity to Shopify's API which is pre-built and tested. By using Hydrogen, developers save huge amounts of time as features that are required to connect to Shopify's API for basic ecommerce features such as cart etc are ready to go. Hydrogen also comes fully equipped with a full store template pre-built to be used as a foundation and many site components or elements that can be used and prevents the need for everything to be built from scratch for a project.
Summary for Shopify Hydrogen & Oxygen
Headless ecommerce presents many complexities, requires significant investment and highly skilled developers to build in javascript frameworks such as React, Hydrogen aims to simplify this. Oxygen supports headless merchants with native hosting beyond the standard hosting of liquid files included with Shopify. Shopify's current monolithic solution, offers a vast array of integrations, built-in features and allows merchants to launch in record breaking times. Hydrogen & Oxygen will allows merchants looking for more complex solutions the ultimate support and infrastructure to do so whilst supporting the existing storefront API. Complexities include: server-side rendering, caching, hooks, limitless control over templates and modules, tailwind css, advanced development environments, IOS and Android apps used to deliver an ultimate cross-channel shopping experience. We love the Hydrogen logo too! Is development process, shape and development environment for ecommerce, development teams and Shopify about to change? We are excited to be part and observe future of millions of ecommerce stories leveraging the hydrogen framework. Whether you choose headless or a theme based Shopify store, there are many benefits over other platforms.
If you are looking for a headless ecommerce store with Hydrogen and Oxygen, learn more about our headless services
here.
Lightning fast