Collection List Item Layout

Design help CMS
1

I have a couple of queries re: collections.
I have 3 designs layouts I’d like to implement for a specific collection. Is there a way to do this different to the recommended way of implementing all layouts in 1 page and then hiding the 2 that I don’t want to use? I’m looking for a workaround for this it’s terrible for SEO.
Secondly I’d like to implement a repeating section in a colection. I have a round up of products. For example a post could be “Best Electric Cars 2023” and in that I’d like to have component for a car with specific fields. I would then repeat this for however many cars I wanted to add. The issue is that if I did a multi-reference collection I would quickly run out of collections as I would have 1000s of them.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

This is a real limitation of Collection template versus WordPress where you can have unique layouts for posts based on the individual item, and any taxonomy assigned + individual item. I build a lot of PPC sites and I can tell you that the only workaround I found was to not use Webflow for them.

I am not aware of a workaround for your use case. Again once I review the requirements of a project against known limitations, I move on as there are plenty of other options.

Sorry that I can’t give you any actionable things to solve your issues. Maybe someone else will chime in with a valid workaround. Good luck.

3

Thanks Jeff. I was hoping that Webflow would be a bit more flexible here but it seems that’s it’s best use case is more marketing / brochure style sites. I am thinking it may be possible to build layouts in a ‘sandbox’ page with specific class styles and then save the exported HTML and paste the code into Rich Text field and embed the css in the post. Have you tried that? I’d like to give no code a go for the project so may turn to framer and create everything as pages if not.

4

There is a code component inside the rich text editor and you can put HTML and style blocks inside it which will render. Problem is dealing with images as you would have to insert them, publish, inspect the source code, then grab the asset URL to use inside your custom code. Also a word of warning, the last I checked you can’t export that custom code, nor can you access it via the API.

1 Like
5

Hi Bob,

As Jeff says, Webflow is not ideally-suited for this, however there are some workarounds if your layout variations aren’t overly proflific or complex.

Here’s the approach I use-

I think you’re saying that an article about cars might show a list of car-shaped items, while a list of boats might show a different set of boat-shaped items. If you have thousands of different item-shapes, yeah, you’re going to struggle to make Webflow do this.

The best I could suggest is to manage and pull that data AJAX-style from a headless CMS as JSON, and then combine it with a local repository of “templates” to create your data. But you’d essentially be building a lightweight system on top of Webflow to accomplish that.

Here’s some thinking that might help you if you decide to pursue this.
If it feels out-of-depth, I woudn’t tackle it because this is just the surface layer. The details will matter here.

However if I had to do this, I’d structure the CMS something like this;

  • Blog which contains your posts
  • Blog Products contains the list of products attached to your blog
    • single Ref to Blog
    • single Ref to Product
    • integer sequence if you need to explicitly control ordering
  • Products which contains your product items, e.g. each car, boat, etc.
    • single Ref to Product Type
    • URL probably to the actual product data, stored as JSON somewhere that it can be effectively managed
  • Product Types which defines the shape of each type, e.g. car, boat, fruit, etc.

The Product Types collection page would define the repeating template so you can create it in the designer. use custom attributes to map your JSON fields.

Blog Products is separate because multi-ref fields are difficult to work with, especially as the number of items you can reference grows. Thousands would be difficult. However you also probably want Products to be shareable across articles, without duplicating them. So we create Blog Products as an xref pattern, to connect Blogs and Products and let you control the ordering individually for each blog.

However, blog products is “expensive” in terms of the number of collection items you’ll be creating, so… trade-offs for that flexibility.

The scripts to construct your view aren’t bad- pull the data, pull the template, and merge them. But the data administration is going to be ugly, just no way around that. Depending on what headless CMS you find, and its capabilities, you might be able to simplify some of that work.