Skip to content

Populate vendor details

Quite often the marketplace needs to inject some vendor-related information. For example, on the product page, we need to have the vendor name that redirects to the vendor page.

vendor populate framework

Let's see how we can add this link and other information with either with Liquid code, and via API.

Via API

To get the vendor data via API, use:

http://{your-store}.garnet.center/api/storefront/populate/vendor?vendor={vendor}&json=true

Replace:
- {your-store} with your Shopify shop ID
- {vendor} with the vendor name you want to use

Here is a sample response:

json
{
    "$collectionUrl": "/collections/asian-crowns-1ovg9",
    "$imageUrl": "https://cdn.shopify.com/s/files/1/0761/9805/2129/collections/313025165168.jpg?v=1712054001",
    "$description": "Hello, this is Asian Crowns!",

    "company-name": "Pantone Technology",
    "website-url": "https://asian-crowns.com",
    "company-number": "asdf",
    "legal-company-name": "Asian Crown Pte. Ltd.",
    "phone": "+1 555 123 321",
    "location": [ "Canada" ],
    "preferred-language": "English"
}

With liquid code

To use liquid code, insert the following liquid script on a page.

liquid
<script src="https://{{shop.permanent_domain | replace: 'myshopify.com', 'garnet.center'}}/api/storefront/populate/vendor?vendor={{product.vendor | url_encode}}" defer></script>

Custom liquid where to add

This script will scan the page and enrich the data as follow:

  1. All links containing the vendor name will point to the vendor's collection page.
Details
html
<a href="#">Asian Crowns</a>

Becomes

html
<a href="/collections/asian-crowns">Asian Crowns</a>
  1. All links containing #garnet-vendor-page will point to the vendor's collection page.
Details
html
<a href="#garnet-vendor-page">See more about Asian Crowns</a>

Becomes

html
<a href="/collections/asian-crowns">See more about Asian Crowns</a>
  1. All fields with the attribute data-garnet="field" will have its content replaced with the associated registration field's data.
Details
html
<div>Phone number: <span data-garnet="phone"></span></a>

Becomes

html
<div>Phone number: <span data-garnet="phone">+1 555 123 321</span></a>
  1. All images with the attribute data-garnet="$imageUrl" will have its content src replaced with the vendor's image URL.
Details
html
<img height="300" data-garnet="$imageUrl"/>

Becomes

html
<img src="https://cdn.shopify.com/s/files/1/0761/9805/2129/collections/313025165168.jpg?v=1712054001&height=300" data-garnet="$imageUrl"/>

Ensure to use proper image proportions CSS to have a predicatable image size.