How can I correctly sort the size variants of my product?

[pretent]

Hi there 🙂
would be happy if someone can help me here!

product sizes are not displayed in the correct order.
I wanted to sort product options swatches.
The size options should be sorted like 42,44,46....

this is how it looks like currently:

I tried something with {.. | sort %}, but it didnt work 😞

this is the code:

{% capture colorSwatches %}

{% assign found_option = false %}
{% assign is_color = false %}
{% assign is_size = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
    {% if option == swatch %}
      {% assign found_option = true %}
      {% assign option_index = forloop.index0 %}
      {% assign downcased_option = swatch | downcase %}
      {% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains 'couleur' or downcased_option contains 'farbe' %}
        {% assign is_color = true %}
      {% endif %}
	{% if downcased_option contains 'size' or downcased_option contains 'taille' or downcased_option contains 'tamaño' or downcased_option contains 'größe' %}
        {% assign is_size = true %}
      {% endif %}
    {% endif %}
{% endfor %}

<div class="swatch clearfix option{{option_index |plus: 1}}" data-option-index="{{ option_index }}">
  <div class="product-form__item">
    <label class="header">{{ swatch }}: <span class="slVariant"></span>      
      {% if settings.sizechart_link %}
        {% if is_size %}
        	<a href="#sizechart" class="mfp sizelink" data-effect="mfp-zoom-in" ><i class="ad ad-ruler"></i> {{ 'products.product.size_chart' | t}}</a>
        {% endif %} 
      {% endif %}                                   
    </label>

    {% assign values = ''  %}
    {% for variant in product.variants %}
      {% assign value = variant.options[option_index]  %}
      {% assign var_index = forloop.index0  %}
      {% unless values contains value %}
        {% assign values = values | join: ','  %}
        {% assign values = values | append: ',' | append: value %} 
        {% assign values = values | split: ','  %}
        {% assign colorname = value | handleize %}

    
          <div data-value="{{ value | escape }}" class="swatch-element{% unless variant.available %} soldout{% endunless %}">
            <input class="swatchInput" id="{{product.id}}-{{ option_index }}-{{var_index}}-{{ value | handle }}" data-var="{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if option.selected_value == value %} checked{% endif %} />
            {% if is_color %}
            {% if settings.sw_color_type == "color" %}
            <label class="swatchLbl color {{settings.sw_color_size}} {{settings.sw_color_style}} swt{{value | handle}}" for="{{product.id}}-{{option_index}}-{{var_index}}-{{ value | handle }}" style="background-color:{{ value | handle }};"></label>
            <span class="tooltip-label">{{ value }}</span>
            {% else %}
            <label class="swatchLbl lazyload color {{settings.sw_color_size}} {{settings.sw_color_style}}" for="{{product.id}}-{{ option_index }}-{{var_index}}-{{ value | handle }}"
                   data-bgset="{% include 'swatch-bg', image: variant.image %}" data-sizes="auto" data-parent-fit="contain"
                   style="background-image:url({{ 'spacer.png' | asset_img_url: 'master' }});"></label>
            <span class="tooltip-label">{{ value }}</span>
            {% endif %}
            {% else %}
            <label class="swatchLbl size {{settings.sw_color_style}}{% if settings.var_style %} square-only{% endif %}" for="{{product.id}}-{{ option_index }}-{{var_index}}-{{ value | handle }}">{{ value }}</label>            	
            {% endif %}
          </div>
      {% endunless %}
    {% endfor %}
  </div>
</div>

{% endcapture %}
{{colorSwatches | strip_newlines | remove: "  " | remove: "	" }}

[Dirk]

Hey, @pretent 

Luckily there is a much easier solution that requires no coding. When you go into your product, there is an option to reorder your variants! I've attached a screenshot to show you:

From the reorder variants screen you can drag them in whichever order you like! I hope this helps. If there is anything else I can help you with, please let me know.

[pretent]

Hey Dirk,
thx for your reply 🙂

Yeah i know this kind of solution but, we have imported over 3000 product with random size sequence 😞
Cant reorder them manually

[will78]

Hey!

That is a great solution if you have 15-20 products. But in a move to make more money we got hit by a strike of genius one day sitting in the office and realized that having more products would lead to having more sales. To our amazement that worked pretty well, but 3,000 plus products later it is unrealistic to think we can go product by product and reorder sizing. Is there a global solution to organize variants utilizing numeration or alphabetization?! I've talked to a least two dozen shopify users that have this same issue. 

[Jsanchezshopi]

Hi, Just wondering too, if there some way to do this from liquid or something. Cause I have more than 1000 products. 

[TR_SEGE]

Hi, just wondering if you ever found a solution other than a manual sorting? Cheers

[wbarrie01]

Any update on this issue? I am running into the same problem. 

[billnyescienceg]

I know this thread is old, but I have a solution that I believe will work.

This is my `variant-picker.liquid` file.

The important code:

- line 2 - create a global order for your sizes.  All sizes need to be present in this list.  Any sizes not present in this list will not display

- lines 20-36 - `{% for size in size_order %}` - This block iterates over all the sizes in line 2.  For each size, it looks for the value in the options list.  When it finds a match, it displays the size option on the page.  

Note: On line 19, I specify that this handling is only for the option in position 2.  This is because in my site, I display color first, size second.  You would need to adjust this value if the relevant selector is in a different position.

Hopefully this helps someone else.  If you're reading this, and you find any issues with my approach, I'd appreciate feedback!

{% comment %} Change this to the desired list {% endcomment %}
{% assign size_order = "XS,S,M,L,XL,XXL,75C,75D,75E,80C,80D,80E,85C,85D,85E" | split: "," %}

{% for option in product.options_with_values %}
  <div class="row js">

    {% comment %} Other unrelated code... {% endcomment %}

    {%- if settings.variant_style == 'dropdown' -%}  

      {% comment %} Other unrelated code... {% endcomment %}

    {%- else -%}
      <fieldset class="option-selector" data-single-option-selector data-selector-type="listed" data-index="option{{ option.position }}">
        <legend class="label">
          {{- option.name -}}{% if swatches %} - <span class="js-option-title">{{ option.selected_value }}</span>{% endif %}
        </legend>
        <div class="option-selector__btns">
          {%- if option.position == 2 -%}
            {% comment %} Sort size values by predetermined order {% endcomment %}
            {% comment %} 
              IMPORTANT!
              This only works when the 'size' selector is the second selector in the list
              If the 'size' selector needs to be moved to a different position, this
              code will need to be modified
            {% endcomment %}
            {% for size in size_order %}
              {% for value in option.values %}
                {% if value == size %}
                  <input class="opt-btn js-option" type="radio" name="{{ option_id }}-option" id="{{ option_id }}-opt-{{ forloop.index0 }}" value="{{ value | escape }}"{% if option.selected_value == value %} checked{% endif %}>
                  <label class="opt-label{% if swatches == true %}{% if settings.swatch_method == 'image' %} opt-swatch--image{% else %} opt-swatch--dot{% endif %}{% endif %}"
                  {% if swatches == true %} data-swatch="{{ value | downcase | replace: '"', ''}}"{% endif %} for="{{ option_id }}-opt-{{ forloop.index0 }}">{{ value }}</label>
                  {% break %}
                {% endif %}
              {% endfor %}
            {% endfor %}
          {%- else -%}
            {% comment %} Display all other selectors in their organic order {% endcomment %}
            {%- for value in option.values -%}
              <input class="opt-btn js-option" type="radio" name="{{ option_id }}-option" id="{{ option_id }}-opt-{{ forloop.index0 }}" value="{{ value | escape }}"{% if option.selected_value == value %} checked{% endif %}>
              <label class="opt-label{% if swatches == true %}{% if settings.swatch_method == 'image' %} opt-swatch--image{% else %} opt-swatch--dot{% endif %}{% endif %}"
              {% if swatches == true %} data-swatch="{{ value | downcase | replace: '"', ''}}"{% endif %} for="{{ option_id }}-opt-{{ forloop.index0 }}">{{ value }}</label>
            {%- endfor -%}
          {%- endif -%}
        </div>
      </fieldset>
    {%- endif -%}
    
  </div>
{% endfor %}