The popularity of our browser extension is not a surprise - it's a great tool to manage metafields on the go. So let's see how to setup it up properly and utilize its functionality for your benefit. This tutorial consists of two parts: an installation guide and a brief overview of controls and features.
Part 1. Installation process.
Our browser extension works with the majority of the most popular web browsers: Google Chrome, Mozilla Firefox, Edge, Opera, Brave, and Vivaldi.
To start with, we need to get the extension installed into your browser from the official stores:
1) Click here to download the browser extension for Google Chrome, Edge, Opera, Brave, or Vivaldi.
2) Click here to download the browser extension for Mozilla Firefox.
On the extension's listing page, click on Add to *browser name* button:
If the pop-up window shows up, confirm that you want to install our browser extension:
Now you can navigate back to your Shopify store admin panel and open any supported resource. In this tutorial, we're going to use a product. Once you open the selected resource in the admin panel, you'll see the installation message in the top right part of the admin area. Hit the Activate button to start syncing the browser extension with your Shopify store:
On the next screen, press Install:
When the process is completed, the confirmation message will show up:
Close this page and go back to the Shopify admin panel to see the browser extension in action:
Part 2. Introduction to UI. Features and tips
By default, the editor is collapsed and looks like this:
Here you can see the following controls:
1) Menu tabs. Toggle between those tabs to access metafields or metafield definitions/sets.
2) Settings button.
3) Drop-down selector to navigate through existing metafields/sets. You can search for metafields by the key - start typing or insert the entire key.
4) A button to create a metafield.
5) A shortcut to Metafields Guru app.
Select a metafield (or a set/definition) from the drop-down menu or click on Add new metafield button to reveal the editor:
1) Collapse editor.
2) Metafield type selector.
3) A button to copy the Liquid code snippet for the active metafield to the clipboard.
4) Delete active metafields. A dialog window to confirm deletion will show up.
5) An input for the metafield namespace.
6) An input for the metafield key.
7) An input for the metafield value.
8) An indicator to highlight a modified attribute.
9) Discard changes.
10) Save changes.
For multi-line string, JSON, deprecated JSON_STRING, and STRING metafields you can also enable the WYSIWYG/visual editor:
The editor will be opened in a modal:
The editor used for a metafield set/definition items is pretty similar but comes with three extra features:
1) Show notes.
2) Discard changes for specific metafield.
3) Set an empty value for a specific metafield.
A couple of interesting tips.
1) You can switch between the embedded or floating modes and change the order of appearance of the menu tabs in the settings:
2) You can sort items in all "list" metafield types:
3) You can upload new files and preview existing ones:
4) You can format messy JSON objects to make them more manageable:
5) If you change the metafield type from any type to a multi-line or a single-line text field, the value will be preserved. This also works for all related list- and non-list metafield types.