How Hard Is It to Move from Shopify Liquid to Hydrogen?

Shopify is one of the most popular e-commerce CRMs available today, thanks in large part to how easy it is to get up and running. If all you want is a fairly simple, standardized storefront that works out of the box, Shopify is a perfect choice. I've set up Shopify stores for tons of clients over the years, and it's super easy to do.

In 2021, Shopify shook things up by releasing Hydrogen. Hydrogen is their headless, customizable, performance-first platform, and it's very attractive for a lot of brands. It's also a lot more complex, which means there's a significant barrier to both setting up a new Hydrogen storefront or migrating your existing store to a Hydrogen framework.

I wanted to talk today about this migration process. There are literally millions of Shopify stores, and a decent number of them are considering making the jump from Shopify Liquid (the traditional, easy-to-use Shopify) to Hydrogen.

Having made this migration for a handful of websites, ranging from a nearly-stock Shopify store to a heavily customized and plugin-laden store, I have some thoughts to share. So, let's talk about it!

In Brief: What Are Liquid and Hydrogen?

If you're already familiar with what Liquid and Hydrogen are, at least in broad concepts, you can skip this section. I'm choosing to include it for those of you who have a Shopify store and have heard that Hydrogen is a big upgrade, and are deciding whether or not you want to make the leap.

First, Liquid. Shopify Liquid is the "classic" Shopify. When you go to Shopify.com and sign up for a new store, you're getting a store on Liquid.

Specifically, though, Liquid isn't Shopify. Liquid is a templating language (or, as they describe it themselves, a markup language) made using Ruby, and is fairly similar to a very restrictive programming language. It's very limited in what you can do with it, which is entirely by design. The goal is to have a flexible language that can be used to make apps (like Shopify) with enough restrictions that they aren't vulnerable to attack.

While Liquid was designed by the people behind Shopify, it's used by a bunch of other platforms, including Jekyll and Big Cartel today.

Almost none of this matters unless you're the kind of person who loves digging into the code under the hood, customizing a site, or building assets to work with a framework. If you're a theme or plugin developer, you need to know what Liquid is and how it works. If you're just looking to start a storefront, you don't need to care.

Hydrogen is a sort of next-gen improvement on the idea. It's built on React rather than Ruby, and it's headless. If you know what those mean, you're ahead of the pack. Don't worry, I often have to explain it to interested clients.

React is an iteration on JavaScript and is an open-source library made to build user interfaces for apps and websites. A lot of the websites you use today are made using React. Mastercard.com, LG.com, Kia.com, 3m.com, Twitch.tv, and a ton of others all use React as their basis.

A headless system is one that decouples the front-end of a website from the back-end of the site. In Shopify Liquid or in something like WordPress, the one system runs the databases, the PHP and SQL, the templates, the files, the text, the themes, the content, and everything else. With a headless system, you'll have one setup running the back-end server, database, and other infrastructure, and another (Hydrogen) running the front-end design and functionality.

Since Hydrogen is a Shopify project, it of course works with Shopify as the back-end structure. It's basically a way to get a lot more customization and functionality on the front end, while still having the rock-solid base of Shopify on the back end. If you're weighing the trade-offs, there are some arguments to be made against going headless that are worth considering before you commit.

What Are the Pros and Cons of Moving from Shopify Liquid to Shopify Hydrogen?

The simple answer that I tell my clients is this:

Shopify Liquid is simple, easy, and restrictive. You'll often find that you have an idea for a feature or customization you want to make, only to find you can't while using Shopify, or you need a chunky, slow, expensive plugin to do it.

Shopify Hydrogen is extremely flexible and customizable, at the cost of needing to, you know, do that. It's much harder to just spin up a simple Hydrogen site, and while you can custom-develop any feature you like, that means doing dev work or hiring a developer.

Now, that's not a high bar. There are tons of people out there who are very familiar with React, and Hydrogen is one of the biggest React-based projects out there, so there are lots of people who know the ins and outs of Hydrogen as well.

Liquid is like Lego; defined blocks you put together in limited ways to build something. Hydrogen is like clay, a material you can sculpt into anything you like, and potentially run headfirst into why those restrictions exist in the first place.

But to get a little deeper into it, here's what I tell people when they want a more detailed discussion.

The Pros of Switching to Hydrogen

The single biggest pro to using Shopify Hydrogen is customization. You have all of the power of React to use, as long as you can hook it into the back-end of Shopify. 

One of the big problems with Shopify is that tons of people spin up stores using a basic template or one of the top 100 or so premium templates. That means you can more or less immediately tell when a site is a Shopify store, because they all look and feel the same.

Hydrogen allows complete customization, so your site can look, feel, and function any way you like. As long as you can get a developer to do it for you in React, you can make your wildest design dreams come true.

Now, it's not always a good idea to do that. There are a lot of conventions and best practices in UI/UX to consider, and if you hurt usability for the sake of flashiness, you'll lose customers. But that's a whole other discussion.

The second major benefit is being headless. Since Hydrogen is decoupled from the back-end architecture, you can have different teams maintaining each side without affecting each other.

I like to think of it sort of like a two-story house. You can remodel the downstairs and the upstairs completely independently, and it doesn't affect the other side as long as you don't try to move the stairs.

This is also a huge benefit for scalability. If you find that the back-end Shopify architecture is too limiting for the level of growth you're experiencing, you can change it. Switch to Vercel, or Netlify, or some other back-end, and it's fine. You don't need to change the React-based front-end at all, except maybe renaming a few variables here and there.

The last benefit is speed, but I have a huge caveat here. 

React can be very fast. You can get websites to load up in a matter of a handful of milliseconds, with the bottleneck being things like product images, or even just the user's internet connection, not the site.

On the other hand, many developers go mad with power when given the reins to React. When you can custom-develop any feature you want, you're more likely to go wild with making all your dreams a reality, and a lot of those dreams might be… let's say bloated. Speed isn't guaranteed; it requires good development hygiene, and that's in distressingly short supply.

So when someone comes to me saying they want to switch to Hydrogen because they want a faster and more responsive site, I have to caution them that it's not necessarily guaranteed, and that there are ways to speed up Shopify Liquid without doing a whole big migration.

The Cons of Switching to Hydrogen

Hydrogen is powerful and gives you a lot of control, but that comes at a cost.

First of all, it's not simple. You will need someone who knows how to handle React, whether you hire a freelancer or train someone in-house, trust an AI, or learn it yourself. While there are templates and plug-and-play options and zero-configuration Hydrogen installs, it's rarely that simple.

More importantly, the control is the point of Hydrogen. If you're avoiding the customization and control it gives you, you're ignoring the main reason to switch.

Hydrogen is capable of doing some amazing things. It's also capable of becoming extremely bloated and slow, especially if you don't quite know what you're doing and are relying on an AI to create code for you. It's easy for bad code hygiene to leave you with memory leaks, poor performance, and bulky code.

When I review a Hydrogen site for a client, this is often one of the first things I look into. Like, hey, if I can triple your site's speed by cleaning up your code a bit without hurting functionality, that's an immediate win, right?

Hydrogen is also responsible for a lot more than the front-end parts of Liquid. If your front-end team on Liquid is used to working with CSS and mostly appearance-related cosmetic changes, they're in for a surprise when suddenly they need to make React handle business data. It's not hard, exactly, but it does present a shift in attitude, and not everyone is prepared for that.

You also have to think about the costs. For one thing, you really need to have Shopify Plus if you don't already, or you'll run into a lot more hassle using Shopify as your back-end. Hiring a developer costs money, and even using something like Claude can add up over time. Keep expenses in mind as you go.

How Hard is Migrating from Shopify Liquid to Shopify Hydrogen?

A lot of existing Shopify users are being told that Hydrogen is the future of the platform, that it has all of these benefits, that it's built with Shopify in mind, and that it works out of the box. Is that true? How easy is it to migrate from a Shopify Liquid build to a Shopify Hydrogen build?

In my experience, it depends on a few things.

First: is your existing Shopify store small or large, and is it heavily customized with apps, or basically stock? The simpler and smaller it is, the faster and easier your migration will be.

Next: Are you fine with hiring an expert in React, Hydrogen, and Shopify? Trying to DIY all of this is a lot harder than hiring someone to handle it for you. Fortunately, a lot more people are experienced in this combo now than a few years ago, so it's still worth considering.

Finally, are you willing to spend the time on this? A thorough, well-done migration will take at least a couple of months for a simple store, and could take six months or more for a complex store. If you were hoping for a few weeks of bumpiness and a new store at the end of it, you're going to be disappointed.

In my experience, there are a few key roadblocks to handle.

• Your CMS. Shopify's biggest weak point has always been blogging, and Hydrogen is no different. Many people end up using a third-party CMS to handle blogging, since otherwise you have to do weird things with meta objects, and it all just gets clunky.
• Your plugins. If you're using a bunch of custom Shopify apps, know that a lot of them are built for Liquid, NOT Hydrogen. Some apps do, but relatively few of them, and you may need to pay for a premium package for some of them, or else recreate the functionality from scratch.
• Your wishlist. I've worked with some clients who have some frankly unrealistic ideas for what they want developed and how they want it to work. The more custom work you need, the longer and harder the migration will be. If you need a reference, here's a guide to adding a wishlist to Shopify that can help clarify the complexity involved.

Despite all of that, it's not too bad to make this jump. When you have a professional or two on your side, or you know enough of your way around React in particular to get things working, you can work through it.

What Does a Move from Liquid to Hydrogen Look Like?

To give you an idea of what you'll be in for, here's what a typical migration to Hydrogen might look like.

First, you do a lot of planning. You need to sit down and define what you want, what your goals are and what features you want to add. Audit your existing apps and features, see if there are any that you lose that you really need, that kind of thing. You'll also need to make a full inventory of your architecture, your URL structure, your inventory, and all the rest. 

Next, you'll set up a Hydrogen environment and get it all connected to the Shopify API. This doesn't take long for an experienced pro, but if you're trying to DIY the process, you can miss critical tools or dependencies and run into a wall later.

The third step is the bulk of the development work. This is where you use Hydrogen to recreate all of your core pages, from your homepage to your product pages to your blog posts, and anything custom-made with plugins on Liquid. You're building the shell here, and the more complex you want it to be, the longer it can take.

After that comes your data migration. This is where you port everything from your Liquid store to your Hydrogen store. The API does a lot of the heavy lifting here, but if you're changing anything fundamental about how your store works, you can run into issues. This is where I find I have to do the most troubleshooting for client migrations.

Now you need to test everything. Check if your features work, make sure it all looks good on both desktop and mobile, run test transactions to validate your store process, and all the rest. This is also an area where I like to spend some time optimizing code, minifying and smushing and compressing, getting caching working, and all the various speed optimizations.

Only then, once everything is as set up as possible, can you launch the Hydrogen storefront by migrating your DNS and redirecting as necessary. 

You can see why, if you're not really invested in either the tech or the changes you need, it ends up a lot of work for not a lot of result.

When is a Migration to Hydrogen a Good Idea?

If you're reading all of this and you're still on the fence, I can help you decide whether or not you would benefit from making the switch from Liquid to Hydrogen.

Is your business growing rapidly, such that you need to be able to scale and iterate quickly? If so, Hydrogen gives you a lot of power, where the restrictions built into Liquid will chafe.

Do you want custom functionality that you haven't been able to get with apps in Shopify Liquid? Hydrogen gives you complete control so you can make it do anything you want, if you have the developer know-how to pull it off.

Do you already have a dev team used to working with your site? If you have people making anything custom out of code for you, you're already well-prepared for a migration to Hydrogen and the challenges you'll face.

Are you hoping to be on the cutting edge of technology? If so, you're a few years out of date, so a jump to Hydrogen is where you want to be. Hydrogen is iterating quickly, too, so be prepared to adapt along with it.

On the other hand, there are a few good reasons to reconsider the migration.

• If you're only looking for a faster site. Hydrogen CAN be faster and more responsive, but you can also do a lot of tweaks to speed up a Liquid site with a much lower timeline and overhead cost. In fact, this is one of my specialties, so give me a call if it's something you're interested in.
• If you prefer more stable, lower-maintenance technologies. Hydrogen is powerful, but it's also changing over time, whereas Liquid is a lot more stable.
• If you're on a tight budget. It's pretty much unavoidable that running a Hydrogen-based site is going to be more expensive than a basic Shopify Liquid site. If you don't have that budget flexibility, don't do it.

Frankly, Hydrogen is very powerful and very cool, but it's also unnecessary for a lot of businesses. I'm more than happy to talk about it with my clients, so drop me a line if you're interested in the conversation!