Collection List [Refresh theme]: A-Z function and reduce card size

[Alex1993]

Hello, I am hoping someone can help. I have been working on updating our website to the new Shopify OS theme Refresh and have encountered an issue with the collections list. We have some custom code on our current website that achieved the A-Z structure with large letters etc.

https://hoopersstores.com/collections

{% comment %} The code below calls in the brands starting with letters from A-Z, then the numbers from 0-9 {% endcomment %}

<!-- This calls in the CSS code that controls the A-Z and 0-9 columns -->
<ul class ="hoopers-a-z-brands">
{% assign current = "" %}

<!-- This code focuses on letters -->
{% for collection in collections %}
{% unless collection.title == 'Accessories' or collection.title == 'Beauty' {% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' %}
{% if "0123456789" contains first_letter %} {% continue %} {% endif %}
{% 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 %}


<!-- This code focuses on numbers. Note we don't need to call in the ul class or assign current again as these continue from the letter code -->
{% for collection in collections %}
{% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' %}
{% unless "0123456789" contains first_letter %} {% break %}{% endunless %}
{% 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 %}

{% endfor %}
</ul>

Here is where I have got to with the refresh theme... but I can't get the A-Z function working or indeed even reduce the size of the collection cards. Please can someone help?

[EBOOST · Accepted solution]

Hi @Alex1993 ,

May I suggest code below:

{%- liquid
   assign collectionss =  collections | sort_natural
   assign letters = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,0;1;2;3;4;5;6;7;8;9'
   assign letters_arr = letters | split: ','
  -%}

    <ul class="collection-list-new">
      {%- for letter in letters_arr -%}
        {% assign has_sub  = false  %}
        {% capture show_html %}
          <li>
            <strong>
            {%  if letter == '0;1;2;3;4;5;6;7;8;9' %}
              0-9
            {%  else %}
              {{ letter }}
            {%  endif %}
          </strong>
            <ul>
            {%- for collection in collectionss -%}
              {% assign first_letter = collection.title | slice: 0 | downcase  %}
              {% if letter  contains first_letter %}
                {% assign has_sub  = true  %}
              <li>
                <a href="{{ collection.url }}">{{ collection.title }}</a>
              </li>
              {% endif %}
            {%- endfor -%}
            </ul>
          </li>
          {%  endcapture %}
          {%  if has_sub  %}
            {{ show_html }}
          {%  endif %}
       {%- endfor -%}
    </ul>
    
  <style>
    .collection-list-new {
      list-style: none;
      margin: 0; 
      padding: 0;
    }
    .collection-list-new  strong{
      text-transform: uppercase;
      font-size: 30px;
      color: red;
    }
    .collection-list-new ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  </style>

[Alex1993]

Thank you for this code, I've put it in and it has worked. Is there an easy adjustment to have the brands listed in multiple columns underneath their respective letter?

[EBOOST]

Hi,

Could you share your URL store? We need add some CSS code to do it. I need check your store to suggest a solution.

[Alex1993]

Of course, the URL is https://hoopers-stores.myshopify.com. Our live website is https://hoopersstores.com.

[EBOOST]

Hi,

You can try this code below:

{%- liquid
   assign collectionss =  collections | sort_natural
   assign letters = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,0;1;2;3;4;5;6;7;8;9'
   assign letters_arr = letters | split: ','
  -%}

    <ul class="collection-list-new">
      {%- for letter in letters_arr -%}
        {% assign has_sub  = false  %}
        {% capture show_html %}
          <li>
            <strong>
            {%  if letter == '0;1;2;3;4;5;6;7;8;9' %}
              0-9
            {%  else %}
              {{ letter }}
            {%  endif %}
          </strong>
            <ul>
            {%- for collection in collectionss -%}
              {% assign first_letter = collection.title | slice: 0 | downcase  %}
              {% if letter  contains first_letter %}
                {% assign has_sub  = true  %}
              <li>
                <a href="{{ collection.url }}">{{ collection.title }}</a>
              </li>
              {% endif %}
            {%- endfor -%}
            </ul>
          </li>
          {%  endcapture %}
          {%  if has_sub  %}
            {{ show_html }}
          {%  endif %}
       {%- endfor -%}
    </ul>
    
  <style>
    .collection-list-new {
      list-style: none;
      margin: 0; 
      padding: 0;
    }
    .collection-list-new  strong{
      text-transform: uppercase;
      font-size: 30px;
      color: red;
    }
    .collection-list-new ul {
      list-style: none;
      margin: 0;
      padding: 0;
      column-count: 3;
    }
    @media(max-width: 749px){
      .collection-list-new ul {
        column-count: 2;
      }
    }
  </style>

[Alex1993]

Thank you this code worked well. Just needs some more CSS work and then it can be used.