Shopify unveiled two new exciting features at the Unite 2021 summit: Hydrogen and Oxygen. These products can be used together to simplify the creation of custom storefronts.
Shopify Hydrogen, a React framework, simplifies the creation of custom storefronts on Shopify’s ecommerce platforms. This includes the common components of ecommerce such as the variant picker, shopping cart, media gallery, and variant picker. These components can be assembled right from your shop with minimal code.
Shopify Oxygen, a complement feature that allows Hydrogen storefronts to be hosted directly on Shopify, is available. It is highly efficient for commerce and has a global reach.
This article will show you how to use Shopify Hydrogen or Oxygen to create a seamless ecommerce experience.
Announcements for Shopify Unite 2021
Shopify hosts an annual summit that focuses on system improvements and feature releases. Shopify Unite 2021 was a great success. Many exciting new features were revealed that are aimed at both merchants as well as Shopify partners.
What are the major changes that lie ahead?
2021 updates include Shopify Shopify Checkout changes, a new Shopify Partners dashboard and more functionality for Shopify.
Shopify Hydrogen is one of the major developments. Oxygen is another. Users can customize their storefronts with the Hydrogen framework and Oxygen complement. This also makes it much easier to build apps for Shopify App Store.
Shopify Hydrogen & Oxygen
Shopify is a rapidly growing platform that surpasses Amazon in online traffic in 2021. Shopify’s success is based on two factors:
- Customers can quickly navigate between stores.
- Merchants have the ability to open new stores or update existing ones.
Shopify Hydrogen, Oxygen are perfect for this purpose. Let’s take a look at what each feature can do.
Hydrogen can be purchased at Shopify
Hydrogen is a low-tech product that requires little technical knowledge. Shopify’s 1.7+million merchants have the ability to design and update their shops without any programming skills.
Shopify storefronts are known for their distinctive Shopify look. This is a good thing, as it makes the site look modern and sleek. However, not every company wants their site to look like it belongs to a particular ecommerce brand.
Particularly large businesses want an individual, custom-designed online presence. This customizability was not available until recently. It came at the expense of speed and dependability.
Hydrogen was created to allow users flexibility in their designs while still maintaining Shopify’s native speed. The framework uses both JavaScript and React, and provides merchants with many new tools and components to create their own storefronts. These React components include the variant picker, content gallery, and shopping cart. These components can be integrated seamlessly into any Shopify storefront.
Hydrogen supports graphic-heavy shops and is dynamic. It maintains its lightning fast order processing speeds. The Shopify Checkout for a store that uses Shopify Hydrogen or Oxygen can process nearly 40,000 items per minute!
Shopify Oxygen
The distance between the server and customer is one of the key factors in determining the speed of a connection. Global cloud companies have their servers scattered around the globe. Shopify is not an exception.
After a merchant has built their Shopify Hydrogen storefront, Oxygen handles the hosting process. Oxygen has over 100 servers located all around the globe to ensure maximum speed.
Oxygen also hosts all content formats on its servers, in addition to the storefronts. This has two important implications.
First, merchants have more freedom when it comes to designing storefronts.
Second, all content is stored close to customers. This allows storefronts load in milliseconds.
What does Shopify Hydrogen do at a technical level to function?
Shopify Hydrogen is a great tool for storefront design. However, it does not require any coding.
Let’s take a look at how Hydrogen functions on a technical level.
Structure
Ecommerce websites use a lot of dynamic content. This includes customer information, product details and currencies. It is extremely difficult to create an ecommerce website from scratch.
Shopify Hydrogen makes it as easy and painless as possible, by providing all components required.
Hydrogen maintains React’s default folder structure. Hydrogen uses a public directory to store static assets and a source directory (src), for application code. It is easy to use, even for developers and merchants who are familiar with React.
Shopify includes the ‘ShopifyServerProvider’ React Provider, which is preconfigured to use tokens and connect with Shopify’s Storefront API. This means merchants don’t have to configure Hydrogen to work in Shopify.
Dynamism vs. performance
Ecommerce platforms face a challenge in balancing high performance and dynamism.
React developers have traditionally used client-side rendering to maintain dynamism. However, this has been at the expense of site performance. This is especially true when stores are viewed on mobile devices. Mobile shopping is becoming more popular.
Shopify Hydrogen uses a new technology known as React Server Components. This system increases performance without having to rely on complicated optimization procedures.
How?
RSCs assign all components to either.server/.client. Now, components marked as.server or.client are executed in a cloud. This greatly reduces the time it takes to load storefronts and still maintains all the dynamic features that are expected in modern shops.
These improvements mean that merchants can create more dynamic multi-channel storefronts without worrying about load times.
What are the benefits of Shopify Hydrogen and Shopify Oxygen?
These are just a few of the many benefits that Shopify Hydrogen or Oxygen offers, but they are not all. Shopify Hydrogen, Oxygen have revolutionized hosting and storefront design.
Design freedom
Shopify Hydrogen, which is a mobile-friendly storefront, uses React Server Components to increase load speeds. This allows designers to create dynamic storefronts, without worrying about slow loading speeds affecting their search rankings.
Hydrogen allows for greater design flexibility by seperating client-facing areas and the rest of the shop. Designers have the freedom to experiment with new designs, content strategies and other elements while keeping the back-shop data and system safe.
You can also create a frontend as a Shopify Hydrogen App and share it with your entire team using Oxygen. The Hydrogen frontend and backend communicate with Hooks to allow for easy pushes. This removes the risk of a store being broken by a new update, which can cause significant revenue loss until the problem is corrected.
Performance improvements
Performance is greatly improved when client and server components are kept separate from each other. This is because the website requires less server-side loading. This is particularly beneficial for mobile users.
Shopify Hydrogen also uses very little JavaScript. This reduces the amount of bandwidth needed to load a page.
Oxygen also has over 100 servers worldwide, which makes it easier for customers to get their websites up and running. This reduces page load times by a factor of a few milliseconds to a fraction.
Easier personalization
Shopify Hydrogen lets designers create a React-based storefront that allows them to personalize the customer shopping experience. Dynamic content and layouts can be modified based on the customer’s location, type of order, previous interactions, and previous orders.
This is vital, since personalized websites can lead to greater sales and higher amounts.
New way to design bespoke ecommerce experiences
Ecommerce shops are growing rapidly, making it more difficult for one store to be noticed. A shop’s best chance to grow is to provide a personalized, fun, and fast experience for each customer.
Shopify Hydrogen, Oxygen, and Shopify work together to achieve this. Hydrogen assists merchants in designing a unique shop while Oxygen deploys it globally to more than 100 servers for record-breaking load speeds.
Baremetrics allows you to track the performance of Shopify stores
Baremetrics provides real insight into the performance of your Shopify app. Baremetrics integrates seamlessly with Shopify so users can view 26+ business metrics, such as MRR and churn rates, from one dashboard.
Tracking your data with dedicated software can help you achieve sustainable growth, whether you are a merchant or a service provider to merchants.
