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
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
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
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)
Now you can save the results, add the custom Shopify page in our settings and check the results in the account widget