Browser Extension

Shopify Metafield Groups

Visually organise metafields in your Shopify admin by grouping related fields together with colour-coded labels — without touching your theme code.

What it does
🗂️

Group metafields

Bundle related metafields under a named, colour-coded header.

🎨

12 colour options

Each group gets its own colour so different sections are instantly distinct.

💾

Synced across devices

Groups are saved to browser sync storage — available on every machine you're signed into Chrome or Firefox with.

↕️

Export & import

Back up your configuration or share it with teammates as a JSON file.

Supported page types

Groups can be configured for any of these Shopify admin resource types:

Products
Collections
Product Variants
Articles
Blogs
Pages
Installation
1

Install from your browser's store

Chrome: Visit Blink Metafield Groups on the Chrome Web Store and click Add to Chrome.

Firefox: Visit Blink Metafield Groups on Firefox Add-ons and click Add to Firefox.

2

Confirm the permissions

Your browser will ask you to confirm the permissions. Click Add extension — the extension only needs access to Shopify admin pages.

3

Pin it to your toolbar

Chrome: Click the puzzle-piece icon in the toolbar, find Blink Metafield Groups, and click the pin icon.

Firefox: Right-click the extensions menu in the toolbar and choose Pin to Toolbar.

Creating your first group
1

Navigate to a resource in Shopify admin

Open a product, collection, article, blog, page, or variant edit page — anywhere metafields are visible in the admin.

2

Click the extension icon

The popup shows the store name at the top and automatically selects the correct tab for the page you're on (e.g. Products if you're editing a product).

3

Click "+ Add Group"

Fill in the form:

  • Title — the label shown above the group (e.g. Related Content).
  • Subtitle (optional) — a smaller description line below the title.
  • Metafield labels — one label per line, each matching exactly the text Shopify shows on screen for that metafield.
  • Colour — choose from 12 colours.
4

Save

Click Save (or press Ctrl/Cmd + Enter). The page will automatically update to show the grouped fields with coloured borders and the group header.

Important: Metafield labels must match exactly what Shopify displays on screen — including capitalisation and spacing. Copy the label text directly from the admin page to be sure.
Available colours

Each group can be assigned one of 12 colours to help distinguish different sections at a glance.

Managing groups
✏

Edit a group

Click Edit next to any group in the popup to update its title, subtitle, fields, or colour.

✕

Delete a group

Click Delete next to a group and confirm the prompt. The grouping is removed immediately from the page.

Export & import
Export: Click the ↓ Export button to download all your group configurations for the current store as a .json file. Useful for backups or sharing with teammates.

Import: Click ↑ Import and select a previously exported .json file. This will overwrite your existing configuration for any matching store and resource types.
Troubleshooting
?

Groups aren't showing on the page

Check that the metafield labels in your group match exactly what's shown on screen. Shopify renders the labels dynamically, so try refreshing the page after saving a new group. Make sure you're on a specific resource edit page (with an ID in the URL), not a list page.

?

The popup shows "Open Shopify admin"

The extension is active but can't detect a store. Navigate to your Shopify admin at admin.shopify.com and reopen the popup.

?

Changes aren't reflected after editing a group

The page updates automatically, but if it doesn't, do a hard refresh (Ctrl/Cmd + Shift + R) to force the content script to re-apply the groups.

?

Metafields aren't grouping together

The extension cannot reorder your metafields — make sure they're already in the correct order in Shopify. All metafields in a group need to be consecutive, otherwise they won't group properly.