Skip to content

Add a vendor directory page

Big picture

A great way for marketplaces to advertise their vendors is to have a page showing all vendors with their descriptions. We saw how to enable vendors to create a personal page, here we will see how to create a page that contains all vendors.

You must create a Shopify page and either:

  • copy/paste our code and edit it to your convenience
  • understand how the code works and adapt it to your theme

For assistance, contact us.

Create a Shopify Page

First we'll need to create a page. Go to Shopify > Online store > Add page, you can name ir Vendor directory.

Option 1, directly use the code

Get the page working right now by adding the following HTML code. First, ensure to click on Show HTML in the page's description.

vendor-html.png

Second, copy/paste the following code inside the page's description:

Click to view the code
html
<style>
  article.garnet-vendor {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  article.garnet-vendor h1,
  p {
    margin: 0;
    margin-bottom: 16px;
  }
  article.garnet-vendor img {
    background-color: gray;
    object-fit: cover;
    max-height: 300px;
    max-width: 300px;
  }
  article.garnet-vendor aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 500px;
  }
  article.garnet-vendor aside p {
    max-height: 200px;
    overflow: scroll;
    text-overflow: ellipsis;
  }
  article.garnet-vendor aside a {
    padding: 8px 18px;
    border-radius: 16px;
    text-decoration: none;
    color: white;
    background-color: #3730a3;
  }
</style>
<body>
  <div style="display: grid; gap: 16px">
    <article style:"display: none" class="garnet-vendor" data-garnet="vendor">
      <img width="300" height="300" class="image" data-garnet="vendor.image" />
      <aside>
        <h1 data-garnet="vendor.name">Title</h1>
        <p data-garnet="vendor.description">Your text goes here.</p>
        <div>
          <a href="#" data-garnet="vendor.link">View products</a>
        </div>
      </aside>
    </article>
  </div>
</body>
<script>
  // Garnet code to populate the vendor data
  const script = document.createElement("script");
  const store = window.Shopify.shop.replace('.myshopify.com', '')
  script.src = "https://"+store+".garnet.center/api/storefront/populate"
  document.head.appendChild(script);
</script>
<style>
  article.garnet-vendor {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  article.garnet-vendor h1,
  p {
    margin: 0;
    margin-bottom: 16px;
  }
  article.garnet-vendor img {
    background-color: gray;
    object-fit: cover;
    max-height: 300px;
    max-width: 300px;
  }
  article.garnet-vendor aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 500px;
  }
  article.garnet-vendor aside p {
    max-height: 200px;
    overflow: scroll;
    text-overflow: ellipsis;
  }
  article.garnet-vendor aside a {
    padding: 8px 18px;
    border-radius: 16px;
    text-decoration: none;
    color: white;
    background-color: #3730a3;
  }
</style>
<body>
  <div style="display: grid; gap: 16px">
    <article style:"display: none" class="garnet-vendor" data-garnet="vendor">
      <img width="300" height="300" class="image" data-garnet="vendor.image" />
      <aside>
        <h1 data-garnet="vendor.name">Title</h1>
        <p data-garnet="vendor.description">Your text goes here.</p>
        <div>
          <a href="#" data-garnet="vendor.link">View products</a>
        </div>
      </aside>
    </article>
  </div>
</body>
<script>
  // Garnet code to populate the vendor data
  const script = document.createElement("script");
  const store = window.Shopify.shop.replace('.myshopify.com', '')
  script.src = "https://"+store+".garnet.center/api/storefront/populate"
  document.head.appendChild(script);
</script>

You will see the page populated with your vendors:

populated vendors

Option 2, use your own code

You need one line of code to add the vendors to the page. Make sure to replace {store} with your actual store name:

html
<script src="https://{store}.garnet.center/api/storefront/populate"/>
<script src="https://{store}.garnet.center/api/storefront/populate"/>

Then inside your code, you must add the data-garnet attributes such as in this example:

html
 <article style:"display: none" class="garnet-vendor" data-garnet="vendor">
  <img width="300" height="300" class="image" data-garnet="vendor.image" />
  <aside>
    <h1 data-garnet="vendor.name">Title</h1>
    <p data-garnet="vendor.description">Your text goes here.</p>
    <div>
      <a href="#" data-garnet="vendor.link">View products</a>
    </div>
  </aside>
</article>
 <article style:"display: none" class="garnet-vendor" data-garnet="vendor">
  <img width="300" height="300" class="image" data-garnet="vendor.image" />
  <aside>
    <h1 data-garnet="vendor.name">Title</h1>
    <p data-garnet="vendor.description">Your text goes here.</p>
    <div>
      <a href="#" data-garnet="vendor.link">View products</a>
    </div>
  </aside>
</article>

In summary:

data-garnetFunction
vendorrepeats the vendor
vendor.imagesets the image
vendor.namesets the vendor name
vendor.descriptionsets the vendor description
vendor.linksets the link's href to the vendor's page

WARNING

To optimize your website speed, set the img's' width and height. It ensures the vendor image has the correct size.