How can I add different HTML embeds to each room page in a collection page setup on Webflow?

Published on
September 22, 2023

To add different HTML embeds to each room page in a collection page setup on Webflow, you can follow these steps:

  1. Create a Collection: First, create a collection for your rooms on Webflow. This will allow you to add and manage multiple room pages efficiently.

  2. Add Fields to the Collection: In the collection settings, add the necessary fields for your rooms, such as room name, description, images, and any other information you want to display on each room page.

  3. Design the Collection Template: Go to the collection template settings and design the template for your room pages. This template will be used for each room page in the collection.

  4. Add an HTML Embed Element: In the collection template design, add an HTML Embed element to the appropriate section where you want to display the different HTML embeds on each room page.

  5. Bind the HTML Embed to a Collection Field: Select the HTML Embed element and bind it to a field from your room collection. This will allow you to dynamically display different HTML embeds on each room page based on the field values.

  6. Customize the Collection Item: Go to the collection items section and create individual items for each room. Fill in the fields with the corresponding information for each room, including the HTML embed code you want to display on each page.

  7. Publish the Site: Once you have set up the collection template and added the HTML embed elements, publish your site to see the changes. Each room page in the collection will now display the appropriate HTML embed based on the values in the collection fields.

By following these steps, you can easily add different HTML embeds to each room page in a collection page setup on Webflow. This allows you to showcase unique content or functionality on each room page, enhancing the user experience.

Additional Questions:

  1. How do I create a collection template in Webflow?
  2. Can I add custom code to my Webflow website?
  3. What are the benefits of using collections in Webflow?