Change the order of tags (size filter tags)?

artoko
New Member
21 0 0

 

I am using tags to filter my product sizes on the collections pages using this wiki find: http://wiki.shopify.com/Managing_Subcategories_using_Tags
Everything is working fine, but I preferably want the sizes to go across in an ascending order (at the moment they are like L, M, S, XXS, XXL - basically a jumble).
I know it's a long shot, but is there anything I can do to change the order of the tags to XXS, XS, S, M, L, XL, XXL?
AND I have a 'What's New' collection which may contain the same product as the 'shop-shorts' collection, but I only want the size filter tags to show up in the 'shop-shorts' collection. Is this possible?
Here is the code I am using at the moment (I have it in product.liquid):
<ul class="subnav clearfix">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    {% comment %}Good for /collections/all collection and regular collections{% endcomment %}
    <a href="/collections/{{ collection.handle }}">All</a>
    {% comment %}Good for automatic type collections{% endcomment %}
    {% elsif collection.products.first.type == collection.title %}
    <a href="{{ collection.title | url_for_type }}">All</a>
    {% comment %}Good for automatic vendor collections{% endcomment %}
    {% elsif collection.products.first.vendor == collection.title %}
    <a href="{{ collection.title | url_for_vendor }}">All</a>
    {% endif %}
  </li> 
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
<li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li>
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}  
</ul>

<style>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Subnavigation styles */
.subnav { clear: both; list-style-type: none; margin: 2px 0; padding: 0; }
.subnav li { display: block; float: left; }
.subnav li a { 
    display: block; 
    text-decoration: none;
    height: 28px; 
    line-height: 28px; 
    padding: 0 7px; 
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: #eee;
    margin: 0 7px 7px 0;
    color: #666;
}
.subnav li a:hover, .subnav li.active a {
    background: #666;
    color: #fff;
}
</style>
Any help would be much appreciated, as I have been racking my brains (and wiki, forums etc) for an answer but can't seem to find a solution.
Thanks for your help!

 

0 Likes
spicydesign
Shopify Expert
313 0 6

Change this part

<ul class="subnav clearfix">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    {% comment %}Good for /collections/all collection and regular collections{% endcomment %}
    <a href="/collections/{{ collection.handle }}">All</a>
    {% comment %}Good for automatic type collections{% endcomment %}
    {% elsif collection.products.first.type == collection.title %}
    <a href="{{ collection.title | url_for_type }}">All</a>
    {% comment %}Good for automatic vendor collections{% endcomment %}
    {% elsif collection.products.first.vendor == collection.title %}
    <a href="{{ collection.title | url_for_vendor }}">All</a>
    {% endif %}
  </li> 
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
<li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li>
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}  
</ul>

To

<ul class="subnav clearfix">
  <li class="size-all{% unless current_tags %} active{% endunless %}">
    {% if collection.handle %}
    {% comment %}Good for /collections/all collection and regular collections{% endcomment %}
    <a href="/collections/{{ collection.handle }}">All</a>
    {% comment %}Good for automatic type collections{% endcomment %}
    {% elsif collection.products.first.type == collection.title %}
    <a href="{{ collection.title | url_for_type }}">All</a>
    {% comment %}Good for automatic vendor collections{% endcomment %}
    {% elsif collection.products.first.vendor == collection.title %}
    <a href="{{ collection.title | url_for_vendor }}">All</a>
    {% endif %}
  </li> 
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
<li class="active size-{{tag}}">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li class="size-{{tag}}">
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}  
</ul>

This will just add a classes to the list so you'll have class names like (size-XS, size-S, size-XXXL...)

Add to the theme.liquid before the </head> the following script

<script>
jQuery(document).ready(function($) {
	$(".size-all").after($(".size-XXXL")).after($(".size-XXL")).after($(".size-XL")).after($(".size-L")).after($(".size-M")).after($(".size-S")).after($(".size-XS")).after($(".size-XXS")).after($(".size-XXXS"));
});
</script>

Cheers

Alex

www.spicydesign.ca  http://experts.shopify.com/spicydesign
0 Likes
artoko
New Member
21 0 0

Hey Alex!

That worked like a charm - thanks so much for your time :)

0 Likes
spicydesign
Shopify Expert
313 0 6

NP :)

www.spicydesign.ca  http://experts.shopify.com/spicydesign
0 Likes
Leighton2
New Member
10 0 0

I just tried to do this on my client's site, and it's not working. When I inspect element in Chrome, it tells me that there is a script error: Uncaught TypeError: Cannot call method 'create' of undefined

Any idea how to fix that? Here is my code:

Code from theme.liquid:

<script>
jQuery(document).ready(function($) {
    $(".order-all").after($(".order-order-sidebar-mens-order1")).after($(".order-sidebar-mens-order2")).after($(".order-sidebar-mens-order3")).after($(".order-sidebar-mens-order4")).after($(".order-sidebar-mens-order5")).after($(".order-sidebar-mens-order6")).after($(".order-sidebar-mens-order7")).after($(".order-sidebar-mens-order8")).after($(".order-sidebar-mens-order9"));
});
</script>
(I'm trying to allow my client to enter the order in the theme settings, which is why I used the code above).

Code from collection.liquid:

<div id="sidebar-wrapper">	
        <div id="categories-sidebar">
        <nav id="subCollections" class="floatLeft">
                <ul>
                    <li class="order-all">
                        <a {% unless current_tags %}class="activeSubCollection"{% endunless %} {% if collection.handle %}
    		        href="/collections/{{ collection.handle }}"
			        {% elsif collection.products.first.type == collection.title %}
			        href="{{ collection.title | url_for_type }}"
			        {% elsif collection.products.first.vendor == collection.title %}
			        href="{{ collection.title | url_for_vendor }}"
			        {% endif %}>All</a>
                    </li> 
                    {% for tag in collection.all_tags %}
                    {% if current_tags contains tag %}
                    <li class="order-{{tag}}">
                        <a class="activeSubCollection" href="{% unless collection.handle == 'all' %}{{ collection.url }}/{{ tag | handle }}{% else %}/collections/all/{{ tag | handle }}{% endunless %}">{{ tag | capitalize}}</a>
                    </li>
                    {% else %}
                    <li class="order-{{tag}}">
                        <a href="{% unless collection.handle == 'all' %}{{ collection.url }}/{{ tag | handle }}{% else %}/collections/all/{{ tag | handle }}{% endunless %}">{{ tag | capitalize}}</a>
                    </li>
                    {% endif %}
                    {% endfor %}  
                    </ul>
        </nav><!-- subCollections -->
        </div>
</div>    

0 Likes
reusethrift
New Member
3 0 0

For those looking in 2021+, I found a solution for my theme (Warehouse). Adding the following code to theme.liquid just before </head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function($) {
        $('#filter-2-tag-size_xs').parent().parent().after($('#filter-2-tag-size_s').parent().parent())
        $('#filter-2-tag-size_s').parent().parent().after($('#filter-2-tag-size_m').parent().parent())
        $('#filter-2-tag-size_m').parent().parent().after($('#filter-2-tag-size_l').parent().parent())
        $('#filter-2-tag-size_l').parent().parent().after($('#filter-2-tag-size_xl').parent().parent())
        $('#filter-2-tag-size_xl').parent().parent().after($('#filter-2-tag-size_2xl').parent().parent())
        $('#filter-2-tag-size_2xl').parent().parent().after($('#filter-2-tag-size_3xl').parent().parent())
    });
    </script>

 

I found how to select the sections of the label <label for="filter-2-tag-size_l">L</label> and then went two levels up with .parent() to select the whole <li> and then ordered based on that. Not the most elegant, but it works!

 

0 Likes
reusethrift
New Member
3 0 0

Update to previous post - the solution above only works on desktop. So I added for mobile as well. Not the most elegant solution, but works for me! Place just before </head> tag in theme.liquid

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function($) {
        $('#filter-2-tag-size_xs').parent().parent().after($('#filter-2-tag-size_s').parent().parent())
        $('#filter-2-tag-size_s').parent().parent().after($('#filter-2-tag-size_m').parent().parent())
        $('#filter-2-tag-size_m').parent().parent().after($('#filter-2-tag-size_l').parent().parent())
        $('#filter-2-tag-size_l').parent().parent().after($('#filter-2-tag-size_xl').parent().parent())
        $('#filter-2-tag-size_xl').parent().parent().after($('#filter-2-tag-size_2xl').parent().parent())
        $('#filter-2-tag-size_2xl').parent().parent().after($('#filter-2-tag-size_3xl').parent().parent())
		$('#filter-6-tag-size_xs').parent().parent().after($('#filter-6-tag-size_s').parent().parent())
        $('#filter-6-tag-size_s').parent().parent().after($('#filter-6-tag-size_m').parent().parent())
        $('#filter-6-tag-size_m').parent().parent().after($('#filter-6-tag-size_l').parent().parent())
        $('#filter-6-tag-size_l').parent().parent().after($('#filter-6-tag-size_xl').parent().parent())
        $('#filter-6-tag-size_xl').parent().parent().after($('#filter-6-tag-size_2xl').parent().parent())
        $('#filter-6-tag-size_2xl').parent().parent().after($('#filter-6-tag-size_3xl').parent().parent())
    });
    </script>

 

 

0 Likes