Metafield Data

We store customer information in two places - our database and Shopify’s Metafields. When a customer record is saved, metafields will be stored with the customr namespace and a key that relates to the key set up in the fields section. Of course, this data is accessible to either the Shopify API, or in front-end liquid as such:

Display data from a single field

<!-- templates/customers/account.liquid -->
Your Favorite Color: {{ customer.metafields.customr.favorite_color }}

<!-- Outputs:
Your Favorite Color: Red
-->

Note: If your field key includes spaces then you will need to use brackets and quotes for the key. Example:

{{ customer.metafields.customr['Resale License Number'] }}

Loop through each field

<!-- templates/customers/account.liquid -->
{% for field in customer.metafields.customr %}
  {% assign key = field[0] | replace: "_", " " | capitalize %}
  {% assign value = field[1] %}
  <p>{{ key }}: <strong>{{ value }}</strong></p>
{% endfor %}

<!-- Outputs:
Birthday: 10/25/1987
Favorite Color: Red
Gender: Female
-->

Custom Fields

Sweet. You’re a rockstar and want to develop out your own form submission UI. You could use our form builder, but really you’re cooler than that. Guess what? You don’t have to! All you must do is create hidden fields for the attributes you want to capture in fields and build your own markup with the associated names. You must namespace the form names as such:

<div id="customer-fields">
  {% form 'create_customer' %}
    <input type="hidden" name="shop" value="{{ shop.permanent_domain }}">
    <!-- Custom field with a key called "unicorn" -->
    <input type="text" name="customer[unicorn]">
    <!-- Custom field with a key called "your-custom-key" -->
    <input type="text" name="customer[your-custom-key]">
    <div class="form-footer"></div>
    <script>
      var Customr = {
        baseUrl: "https://customr.heliumdev.com",
        {% if customer %}
          shopifyCustomer: {
            id: {{ customer.id }},
            token: {{ customer.metafields.customr_auth.token | json }}
          }
        {% endif %}
      };
    </script>
    <script src="https://cdn-customr.heliumdev.com/assets/v2/embed.js"></script>
  {% endform %}
</div>

Now you can go nuts and build out that special UI you’re after.

Reset Password Field

Currently, Customer Fields will hide all password fields within the edit account form so that customers don’t inadvertently change their password. If you’d like an option for customers to reset their password we suggest looking at Shopify’s native method for doing so.

Shopify Fields

If you name a field with a key that relates to a Shopify customer attribute, we’ll assign the value of that field to the customer data field within Shopify. For example, if you name a key “tags” or “first_name”, a change within Customer Fields will be reflected in the actual Shopify customer in the admin.

Options

Skip Validation

If you need to prevent field validations (required fields), you can add the skip_validation param to the form.

  <input type="hidden" name="skip_validation" value="true">

Autofill

By default, Customer Fields will autofill any field with a value, even if it’s blank. If you don’t want this to happen, add the data-nofill="true" attribute to the input field and it will be ignored.

  <input type="hidden" name="customer[custom_field]" value="custom value" data-nofill="true">

Callback Hooks

If you want to do development work with Customer Fields, you’ll want to use event hooks that allow you to do JavaScript when you need. Within the customer-fields.liquid snippet, a global Customr object is defined. Within this object, you can use the following callback methods. Note that if a function returns false the current function will be returned and will not continue to execute.

var Customr = {
  baseUrl: "https://customr.heliumdev.com",
  
  ready: function() {
    // Fires when all the proper data has been loaded in
  },
  beforeValidate: function() {
    // Fires before form validation
  },
  afterValidate: function(errors) {
    // Fires after form validation
  },
  beforeRedirect: function() {
    // Fires before the browser is redirected to /account (or setting from admin)
    // Halt the redirect by returning `false`
  },
  beforeLoginUser: function() {
    // Fires before customer login is submitted after successful register
  },
  beforeFormUpdate: function() {
    // Fires before the form fields are filled with customer data
  },
  afterFormUpdate: function(customer) {
    // Fires after the form fields are filled with customer data
  },
  beforeSave: function() {
    // Fires before form is submitted
  },
  afterSave: function(response) {
    // Fires after form is submitted, regardless of errors
  },
  afterSaveSuccess: function(customer) {
    // Fires after form is submitted successfully
  },
  afterSaveError: function(errors) {
    // Fires after form is submitted with errors
  }
};