Streaming live at 10am (PST)

🤔 SOLVED: Editable static content within collection page


Hi dear Webflowers community!

First off, it seems my problem is similar to this one from three years ago, so maybe there are new ways to tackle it: Unique content on Collection pages

The basic solution would be to somehow embed a dynamic page into a static or the other way around, I guess.

This is my problem:
I landed a new job for a customer who wants to have some kind of catalogue/shop functionality (with collection-like repeating patterns). Easy.

He also wants each product page to be partly unique in it’s presentation. Like different features, texts, etc. that are definitely none-repetitive.

Imagine this concept per product-page:

  • Product explanation in individual text, images, maybe slider, maybe video, maybe whatever
  • Standard product information (from collection)

So basically either
a) I need to somehow implement individual content into an otherwise collection-page
b) or do the opposite by somehow adding a collection page to a static page

Any idea how to do that? I thought about b) with some iframe-like insert of a collection page? But iframes are so lame, is there anything else to look at?

Please, HELP!



What about using collection lists as layout elements on a static page to embed data from the collection to the page? and then filter away the list items that is not relevant.


That’s what I thought too. But does the filter work like that? And I would have to copy this into each of the static pages, and it can’t be a symbol, obviously.

It’s not perfect but worth a try…


You could set up a “name > equals > [product name]” filter. Not perfect, but has worked for me before.


Here’s the best solution for this, just in case anybody wants to accomplish the same. I’m not a developer, I used the base code from this project by @cyberdave. Thanks man!

I created the general page as a collection template page. In the collection, I created a text field that contains the URL or slug of the content that needs to be variable.

Next, I created a div with the ID content-div. And then in the custom code area before the tag I put this:

function loadcontent(div,cid) {
  $('#' + div).load('' + cid); }

<script type="text/javascript">

The SLUG of course is the variable defined within the collection, that I entered into the script using the + Add Field button in the custom code section.