"i only speak liquid" #66: Liquid vs. Hydrogen: Which framework to use?

Hey everyone,

This is Rob Clark’s 2nd out of 4 edits of “i only speak liquid”.

Rob (a Storetasker Member) is a highly experienced Shopify developer based in Wiltshire, UK, who has worked with brands like ThruDark and Pangaia. He specializes in theme development and UX design.

Make a friend and connect with him here. 

What I’ve been thinking about: 

Liquid vs Hydrogen - Which framework for the next Shopify build

Before diving in, I want to clarify that while I’m not a Hydrogen expert, I do have a solid understanding of React and have previously explored Hydrogen builds. For a more comprehensive perspective, I recommend consulting a specialist in Hydrogen development.

One of the key decisions when building a Shopify store is choosing between a Liquid Build or a Hydrogen Headless Build. This decision requires careful consideration to ensure the best outcome for the final product.

Here are some important factors to consider before starting the build process:

What is Liquid?

Liquid, Shopify’s traditional templating language based on Ruby, has been the cornerstone of Shopify themes for years. All Shopify themes are built using Liquid.

What is Hydrogen?

Hydrogen is a modern, React-based framework for building custom, headless frontends for Shopify stores. It typically interacts with Shopify via the GraphQL or REST APIs, offering more flexibility for developers.

Which Option Should You Choose?

When deciding between Liquid and Hydrogen, it’s essential to weigh the pros and cons of each option. Here are some factors to consider:

1. Customisation

• Liquid: Provides a robust level of customisation within its framework but comes with inherent limitations, such as restrictions on the checkout page.

• Hydrogen: Offers virtually unlimited flexibility, enabling highly customised frontends that can retrieve and send data to Shopify without being confined by a templating structure.

2. Performance

• Hydrogen builds, when optimised, can deliver faster performance and access data more efficiently through the GraphQL API compared to Liquid builds.

3. Content Management (CMS)

• Liquid: Shopify 2.0’s theme customizer has significantly improved its CMS capabilities, making it more scalable within its ecosystem.

• Hydrogen: Often requires an external CMS (like Sanity.io) to enable clients to create and update pages effectively.

4. Infrastructure, Support & Maintenance

• Liquid: Shopify fully supports the infrastructure, including security and maintenance, offering peace of mind.

• Hydrogen: Requires ongoing developer involvement to maintain, secure, and update the site manually.

5. Apps and Integration

• Liquid: Shopify’s app library provides an extensive range of tools to meet store requirements.

• Hydrogen: Not all Shopify apps offer APIs for Hydrogen, meaning developers may need to create custom solutions. While this adds flexibility, it also increases complexity.

Cost vs. Customisation

Ultimately, the choice often comes down to balancing cost and customisation:

• Liquid: Faster and more cost-effective to implement, with lower maintenance requirements.

• Hydrogen: Requires more time, resources, and expertise but eliminates most limitations, enabling unique and highly interactive designs.

As there is a potential that user expectations shift toward an app-like experience, Hydrogen’s flexibility positions it as a strong contender for future-forward Shopify stores.

Final Thoughts

There’s no definitive “right” answer. Instead, the best choice depends on your client’s specific needs and long-term goals. While a Liquid build may seem simpler initially, it’s important to consider whether it could limit growth in the future. Evaluating these factors upfront will ensure the chosen approach aligns with the client’s vision and scalability needs.

3 links you can’t miss:

• monday.com: Among the many project management tools available, monday stands out for its versatility. Whether you're managing tasks as an individual or collaborating with a team, its customisable boards allow you to tailor workflows to your specific needs, making it a highly adaptable solution for a variety of projects.

• Toggl Track: Effective time management is crucial for freelancers, and Toggl Track has proven to be an invaluable tool for staying on top of it.

  With features like real-time timers, billable rate tracking, and timesheet exports, Toggl Track simplifies client updates and ensures efficient time management. It’s an essential part of maintaining productivity and organisation.

• Tailwind CSS: Tailwind CSS has become a buzzword in web development for good reason—it’s revolutionised the way developers approach website styling.

  This utility-first CSS framework enables developers to efficiently apply styles using pre-defined classes, ensuring that only the used styles are included in the final stylesheet. This keeps builds lean and optimised.

  Once you’re familiar with its class structure and customisation options, Tailwind empowers developers to build web and app interfaces faster and with greater precision, making it a game-changer for modern front-end development.

1 app I like:

Matrixify

Matrixify is a powerful tool designed to streamline mass data updates within a Shopify store. By enabling the export of data in formats such as CSV and Excel spreadsheets, it provides easy access to a wide range of store information, including products, collections, meta objects, customers, discount codes, and more.

Users can also import data back into Shopify via Matrixify, making it an efficient solution for bulk content updates across the site.

Additionally, Matrixify’s migration capabilities allow for seamless transitions between platforms, such as migrating data from Magento to Shopify. This versatility makes it an invaluable tool for a variety of use cases, from data management to platform migration.

One learning as a freelancer:

Knowing Your Worth: How to Charge Correctly

The questions “How much should I charge?” and “How much am I worth?” often feel distinct, but in reality, they’re deeply intertwined.

It’s tempting to lower your rates to secure a project, especially when there’s pressure to get sign-off on funding. However, in my experience, projects where prices are dramatically reduced often end up costing more—both in time and effort—than those charged at standard rates.

Consider this: You wouldn’t expect to buy a top-of-the-line sports convertible with all the bells and whistles for the price of a second-hand car equipped with a cassette player playing ‘Never Gonna Give You Up’ on repeat (yes, I’m showing my age here!). So why should it be any different when hiring a skilled digital professional?

Your knowledge, experience, and quality of work are the result of years of dedication—countless hours, challenges, and investments in learning and growth. These are not easily replicated, even with the rise of AI. Your interactions with clients are unique, and your expertise is invaluable. Respect yourself by valuing your time, and valuing your time means charging appropriately.

Key Considerations When Setting Your Rates

1. Research the Market
   Understand what others with similar skills and expertise are charging. Use this as a baseline to establish your rates.

2. Account for Your Expenses
   Remember, profitability matters—even if your primary focus is building experience, creating unique experiences, or enhancing relationships. Ensure your rates cover your expenses and leave room for growth.

3. Value Your Time
   Plan your project timelines carefully and factor in buffer time. Projects are rarely approved without revisions or delays, so give yourself the flexibility to adapt.

4. Assess the Client

   • Does the client respect your expertise and communicate professionally?

   • Are they persistently pushing for discounts or dangling promises of future work in exchange for reduced rates?
     These can be red flags. A good client values your skills and is willing to pay for them.

Final Thoughts

Everyone’s rates are different, and there’s no universal formula. The key is to understand your skills, experience, and the value you bring to the table—and charge accordingly. When you set your rates properly, you’re more likely to attract the right clients: those who respect your work, value your expertise, and make your freelancing journey rewarding.

-Rob