What is the recommended way to implement multiple design layouts for a specific collection in Webflow without hiding unwanted layouts on one page, as it negatively affects SEO? Is there a workaround for implementing a repeating section in a collection without running out of collections when using multi-reference collections?

Published on
September 23, 2023

Implementing Multiple Design Layouts for a Specific Collection in Webflow

When it comes to implementing multiple design layouts for a specific collection in Webflow without negatively affecting SEO, there are a couple of recommended approaches you can take.

1. Use Conditional Visibility

Utilizing Webflow's conditional visibility feature allows you to control which elements are displayed based on specific criteria. By setting conditions based on collection fields or other factors, you can dynamically show or hide sections of your layout as needed.

To implement this, follow these steps:

  • Identify the criteria that will determine which layout to display (e.g., a specific collection field).
  • Add a section for each layout variation within your collection template page.
  • Set the conditional visibility of each section based on the identified criteria.
  • Ensure that only one layout section is visible at a time.

Using conditional visibility ensures that each design layout is accessible to search engines without hiding unwanted layouts on a single page.

2. Create Separate Template Pages

Another option is to create separate template pages for each design layout. This approach works well when you have significant differences between the layouts or when you want each layout to have its unique URL.

To implement this, follow these steps:

  • Duplicate your original collection template page for each design layout you want to create.
  • Customize each duplicate template page with its respective design layout.
  • Set up your navigation or links to direct visitors to the appropriate template page based on the desired layout.

Creating separate template pages provides a clear separation of layouts while preserving SEO value since each layout has its unique page.

Workaround for Implementing a Repeating Section in a Collection

When using multi-reference collections in Webflow, you may encounter limitations on the number of collections you can use. However, there is a workaround to implement a repeating section without running out of collections.

Follow these steps to implement a repeating section in a collection using a workaround:

  1. Create a separate collection specifically for the repeating section content.
  2. Inside the main collection, add a multi-reference field that references the separate collection created in the previous step.
  3. Design the repeating section within the separate collection's template page.
  4. On the main collection's template page, add a dynamic list bound to the multi-reference field.
  5. Customize the dynamic list to display the fields from the separate collection template.

This workaround leverages multi-reference fields to associate the repeating sections with the main collection, allowing you to reuse content without running out of collections.

It is important to note that while this workaround allows you to implement repeating sections, it may slightly impact performance since it requires additional queries to retrieve the data for the repeating sections.

By using conditional visibility or separate template pages, you can easily implement multiple design layouts for a specific collection in Webflow without negatively impacting SEO. Additionally, the workaround provided allows you to create repeating sections without running out of collections when using multi-reference collections.

Additional Questions:

  1. How can I create unique design layouts for different collections in Webflow?
  2. What are the best practices for implementing multi-reference collections in Webflow without running into limitations?
  3. Are there any SEO considerations when using conditional visibility or separate template pages for different design layouts within a collection in Webflow?