# Vendor pages

> One Webflow page per Shopify vendor (brand), from the Vendors collection the sync fills. Covers the template page and its URL, listing the vendor's products, and linking to the page from a product.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/ecommerce/vendors/template  
URL: https://www.smootify.io/docs/build/vendor-page  
Updated: 2026-10-08

In Shopify, the vendor is a line of text on each product, often the brand. Shopify has no vendor pages, but the Smootify sync creates one item per vendor in your **Vendors** collection, so Webflow can have one. This guide builds the vendor template page and lists the vendor’s products on it.

> [!NOTE]
> Before you start, your products must be synced, with the **Vendor** reference field of the Products collection pointing to the Vendors collection. See [CMS collections and sync](https://www.smootify.io/docs/start/cms).

## How it fits together

The sync fills two fields of each vendor item, and each has its own use:

| Field of the vendor item | 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 | the page address, such as `/vendors/acme-studio`, where `product="vendor"` links; never `data-vendor` |

Nothing else comes from Shopify. You can add your own fields in Webflow, such as a logo or a description, and fill them in the CMS.

What Smootify needs:

- one product card per product, as on the [collection page](https://www.smootify.io/docs/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

Each vendor page lives at the Vendors collection’s slug followed by the item’s slug, such as `/vendors/acme`. Smootify builds vendor links with `/vendors/` by default. If your Vendors CMS collection has another slug, such as `vendor` on a site built with 1.x, set `vendorsBase` in the [Smootify options](https://www.smootify.io/docs/reference/options) to that slug.

Bind the header to the vendor’s fields as on any Webflow template page.

## 2. List the vendor’s products with a Collection list

1. Add a **Collection list** and connect it to your **Products** collection.
2. In the Collection list settings, add a filter: **Vendor** equals **Current Vendor**.
3. Inside the Collection item, add a `smootify-product` with `data-id` taken from the **Shopify ID** field, and design the card: see [Product cards](https://www.smootify.io/docs/build/product-cards).

The list shows what the CMS holds, in the order set in the Collection list settings.

## 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 the custom attribute `data-vendor`, and take its value from the **Name** field.

```html
<smootify-search-discovery data-vendor="{Name}">
  <div>
    <smootify-product data-id="filter">
      <a product="url" href="#">Product name</a>
      <smootify-price><div data-prop="price">$0.00</div></smootify-price>
    </smootify-product>
  </div>
</smootify-search-discovery>
```

`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/build/filters).

## 4. Link to the vendor page

On a product card or on the product page, `product="vendor"` on a Text link 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, use a Collection list of your Vendors collection: it is plain Webflow.

## Before you publish

> [!STUCK]
> - **The vendor page shows every product.** The Collection list has no filter. Add **Vendor** equals **Current Vendor**.
> - **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. Bind it to the `cms:Name` field, not the Slug.
> - **Vendor links lead to a page that does not exist.** The slug of your Vendors CMS collection is not `vendors`: set `vendorsBase` in the Smootify options.
> - **A vendor has no page.** Vendor items are created by the sync, from the products. Run the sync after adding a vendor in Shopify.