How do I sort collection.products by the product variant option?

Technical Q&A
1

We have a sales collection page in our site. Some products have variants - options and they are added to the Sale COLLECTIONS in the product backend accordingly.

collection.sale.liquid

{% section 'collection-template-sale' %}

collection-template-sale.liquid

{%- assign per_row = section.settings.per_row -%}
{% assign paginate_by = per_row | times: 5 %}
{% if section.settings.collection_tags_style == 'inline' and collection.all_tags.size > 0 %}
  {% assign paginate_by = paginate_by | minus: 1 %}
{% endif %}

  

    

          {% for product in collection.products %}
            {% include 'product-layout-item-sale' %}
          {% endfor %}

product-layout-item-sale.liquid

{%- assign per_row = section.settings.per_row -%}
{% assign paginate_by = per_row | times: 5 %}
{% if section.settings.collection_tags_style == 'inline' and collection.all_tags.size > 0 %}
  {% assign paginate_by = paginate_by | minus: 1 %}
{% endif %}

  

    

          {% for product in collection.products %}
            

              
                
              

              
**{{ product.title }}**

              
                

                  

{{ variant.option1 | escape }}

                

                
                  {{ max_price | money }}

                  {% if settings.vendor_enable %}
                  
{{ product.vendor }}

                  {% endif %}
                

              

            
   
          {% endfor %}

Do you know how can I sort the output by the products options(Color)? We have 2 colors Navy and Vino. I want the products having the Vino color to appear first.

Note: I already arranged the order of the Options/Colors in the product backend but still it did not work.

Any help is greatly appreciated. Thanks!