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)
Jason
Shopify Expert
10438 169 2081

Not as pretty as the current collection picker, but this will do the job. You're going to have to (sorry) add specific strings to the key so the code knows what sort of field it is. Existing fields won't be broken.

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 ★
Jason
Shopify Expert
10438 169 2081

Collection field support is released in the current master. For this to work you'll need to add the "[_c]" marker into the key name. eg:

namespace: custom_fields
key name: some-key[_c]
value: your value

The marker will be hidden from the client side so it does not look as ugly. 

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 ★
Kim_Eriksen1
Pathfinder
111 0 60

Jason, looks awesome as usual!
I cannot find the basic and rough user guide - where did you hide it?

Thanks

/Kim
Morfars.dk

Jason
Shopify Expert
10438 169 2081

I took the link down as the later updates (and conversion to a chrome app) made the doc redundant or wrong in places. I need to make another.

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 ★
Jason
Shopify Expert
10438 169 2081

A small updates has been made to resolve this issue. When you next run the tool you should be seeing the new version. 

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 ★
rickydazla
Shopify Expert
690 0 73

It's a beautiful thing!

I'm a million different people
William_Reid
Tourist
3 0 3

Hi Jason—

Really great plugin. I appreciate your effort and dedication. One question for you—are you able to easily make the inputs for the custom fields <textarea>'s instead of text type inputs? Or an option to do as such? My end hope is to implement a rich text editor for these fields as they are able to maintain any HTML put it them.

Jason
Shopify Expert
10438 169 2081

It would be easy enough to make them text areas or add a marker to set them as such (or auto switch them). Still early days on this tool with plenty of work still needing to be done but I agree 100% that it needs text areas. People are starting to show some more interest in it, so I'll pull my finger out and do the same.

As for your hope - that pretty easy. I did add a second (and third) RTE for a customised version so it's quite possible should you feel that way inclined. Image inserts and such are flaky, but generally editing is fine.

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 ★
billivycarter
Tourist
3 0 3

Thanks for your reply Jason. Can you point me in the right direction on how to implement this as a custom feature? Text input is all I need, image inserts aren't necessary for the store I'm building. 

 

I'd be able to host the customized version on my end, but don't want to go outside your comfort zone with that.

Jason
Shopify Expert
10438 169 2081

Are you just needing some help on how to get this thing to work? I know I've given close to zero usage instructions...

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 ★