Adding Custom Fields to the Shopify Dashboard

Jason
Shopify Expert
10438 169 2081

What is this madness?

In short, a tool to add Custom Fields to the admin dashboard. Since my other Dashboard tools are proving to be to super handy I figured Store Owners could do with a smaller version for adding metafields. Developers (and the brave) should stick with ShopifyFD. 

How to install:
http://freakdesign.com.au/blogs/news/how-to-setup-the-custom-fields-for-shopify-chrome-extension

Important starting note:

THIS TOOL IS UNDER DEVELOPMENT AND 
MAY CHANGE AT ANY TIME. USE AT YOUR
OWN RISK ON CLIENT STORES.

Rough User Guide (still incomplete)

This tool requires that certain metafields already exist before running the tool. If the whole concept of adding metafields is confusing or just plain scary, this is something you should get your code happy designer or developer to help you with. 

Once some metafields have been created, this tool will show something like this in your dashboard:

When we call these custom fields I am not being quite truthful - these are just standard metafields under a default namespace name, or one that your define yourself. It sure does make editing faster when you need to add the same sort of metafield (like a product youtube link) over and over again.

==================================

So err, where is it?

  1. You can nab it from the product home page over on freakdesign, or
  2. Grab the extension from the Chrome store.
  3. or manually install it as a bookmarklet from the github page.

==================================

Usage notes:

The namespace for all metafields is currently "c_f", though the legacy "custom_fields" version is still available.
Custom namespaces can be made also. 

There are special markers that help us know what sort of field we are showing.

  • "[a]": limit display to articles only
  • "[c]": limit display to collections only
  • "[g]": limit display to pages only
  • "[p]": limit display to products only
  • "[_c]": mark as a collection field
  • "[_t]": mark as a textarea
  • "[_n]": mark as a number field
  • "[_co]": mark as a color field
  • "[_d]": mark as a date field 

Planned to be added (if possible):

  • "[_f]": mark as a file field
  • "[_g]": mark as a page field
  • "[_p]": mark as a product field

Using metafields in liquid is easy. A basic example is shown below where c_f is the default custom fields namespace, and youtube is the key name. If you have brackets in the key name remember to use it as a string. 

{{ product.metafields.c_f.youtube.value }}

# If your key name is using brackets:
{{ product.metafields.c_f['[p][_t]some-key'].value }}

If you used a custom namespace (and setup the whitelist) you do not have to use the c_f namespace.

==================================

What's on the todo / research list?

  • file upload fields (very unlikely here, unless we are talking about uploading to the assets folder)
  • product picker (underway)
  • adding a simple html editor to a textarea field. This won't support images.
I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Replies 433 (433)
Outer_net
Pathfinder
89 3 26

Hi Jason,

Currently I am unable to install or use either of your amazing looking tools you have developed :( 

 

Can you suggest any simple way to reveal meta changes in the admin product pages?

 

Thanks

 

Devin1405
New Member
2 0 1

Broken here too. What a shame. I just wish Shopify had official implementation of custom fields for pages so I could fill in stuff without this trickery. Hopefully an update is pushed soon.

JL3
New Member
1 0 0

Encountered this same issue, am hoping someone could please help!

Thank you

Verdant-Spark
Shopify Partner
89 8 23

Content security policy

VM174:1 Refused to load the script 'https://s3.amazonaws.com/freakdesign-us/shopify/custom_fields/s/freakdesign_custom_fields.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' cdn.shopify.com cdn.shopifycdn.net checkout.shopifycs.com d2c7xlmseob604.cloudfront.net www.google-analytics.com stats.g.doubleclick.net app.myshopify.io app.myshopify.com c.paypal.com www.paypal.com appcenter.intuit.com mpsnare.iesnare.com api.stripe.com maps.googleapis.com js.braintreegateway.com www.youtube.com s.ytimg.com custom-fields.shopifycloud.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.