Content Editor for Shopify Hydrogen, an alternative to the theme editor and headless CMS
Shopify Hydrogen is the biggest change in the history of e-commerce. And Content Editor will help you manage your text and images with Hydrogen.
How does a normal shop visitor experience Shopify Hydrogen?
You will notice it by the fact that the page load times will be much faster. 10x faster. 100ms to 300ms will be the new normal, and we will get an instant shopping experience. I expect many online shops will shift to this paradigm in the following years.
Managing content in Shopify
If you start a new online shop with Shopify, you start by creating the store in Shopify admin, adding products, configuring payment options, etc. For the shop layout, you search for an existing theme in one of the theme stores or program a custom theme using the Liquid templating language. Once you publish the theme, you can customize it in the theme editor. This enables content managers to change text and images on their own.
Shopify Hydrogen changes the concept of themes completely. It provides React components for developers to create completely custom online shops. Shopify acts as a headless e-commerce platform, and the developer connects to their APIs. Unfortunately, the standard theme editor is not built for this type of application.
How can a content manager then change text and images?
One option is to use one of the excellent headless CMS systems like Sanity, Strapi, Storyblok, etc. Especially Sanity offers already a solution to integrate with Hydrogen.
One problem is that you have another system with another authentication system and API interfaces. But the biggest downside is that you lose the performance of the edge computing infrastructure you get with Shopify Hydrogen and Oxygen (hosting).
Content Editor for Shopify Hydrogen
A couple of weeks ago, I asked myself if it is possible to create an editor like the theme editor, but that works with Shopify Hydrogen. I think it is possible, and the reason I started this project.
My Content Editor consists of a couple of React components plus hooks and a Shopify app similar to the theme editor.
Editable React component
The Editable React component defines the schema, similar to the section schema definition of theme sections in Liquid. I tried to use almost the same syntax. A unique namespace name is also required to store the content data in Shopify’s metafields. With an optional scope parameter, you can define that the data is stored as metafield of a product, for instance.
useEditable React hook
The data entered in the Content Editor App is stored in Shopify’s metafields. The useEditable hook fetches the data from the metafields using the namespace name and makes it available to the React component. As a second parameter, you can define some default data. The returned data structure is almost the same as for sections in Liquid-based themes.
Content Editor Shopify App
A content manager can access the Content Editor App directly from Shopify admin. The editing experience is very similar to the standard theme editor. There is a preview of the Hydrogen online shop on the right side and the editable components on the left side. The preview passes the component structure via postMassage from the iframe to the Content Editor App.
In the Youtube video, I walk you through all the required steps to set up Content Editor for Shopify Hydrogen.
Why is Hydrogen such a game-changer?
It brings significant performance improvements on multiple levels. When you have a standard web application — and most e-commerce websites are web applications — the app usually loads the dynamic JavaScript part into the browser first. Then it gets interpreted, and it fetches additional data from the server. This takes a lot of time, especially on the first load, which is most important.
Hydrogen gives you React components that can be pre-rendered on the server so that only a small part is transferred to the client. This saves bandwidth and execution time. In addition to that, Oxygen — the cloud infrastructure — executes the React server components at the edge. For instance, for an online shop visitor from Australia, the React server components are pre-rendered at an edge node maybe in Sydney. All these improvements will give us speed that was not possible before.
Last December (2020), the React team presented React server components to the public. Many teams showcased their progress with this new technology this year, including Vercel (Next.js) and Shopify. And 2022 will be the year when we will see massive adoption of many developers worldwide. I’m pretty sure this will be a game-changer.
Current status of my Content Editor for Shopify Hydrogen
I showed in the video an early developer preview not available for the public yet. But all different parts are working together. And I’m working on a version that the public can test.
