How can I dynamically link all the Collection Items in a Collection List to a custom page in Webflow?

Published on
September 22, 2023

To dynamically link all the Collection Items in a Collection List to a custom page in Webflow, follow these steps:

  1. Create a new page: Start by creating a new page that will serve as the custom page you want to link to. You can create this page in the Webflow Designer.

  2. Set up a Collection: Make sure you have a Collection set up that contains the data you want to display on your custom page. Collections allow you to organize and display dynamic content in Webflow.

  3. Add a Collection List: On the custom page you created in step 1, add a Collection List element from the Add panel. The Collection List will be used to display the Collection Items dynamically.

  4. Connect the Collection List to your Collection: With the Collection List selected, access the Collection settings in the right-hand panel. Choose the Collection you want to display, and set any filters or sort orders if needed.

  5. Design your Collection Item: Inside the Collection List, design the layout for your Collection Item. This will determine how the data from each Collection Item is displayed on your custom page.

  6. Add a Link Block: In the Collection Item, add a Link Block element. This Link Block will serve as the clickable area that takes the user to the custom page when clicked.

  7. Configure the Link Block: With the Link Block selected, access the settings in the right-hand panel. In the Link settings, choose "Current Collection Item" from the dropdown menu.

  8. Set the link URL: In the same Link settings, choose the field from your Collection that contains the URL or slug for the custom page. This could be a plain text field or a reference field that points to another Collection.

  9. Style the Link Block: Customize the design of the Link Block to match your website's branding or desired style.

  10. Repeat for Each Collection Item: Duplicate the Collection Item with the Link Block as many times as needed to match the number of Collection Items in your Collection List.

  11. Publish your site: Once you've completed the configuration and design of your custom page and Collection List, publish your site to make the changes live.

By following these steps, you can dynamically link all the Collection Items in a Collection List to a custom page in Webflow. This allows you to create a dynamic website with multiple pages that display relevant content based on your Collection.