Have you recently felt like you hit the ceiling when it comes to what your current store design can offer? For example, you wanted to add new features or change the style for a more modern one, but it turned out that it would take far more time and work than you can spend on it?
Understanding Shopify Hydrogen framework and Oxygen hosting
A headless design might be the answer here. And to help brands build faster and fully customized storefronts, in 2021 Shopify released Hydrogen framework and Oxygen hosting.
In this article, we’ll explore what Hydrogen framework and Oxygen hosting are, what they can do, and how you can make them work best for your online business. So, grab a cup of tea or coffee, sit comfortably, and read on.
source: Shopify
What is Shopify Hydrogen?
Hydrogen is Shopify’s React-based new framework for creating modern headless storefronts. It comes with pre-built components that significantly simplify communication with Shopify Storefront API for development teams. In its latest version, Hydrogen is built on top of Remix, which is a new competitor to Next.js. Although Remix does not have as established a position in the market as Next.js, it is quickly gaining fans due to its solid framework and powerful features, making it a perfect headless solution for custom Shopify storefronts.
What is Shopify Oxygen?
Oxygen is Shopify’s platform for hosting Hydrogen storefronts. It is available to merchants on the Basic, Shopify, Advanced and Shopify Plus plan. Unlike other hosting solutions, such as Vercel or Netlify, Oxygen does not incur additional costs for the hosting itself, bandwidth or storage usage. The hosting price is already included in the Shopify plan.
💡It is worth noting that when choosing a headless approach, you can opt for Hydrogen, but not necessarily in combination with Oxygen. Other solutions, such as previously mentioned Vercel and Netlify, will also be suitable for hosting.
However, it is important to note, that Oxygen has some limitations you should be aware of:
- The worker file size must be kept below 5 MB
- Each request to your worker is restricted to 30 seconds
- Images can have a maximum size of 20 MB
- Videos are limited to maximum size of 1 GB
- 3D models should not exceed 500 MB in size
- Any other files must be kept below 20 MB
Hydrogen project can be effortlessly deployed from a Git repository. Once the repository is connected, Hydrogen automatically generates a pull request with a CI/CD pipeline to seamlessly deploy your storefront to various environments, such as Production, Preview or Custom. The number of public environments available depends on the Shopify plan.
Key Features and Benefits of using Hydrogen and Oxygen solutions on Shopify
Various pre-built tools and templates
Hydrogen comes with an elegantly pre-built headless architecture and Storefront API communication, liberating developers from the burden of starting from scratch when creating standard pages like Home, Product Details Page, Cart, etc. This significantly reduces the time required for development.
Several built-in tools for developers
Developers love and value the tech stack featured in Hydrogen. By utilizing Vite as its build tool, Hydrogen provides developers with functionalities like Hot Module Replacement (HMR), client component code transformations, code splitting, and enhancements over native ESM imports, among other features. As for styling, Hydrogen has implemented Tailwind CSS, a fast and reliable utility-first CSS framework.
Full support from Shopify
Hydrogen is officially developed by Shopify team, ensuring that its code will be adapted to any changes that may occur in the Storefront API. With this advantage, Shopify stores are relieved from the need of manually tracking changes in the changelog and independently adjusting the core parts of the code.
Fast and performant hosting
Oxygen provides fast and well-optimized hosting for Hydrogen storefront that nicely integrates with Shopify ecosystem. With the integration of Cloudflare and Shopify Content Delivery Network (CDN), your files will be secure and load quickly across the globe, increasing your overall site performance and load speed.
By using Oxygen, Shopify merchants won’t have to worry about paying for third-party hosting services separately. It’s already included in their Shopify subscription.
source: Shopify
Exploring Shopify Hydrogen Headless Development
Let’s look at Hydrogen framework and Oxygen hosting from a development perspective now.
Hydrogen storefronts – what makes them unique?
Hydrogen headless stores, with their flexibility, optimistic UI, and nested routes, offer designers unlimited possibilities to express their visual creativity. They are no more bound to predefined templates that can only be customized to a certain extent. Designers can focus on creating rich customer experiences and make your store truly unique, setting it apart from the competition.
Take a look at our headless commerce examples to explore how ecommerce brands benefit from using the headless approach, enabling excellent site performance.
Advantages of Headless Commerce with Hydrogen Shopify
Storefronts built on Hydrogen are distinguished by their exceptional performance. Thanks to the rendering technique called Streaming Server Side Rendering (Streaming SSR), available in React v18, the browser begins to render the page before the server finishes sending all the data. This significantly reduces the TTFB (Time To First Byte), which is one of the key performance indicators for websites.
This is not the only reason why headless Shopify development is gaining popularity and will continue to do so in the near future. Going headless allows you to leverage technological advantages for seamless third-party integrations. If you want to benefit from headless CMS platforms like Sanity, Contentful, or Strapi for your Shopify store, or fetch product data from your ERP system, opting for headless storefronts will be an excellent choice for your business. Embracing this approach empowers you with the flexibility to create a tailored and dynamic online shopping experience, setting your brand apart and ensuring success in the ever-evolving world of e-commerce.
Considerations Before Jumping into Shopify Hydrogen framework and/with Oxygen hosting
As you can see, going the headless route with Shopify Hydrogen (for example with Oxygen) could help you breathe new life into your store. Fully customized designs, outstanding performance, quick and easy deployment – headless designs can give you this and far more.
However, moving from a traditional storefront to a headless one isn’t actually an easy task. To ensure that these solutions will work the way you expect, there are a few things we recommend that you research first.
Compatibility with Your Business Needs
Before diving in, it’s crucial to assess how well these solutions align with your business needs. Evaluate the scalability, customizability, and features offered by each solution, ensuring they cater to your specific requirements. A thorough understanding of your business goals and future expansion plans will guide you in making the right choice.
Resource and Skill Requirements
Leveraging Shopify Hydrogen may demand varying levels of resources and expertise. Consider the reliability of the agency, how familiar they are with React server components and also how experienced they are with using Remix framework and other technologies and developer tools included in Hydrogen’s tech stack. Ensuring their capability to integrate with Shopify APIs will be crucial in achieving a successful custom storefront development.
Integration and Migration Considerations
A massive benefit of working with Headless architecture is that you can integrate it with any platforms, tools or services you might need. You no longer need to worry about compatibility issues or pick systems that maybe don’t have all the features you need but can be smoothly connected to your store.
Instead, you can cherry-pick the tools and services that match your business needs the most and then integrate all of them into your store. However, that means you’ll have to do a bit of research on which exactly integrations you wil need:
- Which Shopify ERP integrations you will need for the store to work seamlessly
- What plugins you want to keep using on your new store
- Which CMS you will be using for creating, storing and publishing content
- Are there any other tools or platforms you need to be implemented, etc.
If you are moving from another ecommerce platform to Shopify (for example, you are planning a Woocommerce to Shopify migration), then this step is especially important.
Is Shopify Hydrogen Right for You?
Going headless can bring dozens of benefits to an ecommerce store, that’s true. The thing is though, headless isn’t a silver bullet – there are some cases in which you might be better off staying with the traditional Shopify store.
Implementing Shopify Hydrogen might be a good option when:
- You want to improve the performance of your online store beyond what’s possible with the standard Shopify designs.
- You need a fully flexible and customizable solution through which you could create a unique and tailored shopping experience for your shoppers
- Your store is quickly growing, so you are looking for a scalable architecture that can handle high traffic volumes and complex operations.
Using Hydrogen might not be a good choice when:
- Your store is pretty simple and so you don’t yet need the many bells and whistles Headless can offer
- You want to set up your store quickly and on a tight-budget
- You don’t have anyone in your team familiar with React (and you don’t have the budget to hire them either)
When in doubt, you can always ask Shopify development experts for an opinion – like our experts at WeCanFly. Once we look through your project brief and discuss with you what goals and requirements you have, we’ll surely be able to recommend the best way to help you meet those goals.
Don’t want to use Oxygen for hosting Hydrogen? There are other options!
Looking at how we kept mentioning Hydrogen and Oxygen together, you might think now that they can’t be used separately. That couldn’t be further from the truth though – you can virtually use any other global hosting solution together with Hydrogen. If you’d rather use a different service for hosting your store than Oxygen, then we can either help you pick the best hosting service for your needs or migrate the store to your chosen hosting.
Custom Shopify Hydrogen Development – why work with an agency?
If you are now thinking about turning your own store headless or maybe you need to talk a bit about the pros and cons of the switch first, then your best bet is to reach out to Shopify agencies specializing in custom Shopify app development, such as our team at WeCanFly. We worked with quite a few clients over the years who wanted to take full advantage of the headless architecture – and so we can say we do know how we can make setting up your headless store faster and smoother.
After having one or a few meetings with you, we’ll suggest the best approach to the headless switch, plan the project in detail, and then keep working closely with you to craft a unique experience for your customers. We can also help you manage the store after the launch. Whether you will need additional features implemented or a helping hand in fixing technical issues or glitches, we’ll be there for you.
Send us your project brief and we’ll schedule a meeting to learn more about your Shopify development plans – and how we can use Hydrogen and Oxygen frameworks to elevate the shopping experience at your store.
Conclusion
You surely heard several times already that headless is the future of ecommerce. Because it is – with headless, there are no more barriers or restrictions in how you want your store to look and perform like. With Shopify Hydrogen and Oxygen, turning your store headless and reaping the benefits of the switch has become even easier. That is, as long as you have an experienced development partner at your side who knows exactly how to use the potential of both frameworks for your benefit. Are you looking right now for one? We’ll be happy to share our skills and experience with you – just give us a call.
Paweł Dymek
Headless Team Leader
