Working With Single-Select Option Lists

Overview

In this basic guide, we'll show you how to save time building a pre-defined list of options to choose from.

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

1.) Create a new "Text (list)" Custom Field using the Widget Type of "select drop-down" and give it some Options, then save.

2.) Customize the code.

In our example, we're checking the value of our "Availability" field and reacting to the different options the administrator could select for that field. We also wanted to be able to completely ignore the field, so we've added a "Not Applicable" option to disregard the field.

Copy code below.

{% if product.metafields.custom_fields["availability"] != blank and 
product.metafields.custom_fields["availability"] != 'Not applicable' %}

  {% assign availability = product.metafields.custom_fields["availability"] %}
  {% case availability %}
    {% when '2 weeks' %}
      {% assign message = 'This product usually ships in 2 weeks.' %}
    {% when 'Immediately' %}
      {% assign message = 'This product usually ships right away.' %}
  {% endcase %}

  <div class="custom-field custom-field__availability custom-field__type--text-list">
    <strong class="custom-field--title">Availability</strong>
    <div class="custom-field--value">
      {{ message }}
    </div>
  </div>
{% endif %}

3.) Testing

Head over to one of your products in the app and test the setting.