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.

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-garnet	Function
vendor	repeats the vendor
vendor.image	sets the image
vendor.name	sets the vendor name
vendor.description	sets the vendor description
vendor.link	sets 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.

Add a vendor directory page ​

Big picture ​

Create a Shopify Page ​

Option 1, directly use the code ​

Option 2, use your own code ​

Add a vendor directory page

Big picture

Create a Shopify Page

Option 1, directly use the code

Option 2, use your own code