Vendor pages

In Shopify, the vendor is a line of text on each product, often the brand. Shopify has no vendor pages, but the Smootify loader derives one entry per vendor in the vendors content collection, so your site can have one. This guide builds the vendor page and lists the vendor’s products on it.

How it fits together

The loader gives each vendor entry these fields, and each has its own use:

Nothing else comes from Shopify. A logo or a description is yours to add in the page.

What Smootify needs:

• one product card per product, as on the collection page;
• for search & discovery, the vendor’s name on smootify-search-discovery.

What is up to you: the page layout, the vendor header, the cards, and which way you list the products.

1. The template page and its URL

Create src/pages/vendors/[slug].astro with a getStaticPaths that maps the vendors content collection to { params: { slug: vendor.id }, props: { vendor } }. The entry’s id is its slug, so each page is at /vendors/ followed by it, such as /vendors/acme-studio. Smootify builds vendor links with /vendors/ by default. For another route, name the page folder after it, such as src/pages/brands/[slug].astro, and set vendorsBase to that name in the userOptions of the integration in astro.config.mjs: see the Smootify options.

Write the vendor’s name in the header of the page. For the title and the meta description, give the entry to <Seo type="vendor" entry={vendor} />: see Content from Shopify.

2. List the vendor’s products with Astro

1. Read the vendor’s products in the frontmatter of the page: (await getEntries(vendor.data.products)).filter(Boolean).
2. Render each product as on the collection page: an element with the class sm-dyn-item, and inside it a smootify-product with data-id set to the product’s shopifyId. Then design the card: see Product cards.

The list shows what the content collection holds, in the order of the products. A vendor added in Shopify appears after the next build.

3. Or list them with search & discovery

For filters and sorting on the vendor page, use search & discovery (the Search & discovery add-on). Add smootify-search-discovery with data-vendor set to the vendor’s name, and render the vendor’s products inside it as the cards of the page.

<smootify-search-discovery data-vendor={vendor.data.name} limit={24}>
  <div>
    {products.slice(0, 24).map((p) => (
      <div class="sm-dyn-item">
        <smootify-product data-id={p.data.shopifyId}>
          <a product="url" href={`/products/${p.id}/`}>{p.data.name}</a>
          <smootify-price><div data-prop="price">{p.data.priceFormatted}</div></smootify-price>
        </smootify-product>
      </div>
    ))}
  </div>
</smootify-search-discovery>

Smootify takes the first .sm-dyn-item as the card template, and rewrites the list from its results. The server cards stay as they are until the first results: Smootify keeps them when the results are the same products in the same order, and otherwise replaces the list in one step.

data-vendor needs the Vendor filter turned on in Shopify’s Search & Discovery app (Filters › Add filter › Vendor). Without it, Shopify ignores the vendor without an error, and the block lists every product. The debugger tells you when this happens.

The vendor is locked: the visitor’s filters apply within that vendor’s products, and the reset button keeps it. Filters, sorting and pagination are in Filters, sorting and pagination.

4. Link to the vendor page

On a product card or on the product page, product="vendor" on a link (<a>) writes the vendor’s name and links to its page. On a link that holds other elements, such as a logo, it sets only the link.

To list all vendors, such as a “Brands” page, map getCollection("vendors") to links: it is plain Astro.

Before you publish