How can I manually sort product tags by size on my collection page?

Shopify Discussion
1

The product tags that are listed in the collection page are sorted alphabetically by default. I would like to sort these manually as I wish to tag some products specifically by size. If I do so the tags are listed “out of order”: Large, Medium, Small, xl, xxl, instead of small, medium, large, xl, xxl.

Is this something I can change?

2

  1. Locate the collection template: In the theme editor, look for the file that controls the collection template. This is typically named collection.liquid or similar. Open it in the code editor.

  2. Find the code that displays the tags: Within the collection template code, search for the code responsible for displaying the product tags. It might look something like this:

{% for tag in collection.all_tags %}
  {{ tag }}
{% endfor %}
  • Modify the code to manually sort the tags: Replace the existing code with the following code that manually sorts the tags:
{% assign sorted_tags = collection.all_tags | sort: 'size' %}
{% for tag in sorted_tags %}
  {{ tag }}
{% endfor %}
​
  • In this code, sorted_tags is a new variable that sorts the tags based on the ‘size’ property. You may need to adjust the ‘size’ property to match the property or criteria you want to use for sorting.
3

This is an advanced theme customization.

If you need this customization explored on consulted you can contact me directly for services.
Please provide context: store url, theme name, post url(s) and any further detail.
Contact Info in signature.

There is no system in shopify’s admin for controlling tag hiding, sort order ,priority, or grouping.

Most themes do not offer any way to control tags display order; though some may let you group them or control which can appear.

Either the theme needs to be customized to render the tags how you want, or use javascript to sort them on the client-side(performance hit, for lots of tags not advised).

Details will vary heavily by theme and need.

Both would need a hard-coded list of the order you want tags in store somewhere.

Either in the customization itself, or a theme setting, or metafield on the shop object.

Could also be a usecase for listing the tags in a text metaobject.

Keeping in mind from then out every time a new tags is added to products in the admin that this manual setting will have to have it’s info updated as well; unless you go through the additional detail of setting up automation business logic to cover unknown future tags.

4

Thanks for your help. This is exactly what I was looking for. Where would I adjust the ‘size’ property?

5

Hi Paul,

I am looking for exactly this type of fix. How can I contact you privately to consult for this task?