How can I link to specific category pages like "all caps" or "all hoddies" from the navigation and breadcrumbs in my Webflow site?
TL;DR
- Create a Category CMS Collection and link each product to categories using a Reference field.
- Design the Category Template page to dynamically display products per category and add CMS-bound links in navigation and breadcrumbs for direct access.
To link directly to specific category pages like "All Caps" or "All Hoodies" in your Webflow site, you’ll need to structure your CMS properly and then use the correct links in your navigation and breadcrumb components.
1. Set Up Your Categories CMS Collection
- Go to CMS > Collections and ensure you have a Category collection (e.g., "Product Categories").
- Each category (e.g., All Caps, All Hoodies) should be its own CMS item.
- Make sure category items have a name field and a slug (URL) (e.g.,
/category/all-caps).
2. Connect Products to Categories
- In your Products CMS Collection, add a Reference or Multi-Reference field that links to the Category collection.
- Assign the appropriate category to each product.
3. Design and Publish Your Category Template Page
- In the Pages panel, Webflow automatically creates a Template Page for your Category collection (e.g.,
Category Template). - Dynamic content will appear here for each category (e.g., filter all hoodies for the "All Hoodies" page).
- Design this page to show items connected to the category via that reference field.
4. Link Categories in Navigation
- In your site’s navbar or navigation menu, add Link Blocks or Text Links.
- Use “Page” link type, then select the Category Template, and choose a specific category CMS item (e.g., “All Caps”).
- This creates a dynamic link to
/category/all-caps.
5. Set Up Dynamic Breadcrumbs
- Add a breadcrumb section within your product pages or sub-pages.
- Use Text Links or Link Blocks for the breadcrumb parts.
- To link back to the category, use a CMS-bound link pulling the referenced category slug:
- Inside the product template, add a Link Block
- Bind the link to the Product’s referenced Category > Current Category
- Set the link text to
Current Category Name - Choose “Current Category” as the destination
6. Final Checks
- Publish your site to see live URLs like
/category/all-hoodies. - Ensure that each category page is filtered to show only products tied to that category.
Summary
To link to specific categories like "All Caps" or "All Hoodies", create a Category CMS Collection, connect Products to it via a Reference field, design the Category Template, and add dynamic links in navigation and breadcrumbs using CMS bindings.