Adding Customer Metafields to Custom Pages

Froonze

Last Update vor einem Jahr

If you are collecting additional customer information in Shopify's customer metafields you can include this information in Custom Shopify Pages loading within the account widget to provide a more complete and personable content for your customers.


For example, let's say that you're collecting your customers' pets information in metafields defined as below, so you should be able to find them already in your Shopify Admin > Settings > Metafields > Customers


First thing you'd need to do is editing your theme's account.liquid template to assign these metafield values to global Javascript variables that will be used later on the custom pages. 

To edit your theme code go to Shopify Admin > Online Store > Themes > (click the Actions dropdown of the theme you are working on) > Edit Code


Find the template account.liquid, open it and scroll to the bottom of its content, you can write the script to generate the metafields at the end. In the script, the names of the Javascript variables are totally of your choice, but the metafields must match those that you have in Shopify and be wrapped in double quote marks. 


In the example below petnm, pettp, petdt are the names of the variables, and wrapped in " we have the metafields as they are defined in Shopify Admin. Once added you can click on Save

Note: if the metafield outputs in a JSON string or number, you must not use double quote marks (") to wrap the metafields. E.g.: window.myvariable = {{ customer.metafields.custom.myfield}}

Next thing is creating the Shopify Page that will contain the elements and the scripts to append the customer metafields to, as well as any other element or content around that you want the page to contain. Go to your Shopify Admin > Online Store > Pages, click on Add Page and choose a name for your page, then click on the Show HTML icon to open the HTML editor.


Let's say that we want to show the metafields under different headings containing a short description of the information. So what we'd need to add is:

  • the headings with the description (in this case I wrapped them in h3 tags)
  • div containers with specific id values under the headings. These specific id values will allow us to append the metafields generated by JS to the containers (in this case I identified the containers as namecontainer, typecontainer, dietcontainer, but you can choose other values)
  • the script to append the global variables (in this example they are window.petnm, window.pettp, and window.petdt) to the containers with specific ID values (#namecontainer, #typecontainer, #dietcontainer, also selected themselves with variables)

This would be our code:


Now you can save the results, add the custom Shopify page in our settings and check the results in the account widget