Vendor Page

Highlighted
New Member
3 0 0

Hi there,

I am using the supply theme.

I found some advice online to create a page with a list of vendors. This has worked but I would really like to be able to split the list into 2 or 3 columns. I have tried a few things but nothing seems to work and get the layout I really need. I have copied the liquid code below that I have used, any advice would be much appreciated! (I am happy to put together something completely new if the layout will work better) Thank you.

{% assign counter = 0 %}
{% for vendor in shop.vendors %}
{% assign counter = counter | plus: 1 %}
{% endfor %}
 
{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}
{% include 'breadcrumb' %}
 
<div class="grid">
 
  <div class="grid-item large--two-thirds push--large--one-sixth">
 
    <h1>{{ page.title }}</h1>
 
    <div class="rte">
      {{ page.content }}
    </div>
 
  </div>
 
</div>
<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>
0 Likes