How To Access Custom Fields on the Product Page in Stencil

Custom fields allow you to add additional information about your product such as a link to a PDF file, or a small note. However, you still need to grab that information and display it on the product page. Previously you would need to loop through the custom fields, compare each field name and then display the custom field value when a match is made.

Here's how to do display the custom field in an efficient manner:

{{#filter custom_fields 'YourCustomFieldName' property='name' }}
  {{value}}
{{else}}
  in case nothing is found, can leave it blank
{{/filter}}

I am using the filter Handlebars helper to return only the custom field that I am interested in as opposed to looping and comparing all of the fields one by one. That makes the code faster and much easier to follow especially when dealing with multiple fields.

You can use the filter helper on any array as long as there is a property to compare against.