• If there is already a collection for that vendor — for example you might have yourstore.com/collections/nike to show all Nike products — then, it will point to that collection.
  • If there is not a collection for that vendor, it will point to a vendor page showing all products by that vendor.

Why is this good?  If you have a specific vendor collection, you might want to show specific text or an image at the top of that collection.  This gives you the flexibility to use both — a collection, or just a normal vendor page — without having to ever update the top-level Vendor page.

How to implement it: Automatic Vendors on your Shopify Store

Step 1: Open up your store’s admin, and go to Themes.  Make a backup of your theme as outlined here.

Step 2: Under “templates”, click create new template.  Call it something like “page.vendorlist” or similar.  This is what you will select when you create your page.

Step 3: When you click “Ok”, it should take you to your new template.  You’ll see this:

{{ page.content }}

Underneath that, paste this:

<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 %}
<li class="vendor-list-item">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}

Step 4: Then, at the VERY top of that file, paste this:

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

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


Step 5: Now go to Admin > Pages and create a new page, “List of Vendors” for example. You call it whatever you like. Add some content at the top, like “here is a list of all our vendors”. Save. Then, go to the bottom and you’ll see “Page Template”. Choose the name of the template you just created, in our case, “page.vendor-list.liquid”. Save.

Step 6: Now open up that page. You should see a list of vendors in your shop. It will link to vendors’ collections where possible, and where there is no collection for that vendor, it will link to an automatically-generated vendor page.  You might also like to link that page from your navigation so your customers can find it.

You’re done!  You might like to add some of your own CSS to style it or use the responsive columns of your theme, if you like.  Otherwise, you’re done.