A common question I get is how to setup the Chrome Extension for Custom Fields. I did make a PDF doc to assist, but it could have some improvements - let's try some gifs instead.

Basic setup

First use ShopifyFD (or whatever metafield editing app you want) to create a metafield. We do this to let Custom Fields know what fields to show, and where. In the example below we are adding a new metafield on the shop.

• namespace: c_f
• key: video
• value: Add your amazing video!

^ We are on the general settings page here (/admin/settings/general).

Now that's done we can jump to a product page and run the Custom Fields tools. It doesn't matter if ShopifyFD is running.

 Now you can just code like {{ product.metafields.c_f.video }} in your theme...

Use a custom namespace

When this tool was first made it needed a long namespace (being custom_fields). That's nice and descriptive so made sense at the time. After using it for a little while I got tired of typing that out so changed the default to something smaller - c_f.

Now either option isn't very pretty to look at and there'll be times you want to adapt Custom Fields to existing metafields already in the store. 

Head back to the settings page and fire up ShopifyFD again. Add some settings to enable more than the default namespaces. 

• namespace: custom_fields_config
• key: whitelist
• value: (a list of your custom namespaces, separated by a comma) 

For example, value could be "foo". You would be able to repeat the step found at the top of this post but instead of using "c_f" you can now use "foo" instead.

The Future

Future versions on Custom Fields will have a much nicer way to control the configuration, but for this version a little more manual effort is needed.