Content Editor for Shopify Hydrogen, an alternative to the theme editor and headless CMS

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.

Editable React component and useEditable hook used in Hydrogen

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.

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.

--

--

--

I ❤️ Shopify & Next.js. checkout-agency.com, Founder

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Time Parsing — A Kata

Design in The Browser With This ONE Line of Javascript

Why do Seed and Series A Startups Choose JavaScript for Frontend and Backend?

Why do Seed and Series A Startups Choose JavaScript for Frontend and Backend? | TechMagic.co

“Mocking is a Code Smell”, without Types.

JavaScript Reduce: The Ultimate Iterator

JavaScript: String.replaceAll has Landed in All Major Browsers

⚡️ Anypad whitelist closes soon ⚡️

How I Created A Twitter Bot In Response To The Epidemic of Mass Shootings in America

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Markus Tripp

Markus Tripp

I ❤️ Shopify & Next.js. checkout-agency.com, Founder

More from Medium

A Web Framework To Help You With Search Engine Optimization (SEO)

Best open-source headless CMS Platforms

Next.js crash course

How to add Google AdSense in your Nextjs?

How to add Google AdSense in your Nextjs By Rajdeep Singh