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

How it fits together

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

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;
• 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 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.

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.

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