Working with multiple option lists

In this advanced guide, we'll show you how to save time building a Custom Fields (metafields) pre-defined list of options to choose from.

This technique is ideal for any field type that only allows for multiple options to be selected at once. Examples are multiple select lists and checkboxes (use the field type of Text List) in the Custom Fields app. If you'd like to use this technique when selecting only a single option, see Working with Single Option Lists

STEP 1: Create a text list custom field that would be shown as checkboxes.

Don't forget to fill in the options.

STEP 2: Open product.liquid template. A shortcut to this template is to click “Configure Fields” -> “Theme Info” and click the link to product.liquid template. You can also get to it through the Shopify interface.

Depending on your theme, you may have your product description either in the product.liquid template directly, or in the product-template.liquid section. In the screenshot below you can see the contents of the product.liquid template can be found in /sections/product-template.liquid

Find product-template.liquid in the Sections folder (if needed), press Ctrt+F (for Windows) or Command+F (if you’re on Mac) and type “product.description” to find the line quickly.

STEP 3: Customize your list

Note: If you have already pasted the print generic "include" snippet to print all fields from Custom Fields, you would, probably, want to delete it.

In the example below, we're assigning a short name to the custom field, checking that the field has a value, then assigning the picture and text to each of the options you have filled in in step 1 and closing the list.

{% assign crs = product.metafields.custom_fields["consuming_recommendations"] | split: '|' %}
{% if crs != blank %}
{% for consuming_recommendations in crs %}
{% if consuming_recommendations == 'pear' %}
<p>This pie is sour and delicate. Tastes best with black tea with bergamot.</p>
<div><img style="width: 200px;" src="https://thumbs.dreamstime.com/b/food-earl-grey-tea-bergamot-35758052.jpg"></div>
{% endif %}
{% if consuming_recommendations == 'chocolate' %}
<p>This pie is as dark as it can be. Would be ideal company for light cacao or late.</p>
<div><img style="width: 200px;" src="https://uccexpress.ie/wp-content/uploads/2016/11/hot-chocolate-1058197_1920.jpg"></div>
{% endif %}
{% endfor %}
{% endif %}

That's how it should look like in your template: