Working with Multi-Select 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.

Getting Started

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

1.) Create a text list custom field. Make sure the Widget Type is set to Show as checkboxes. 

Do not click Exclude from Display

Don't forget to fill in the options and click Create New Field.

Configuration

Now you will be brought to the edit Custom Fields screen. In this screen you can edit code in the snippet editor, edit the label name, and also hide fields from display.

2.) Customize your list in the Snippet Editor

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

{% assign values = product.metafields.custom_fields["common_options"] | split: "|" %}
{% if values != blank %}
{% for common_options in values %}
{% if common_options == 'Made In USA' %}
<p>This product was made and produced in the United States of America.</p>
{% endif %}
{% if common_options == 'Warranty Information' %}
We offer a 1-year warranty on this product.
{% endif %}
{% endfor %}
{% endif %}

Make sure to click Update Settings after completing your code.

Completion!

4.) Test your Results!

Fill in the fields you want on any specific product or page and click save!

And if you coded it correctly, you will now see your fields on your page!