How Can We Help?
< All Topics
Print

Display Vendor Listing page in Multi Vendor marketplaces

If you have multiple vendors or sellers on your website, you will want to give your customers an option to “Shop by Seller”. The below article guides you how to make a basic page by using Shopify’s native utilities. The page can be further customized as per your requirement.

Step 1 – Create a Liquid Template for Listing all Vendors

  1. From your Shopify Admin panel go to Online Store -> Actions -> Edit Code
  2. Go to Templates -> Add a new template -> Select “Page” and a name for it “vendorlist”. Click on “Create template”
  3. Select the entire code in the created template and replace it with the code below
{% 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">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

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

Step 2 – Create a Vendor Listing page

  1. Go to Online Store -> Pages
  2. Add a new page “Vendor List Page”. Enter any Content.
  3. Set the template for the page to the one created above – “page.vendorlist”
Shopify Vendor list page

Step 3 – Add the Vendor Listing page to the Website’s Navigation

  1. Go to Navigation -> Menu
  2. Select wherever you want to place the Vendor listing page. For example Main page
  3. Click “Add menu item”, set name as “Shop by Vendor” and link it to the page “Vendor List Page”

Step 4 – Add Sub menus to “Shop by Vendor” menu for different Vendors (optional)

  1. Create different Collections in your Store for different Vendors. Keep them Automated by matching Product Vendor.
  2. Add sub menus under “Shop by Vendor” by linking to the Collections made in Step 1. You will need to make a new Collection and sub Menu for each Vendor. You can also add a Collection Image as a banner.

That’s it! You are done. If you have some suggestions or comments, please drop a note.

Previous Add Vendor Profiles
Next Managing multi vendors
Table of Contents

Want to know more?

Reach us at

E-mail : team@shipturtle.com

Phone : +91 902 231 6865

Follow us

Subscribe to our Newsletter

    ×

    Powered by WhatsApp Chat

    ×