Build the collection page

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.

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:

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

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.

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.

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.

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.

Before you publish

On your .webflow.io address, the Smootify debugger lists the elements that are out of place on the page.