Shopify Oxygen Review

Shopify Oxygen is a hosting platform for Hydrogen storefronts. It was created as a solution for hosting headless react-based Hydrogen stores. As such, the platform allows merchants to easily deploy and manage hydrogen storefronts directly on Shopify without paying extra for a third-party hosting service provider.

In this review, we'll take a closer look at Shopify Oxygen's features, pros, and cons to gain a better understanding of the platform.

Why Shopify Created Oxygen

Headless eCommerce has gained a ton of traction over the past few years. If you've read any of our recent articles about Jamstack eCommerce platforms, 10 benefits of headless eCommerce, or the real reason businesses go headless, you'll know that we write about this topic a lot because we see it as the next big technology trend.

As the incumbent in the eCommerce space, Shopify has a great view of what direction technology trends are moving. It makes sense that they saw an opportunity to claim their piece of the headless website hosting market.

Vercel, Gatsby, Netlify, AWS, and DigitalOcean have been the dominant hosting options for headless websites. A decent number of these websites were integrated with Shopify. From Shopify's perspective, it must have seemed like a lost opportunity to allow those customers to move to a different ecosystem.

The other factor I've noted from some of our clients is that Shopify commands loyal followers. Some businesses swear by Shopify and aren't interested in other solutions, even if they're a better fit. If there's a Shopify version of a different product they're using, there will be little friction getting them to change providers.

Shopify isn't blind to any of these factors, so it only made sense that they built their own headless website hosting product.

To be honest - we're still testing it out!

I wanted to come clean and explain that my team has only recently started using Oxygen, and we're still figuring out whether it's worth writing home about.

I just wanted to lay this out early on because this review doesn't go as deep as we'd ultimately like it to. Most of you reading want the tl;dr of whether to pick Oxygen or look elsewhere.

Hopefully, we can provide enough of a summary that you feel armed to make the decision. I'll circle back and update this article in a couple of months when we've found all the idiosyncrasies that are causing us headaches.

How Shopify Oxygen Works

Oxygen is a little bit of a black box for anyone who doesn't already have a Shopify account. We wanted to provide a quick overview of the process of getting set up with Oxygen.

Setting up Shopify Oxygen is pretty straightforward (again... assuming you have a Shopify Plus account).

1) Install Hydrogen channel

First, you'll have to install the Hydrogen channel - an app that connects Hydrogen (a React framework for building custom storefronts), Oxygen, and Shopify admin. You can simply install it from the Shopify App Store or, alternatively, from your Shopify Admin, click on the All recommended sales channels button and choose Hydrogen, then click Add to install it.

2) Connect to your Github account

To track changes you'll make to your Hydrogen Storefront, you'll have to create a Git repository for the Hydrogen channel. Once connected to Github, Oxygen will create multiple versions of Hydrogen storefronts, which can be managed independently in isolated environments.

When changes are pushed to a connected Git repository, the platform creates a new branch with a snapshot/preview URL of your storefront, which can be shared to show your progress.

Once you're ready to launch, you simply change the privacy of your URL to public, and a Hydrogen storefront will be up and running in no time.

Features of Oxygen Shopify

Some of the key features of Oxygen include:

Easy setup and deployment

Oxygen makes it easy for merchants to set up and deploy their Hydrogen storefronts. Merchants simply need to add Hydrogen as a sales channel from their Shopify dashboard and connect their GitHub account to get started.

Vercel also does a great job at making deployments easy. The trend they're following here is to be one of those hosting platforms with their own development framework to take the hassle out of deployments and configuration.

Global hosting servers

As a hosting platform, Oxygen boasts globally distributed servers that help improve website performance and page load speed for visitors in different locations.

This way, visitors will be automatically redirected to the server closest to their location, which can help reduce latency and improve website performance. Additionally, Shopify's global hosting servers are optimized for eCommerce, with features like automatic scaling and load balancing, to ensure that stores can handle traffic spikes and maintain high uptime.

Smart caching

Oxygen comes with a feature called "Smart Caching," designed to improve page load speed and optimize website performance.

When visitors access a page on a Shopify store, their browser sends a request to the server to retrieve the page content. This process can take time, especially if the server is far away or the page contains many images or scripts.

Smart Caching helps speed up this process by caching frequently accessed pages and assets on the server and delivering them directly to the visitor's browser when they request the page. This means that the page content can be loaded more quickly, improving the visitor's experience on the site.

Worker bundles and runtime logs

Oxygen comes with a feature called "Worker Bundles and Runtime Logs," designed to provide more visibility into the development process and help developers debug their code more efficiently.

A "worker" in Oxygen is a process that performs a specific task, such as handling incoming requests or generating page content. Worker bundles are pre-built packages of code that can be used to customize the behavior of workers in Oxygen. By using worker bundles, developers can add new functionality to their Shopify store without having to write complex code from scratch.

The runtime logs in Oxygen provide detailed information about how workers are performing and any errors that may be occurring. This information is critical for developers to identify and troubleshoot issues that may be affecting their store's performance. With the runtime logs, developers can see exactly what is happening behind the scenes and pinpoint the root cause of any issues affecting their store's performance.

Pricing plans

Oxygen is available to users on the Basic, Shopify, Advanced, and Shopify Plus plans. However, if you're planning on building a headless store and you don't have a Shopify Plus account, some critical features will be limited. I wrote an article on the ins and outs of building a cheap, headless Shopify store that explains these limitations in detail.

While Oxygen itself is a "free" addition to a Shopify store, merchants will need to consider the cost of technical development resources when building out their Hydrogen storefront.

The true cost of using Oxygen to host a Hydrogen storefront will depend on various factors, including the third-party services used to build the headless architecture, the in-house technical expertise hired, the agency (pick us!) used for implementation, and the ongoing maintenance cost.

Since Oxygen relies heavily on technical team members to manage store content, merchants will also need to consider the cost in time and continued development when deciding whether to use Oxygen as their hosting platform.

Drawbacks of using Shopify Oxygen

While Shopify Oxygen offers many benefits for merchants, there are some limitations that merchants should be aware of when using this platform. Here are some potential cons to consider based on the information provided on the official Shopify Oxygen page:

Lack of supporting information

One of the main drawbacks of using Shopify Oxygen is that it is a relatively new and less familiar platform among many Shopify agencies and brands. As a result, merchants considering using Oxygen have limited access to information and support resources, which could hinder their ability to effectively use and troubleshoot issues with the platform.

It's worth noting that since Oxygen is still a young platform, its features and capabilities may change over time as Shopify iterates and revamps it as it matures. So, if you're considering using it, you should take some time to carefully evaluate its features and capabilities to determine if it is the right hosting platform for your needs.

Worker file size limit

Shopify Oxygen has a limit of 5MB for worker files. This means that if your worker file exceeds this limit, you may not be able to upload or use it on your Shopify store. This limitation can be challenging for merchants who need to use large or complex worker files to support their store's functionality.

CPU time limit

Oxygen also limits workers to 30 seconds of CPU time per request. This can be problematic for merchants with complex or resource-intensive applications requiring more than 30 seconds to process a request. If a worker exceeds this limit, it will be terminated, which can result in errors or incomplete transactions for customers.

Memory limit

Each worker in Shopify Oxygen is limited to 128MB of memory. This means that if your worker exceeds this limit, it may be terminated, or requests for it may be canceled. This can be challenging for merchants who need to process large amounts of data or have complex applications requiring a lot of memory to run.

File size restrictions for static assets

Shopify Oxygen has file size restrictions for static assets such as images, videos, and 3D models. While these restrictions are generally reasonable (20MB for images, 1GB for videos, and 500MB for 3D models), they can still limit merchants who need to use larger files to showcase their products or provide an immersive shopping experience.

You have to use Hydrogen

Hydrogen is pretty cool, and it's undoubtedly a framework worth paying attention to, but its feature set of maturity is miles behind Next.js. I wrote an article not long ago that compares Next.js and Hydrogen. Committing to Oxygen means you're stuck with Hydrogen, which kind of goes against the mantra of headless architecture, where you have the freedom to choose the right tools for your use case.

How does Oxygen stack up against the competition?

Here's a high-level comparison of how Oxygen stacks up against the competitors.

Shopify Oxygen:

• Key Features: Seamless integration with Shopify, a mature and well-maintained global hosting network, smart caching, worker bundles, and runtime logs for enhanced performance and development capabilities.
• Pros: Tight integration with Shopify ecosystem, simplified setup process, optimized for e-commerce, smart caching for faster page loads, worker bundles for custom functionality.
• Cons: Limited supporting information due to its relative newness, file size restrictions, CPU and memory limits.

Vercel:

• Key Features: Vercel specializes in static site hosting and serverless functions. It offers a simple and intuitive deployment process, automatic scaling, and supports multiple frameworks and languages.
• Pros: Easy deployment and scalability, serverless functions for dynamic functionality, CDN integration for global content delivery, and support for various frameworks. Some CMSs like Sanity are developing features specifically for Vercel.
• Cons: Gets expensive quickly and doesn't provide the same level of native Shopify support as Oxygen.

Netlify:

• Key Features: Netlify is a popular hosting platform known for its simplicity and developer-friendly features. It offers continuous deployment, automatic scaling, and supports JAMstack architecture.
• Pros: Easy setup and deployment, continuous integration and deployment (CI/CD), global CDN, built-in forms and identity management, supports serverless functions.
• Cons: Limited server-side functionality; may require additional services for dynamic content; pricing can increase with usage.

DigitalOcean:

• Key Features: DigitalOcean is a cloud infrastructure provider offering scalable virtual machines (Droplets) and managed Kubernetes clusters. It provides complete control over the hosting environment and offers various configurations.
• Pros: Flexible and scalable infrastructure, customizable server configurations, support for different programming languages, robust documentation, and community.
• Cons: Requires more technical expertise for setup and configuration, manual scaling and management, and additional setup required for deployment automation.

Frequently asked questions

What is Shopify Oxygen?

Shopify Oxygen is a hosting platform for Hydrogen storefronts that enables merchants to deploy and manage their custom storefronts without the need for configuring or maintaining infrastructure.

How do I get started with Oxygen?

To start using Shopify Oxygen, you need to add Hydrogen as a sales channel from their Shopify dashboard. Once Hydrogen is added, you can then connect your GitHub account to start deploying your Hydrogen storefronts using Oxygen.

What is the difference between Hydrogen and Oxygen?

Hydrogen is a framework for building custom storefronts on Shopify, while Oxygen is a hosting platform for Hydrogen storefronts.

Key takeaway

Shopify Oxygen is a cutting-edge eCommerce hosting platform that provides powerful features for merchants looking to host their Hydrogen storefronts. With its smart caching, global hosting servers, easy setup and deployment, and other robust capabilities, Oxygen offers merchants greater flexibility and control over their online storefronts. While there may be some limitations to consider, overall, Oxygen represents an exciting development in the world of e-commerce hosting and is definitely worth considering for merchants looking to enhance their online presence and grow their business.