Vendor Page In Shopify: The Clever Way to Automatically Show Vendors In Your Shop

By Cesar Beltran
THE CLEVER WAY TO AUTOMATICALLY SHOW VENDORS IN YOUR SHOP e-commerce website
Listen To Our Podcast

Need to show a list of vendors in your Shopify store, without having to manually update them? Based on our work with over 300 Shopify stores, this is quite a common request. So we put together a clever way to automatically show all vendors in your shop, alphabetically. Here’s how it works:

  • 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 %}
</ul>

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

Save.

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.

Example: https://www.beltsbucklestees.com/pages/a-z-list-of-brands-2


Here are two examples from two of our clients:

https://www.beltsbucklestees.com/pages/a-z-list-of-brands-2
BBT Clothing Vendors Page On Shopify

https://www.reusablesetc.com.au/pages/brands
Reusables Etc Vendors Page On Shopify

Thank you for keeping up to date with our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our services. We also have some top blog recommendations for you to check out; Animated Gifs For Shopify Product Pages,  How To Show Percentage Discount Saved, how to boots the site popularity of your shopify plus store,  The Benefits Of Multichannel Thinking.  Keep a lookout for new blog posts.

Questions? Leave a comment below and we will get back to you as soon as possible. 

What are the top Shopify stores doing?

Take what we've learned and use it to your advantage.
Get our exclusive research: Insights from over 500 Shopify Stores.

Powered by ConvertKit
Tell others about this post

Comments 39

  1. Thank you so much for posting this tutorial! After years of using different ecommerce platforms, I can’t believe something like this sees so difficult in Shopify.

    I have one question though. Mine just creates one, long, single-column list. I followed the tutorial exactly but I cant get mine to display in 3 columns like the example you link to.

    Would you have any ideas on how to correct that?

    1. Hi there, glad you liked it! I tried to take a look at your site, but it’s password-protected at the moment 🙂 To get them to show in thirds / columns, you’d need to use the responsive styles in your theme to make the columns one-third in width (i.e. 33.3% width). Then they should cascade across like in the example above. Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

      1. Thanks for your tutorial. For making the 3 or 4 column how to do, if have any CSS work then will be better if you provide me.

  2. Thanks for this! I was confused why I couldn’t find anything like this anywhere on Shopify’s official site. I’m glad you made this tutorial because I needed it! 🙂

    1. Hi Trish! If you follow the steps above, it should work. Make sure you select the page template in step 5. If you need some help, please contact us and we can give you a quotation on setting it up for you. Cheers!

  3. Thanks for this tutorial, but i am having problems getting it to work with my site. I am using the classic theme. When i go to make a new template, it asks it i want it to be a page, collection, password and a few other options, and Im not exactly sure which one to use. I have tried using page, but then under the new pages i am unable to see the drop down for the new template i created. Any suggestions? thank you!

    1. New page template will be the way to go. If you’re using the LIVE theme (not a preview), then it should show. Otherwise, if you’re developing the new page template in a preview theme, you won’t be able to select it until you publish that theme live. Hope that helps!

  4. Hi Tristan,

    I added the code a few days ago, but was unable to accomplish the brand list look. Can you please assist me and clarify Step 4?

    Thanks

    1. Hi Trish! If you follow the steps above, it should work. Make sure you select the page template in step 5. If you need some help, please contact us and we can give you a quotation on setting it up for you. Cheers!

  5. I have one question though. Mine just creates one, long, single-column list. I followed the tutorial exactly but I cant get mine to display in 3 columns like the example you link to.

    Would you have any ideas on how to correct that?

    1. Hi Anum! Glad to hear you’ve made a nice start on it. Each theme is a bit different, so the best way to find out how to get them into columns (e.g. thirds) is to see which kind of responsive style your theme is using, then apply that to the code you implemented. This is easier than it sounds 🙂 We have a separate post for that, which will help you figure out how to split it into columns — here it is – https://www.blackbeltcommerce.com/create-multiple-columns-using-html/

      Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  6. This is brilliant, thankyou. I have implemented this on my site however I am having difficulties putting the list into 3 or 4 columns & wonder if you could assist? I dont have much coding experience – so if you could help with what coding to enter to achieve this & where?

    I know above you have said “To get them to show in thirds / columns, you’d need to use the responsive styles in your theme to make the columns one-third in width (i.e. 33.3% width.”

    However Im not sure how I would achieve this?

      1. Hi Susan — that looks great, thanks a lot for posting the link, I love it when I hear folks that have been using the tutorials we publish. Glad it helped and thanks for letting us know 🙂

    1. Hi Susan, thanks for the update. Each theme is a bit different, so the best way to find out how to get them into columns (e.g. thirds) is to see which kind of responsive style your theme is using, then apply that to the code you implemented. This is easier than it sounds 🙂 We have a separate post for that, which will help you figure out how to split it into columns — here it is – https://www.blackbeltcommerce.com/create-multiple-columns-using-html/

      Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  7. Hi,

    Can you please clarify Step 4:

    “Then, at the VERY top of that file, paste this:”

    At the very top as in … line 1?

    Or above {{ page.content }} … or below it?

    I can only get a single column.

    Plus, in your response to Susan, the link to the post about splitting columns is broken.

    Thanks

  8. Tristan, thanks for this tip. It seems to work great so far.
    I have a question for you though. Do you happen to have a simple way to exclude one or more vendors from the list? I have a client that would like to display all of their third party vendors on a page, but exclude their own vendor listing.
    Any advice you could provide would be great.

    1. BTW, I believe you may be having an issue with your spam blocking script on this page. I tried leaving a comment previously, and nothing would happen when I tried to submit. Confirmed in multiple browsers. However disabling JS on the page seems to have allowed the comment to post as normal. Just an FYI

    2. Hi MDJ, glad you liked it! Yes, that could be done. Let’s pretend your client’s brand is called “Blackbelt”. For the top part of the code, which is normally like this:

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

        {% if its_a_match %}

      • {{ product_vendor }}
      • {% else %}

      • {{ product_vendor | link_to_vendor }}
      • {% endif %}
        {% endfor %}

      To *omit* the brand, you could add an ‘unless’ statement like this:

      {% if its_a_match %}
      {% unless product_vendor == ‘Blackbelt’ %} <--- NOTE: I ADDED THIS

    3. {{ product_vendor }}
    4. {% else %}

    5. {{ product_vendor | link_to_vendor }}
    6. {% endunless %} <--- NOTE: I ADDED THIS {% endif %} {% endfor %} — The syntax and placement might need some adjustment depending on your particular theme, but that’s the approach I’d take. Hope that helps, just let me know if you have any other questions. Thanks, Tristan.

      1. Tristan, thank you for your prompt response.
        The solution seems obvious once you spelled it out, but for some reason I was just not seeing it before.

        Just so you know, when I tried to implement this as you laid it out above, with a single unless statement, the template would only show those vendors with an explicit collection. However by wrapping each half of the if/else statement in matching unless statements, it seems to work perfectly. I am sure this is a less than elegant solution, but as long as it is functional, so be it.

  9. Great tutorial, thanks.
    I am able to get a one column list of vendors. And using the link you provided to the multiple column tutorial, I can see the correct class in my code (class=”desktop-12 mobile-3″), but it is still showing up as one column. I am using the vantage theme also. Are you able to help? TIA.

  10. Thanks for the great tutorial!

    Everything is working but there are bullet points before all the vendors. Is it possible to remove the bullet points?

    Thanks in advance.

    Kind regards,
    Sarah

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.