Creating two different collection page templates using the same collection

From what I can see so far, in order to create a “CMS page” or a “collection page” one has to create a new collection.

Okay, so maybe I am misunderstanding how Webflow works… but I can’t figure out how to create a new CMS/collection page without creating a whole new collection.

Here is the issue. I want to create a “property page” for a real estate listing, and I need two versions of this property page.

One version includes the real estate agent information, and the other version is an MLS-safe version that does not include the real estate agent information.

Am I understanding Webflow correctly in that I have to have 2 identical collections of real estate listings, and one of them won’t include the agent information?

If so… this is super counter-intuitive for a CMS. Isn’t the whole point to separate design from content, so that you can display the same data in whatever way you want without being forced to create duplicate data for a new design?

I really hope that I am wrong about this assumption.

Also, the item limits on hosting plans seem extremely limited. For example, it seems as though on the most expansive hosting plan with 10,000 items we would only be able to display about 150 properties before we hit our maximum CMS items quota… Is anybody else finding these limits too restrictive? How are you guys building web sites with such small quotas?

Any help would be much appreciated!


Here is my public share link: LINK
(how to access public share link)

Edited title for clarity.

No, currently each collection can only have a single template page.

You can however, have a custom querystring like:

/my-collection/my-page
/my-collection/my-page?template2
/my-collection/my-page?template3

and use custom code to show/hide different sections accordingly for the second (or multiple) templates.

Okay. Do you know what the answer to this is?

You might also be interested in voting for this The ability to have multiple page templates per | Webflow Wishlist

Oh, my goodness. This is very disappointing. I can’t believe this is not included. It’s such a basic feature for a CMS…

1 Like

@ds18 You might also be interested in ► [LIST] Feature Availability & Limits

I didn’t see this part of your answer about a query string in the URL. This won’t solve the problem, but it might help a bit. How do I accomplish this?

This is on a per-project basis as the custom code depends on what elements are different for each “template”. You can provide more details using this form and I’ll take a look.

I might misunderstand your question but; You can easily add multiple CMS “Collection list” elements into a static page and achieve different results on two different pages with using the same CMS collection.

1 Like

I’m just picking up CMS and this makes sense to me. Do you know if there is a way to have a collection page and add collection lists to it? So, for a portfolio site I have a basic set of requirements/content that could be established with a collection page but the occasion project may require some addition content - more copy, or a image gallery for example. The ideal is for non-webflowers to be able to create a new project page, load the content via the CMS and pick and choose what additional blocks of content they want to include.

Hey Mario, are you able to quickly share a video or something on how you might achieve this, i’d appreciate it a lot.

1 Like

Hi, one way of achieving this is by using zapier to duplicate one CMS collection list to another. And then build in a function that when a cms collection list item is added or updated it duplicates the item to the duplicated list. Hope that makes sense.

1 Like

Hey @Tobi_1234595, looks like this was answered in a Webflow video a little while after you asked! Stream highlight: Creating multiple layouts for Webflow collection template pages - YouTube

Hi everyone, I think this should answer this question best - it’s a video from Webflow from May 2019: Stream highlight: Creating multiple layouts for Webflow collection template pages - YouTube

Basically what Nelson says is:

  1. Create an “Option” field in your CMS, name it Layout (or whatever)

  2. Create several options there, e.g. Layout 1, Layout 2, Layout 3, etc.

  3. Go to your collection page, and put everything in a div block/container/section/whatever

  4. Go to Settings → Conditional Visibility → Make that visible only when Layout = Layout 1

  5. Rinse and repeat until you have different layouts for each and conditional visibility that matches what you want.

  6. One issue is, there’s no “default layout” option in this video (which means that if you don’t have one set, nothing will show, but that’s a horrible solution), so I have a solution:

    For your "base" layout, don't do anything, keep it as it is and set the "Conditional Visibility" 
    on that div/section/container to filter based on your "Layout" Option Field. 
    
    Add a conditional visibility filter to this default section by:
    
    "Element is visible when..."
    1st dropdown:  "Layout" (or whatever you call that option field)
    2nd dropdown: "Is Not Set"
    
    That way, when you don't have a layout set, it will default to your base design. When a 
    layout is set, it will show whichever design is visible for that specific layout.
    
1 Like

My problem with different layouts and hiding elements is that the content is still being seen by the crawlers. The crawlers think I have duplicated H1’s, H2’s etc.

How can I overcome this?

But this only solves the issue partly, no?

You may have 3 different layouts, but you can only chose one at a time to display for that collection item.

For example, I have a french/english website and would like to translate the one blog item to both languages and have a page for each.

There’s shared images, colors, etc, but I need to swap the copy – hide french + show english AND show french + hide english. I can accomplish with the suggestions above, but how can I have two BOTH versions - so if the user is on the french pages, they’ll be directed to the french blog version, and the english to the english (both with the ability to jump to the other version).

What if you split your data into two CMS collections and create a reference in each CMS to the other CMS. Then you could create two different CMS collection pages and access all the data on both CMS’s. I haven’t done it yet, but it seems like it would work.

I’m going to give it a try and make one CMS page for public consumption and the other one with password protection for staff only.

Update: 5/28/23: Worked like a champ. Two CMS pages for the same data.

Just adding something because what @Darren_M pointed out might be important for SEO since after following up on that it seems google might penalize the site if thinks we are hidding content as some kind of strategy to stuff in more keywords.

So anyway, I added this bit of javascript to the page so it totally removes the node from the DOM, I think with this we might be safe from a SEO perspective. Here is the code snippet with my example:


<script>
// to remove some specific elements that rends conditionally
const elementsToRemove = document.getElementsByClassName("learning-dificulties-section w-condition-invisible");

if (elementsToRemove[0]) {
  elementsToRemove[0].remove();
}
</script>

I hope it helps someone else.