Extending Product Pages with Metafield (and Metafield Editors)

Highlighted
Shopify Partner
21 0 3

Hi all

I wanted to discuss with you the state of metafields and metafield editors. And also some of our own (oh so precious) thoughts and solutions.

We develop shopfiy shops/themes. In the past we worked with many of those wonderful metafield tools that the partner community has come up with. E.g.

and in many cases they were just what we needed. But as our customer got less and less technical and more and more demanding  we tried to come up with solutions to improve their experience (the content authoring experience, that is). I would love to learn more about how the community is thinking about this.

I think we all agree that Shopify is not a multi-purpose CMS nor should it be.

Still, with metafields Shopify gave us the building blocks to extend its content capabilities in a powerful way.


The problem

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

  1. The Product Title
  2. 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

The only solutions that make sense (imho) use metafields.

The Metafield feature is simply 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.

So metafields 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 (metafield) 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 and one for a store locator, each one with a unique user interface. 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 client, 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 very good solutions that are trying to ease the content editing pain 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:

  1. Provide content editors with a “don’t make me think” interface to edit structured content
  2. Let developers configure the content and user interface that content editors use.


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

You can find more examples (with configuration and liquid code snippets) at this github repo: 

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

Thanks for reading till the end ;-) While you are here, I am *super curious* to learn what solution you are using to improve the content editing experience of your clients and were the pain points are in your experience.

Thanks, you friend
Dominik

 

0 Likes
Highlighted
Shopify Partner
21 0 3

There is also a command line tool for exporting and importing related metafields:

https://github.com/flexify/powereditor-cli

 

0 Likes
Highlighted
New Member
1 0 0

Is there api access to power editor metafields? I need standard CRUD and would love to pass data through json.

0 Likes
Shopify Partner
21 0 3

The power editor app itself uses Shopify's metafield API. This is what you can use fro CRUD operations as well.

There is the command line tool that lets you batch import metafileds via json; in case this is what you are looking for.

0 Likes
Highlighted
Shopify Partner
54 0 0

We are working with a number of store developers who were looking to solve the same issue - how to give their clients an easy yet powerful way to edit their stores' metafields. Nothing really beats a spreadsheet here, and so wiring up metafields to get updated via an Airtable base is a very good way to approach this. Take a look at how to bulk edit Shopify metafields this way.

0 Likes