- 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
https://www.reusablesetc.com.au/pages/brands
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. Kizunaquant 評判
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?
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.
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.
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
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! 🙂
Hi Brad, woohoo! Glad you found it helpful 🙂 Thanks — Tristan.
Hi,
I recently added the code. However, the brands page is blank. Please advise.
Thanks,
Trish
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!
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!
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!
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
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!
Thanks for this tutorial. One question for your demo, each of the vendor are set to e.g.
*link removed*
while my like this
*link removed*
So how to change it? Thanks
Hi there! You shouldn’t need to change it — the tutorial above should give you relative URLs so it’ll use the URL of your store, not BBT.
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?
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.
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?
https://www.spoiledbrat.co.uk/pages/brand-a-z
A link to the vendor page I have created using your coding
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 🙂
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.
Hi there, thanks for your info on this! I’ve managed to get the page to work, but how do I create a drop down menu when it only links to the main Designers page? If I create a drop down how do I choose a specific vendor like this website seems to be able to do?
https://www.hellogreen.com.au/pages/brands
Thanks so much
Sam
Hi Sam! Thanks for your note, glad you liked the tutorial. The dropdowns on Hello Green are custom-built 🙂 So that isn’t really part of the tutorial here — for that you’d need to refer to your theme. This might help: https://help.shopify.com/themes/development/implementing-smart-drop-down-menus
Cheers!
Tristan.
Hi,
Thanks for this.
At step 4, when you say to paste the code at the “VERY top of that file”, do you mean line 1? Or above {{ page.content }} . There’s some code above {{ page.content }} in my theme. Note sure specifically where to paste the second piece of code. I’ve tried all combo’s and still get a single list.
Plus, this link is broken: https://www.blackbeltcommerce.com/create-multiple-columns-using-html/
Thanks in advance,
Doug
Hi Doug! Yes, per the guideline above, I meant at the VERY top, right before everything else, i.e. line 1. Those are just variables anyway, so the customer won’t see anything there, it’s just setting up for the rest of the content.
For the columns, I’d suggest this article: https://www.blackbeltcommerce.com/create-multiple-columns-using-html/
Hope that helps!
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
Hi Doug, thanks for letting me know about that! We recently switched domain names, so there are still a few things to update. That’s fixed – the article is here: https://www.blackbeltcommerce.com/create-multiple-columns-using-html/
If you’re only seeing one column, I’d suggest checking out that article. It’s different for every Shopify Theme, so a little tricky to advise here. Hope that helps!
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.
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
Thanks for letting us know about this, I’ll have a look into it 🙂 Appreciated!
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 %}- {{ product_vendor }}
- {{ product_vendor | link_to_vendor }}
{% 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 %}
{% else %}
{% 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
{% else %}
{% 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.
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.
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.
Likewise, I couldn’t post on this article unless I turned of js.
Thanks for letting us know – looking into this 🙂
Hi Tara! Are you able to post a link to the page? Happy to take a look 🙂 Thanks.
Nice post!
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
Hi Sarah, glad it helped! Yes, but it depends on your theme, this might help: https://stackoverflow.com/questions/8289805/getting-rid-of-bullet-points-from-ul
Hi, how can i – in a language for code dummies – change the display from being a single column to being more like a few horizontal columns?
thanks