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 %}

  

    

    {% 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 %}

    
          

            
            {% if is_color %}
            {% if settings.sw_color_type == "color" %}
            
            {{ value }}
            {% else %}
            
            {{ value }}
            {% endif %}
            {% else %}
                        	
            {% endif %}
          

      {% endunless %}
    {% endfor %}
  

{% 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.

[TR_SEGE]

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

[Jsanchezshopi]

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

[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 %}
  

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

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

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

    {%- else -%}
      
    {%- endif -%}
    
  

{% endfor %}