Shopify is not a multi-purpose CMS nor should it be. But with metafields Shopify gave us the building blocks to extend its content capabilities.

Metafields itself is a way to store (mostly textual) data related to products, collections, orders, blogs, pages and the shop itself. You can output metafields on your storefront using liquid.

I’ll focus on extending product pages here to keep things simple. But all that I am going to describe can be applied to pages, collections, articles as well.

The problem

When it comes to written content, there are basically only two places you can add it to a product in Shopify

  • The Product Title
  • The Product Description

That’s it. And in most cases this is just about what you need. But there are cases you want more than that.

Examples include

  • Tabs and accordions
  • Related products
  • Testimonials
  • Image and Video galleries
  • Downloads (e.g. PDFs for Specs)

Existing solutions

So meta fields are awesome. They basically let you extend your product pages in any way you want. The real challenge is when it comes to the authoring experience. Out-of-the box, there is none. Metafields are basically a developer only tool. So we need apps. And – of course – there are a lot of them. They can be roughly divided into two camps

Super focused (metafielcd) apps

There is an app for everything. And many of these apps use meta fields under the hood. But as developers what we really want is not to have an app for tabs and one for image galleries, each one with a unique user interface. A when we want to add another content type (e.g. a PDF Download) we have to start our research again to find a good app that will let our clients do that. Apart from the fragmented user experience for our authors cost can also accumulate to a significant amount.

General metafield apps

On the other end of the spectrum there are (some very good) general purpose metafield apps. Those will let you input content in whatever form you like. But at the same time those apps have to make sacrifices when in comes to the UX (user experience) for content editors.

There are some solutions that are trying to ease the content editing pain (e.g. metafield editor, custom fields) but while they are wonderful from a developer perspective our clients still struggled with them. It seems to be a dilemma: You either have a powerful solution OR one that is simple and super easy to use.

The sweet spot

So it seems that either the developer or the content editor has to take the hit. We wanted to shift the pain a little bit more on the developer side.

Our assumption is that developers can and will deal with complexity and are used to a certain amount of pain that comes with it. While content editors should not be bothered as much as possible with implementation details and technical constraints.

Goals:

  • Provide content editors with a “don’t make me think” interface to edit structured content
  • Let developers configure the content structure and user interface for content editors

The solution

We came up with a solution that combines metafields with the “split” operator hack and baked it into a tightly integrated but highly configurable user interface. We call it Power Editor.

The goal was to cater to the two different user groups involved.

  1. The developer configures the content structure using a powerful and flexible configuration syntax (TOML in our case).
  2. The result is an editing interface that is custom-made and laser focused and makes it super simple to add, edit and rearrange those content (e.g. tabs or testimonials).

Here is what it looks like for authors:

https://www.youtube.com/watch?v=-fgt2GJTd_w

Here is a demo of how to reorder content items:

https://www.youtube.com/watch?time_continue=12&v=o4zsiYDJI0Y

Here are two screencasts (sorry for the bad quality) that show setting up the app for product tabs from end to end:

Configuring the content: https://www.screencast.com/t/5JduM4LqgJAY

Displaying the content via liquid in a theme: https://www.screencast.com/t/bicaVYCX9hP

Docs and more examples

The app is partner friendly; meaning it is free to use in developer stores without restrictions.

Yo can find more examples (with configuration and liquid code snippets) here: https://github.com/flexify/shopify-powereditor-examples

The (evolving) documentation can be found here: https://shopify.flexify.net/power-editor/documentation

While I think we nailed the UX for content editors I think there is much to be improved on the developer side of things. I would love to hear from you if you’d like to check it out (I am happy to provide anyone with free app subscriptions in exchange for constructive feedback. Just ping me at dominik [ä] flexify.net)

Keep launching those awesome shops! We hope to help you make it a little easier for you and your clients and those shops a little bit more awesome!

Comments