Printing Customer Fields in Read-Only Format (Metafields)

Overview

In this tutorial, you will learn how to print Customer Fields in a Read-Only format. This is useful if you want to only display the information to the Customer, instead of allowing them to edit it.

This will explain what code to print, and where to print it. Every Shopify theme is different, so you may have different files or places to edit the code. For our tutorials, we always use the Debut Shopify theme.

Finding Your Machine Name

In the Customer Account Fields app, go to the 'Fields' tab and take note of the Machine Names of the fields you need to appear on account pages. You'll need these in the next steps. 

Machine_Name.png

Tip: Machine names, by default are based from the Label Name you set when you create the field. Capital letters get lower-cased and spaces get turned into underscores. 

Now that we have the machine name, enter your Shopify theme code by going to the 'Online Store' tab in Shopify, Actions > Edit Code

Edit_Code.png

If you haven't properly installed the Customer Account Fields app, now would be the time to do so as we are about to explore custom code created by the app during installation. Find the tutorial on how to install here

Now that we are in the theme code, open the customers/account.liquid file and make a new line underneath line 10

Insert_Line_here.png

Enter this into the new line and replace X with the machine name that you copied earlier:

{{ customer.metafields.cf_app['X'] }}

Machino_Namo.png

After that is done, click "Save" and the top right, and you're done!

NOTE: If your field is an image or a file upload you will need to wrap this print statement in either an image tag or link tag see code below.

<img src='{{ customer.metafields.cf_app['X'] }}'>

Review your work

Visit a customer's profile page to review the changes.