How do I add a sub-category in a collection?

Design help CMS
1

I’m trying to add a few hundred category and sub-category pages to a Webflow site via the CMS but can’t see any way to assign a parentId or similar. I’m assuming there’s a way to do it but googling hasn’t helped so I was hoping someone here might have the solution!

I need the URL structure to be: /category/sub-category

How can this be achieved? I read something about creating a new collection for each sub-category, which I’m happy to do but haven’t seen any way to nest collections yet.

2

Just maybe answering my own question - I guess I could just create a new collection for all parent level categories? We’ll need about 50 of them I guess - but I assume that’s not a problem?

3

I’ll break this into two parts to make sure you understand the mechanics;

The relationship is defined via a ref field, and the child record’s ref points to the parent.
In general you could use a single self-referencing collection for this, like;
This looks something like;

Slug  Name               Parent
r1    Parent Category
r2    Child Category     r1

In refs, the slug acts as the record ID.

Then for any give category, the Parent is the record with the identified Slug, and the children is the set of categories whose parent is the current category.

However that would give you a path of e.g.;

/category/(slug)

in your case you’re wanting the URL to split into a hierarchy of categories, which is not directly supported by Webflow. The only way around this is to create an identical, separate collection for each parent category- which is a pain to build and maintain, and the maximum total number of collections is 40.

Another approach is to fix the paths externally by using a reverse proxy to rewrite the paths, sitemap, canonicals, etc. If you’re interested in that, I build that for clients who need it, here’s an overview.

4

Thanks for your reply @memetican I think we’ll be able to limit the number of primary categories so that we can just create them all via the API whenever we need them updating. We’ll then need to find the collection pages and assign them to a folder as we don’t actually want all the categories to sit on the root of the site.

It all seems like such a lot of hacking to get something really basic working. Is this normal for Webflow?!

I’ve also not found any way via the API to assign a default design to the collection pages, this must surely be possible (he says, fully expecting it to be a task on some vote-for-a-feature list somewhere).

5

There are always tradeoffs.

First, it doesnt’ make sense to split Categories independently into multiple collections, because then you also need to split Sub-Categories so that the single-ref maps.

Instead you’d only have Sub-Categories collections, but e.g. 10 of them, each representing the items in a Category. Then use a folder as your base e.g.;

/(folder)/(collection-slug)/(item-slug)
/restaurants/pizza/ortolana

Second, automating the creation of a new “category” through the API would not be fun. Instead of just creating a record, you’d need;

  • A new collection, rebuilding same schema as a reference collection
  • New data for that collection
  • A new collection page build, rebuilding the same content as a reference collection page but with entirely new CMS mappings

I’m not even 100% certain that third one is possible yet, as the Designer API is relatively new and still building out its collection-list-creation functionality.

Incidentally, the Designer API is also primarily engineered to support Designer Apps which run while you are working in the designer. What you’re looking to do, theoretically, is to create everything without human involvement, which may not be possible. You’d need to do some R&D on several pieces.

Nope. Generally, collection pages are each unique. You could potentially drop a component there and then unwrap it to create a full page layout, but you’d need to go in and bind the elements you want to the CMS.

Check the Webflow Wishlist, you can find and upvote feature ideas there.

Webflow has a LOT of strengths, but one key weakness is path flexibility, especially in this scenario where you’re wanting a nested semantic path structure.

That’s exactly why I built Hyperflow’s liquid paths solution- some of my larger clients had very exacting path requirements for SEO purposes.

6

I’ve got far more sub-categories that categories unfortunately, so creating a collection for each of those is absolutely out of the question - I’d need hundreds. My current strategy is to do the following:

  1. Create a collection for all the templates I’m wanting to sort into categories
  2. Create all the main categories as collections (these won’t change too often, meaning I won’t need to re-build the collection pages too frequently).
  3. Add the category collections to my “templates” folder (this doesn’t currently work - apparently a genuine Webflow bug which they’re working on)
  4. Add all the sub-categories as items in the collection categories with a multi-reference pointing to the templates

I’ve got it all working via the API - sadly, as you pointed out, I can’t build pages using the API unless (weirdly) they’re setup as a secondary locale. At least that’s what the documentation suggests but I don’t have secondary locale in my plan so I can’t test it. Thankfully as I mentioned above, I won’t need to update the primary categories often, so duplicating the collection pages shouldn’t be too slow a manual task.

7

Definitely not, I’d personally use 2 collections only- one for Categories, one for Sub-Categories, with a single-ref from the sub to its parent.

Then handle the semantic path rewriting externally with a reverse proxy.

It’s a tradeoff- you either extend the platform, or you do a lot of engineering to solve the data structuring and admin issues, like you’ve done. In my experience I’ve found that too fragile and too high friction to admin- and of course you have that hard limit of 40 total collections.

But I’m impressed you got that setup working the way you want- that’s quite an achievement.