Linking alternative product sizes together - Need help to re-order labels

Store Design
1

Hi there,

I know Shopify allows us to set up multiple variants per product, including size and colour. However we decided to have individual product pages for each size available of a single product.

I was able to implement a piece of code (see below) to show product labels for each product size or option. It works really well, however I can’t seem to find a way to re-order these labels alphabetically (A-Z or 0-9). So if you read this and know how to fix this, pleeeeeeeease let me know as I’ve spent way too much time trying to figure this out by myself.

Example: https://orka.ca/products/packout%E2%84%A2-tool-box if you look under the “Also Available In”, these are the labels I am referring to that are showing different options for this product. I want them to be ordered alphabetically, A to Z.

Another example: https://orka.ca/products/nvent-raychem-frostguard-freeze-protection-plug-in-kit-12-ft-model-fg112p if you look under the “Also Available In”, these are the labels I am referring to that are showing the different sizes for this product. I want them to be ordered numerically, 0 to 9.

Here my code to generate these labels. I basically create a product tag (i.e: len-milwaukee-packout) and assign it to all products I want to link together, and then use the metafield “product_size” I created to assign the name I want to display in the label.

{%- assign tag_len = "BLANK" -%}
      {%- for tag in product.tags -%}
        {%- assign tag_len_prefix = tag | slice: 0, 4 -%}
        {%- if tag_len_prefix == "len-" -%}
          {%- assign tag_len = tag -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
      {%- unless tag_len == "BLANK" -%}
        {%- assign vendor_handle = product.vendor | handle -%}
        {%- if collections[vendor_handle].products.size > 0 -%}
          {%- assign len_products_total = 0 -%}
          {%- capture products_len_output -%}
            {%- paginate collections[vendor_handle].products by 2000 -%}
              {%- for len_product in collections[vendor_handle].products -%}
                {%- if len_product.tags contains tag_len -%}
      			{%- unless len_product.id == product.id -%}
                  {%- assign len_products_total = len_products_total | plus: 1 -%}
    			  	{{ len_product.metafields.global.product_size }}
                  {%- endunless -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endpaginate -%}
          {%- endcapture -%}
        {%- endif -%}
      {%- endunless -%}
      {%- if len_products_total > 0 -%}
      
   
        

          **Also Available In:**
        

        
          {{ products_len_output }}
        

	  

      {%- endif -%}

I hope this makes sense. Any help would be much appreciated here :slightly_smiling_face:

2

The array sort filters will likely be your friend:-

https://shopify.dev/api/liquid/filters/array-filters#sort

Probably on the collections[handle].products object

PS Code looks familiar :wink:

3

Thank you Stephen for your help with this!

My apologies for not mentioning you as the source for the code.

4 
{%- paginate collections[vendor_handle].products by 2000 -%}
              {%- for len_product in collections[vendor_handle].products | sort: 'title' -%}

This should sort the array by title in an A-z fashion

5

Thank you @StephenK , but for some reason I get an error when adding this.

Error: "Liquid syntax error (sections/static-product.liquid line 472): Expected end_of_string but found pipe in “len_product in collections[vendor_handle].products | sort: ‘title’”

6 
{%- assign sorted_products = collections[vendor_handle].products | sort: 'title' -%}
{%- paginate sorted_products by 2000 -%}
              {%- for len_product in sorted_products -%}

Sorry don’t have a store I can test the liquid with currently, this should work IIRC. So sorting the array and assigning to a variable which you then paginate and iterate over.

Might need to be done after the paginate, although I think that would only sort that ‘page’ although, shouldn’t be a problem unless you have more than 2000 items.