Custom editor for JSON metafield

2 0 1

I would like to use json metafield to store some complex structures with product metadata, so I can load them by Storefront API and render them in a custom frontend.


But how to simplify data admin for store admin users?


I can not expect them to learn to "code" JSON, do not break its schema and know how keys should be named etc. They need some UI to manage that structure.


How can I embed my UI into product manage page, without creating Shopify App? I could imagine to create bookmarklet admin need to start on Shopify Admin what will load my custom editor, but is there better way?

Replies 2 (2)

Shopify Partner
6275 574 1324

Apps do not embed into the shopify admin like this.

If you need a schema editor it will either need to be external, an app, or as you imagine a bookmarklet or even a browser extension.

There's also the edge case of using the theme system to have an an internal editor only useable by staff in the visual theme editor but that does not resolve the issue of connecting to the admin-api to update those metafields.


More likely the simplest approach can be just setting up something like a googlespreadsheet and using googlescripts or a service like zapier to push the final json.


Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to

Shopify Partner
38 0 10

I second on that. Let me know how you resolved the issue for your use case.

It's a shame JSON metafields don't allow to set schema structure and don't have a visual editor. 
In a sense, theme customizer is exactly that: a visual editor for JSON templates.
Implementing something like this for metafields seems to be a logical step forward on Shopify's behalf.