# Build the collection page
> The template page of your Collections collection. Covers the page URL, the collection details, and the two ways to list its products, a Collection list of product cards or search & discovery.
Status: Ready (Smootify 2.0)
1.x page: https://docs.smootify.io/docs/ecommerce/collections/template
URL: https://www.smootify.io/docs/build/collection-page
Updated: 2026-10-01
A collection page in Webflow is the template page of your **Collections** collection. The collection’s name, description and image come from the CMS, like any Webflow template page. The products can come from two places: a Collection list of product cards, filled from the CMS, or search & discovery, which loads them live from Shopify with filters and sorting. This guide covers both and helps you choose.
> [!NOTE]
> Before you start, Smootify must be installed on the site and your products and collections synced to the CMS. Each product's `cms:Collections` field lists its collections, and each collection has its `cms:Shopify ID` field filled in. See [CMS collections and sync](https://www.smootify.io/docs/start/cms).
## How it fits together
What Smootify needs:
- one product card per product: a `smootify-product` element with the product’s id;
- for search & discovery, a `smootify-search-discovery` element that knows the collection.
What is up to you:
- the layout of the page, the collection header, the card design, the classes and the styles;
- which way you list the products. You can also start with a Collection list and move to search & discovery later: the card design stays the same.
The two ways side by side:
| | Collection list | Search & discovery |
|---|---|---|
| Products come from | the CMS, after the sync | Shopify, live |
| Filters and sorting | Webflow's list settings, fixed | chosen by the visitor |
| Order | the Collection list's sort settings | the collection's order in Shopify, until the visitor picks a sort |
| A new product | shows after the next sync | shows without a sync |
| Needs | nothing more | the Search & discovery add-on |
## 1. The template page and its URL
Webflow creates the template page when you create the Collections CMS collection. Each page lives at the CMS collection’s slug followed by the item’s slug, such as `/collections/summer`. The sync writes the Shopify handle into the item’s slug, so the Webflow address can match the Shopify one.
Smootify builds links to collection pages, for example with `product="collections"` on a product card. It expects them under `/collections/`. If your Collections CMS collection has another slug, such as `collection` on a site built with 1.x, set `collectionsBase` in the [Smootify options](https://www.smootify.io/docs/reference/options) to that slug.
## 2. The collection details
The header of the page is plain Webflow. Bind a Heading to the **Name** field, a Rich text element to **Description** and an Image to **Image**. In the page settings, use the **SEO Title** and **SEO Description** fields for the title and meta description, if your collection has them.
Smootify adds nothing here: these fields change when the sync runs.
## 3. List the 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: **Collections** contains **Current Collection**.
3. Inside the Collection item, add a Custom element with the tag `smootify-product`. Give it the custom attribute `data-id` and take its value from the **Shopify ID** field.
4. Design the card inside `smootify-product`: see [Product cards](https://www.smootify.io/docs/build/product-cards).
```html
```
In purple, the CMS bindings. In the Text Link’s settings, link it to **Current Product**, the product’s own page, and bind its text to **Name**. The link and the name work before Smootify loads, and search engines read them; Smootify then writes the same values from Shopify.
The list shows what the CMS holds. The order, the limit and the pagination are the Collection list’s own settings: you can sort by the **Price** field, for example. A product added to the collection in Shopify appears after the next sync. Price, stock and the add-to-cart form inside each card are always live, because Smootify loads them from Shopify.
## 4. Or list them with search & discovery
Use search & discovery when the page needs filters or sorting chosen by the visitor, when the collection is large, or when the products must follow the order set in Shopify.
1. Add a Custom element with the tag `smootify-search-discovery`.
2. Give it the custom attribute `data-collection`, and take its value from the **Shopify ID** field of the collection.
3. Inside it, add one product card: a `smootify-product` with `data-id="filter"`. Smootify repeats it once per product.
```html
```
The count and the next-page button above are optional. With `data-collection`:
- the products come in the order the collection has in Shopify, until the visitor picks a sort;
- the collection is locked: the reset button keeps it, and it stays out of the page address;
- the text search (`filter-search`) looks inside the collection. For an exact search on a large collection, tag its products and add `data-tag`: see [Search inside a collection](https://www.smootify.io/docs/build/filters#search-inside-a-collection).
**Keep a Collection list for search engines.** You can put the Collection list from step 3 inside `smootify-search-discovery`. Its first item becomes the card template, and the other items stay on the page until the first results replace them. Search engines see real products, and the page keeps its height while it loads. Inside search & discovery, every card is a copy of the first one, so give each element a Smootify attribute such as `product="title"`, not only a CMS binding.
Filters, sorting, pagination and the empty state are in [Filters, sorting and pagination](https://www.smootify.io/docs/build/filters).
## 5. Products of other collections
To show a few products of another collection, such as “New in” on the home page, use `data-id="specific-collection"`: see [Product lists without the CMS](https://www.smootify.io/docs/build/product-lists).
## Before you publish
On your `.webflow.io` address, the Smootify debugger lists the elements that are out of place on the page.
> [!STUCK]
> - **Every collection page shows every product.** The Collection list has no filter. Add `cms:Collections` contains **Current Collection**.
> - **A new product is missing from the list.** A Collection list shows only what the sync has written to the CMS. Run the sync, or use search & discovery, which reads Shopify directly.
> - **Search & discovery shows nothing.** It needs a `smootify-product` card inside, or it is removed. On the live domain it also needs the Search & discovery add-on.
> - **Every card shows the same name or image.** Inside search & discovery, text bound only to a CMS field is copied from the first card. Add `product="title"`, `variant="image"` and the other attributes to the card.
> - **A search on a big collection misses products.** Only its first 2,000 products are compared with the search. Tag them and use `data-tag`: see [Search inside a collection](https://www.smootify.io/docs/build/filters#search-inside-a-collection).
> - **Collection links lead to a page that does not exist.** The slug of your Collections CMS collection is not `collections`. Set `collectionsBase` in the Smootify options.