Liquid, JavaScript, themes, sales channels
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 %}
Solved! Go to the solution
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.
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!
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.
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.
User | RANK |
---|---|
12 | |
10 | |
7 | |
7 | |
6 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022