I. What is Shopify Liquid?
Liquid was developed by Shopify co-founder and CEO Tobias Lütke and is now available as an open source project on GitHub. Today, it's used in many different software projects, from content management systems to static site generators—and of course, Shopify.
II. What is Shopify Hydrogen?
Announced at Unite in 2021, Shopify Hydrogen is a React-based framework-or set of developer tools-for building custom Shopify storefronts that are more personalized and performant.
The goal of the headless framework is to help you, via your development teams, build especially unique Shopify custom frontend storefronts faster.
III. What is diffrent between Liquid and Hydrogen?
Traditional Shopify - Liquid tethers your frontend and backend into a monolith. It's relatively easier and faster to set up. A single installation package bundles together all that you need to create a store, display products, manage inventory, and process payments.
In a headless Shopify - Hydrogen implementation, you use the Storefront API to connect a Shopify backend with a frontend-of-choice. It offers unlimited customization, and can connect to 3rd party services via API.
While traditional Shopify offers some features to customize design and experience, it doesn't come close to the freedom-of-choice you get with headless Shopify. In a traditional setup, you are restricted by the built-in themes and graphical elements, whereas in a headless setup, you can choose any frontend technology to deliver truly impeccable experiences.
Headless Shopify also outperforms its traditional counterpart in the performance department. Merchants often install third-party apps and plugins to extend the functionality of their stores. In a traditional setup, the extra code from these apps and plugins can lead to a bloated monolith, which can increase loading times. However, in headless Shopify, the third-party applications are installed only on the backend, and your page-load times aren't affected.
Another reason why forward-thinking businesses are moving to headless Shopify is that traditional Shopify limits their ability to introduce new digital touchpoints. A traditional Shopify backend can only serve one frontend, whereas a headless Shopify instance can serve multiple frontends, and integrate with new ones at any time.
IV. The problem with traditional Shopify
The design of traditional Shopify is not a good fit for growing businesses. The tight coupling of the frontend and the backend leads to technical constraints that are hard to overcome. Even if your marketing team comes up with innovative ideas to revamp the customer experience, your developers may not be able to fully implement them using the built-in Shopify tools.
Traditional Shopify also restricts you from freely adding extensions and plugins to your installation. Too many third-party integrations can lead to code bloat, which impacts your backend processing and frontend rendering. As a growing business, you can't afford trading-off performance for feature-richness, or vice versa.
A traditional Shopify backend doesn't work with multiple frontends, forcing you to build new platforms from scratch, for every digital touchpoint. This increases your time-to-market, and hampers your ability to deliver immersive omnichannel experiences to your shoppers.
V. Shopify Hydrogen is the solution of the future?
There are tons of forward-thinking brands who want more personalized and performant Shopify stores. Hydrogen is a direct response to this demand.
The workaround for the common pains of outgrowing Shopify as your brand scales has typically been investing in a custom Shopify theme. More recently, brands are eyeing headless commerce and the various ways to achieve it as an even better, long-term solution.
While the benefits of headless were once only available to brands with massive dev resources or deep pockets, now it is becoming more achievable for all types of brands. The unique user experience and speed benefits, which brands previously had to choose between, are now both on the table with headless commerce.
Moving to the Hydrogen framework means leaving Shopify's templating language, Liquid, behind in favor of the open-source JavaScript framework, React.js.
Like Shopify, e has made a bet on React as the future of headless storefronts. Where Liquid is largely limited to Shopify theme development, React is widely used and only becoming more popular.
This means that brands can more easily find knowledgeable developers when hiring in-house, and there are many expert agencies to help with implementation.
With Hydrogen, your team will no longer use Liquid to build and modify custom Shopify themes.