How do I install and use the browser extension?

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

You can also get your copy of the browser extension directly from our app's homepage:

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. Get familiar with the interface.

By default, the editor is collapsed and looks like this:

You can expand it by clicking on the button highlighted in the screenshot above. If you would like to have the editor expanded by default, you can set this behavior in the settings:

Once the editor is loaded, 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.

Select a metafield (or a set/definition) from the drop-down menu or click on the Add new metafield button to reveal the editor:

1) Metafield type selector.

2) A button to copy the Liquid code snippet for the active metafield to the clipboard.

3) Delete active metafields. A dialog window to confirm deletion will show up.

4) An input for the metafield namespace.

5) An input for the metafield key.

6) An input for the metafield value.

7) An indicator to highlight a modified attribute.

8) Discard changes.

9) Save changes.

For multi-line string, rich text, 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 buttons:

1) Show notes.

2) Discard changes for specific metafield.

3) Set an empty value for a specific metafield.