Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Some merchants and partners are experiencing problems when logging into their Shopify accounts. We will continue to provide updates to you here.

Crerating a Brand page with Vendor Collection Image

Solved
JoshSpires
Tourist
12 0 1

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

 

Josh Spires
Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
4847 991 1029

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 3 (3)
LitExtension
Shopify Partner
4847 991 1029

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
JoshSpires
Tourist
12 0 1

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.

Josh Spires
LitExtension
Shopify Partner
4847 991 1029

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify