Create columns and change linked text color (automated vendor list; Taste Theme)

Store Design
, ,
1

Hello, I recently set up a page to automatically display vendor info from A to Z in Taste Theme. This vendor list appears in one long column, with linked blue text. Instead, I would like it to appear in three columns, with all black linked text. The code below is what I used to create the functional vendor list:

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

And this is the current appearance of the page: https://urbanfarmcollection.com/pages/vendor-list

Would appreciate any insight or help in resolving this! Thank you.

2

Hi @trilliember3 , please add this CSS code at the bottom of your base.css file of your theme

@media screen and (min-width: 750px) {
.vendor-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.vendor-list li a {
color: #000;
}
}

Screenshot 2023-05-10 at 09.11.23.png
Screenshot 2023-05-10 at 09.11.23.png1540×699 75.2 KB

3

Hello @trilliember3 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets → base.css file → add this following code at the bottom of page

.vendor-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.vendor-list a {
  color: black;
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

4

@Dan-From-Ryviu Thank you so so much! This worked perfectly. One more question for you: is there a way to center all the columns on the page, and is there a way to make all the vendor names properly alphabetized? Otherwise it’s exactly what I needed.

5

@irene-vintage This worked as well! Thanks very much.