How can I modify the product size order in filter?

[propel]

Hello there

I found that the Shopify filter orders the size of the product not by S, M, L, XL...

If you see the image below, it starts from 2XL, 3XL, 4XL...

Does anybody know how to change this? I downloaded some filter apps and those are showing the same problem. 

Seems like some coding is needed but I'm not a developer.

[Mark_02]

To resolve this issue, you may need to adjust the variant order for each product in your Shopify store. To do this, you can follow these steps:

1. Log in to your Shopify account and navigate to the "Products" section.
2. Click on the product that you want to edit.
3. Scroll down to the "Variants" section and click on "Edit options".
4. You should see a list of the available options for your product variants. Drag and drop the options to change the order in which they appear.
5. Once you have made the changes, click "Save".

By adjusting the order of the product variants, you should be able to ensure that the size options are displayed in the correct order on your website.

If this does not resolve the issue, you may need to seek assistance from Shopify customer support.

I hope this helps!

[NomtechSolution]

1. In the left-hand sidebar, locate and click on the "product-template.liquid" file under the "Sections" folder. If this file doesn't exist, you can try the "product-form.liquid" file instead.
2. Look for the code that generates the variant options or the size selector. It might involve a <select> element or an <input> field with a dropdown.
3. Find the section of code that populates the size options. It will typically include a loop or iteration over the available variants.
4. Inside the loop, look for the code that outputs the option value for each variant. It might look like {{ variant.option1 }}, {{ variant.option2 }}, or similar.
5. Modify the code to add a sort order to the sizes. You can use a conditional statement to assign a numerical value to each size option and then sort them accordingly. For example, if your sizes are "S, M, L, XL", you can assign numerical values like this:

{% assign size_value = 0 %}
{% case variant.option1 %}
  {% when 'S' %}
    {% assign size_value = 1 %}
  {% when 'M' %}
    {% assign size_value = 2 %}
  {% when 'L' %}
    {% assign size_value = 3 %}
  {% when 'XL' %}
    {% assign size_value = 4 %}
  {% else %}
    {% assign size_value = 99 %}
{% endcase %}
​

1. Use the size_value variable in the option value, like this:

<option value="{{ size_value }}">{{ variant.option1 }}</option>
​

[propel]

Thank you for your answer @NomtechSolution 

I tried it but it is not working. Can you tell me what is wrong? And when I searched variant.option1, 

product.gf_quickview.liquid was the only file that has that element not the product-template.liquid.

File name: product.gf_quickview.liquid

Thank you for your answer @NomtechSolution 

I tried it but it is not working. Can you tell me what is wrong? And when I searched variant.option1, 

product.gf_quickview.liquid was the only file that has that element not the product-template.liquid.

File name: product.gf_quickview.liquid

Thank you for your answer @NomtechSolution 

I tried it but it is not working. Can you tell me what is wrong? And when I searched variant.option1, 

product.gf_quickview.liquid was the only file that has that element not the product-template.liquid.

File name: product.gf_quickview.liquid

<select name="id" id="gfqv-select">
{% for variant in product.variants %}
<option data-option1="{{variant.option1 | escape}}" data-option2="{{variant.option2 | escape}}" data-option3="{{variant.option3 | escape}}" data-price="{{variant.price}}" data-compare_at_price="{{variant.compare_at_price}}" data-available="{{variant.available}}" data-image-index="{% if variant.image %}{{variant.image.position}}{% endif %}" {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{% assign size_value = 0 %}
{% case variant.option1 %}
{% when 'S' %}
{% assign size_value = 1 %}
{% when 'M' %}
{% assign size_value = 2 %}
{% when 'L' %}
{% assign size_value = 3 %}
{% when 'XL' %}
{% assign size_value = 4 %}
{% when '2XL' %}
{% assign size_value = 5 %}
{% when '3XL' %}
{% assign size_value = 6 %}
{% when '4XL' %}
{% assign size_value = 7 %}
{% when '5XL' %}
{% assign size_value = 8 %}
{% else %}
{% assign size_value = 99 %}
{% endcase %}
<option value="{{ size_value }}">{{ variant.option1 }}</option>
{% endfor %}
</select>