Crerating a Brand page with Vendor Collection Image

[JoshSpires]

I am trying to get my brand page to display the vendor's collection image. The code I currently have results in all the collection images to display rather than just the vendor ones.

{% for collection in collections %}
      <ul class="brand-list">
      {% assign current = "" %}
      {% for product_vendor in shop.vendors %}
        {% assign first_letter = product_vendor | strip_html | upcase | truncate: 1, '' %}
          {% unless first_letter == current %}
        <span class="brand-letter"><a name="{{ first_letter }}"></a>{{ first_letter }}</span>
          {% endunless %}
          <li>
            <a class="brand-title" href="/collections/{{ product_vendor | handleize }}" title="{{ product_vendor }}">
              {{ product_vendor }}
                  <img style="margin: auto; border-radius: 20px;" src="{{ collection.image | image_url: width: 200, height: 100 | }}" alt="{{ collection.title }}">
              {% endfor %}
              </a>
              </li>  
        {% assign current = first_letter %}
      </ul>
    {% endfor %}

[LitExtension]

Hi @JoshSpires,

First, you need to add collections with the same name as vendor and change the code to:

{% for product_vendor in shop.vendors %}
    {% assign handle = product_vendor | handleize %}
    {% assign collection = collections[handle] %}
    <ul class="brand-list">
      <li>
        <a class="brand-title" href="{{ collection.url }}" title="{{ collection.title }}">
          <img style="margin: auto; border-radius: 20px;" src="{{ collection.image | image_url: width: 200, height: 100 }}" alt="{{ collection.title }}">
        </a>
      </li>
    </ul>
  {% endfor %}

Hope it helps!

[JoshSpires]

Thanks for the code! It works.

Is it possible to keep the organise by the first letter of the brand in it? So, it easier for customers to find a brand.

[LitExtension · Accepted solution]

Hi @JoshSpires,

Please change code:

{% for product_vendor in shop.vendors %}
    {% assign handle = product_vendor | handleize %}
    {% assign collection = collections[handle] %}
	{% assign first_letter = product_vendor | strip_html | upcase | truncate: 1, '' %}
    <ul class="brand-list">
      <li>
	    <span class="brand-letter"><a name="{{ first_letter }}"></a>{{ first_letter }}</span>
        <a class="brand-title" href="{{ collection.url }}" title="{{ collection.title }}">
          <img style="margin: auto; border-radius: 20px;" src="{{ collection.image | image_url: width: 200, height: 100 }}" alt="{{ collection.title }}">
        </a>
      </li>
    </ul>
  {% endfor %}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.