Automatically sort product variants?

Lei_Zhao
New Member
1 0 0

I spent a fair amount of time figuring this out for my store's theme. Here's what I've learned:

Shopify's default ordering for variants is ascending by SKU. If you want to reorder variants by some other criteria without having to do it manually, you can do so by finding and modifying the portion of your theme's liquid template that governs the rendering of the product variants dropdown on your product pages. For me, the relevant code was located in `product-template.liquid` in "Sections".

 

      <div class="variants">
        <form action="/cart/add" method="post" enctype="multipart/form-data" data-section="{{ section.id }}">

          {% comment %}
            Default to current variant  ID
          {% endcomment %}
          <input type="hidden" name="id" value="{{ variant.id }}">

          {% if product_show_multi_selectors %}

            <div class="small-item-grid-{{ product_selectors_per_row_small }} medium-item-grid-{{ product_selectors_per_row_medium }} large-item-grid-{{ product_selectors_per_row_large }} row-spacing-50">

              {% comment %}
                Variant selectors
              {% endcomment %}
              {% for option in product.options_with_values %}
                <div class="item">
                  <label for="option-select-{{ option.name | handleize }}">{{ option.name }}</label>
                  <select class="option-selector" id="option-select-{{ option.name | handleize }}" data-option-selector data-option-number="{{ forloop.index }}" data-select-text="{{ 'products.select_an_option' | t: option_name: option.name }}">
                    {% assign sorted_option_values = option.values | sort %}   
                    {% for value in sorted_option_values %}
                      {% if value == 'Default Title' %}
                        {%- assign display_value = product.title -%}
                      {% else %}
                        {%- assign display_value = value -%}
                      {% endif %}
                      {{ sorted_option_values }}
                      <option {% if option.selected_value == value %}selected{% endif %} data-id="{{ value | handleize }}">{{ display_value }}</option>
                    {% endfor %}
                  </select>
                </div>
              {% endfor %}

The lines highlighted in italics were the changes I made which allowed me to sort my product variants automatically by variant title instead of SKU. The idea here is that you assign a variable that holds the sorted array values of the variants, then loop through that new variable instead of the default you get in the theme to get your sorted variant dropdown by title.

The screenshot below captures the result of this change for a product where the 15-lb variant, which I wanted to be shown first in the dropdown, had a higher SKU value than the 40-lb variant. The default sort order had these in reverse.

This change won't work for everyone because of theme differences, but I hope it gives folks on this thread an idea at how to approach this without the need for any JS coding.

 

0 Likes
Kregon
Tourist
3 0 11

Resurrecting this thread again, since apparently there is still no default solution, and Shopify can't be bothered to chime in on this. 

 

@Lei_Zhao , which theme are you using for this coding? 

I'm very new to coding, and I was trying to apply your solution, but I wasn't able to find the correct place in my code to apply it. 

I'm using Simple theme. 

0 Likes
jwhitbeck44
New Member
1 0 0

I figured out a way to do it by exporting the product data to an Excel file, sorting it however I wanted it, then uploading it back in. With a bit of modeling I was able to semi automate it and update all my footwear in about 15 minutes. Can do it with apparel sizing (Small, Medium, etc.) by assigning a number to each size (small=1, medium=2) and sorting that way.

0 Likes
mydnytblu
Tourist
10 0 2

I am having this same issue.  My csv file is sorted alphabetically but when the Product gets created the variants are all mixed up.  I know how to move them around manually but I have over 60 variants on over 30 products.  We have 2 employees, myself and my Wife - we can't spend all day re-ordering the variants for every product every time we modify a listing.

0 Likes
waqas_zamir
New Member
1 0 0
I have this solution implemented for number based option "size". So if the array is options.values = [1,2,10,5,4,3]. It would sort it to [1,2,3,4,5,10]. Just replace option.values with your array and it would sort numeric array up until 2 digits OR -99 to 99. Sorry for my English though

 

{% assign sorted_options = option.values %}
{% assign everything = "" %}
{%for value in sorted_options %}
      {% assign number_length = value | size %}
      {% if number_length == 1 %}
           {% assign new_number = value | prepend: "0" %}
           {% assign everything = everything | append: new_number | append: "," %}
      {% else %}
           {% assign everything = everything | append: value | append: "," %}
       {% endif %}
{% endfor %}
                
{% assign arr = everything | split: "," %}
{% assign sorted_options = arr | sort %}
{%for value in sorted_options %}
    {% assign sizee = value | size %}
         {% if sizee == 2 %}           
              {% assign check = value | slice: 0 %}
              {% if check == '0' %} 
                  {% assign val = value | slice: 1 %}
               {% else %}
                  {% assign val = value%}
               {% endif %}
         {% else %}
                {% assign val = value %}
         {% endif %}
{%endfor%}​

 

0 Likes
jenners314
New Member
1 0 1

Why after all these years, can you not simply alpha variants with the click of a button? I can't get any code change to work and with 100 variants, it's rather time consuming to rearrange them all. 

mydnytblu
Tourist
10 0 2

Particularly when you can arrange Collection items by date, or name, ascending or descending, OR you can arrange them manually.  It's not like the technology has to be imported from Mars.

Matt_Wells
Shopify Partner
12 0 0

Sounds like someone needs to create an app for this... 

 

It's pretty tedious re-ordering variants. We often get new variant sizes in after a product has been live, and they all just end up at the back of the que. As the stock is not entered in Shopify it requires going into the admin and adjusting each product individually...

 

I would pay for an app that did this automatically with rules!

0 Likes
MosaicFineArt
New Member
1 0 0

Any Updates or solutions to this? We run a print store and sell 2-4 different materials. Each material is printed in same and different sizes. I can't get my dropdowns to show up in the correct order. Can anyone help?

 

We use the App Pagefly to build the product pages.

Here is an example of our problem: (Reordering varients in product page doesn't help)

We want the first product to be metal since its most popular.

Metal material shown out of orderMetal material shown out of orderAcrylic material out of orderAcrylic material out of orderFramed sizes out of order...Framed sizes out of order...

 

0 Likes