Displaying Custom Fields as Bullet Points

In this advanced guide, we'll show you how to use fields in Custom Fields to create a bullet list displayed to customers on products. This method keeps all fields separate for easy administration.

Note: a simple way to do this is to create an "HTML" type Custom Field and use the visual editor to edit the HTML. This solution, however, has a number of drawbacks. For instance, you can't keep all the values separate and utilize import/export to update them.

1.) Create your Custom Fields 

Which you want to be displayed in bullet points in the app. You can check the box that says, Exclude from display if you only want this field to appear in the bullet point list.

2.) Create a new Product Liquid Template Custom Field. This will be where store our code.

3.) Customize the code

Once the new code field has been created, customize what you would like the code to do in the Snippet Editor. If you left the edit page early, the easiest way to get back is to click Configure Fields and then Edit on the code field you just created.

In the example below, we're opening an Unordered List, checking that the field has a value, then printing it as a Line Item and closing the list. Repeat the conditions and statements as needed for each of the fields in your list.

<ul>

{% if product.metafields.custom_fields["bullet_points_1"] != blank %}

<li>{{ product.metafields.custom_fields["bullet_points_1"] }}</li>

{% endif %}

{% if product.metafields.custom_fields["bullet_points_2"] != blank %}

<li>{{ product.metafields.custom_fields["bullet_points_2"] }}</li>

{% endif %}

</ul>

 4.) Save and Check your work!!

Click on Update Settings once you've finished with the code. Now all the values you add to those fields either directly in the app, or through the CSV import tool in the app would be displayed in bullet points.