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.
When it comes to written content, there are basically only two places you can add it to a product in Shopify
That’s it. And in most cases this is just about what you need. But there are cases you want more than that.
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.
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.
Here is what it looks like for authors:
Here is a demo of how to reorder content items:
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:
Displaying the content via liquid in a theme:
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:
The (evolving) documentation can be found here:
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
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.
|a minute ago|