Intro to Nested Collection Lists in Webflow

all right back in the forums and random nurses wants to know the best way to nest sub table of contents list under parent table of contents list in cms collections and what random nurses is getting out here is nested collections which you can definitely do in webflow i will uh just give a brief example based on what was written here trying to interpret uh what this user wants and then i'll discuss some of the limitations but i'll just do a really basic example of how to set up a nested collection list in webflow so with that said let's go this is my webflow dashboard make a new site start a blank project nested collection list example okay so blank page first thing i'm going to do is just start setting up the cms and i'll have a section or a collection name categories and this is just going to have a name and a slug is is all that needs so let's create that collection and then i'll make another one called sub categories and this will have a name and a slug i'm going to add some stuff just to make it a little bit unique image and we'll add an email none of this actually matters this would be like whatever data you had with the sub category probably you'd have an i don't know image multi-image this would be like a blog article of some sort or a product so you would have also maybe like some rich text something like that but for this example we'll just keep it really simple i'm going to create the collection come on let me cancel just make that again sub categories add field image image save field add field email email save field great collection great so i have empty categories and subcategories and let's say for categories i want to add i don't know we want 10 categories so this is just the original one with the name and the slug and then subcategories i'm going to create 10 as well okay and now the main thing we need to do is in categories we're going to set up a multi-reference field so i'll go back into categories i'm going to click the gear icon here and i'm going to add a field multi-reference and we'll say subcategories and it's going to grab from the subcategories save that field save collection okay and now i'll go into one let's go into just i don't know it's hard to read these latin names but we'll go into the shortest one because it'll be easy to find so now this is populating with the subcategories from the subcategories cms so id or id and in uh let's just check if we go to subcategories yep we got id in uh so i'll go back to categories back to et and i'm gonna add those two and let's add modi as well save okay so now we have one category that does have subcategories associated with it and i'll go back into designer view here and i'm going to start adding some collection lists first i'm just going to throw a container in here just so we can make things centered and take up some good amount of space all right now i'm going to drag a collection list inside of that container we need to connect it to a collection i'm going to connect it to categories and now you'll see it's starting to populate with those 10 categories that we had and now i want each item each collection item is going to have a link and that's going to add a link in all them and we're going to use this purple document icon here and we want it to go to the current category template page and let's add some text in there just so we can see what we're doing and we're going to get text from categories we're going to get the name and now that has our 10 categories here and remember we added some subcategories to ed so i'll show you how that works later too and this i'm going to call big link you'll see why later i'll make this to ram and the line height of i don't know 1.2 unitless let me get 1.5 okay so now if i go into preview mode and i click it'll go to the categories template page i'm going to come out of preview mode and if i go back to pages so i'm in this categories template page here and what i can do is since i have subcategories with each one i can drag in another collection list and i'm going to put this inside of a container as well so we'll call this container and double-click to add collection now we've got to set the source to category fields we want sub-categories and remember we're in item at so it has those three subcategories and modi and i can do basically the same thing that i did on the home page add a link we're going to set this document we want it to go to the current subcategory and we're going to then add some text inside that link block we'll get the text from the subcategory name remember okay and i think that's all i want to do for this page now we only added subcategories to one category so if i go to any of these other ones then we're not going to get anything we're going to get the no items found state so let's go back just for this example and now if we click one of these now we want to show stuff that's associated with that subcategory so let's say i click uh modi and then i'm out it's an empty page but now i'm in the subcategories template page so if i go to the pages if you were over here we see i'm in subcategories template and this is where i'll add whatever it is i want to add so let's chuck a container in here and we'll throw an image inside of that and now we can get those images that were populated into our subcategories i'm going to just make this 100 width and give it a max height of 10 ram and we'll make that cover and then i'll get the email address just to prove that we're getting some unique data in here associated with that sub collection email great and now if i go through each of these different ones it's just the data associated with that sub collection so i believe this actually solves the use case you're looking for for random nurses so if i go back home i have these these are the main categories the 10 categories if i click one of these uh well these didn't we didn't set up any subcategories for these but say i wanted to so said quo quasi la borisam let's go back to out of preview mode back to cms and what was it said quo something or other and we'll add some sub-categories here and i'm going to add a bunch because i want to show you something i'll add 9 there save that so now we're in the categories template and we're in that said quasi one and you can see we have our links here and if i click one of these it's going to take us to that same sub collection page and now i'm in the subcategories template page so i can go back to categories template and depending on again none for this one but et we added those three and then what was the other one said quo whatever we added nine so they're all there now something to know home if you want to nest collection list you're limited to five items uh i'll show you here so let's say like okay we have this is our table of contents we have big link here maybe you make this in h1 and then you have some h2s below it or something you want to do but so let's go back into the collection list that won't let me list a link that's because i need to actually add a collection list so within each big link i want to or within each collection item i want to access the subcategories so source will be i'm just adding a nested collection list here and i'm adding subcategories and i'm going to move that below big link because i want them to be smaller and like a subheading and now i'll throw a link block into collection item it's going to go to choose collection it's going to go to that current subcategory and let's throw some text in there so that we know what subcategory we're going to okay and you see said quo quasi la bori o sam has the sub collections here or the subcategories and et has its three subcategories as well and if i hit preview mode and i click one of these we're going to go straight to the sub collection now a limitation with webflow is that it will only show five in a nested collection it'll only show five subcategories this is a known let's see this is the webflow nested collection lists kind of instruction shows you basically how to do what i just did uh so i recommend going through this that'll probably deepen your understanding of what we're doing here and then you have some dynamic content limitations with webflow and the big one so you can have 20. we're not really limited here with that we're not limited with that one nested collection list per page so we we did our one nested collection if we wanted to throw another nested collection list we couldn't do that and then five items per nested collection list so that's why we're seeing this one here that has nine subcategories associated with it we're only getting five if you want to get around that then i'd recommend checking out fin suite nested collection list it's a little bit more set up but it's definitely possible and i'm happy to help with that if you need this use case you'll copy this custom code into your into your project and then you'll just follow the steps here and that's really it hope that helps if you have any questions uh feel free to reach out and yeah that's it

Channel: Web Bae

Views: 1,239

Keywords: webflow, nested collection lists, multi-reference field, cms

Id: kFZvv8VhUyA

Length: 11min 39sec (699 seconds)

Published: Tue Jul 26 2022