Advanced Custom Fields in Shopify

If you’ve spent any time developing WordPress themes you’ll more than likely have come across Advanced Custom Fields by Ellion Condon.

Being a hater of content builder plugins I remember being resistant to it when I was first shown it by another developer. In the end I bought the Pro licence and I’ve used it on every theme I’ve built since. It’s the first plugin I install, I find it indispensible.

So when I started building Shopify themes, and realised pretty quickly that the theme structure was very similar to WordPress, I looked for a way to handle meta data based options in the Shopify backend.

Step forward Custom Fields.

It’s very similar to ACF, although given that ACF has been in activate development for many years and has an enormous user base, Shopify Custom Fields is a relative infant.

Like ACF though, the real power comes from Repeater fields, and you need the $19 a month premium version to access that.

Similarities

  • • In ACF you can select whether the custom field is ‘attached’ to a post, page, custom post type or global (but only if you activate it in the theme). With Custom Fields it’s the same, the Global attributes are available by default and there are more Shopify based options to associate the custom field with – collections, orders, products and customers.
  • • Documentation is excellent and thorough on both.
  • • Official code samples are plentiful on both.
  • • Developer is responsive and support is good.

Differences

  • • Once you set up a repeater field, you cannot then edit the fields inside it. This is frustrating, you need to create a new field withint the repeater, delete the old one and then update your theme to use the new repeater field ID.
  • • You can edit the custom fields within the relevant page/product/category in the Shopify backend – but only in the Chrome browser, and only by installing a Chrome extension. Otherwise you have to update your settings on the bonify.io site.
  • • As shown in the section below, Shopify Custom Fields has an excellent code generator.
  • • ACF has a much larger community, but to be fair it will have been going a lot longer and have a lot more users.
  • • You’ll miss the drag ‘n’ drop flexibility of ACF, on Shopify Custom Fields you have ‘Move Up’ and ‘Move Down’ buttons. Still, you’ll be thankful they are there at least.
  • • Pricing model.

Pricing

ACF has the Free and Pro versions. For many years the Pro version has worked on the model that you pay once and then get a lifetime licence. I can only imagine how often Elliot has rued that decision when you look at the likes of Gravity Forms.

Put it this way, if he changed it to a yearly subscription I would happily still pay it.

Shopify plugins are either free or have a monthly payment. The developer gets 80%, Shopify get 20%.

Custom Fields has 4 payment plans, but if you want the powerful repeater / field collection functionality you’ll have to pay for the Pro version.

You can have a free licence for Custom Fields on dev sites – things get a bit interesting on Shopify Plus dev sites, because they aren’t technically dev sites. When you get a Shopify Plus subsciption you get two live sites essentially, and there’s no way for the developers to discriminate programmatically that one is dev and one is live.

As you can see here https://support.apps.bonify.io/hc/en-us/articles/235624507-Common-Billing-Questions, you would contact Custom Fields support who would mark one of your Shopify stores as ‘dev’ and then you’d only need to pay for one licence.

Code Samples

If there was one thing in Shopify Custom Fields that I think ACF could learn from it’s the code generator. Especially useful if you are new to Shopify theme development or Liquid Themes.

It generates the loop and also an include statement. Here’s an example of a loop;

{% if product.metafields.custom_fields["product_description_sections"] != blank %}
  <div class="custom-field custom-field__product-description-sections custom-field__type--field-collection">
    <h3 class="custom-field--title">Product Description Sections</h3>
    <div class="custom-field--value">
      {% assign separator = "|###|" %}
      {% assign section_background_colour_array = product.metafields.custom_fields["section_background_colour"] | split: separator %}
      {% assign section_html_array = product.metafields.custom_fields["section_html"] | split: separator %}
      {% assign fc_keys = product.metafields.custom_fields["product_description_sections"] | split: "," %}
      {% for i in fc_keys %}
        {% assign index = i | plus: 0 %}
        <div class="fc-item fc-item--product description section fc-index--{{ index }}">
          <div class="fc-field field__section-background-colour">
            {{ section_background_colour_array[index] }}
          </div>
          <div class="fc-field field__section-html">
            {{ section_html_array[index] }}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
{% endif %}

Misc – Gotchas

When you are using the Chrome extension to edit the fields, you have to remember to save the custom fields and then save the product. It is so so easy to forget to do this, if you forget the first step then saving the product will wipe out the contents you added to the custom field. And if you go in to edit a product and all you edit is a custom field through the chrome extension, there will be no option to save the product. You have to add/change something (I normally add a full stop) and then save it, then remove that and save it again. It’s not ideal of course, but it’s more than worth the hassle and doesn’t impact your workflow too much.