# Vendor pages

> One page for each Shopify vendor (brand), from the vendors content collection. Covers the page and its URL, listing the vendor's products, and linking to the page from a product.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/astro/build/vendor-page  
Updated: 2026-10-21

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.

> [!NOTE]
> Before you start, your products and vendors must be loaded as content collections: see [Content from Shopify](https://www.smootify.io/docs/astro/start/content). Each product's `vendor` field references its vendor.

## How it fits together

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

| Field of the vendor entry | Filled with | Use it for |
|---|---|---|
| `name` (such as Acme Studio) | the vendor, as written in Shopify | the page header, and `data-vendor` on `smootify-search-discovery` |
| `slug` (such as acme-studio) | the same name in lower case, with dashes; it is the entry’s id | the page address, such as `/vendors/acme-studio`, where `product="vendor"` links; never `data-vendor` |
| `products` | references to the vendor’s products | listing them: see step 2 |

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](https://www.smootify.io/docs/astro/build/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](https://www.smootify.io/docs/astro/reference/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](https://www.smootify.io/docs/astro/start/content#5-seo-helpers).

## 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](https://www.smootify.io/docs/astro/build/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](https://www.smootify.io/docs/astro/build/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.

```astro
<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](https://www.smootify.io/docs/astro/build/filters).

## 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

> [!STUCK]
> - **The vendor page shows every product.** The page reads the whole `products` collection. Read `vendor.data.products`.
> - **Search & discovery shows every product.** The **Vendor** filter is off in Shopify's Search & Discovery app. Turn it on.
> - **Search & discovery shows no product.** `data-vendor` must be the vendor's name exactly as in Shopify. Give it the entry's `name`, not its `slug`.
> - **Vendor links lead to a page that does not exist.** Your vendor pages are not under `/vendors/`. Set `vendorsBase` in the `userOptions` of the integration.
> - **A vendor has no page.** Vendor entries come from the products when the content is loaded. Build again after adding a vendor in Shopify.