Appearance
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:
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.