How can I format a vendor list into three columns and change linked text color?

Store Design
, ,
1

Hello, I recently set up a page to show the list of brands sold in our store. It is automatically pulling from the vendor information in the products, which is what I wanted. BUT, It appears in one long column, and I would like it to be in three columns. This is what the page looks like: https://urbanfarmcollection.com/pages/vendor-list

Additionally, I would really like the linked text to be black instead of blue. My theme settings have linked text set to black, but this code has it showing up as blue.

This the code that I used:

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

{{ page.content }}

  
{% 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 %}
- {{ product_vendor }}

{% else %}
- {{ product_vendor | link_to_vendor }}
  
{% endif %}
{% endfor %}

Any solution would be greatly appreciated!

2

Try this code:

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

{{ page.content }}

  {% assign vendor_index = 0 %}
  {% 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 %}
      - {{ product_vendor }}

    {% else %}
      - {{ product_vendor | link_to_vendor }}
    {% endif %}

    {% assign vendor_index = vendor_index | plus: 1 %}
    {% if vendor_index >= counter_divided_by_3 and vendor_index | modulo: counter_divided_by_3 == 0 %}
      

      
    {% endif %}
  {% endfor %}
3

Thanks for your reply. Unfortunately this did not work. It stayed in one column, with just a slight change in the text spacing halfway down the column.