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?

Managing content in Shopify

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 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

My Content Editor consists of a couple of React components plus hooks and a Shopify app similar to the theme editor.

Editable React component

Editable React component and useEditable hook used in Hydrogen

useEditable React hook

Content Editor Shopify App

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?

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 ❤️ Shopify & Next.js. checkout-agency.com, Founder