Why are the last 12 brands on my A-Z page not looping to the brand collection?

Hi

Im looking for some help. Ive just changed themes & have set up a brand A-Z page (code below)

https://spoiledbrat.co.uk/pages/brandlist-a-z

It works perfectly, except for the last 12 brands - they dont seem to loop to the brand collection, rather all the products (even sold out ones) of said brand

Can anyone help figure out the issue? Thanks in advance

 <article class="site-page" data-template-page>
  <header class="page-masthead">
    <h1 class="page-title">
      {{ page.title }}
    </h1>
  </header>
  
  
<!--css for brand list -->  
<style>
      

  
}

.page-content-max a {
       color: #ff1493;
    text-decoration: none;
    transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
}      

      
.vendor-list {
  -webkit-columns: 3;  /* Chrome, Safari, Opera */
  -moz-columns: 3;  /* Firefox */
  columns: 3;
}
@media (max-width: 640px) {
  .vendor-list {
    -webkit-columns: 1;    /* Chrome, Safari, Opera */
    -moz-columns: 1;    /* Firefox */
    columns: 1;
  }
}
      
</style>  
  
<!--pagecontent for brand list page -->    
{% if page.content != blank %}
<div class="page-content-max">
          
<center><p> {{ page.content }}   </p> </center>

{% assign counter = 0 %}
{% for vendor in shop.vendors %}
{% assign counter = counter | plus: 1 %}
{% endfor %}

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}
  

      
<ul class="vendor-list block-grid three-up mobile one-up">
{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}

{% if its_a_match %}
<li class="vendor-list-item"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
<li class="vendor-list-item">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>
      
      
</div>
{% endif %} 
</article>

Hey there,

As per Shopify’s Dev Docs from here, it states the following: “You can do a maximum of 50 iterations with a for loop. If you need to iterate over more than 50 items, then use the paginate tag to split the items over multiple pages.”

Give it a try. May be it solves your issue.

Have a great day.

Would you be able to help with the code?

Sure!

Just replace:

{% for product_vendor in shop.vendors %}

by

{% paginate product_vendor in shop.vendors %}

And the last

{% endfor %}

by

{% endpaginate %}

And give it a try, let me know how things went.