Ordering collections by letter, then number

[Alex1993]

Hello,

I'm relatively new to Shopify (and very new to liquid coding!) and wondered if anyone could help me with the following issue. I have edited the collection page to appear as an A-Z list of brands, which works well. However, I require the collection titles whose names start with a number to be placed at the bottom of the A-Z list instead of at the top.

Does anyone know if there is a way in Shopify to code this?

I am aware I could create a menu with all the collections in, and link to that instead, but setting up several hundred brands in this way, and then maintain the menu over time is really not ideal when at the moment the list is automatically generated.

Here's the section of code that controls the A-Z brand listing:

<!-- This code creates the list of brands -->
<ul class ="hoopers-a-z-brands">
{% assign current = "" %}
{% for collection in collections %}
  
  {% unless collection.title == 'Accessories' or collection.title == 'Beauty' or collection.title == 'Furniture' or collection.title == 'Gift Card' or collection.title == 'Home & Gifts' or collection.title == 'Ladies' or collection.title == 'Mens' or collection.title == 'Beauty Focus' or collection.title == 'Valentines Day' or collection.title == 'Fathers Day' or collection.title == 'Mothers Day' or collection.title == 'Home Event' or collection.title == 'Christmas' or collection.title == 'Fashion Focus' or collection.title == 'Lingerie Fortnight' %}

  {% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' %}
    {% unless first_letter == current %}
  <div class="clearfix"></div>
  <li class="brand-list-letter"><a name="{{ first_letter }}"></a>{{ first_letter }}</li>
    {% endunless %}
    <li class="collection-order"><a href="{{ collection.url }}" title="Discover {{ collection.title }} at Hoopers">{{ collection.title }}</a></li>  
  {% assign current = first_letter %}
  
  {% endunless %}
  
{% endfor %}
</ul>

Many thanks

Alex

[FirstWireApp]

Hi Alex,

See how we have done it on one client store https://www.scentualpleasures.com

We have customized the menu to have alphabetical orders, price wise and other formats as well.

Please let me know if you need help on your menus.

Best Regards

Anand

[tim · Accepted solution]

Alex,

I would approach it in the following way -- duplicate the loop, and first skip collections with first letter being a digit, but in second loop break out when the first letter is not a digit:

{% for collection in collections %}
  {% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' %}
  {% if "0123456789" contains first_letter %}
    {% continue %}
  {% endif %}
     ... output collection
{% endfor %}
{% for collection in collections %}
  {% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' %}
  {% unless "0123456789" contains first_letter %}
    {% break %}
  {% endunless %}
     ... output collection
{% endfor %}

[Alex1993]

Hi Tim,

Thank you very much for this advice, it's always nice to learn something new... I can report this has worked a treat! 

Many thanks,

Alex

[Yujia727]

Hi there , thanks so much for sharing this . 

Im having the same question now and is trying to use your suggested method , but i dont know  where I should be inserting this code ? can you pls let me know under which folder I should be putting the code in , and also if you dont mind helping , would be amazing if you can just double confirm what exactly the code is again ? pls . thanks soooo much ! 

[aashay224]

Hi This code worked absolutely perfectly but I want to add a line break in the code and that's not happening. Like all of them come in the same line but not the next line.

{%- for collection in collections -%}
{%- assign image = collection.image -%}

{% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' %}
{% unless first_letter == current %}
<div class="clearfix"></div>

<li class="brand-list-letter"><a name="{{ first_letter }}"></a>{{ first_letter }}</li>
<br>
{% endunless %}
{%- render 'collectionList-block', collection: collection, image: image -%}
{% assign current = first_letter %}


{%- endfor -%}

[tim]

@aashay224, this is more of a CSS problem. It's hard to suggest anything without seeing the actual page on your site.