Display list of vendors with example product image

New Member
2 0 0

Hi All,

I have a list of vendors being generated with text values, however, I would like to get an image from the vendor's products and display this next to the text. I dont mind if its the first image or a random image. 

Ive tried to grab the collection image, but as it is not a pre-defined collection there is no assigned image. 

I've seen this question asked a couple of times with no answers - wondering if I'm being thick?!?

Here is the code I have so far - 

Thanks in advance!

 

 

 

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

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}

<div class="page-width">
  <h1 class="small--text-center">{{ page.title }}</h1>
  <div class="content-block">
    <div class="rte rte--indented-images">
      {{ page.content }}
      <ul class="vendor-list block-grid three-up mobile one-up">
{% 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 %}
<li class="vendor-list-item"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
    {% if product_vendor != blank %}
  	{% assign coll_handle = product_vendor | handleize %}
  	{% if collections[coll_handle].image %}
    <a href="{{ collections[coll_handle].url }}">
      {{ collections[coll_handle].image | collection_img_url: '300x' | img_tag }}
    </a>
  	{% endif %}
	{% endif %}
<li class="vendor-list-item">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>
    </div>
  </div>

  {% section 'featured-products-subsection' %}
</div>

 

 

 

0 Likes
Highlighted
Shopify Partner
1080 169 194

Hi There!

I would suggest you solve this in the following way:

  1. Create a Collection for Each Vendor and add its logo as a Featured Collection Image
  2. Make sure then handle of the collection matches the output generated by doing this operation {{ product.vendor | handleize }}
  3. When the above condition is correct you will be able to initiate a collection based on the handle and get its image to be displayed

    Good Luck! 
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
2 0 0

Hi There,

Thanks for your answer. 

Two issues in response;

1. I have a collections page which shows all the collections. I don't want this filled with all the vendors.

2. I was hoping to make it a little more dynamic tha you suggest. Making a collection each time we add a new vendor would be counter productive, especially as we may be adding over 1000 vendors.

Any ideas as to how this can be done with code? I am taking a crack at it myself but, being new to liquid (more of a c# man), it might take me a while. Was hoping someone might have solution in place already. 

Many Thanks,

Jolly

0 Likes