Structure and style Collection pages

Customize your Collection page template to reflect the changes across all Collection pages.

When you create a Collection, Webflow automatically creates a blank Collection page  — a dynamic template that powers individual pages for each Collection item (e.g., blog post, recipe, team member, etc.). All Collection pages share the same layout and design, so when you update the Collection page, you’re updating the template for every item. That makes Collection pages ideal for recurring content like blog posts, help articles, or even landing pages.

Access and preview Collection pages

To access Collection pages, go to the Pages panel > CMS Collection pages > [Collection Name] template.

• Visual indicator — collection pages are purple to indicate that they're connected to a Collection
• Switch pages — use the Collection page menu in the top bar to preview other Collection pages
• Search for pages — use the search option in the Collection page menu to find specific pages

Add static and dynamic elements

You can design Collection pages just like any static page — but you can also add dynamic elements. Dynamic content changes based on which Collection item is being viewed. For example, a dynamic heading can display the blog post title for each individual blog post page. Unlike static pages, Collection pages don't need a Collection list to add dynamic elements.

Add static elements

Adding elements works the same way as on a regular page. Just remember —  anything you add to a Collection page appears on every Collection page. Learn how to add elements.

Add dynamic elements

You can convert static elements you add into a dynamic elements by connecting them to a Collection field. Any option highlighted in purple or containing a purple icon above it in the Settings panel can be connected to a Collection field.

To connect an element to a Collection field:

1. Select an element
2. Go to the Settings panel
3. Click the purple icon above a setting (e.g., Text, Image, or Alt Text)
4. Choose which Collection field to connect

Link to Collection pages

Collection pages aren’t available as link targets for static elements on static pages. To link to a Collection page from a static page, you’ll need to add a Collection list. You can also link from one Collection page to another without using a Collection list.

To link to a Collection page from a static page:

1. Add a Collection list to the page
2. Go to the Settings panel > Collection list Settings > Source
3. Choose a Collection
4. Go to the Navigator and expand Collection List Wrapper > Collection List > Collection Item
5. Add a button, or any link element
6. Go to the Settings panel > Link settings
7. Choose the purple Collection page option
8. Choose Current [Item]

This will link each button in the Collection list to its respective Collection page created for each item.

Collection page settings

In the Collection page settings, you can set the SEO meta title & description, Open Graph title & description, RSS, and custom code for your Collection page templates. However, unlike static pages settings, Collection page settings can have dynamic values, meaning they result in unique information for each Collection item page.

You can access the Collection page settings through the settings icon that appears when you hover over a Collection page template in the Pages panel.

General

You can add a Collection template page to a folder so you have greater control over Collection item page URLs and SEO. When you set a parent folder for a Collection template page you can serve those Collection’s item pages on a subdirectory URL. For instance, if you have a parent folder named “Content” and a Collection of blog posts, the URL can be “website.com/content/blog/example-post.” 

To set a parent folder on a Collection template page:

1. Go to the Pages panel
2. Hover over the Collection template page and click the settings “cog”
3. Go to General > Parent folder
4. Select your parent folder from the dropdown
5. Click Save

Publish settings

You can decide whether or not the Collection’s template pages are published along with your site. This is helpful, for instance, to prevent publishing if you don’t want a Collection’s template pages to be live and indexed by search engines.

To enable publishing for the Collection’s item pages:

1. Go to the Pages panel
2. Hover over the Collection template page and click the settings “cog”
3. Go to Publish settings
4. Switch the toggle “on”

To prevent the Collection’s item pages from being published:

1. Go to the Pages panel
2. Hover over the Collection template page and click the settings “cog”
3. Go to Publish settings
4. Switch the toggle “off”

Dynamic SEO Settings

You can define a template for the page titles and descriptions using Collection fields. And, you can see how they'll look in search engine results pages (SERPs) in a preview box.

Learn more: Setting meta title and description

Dynamic Open Graph Settings

Here, you can set the information that will be presented when sharing links to Collection pages on Facebook, Twitter, LinkedIn, Pinterest, and Google+. Using Collections fields will create a template for each page, resulting in unique Open Graph information for each page.

Learn more: Setting Open Graph settings

RSS Feed Settings

You can enable an RSS 2.0 feed for a Collection in the Collection page settings. This publishes a feed that RSS reader users can subscribe to and get updates when you publish new Collection items.

Here you can define the feed settings. You can use Collection fields to create a dynamic template for RSS channel title, description, and other settings. You can also see a preview of the feed right in the page settings. Then, ‍you can copy the RSS URL to use with other apps, or even add a link to it on your website.

Learn more: RSS feeds

Custom code

You can add custom code and scripts to the <head> or </head><body> tag of a Collection page template. This will apply to all Collection pages. And if this code contains any information that you would like to have a unique value per Collection item page, then, you can replace that value in the code with a Collection field. Simply, select the value, and click on the purple </body> + Add Field located at the upper right of the custom code text field.