Liquid code for Shopify templates to allow displaying of option variants. Useful if you want to show a list of sizes for a product on a collection page or a list of colours. Can use for any option type, just change the option_handle check.

liquid_showoptions.html

{% comment %}
Show all sizes for a product in liquid
{% endcomment %}
{% for option in product.options %}
  {% assign option_handle = option | handle %}
  {% assign option_index = forloop.index0 %}
  {% if option_handle == 'size' %}
    {% assign values = '' %}    
    <ul class="{{ option_handle }}-options">
    {% for variant in product.variants %}
      {% if variant.available %}
        {% assign value = variant.options[option_index] %}
        {% capture wrapped_value %},{{ value }},{% endcapture %}
        {% unless values contains wrapped_value %}
          <li class="{{ option_handle }} {{ option_handle }}-{{ value | handle }}">{{ value }}</li>
          {% capture values %}{{ values }}{{ wrapped_value }}{% endcapture %}
        {% endunless %}
      {% endif %}
    {% endfor %}
    </ul>
  {% endif %}
{% endfor %}
{% comment %}
Show all colours for a product in liquid
{% endcomment %}
{% for option in product.options %}
  {% assign option_handle = option | handle %}
  {% assign option_index = forloop.index0 %}
  {% if option_handle == 'color' %}
    {% assign values = '' %}    
    <ul class="{{ option_handle }}-options">
    {% for variant in product.variants %}
      {% if variant.available %}
        {% assign value = variant.options[option_index] %}
        {% capture wrapped_value %},{{ value }},{% endcapture %}
        {% unless values contains wrapped_value %}
          <li class="{{ option_handle }} {{ option_handle }}-{{ value | handle }}">{{ value }}</li>
          {% capture values %}{{ values }}{{ wrapped_value }}{% endcapture %}
        {% endunless %}
      {% endif %}
    {% endfor %}
    </ul>
  {% endif %}
{% endfor %}