Cacher is the code snippet organizer for pro developers

https://help.shopify.com/themes/customization/products/features/get-customization-information-for-products#sectioned-themes
{% assign options = '' %}
{% assign variants_option_1 = '' %}
{% assign variants_option_2 = '' %}
{% assign variants_option_3 = '' %}

{% for option in product.options %}
  {% assign options = options | append: option | append: '//' %}
{% endfor %}
{% assign options = options | split: '//' | uniq %}

{% for variant in product.variants %}
  {% if variant.option1 %}
    {% assign variants_option_1 = variants_option_1 | append: variant.option1 | append: '//' %}
  {% endif %}
  {% if variant.option2 %}
    {% assign variants_option_2 = variants_option_2 | append: variant.option2 | append: '//' %}
  {% endif %}
  {% if variant.option3 %}
    {% assign variants_option_3 = variants_option_3 | append: variant.option3 | append: '//' %}
  {% endif %}
{% endfor %}

{% assign variants_option_1 = variants_option_1 | split: '//' | uniq %}
{% assign variants_option_2 = variants_option_2 | split: '//' | uniq %}
{% assign variants_option_3 = variants_option_3 | split: '//' | uniq %}

{% if options[0] != blank or options[1] != blank or options[2] != blank %}
<ul class="select-list"{% if hide_default_title %} style="display:none"{% endif %}>
  {% if options[0] != blank and variants_option_1 != blank %}
  <li class="option option-size" data-option="option1">
    <ul>
      {% for variant in variants_option_1 %}
      <li><a href="#" data-value="{{ variant | escape }}">{{ variant }}</a></li>
      {% endfor %}
    </ul>
  </li>
  {% endif %}
  {% if options[1] != blank and variants_option_2 != blank %}
  <li class="option option-color" data-option="option2">
    <span class="name1">{{ options[1] }}:</span>
    <ul>
      {% for variant in variants_option_2 %}


      <li><a href="#" data-value="{{ variant | escape }}" style="background-image: url({{ variant | append: '.jpg' | asset_url }});">{{ variant }}</a></li>
      {% endfor %}
    </ul>
  </li>
  {% endif %}
  {% if options[2] != blank and variants_option_3 != blank %}
  <li class="option" data-option="option3">
    <span class="name1">{{ options[2] }}</span>
    <ul>
      {% for variant in variants_option_3 %}
      <li><a href="#" data-value="{{ variant | escape }}">{{ variant }}</a></li>
      {% endfor %}
    </ul>
  </li>
  {% endif %}
</ul>
{% endif %}
{% if product.variants %}
<div id="select-holder-{{product.id}}" class="select-holder "{% if hide_default_title %} style="display:none"{% endif %}>
  <select class="default" id="product-variants-{{product.id}}" name="id">
    {% for variant in product.variants %}
      {% if variant.available %}
          <option{% if variant.id == product.selected_or_first_available_variant.id %} selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endif %}
    {% endfor %}
  </select>
</div>
{% endif %}