Taco Bell is delicious. And anyone who says otherwise is objectively wrong. But here's a list of locations for Taco Bell in our area. It's just a collection (a simple database in Webflow) that has a list of locations. And for our second collection here...we have some special properties for each location. Open Late, Drive-Thru, whether they serve breakfast, and of course, if you can get KFC at the same location. Two collections, two databases that are entirely unlinked...for now. Over the next few minutes, we're going to take these and make a list of all our locations — but it's going to include the info — the special features each location has...and we'll do all of it without writing a single line of code.
Let's do this in four parts: we'll go through the collections (we'll look at each database to get a top-level view of what we're working with), we'll create a multi-reference field so each Taco Bell location lists whether it's open late, it has a KFC... we'll make the actual collection list which will do all the heavy lifting so we don't have to redesign it for every location, and we'll use a nested collection list to add the list of features to each Taco Bell.
Let's start with our collections. As we know, we have two databases here. Let's go into locations...and open one of them up. We have a few things here. The address (this is what we'll want to display on the card). We have a link to directions in Google Maps, we have a link for the store page on tacobell.com. We have the hours they're open. And this is just data in a table. In fact, you can import from a spreadsheet using a CSV, or even create a new Taco Bell location by pressing New Taco Bell Location.
And let's look at the second collection. This is just a mini database that only really has two fields that are important: the name of the actual feature (like open late), and the badge design — just a little icon for each feature.
So what's our goal? We want to take our basic design...and we want to make sure that design is applied to all these locations. And then we want to make sure each of those locations lists its features.
And to do that, we need to link the two collections. This is part 2. Let's go back into our Taco Bell locations...because we want to be able to reference multiple features for each location. So in our settings? We can go and add a field...to reference those multiple features. A multiple reference (or multi-reference) field. And all that means? Is that we can link up right here...to the features. In fact, that's what we can name this field...let's just call it features.
And this is the best part. One of a few, actually. Let's make sure that field is added...and of course...let's make sure to save the changes to that collection. But here it is:
We can go in to any of the locations, and just like that...we can add the features for that Taco Bell. This one has a KFC, a drive thru, and it's open late. Let's save. [Westmoor]
What about the Emeryville location on the other side of the Bay? That one's also open late...but it also has breakfast.
Now. We can add the features to all our locations, and we've done that to the rest off-screen so you don't have to sit through adding it to each Taco Bell.
But when we're done (and we can always come back later), let's move on to #3. This is how we're going to take one, simple design here (we built this from scratch using CSS grid in Webflow), and we're going to turn it into a design that automatically populates for every single location we made.
So. Let's look in our Navigator here so we can see the hierarchy — and where everything's placed. This is just a card, with some stuff inside — just placeholders for now.
And the way we can actually list out all the locations from our collection? ...is to use a collection list. Watch this. We'll go into our Add panel. We'll grab a collection list. And we'll very deliberately place it into the top-level container (this is just a rectangle that holds everything). And right now it's sitting right above the basic design (that basic card we've made).
And all we have to do? Is link that collection list to our Taco Bell locations. Which is as easy is linking that collection list to our Taco Bell locations.
Notice how each location now shows up (they're blank...but they're indicated in little placeholders here). Let's open things up a little more (let's go deeper in our Navigator). And each of these placeholders? It's a collection item. Each item represents a Taco Bell location.
But watch what happens if we just drag in...if we move that basic card (our design) into any of the items in our collection.
Suddenly our card multiplied. A lot. But that's okay. That's what we wanted it to do. Because what really happened...is that design is now applied to every single Taco Bell location. Let's prove that.
We can just grab the address placeholder here...and we can link it — we can get the text from the Location address. And that's it. Each card isn't identical. It's linked (it's pulling the location from each Taco Bell in our collection). Let's keep doing that. We can do the same not just for text, but we can do the same for links. We can link our directions here to Google Maps. We can link to the store page (this is the unique URL that links to each Taco Bell...).
And lastly, let's update the hours. We can do the same thing here...we can link to the hours of operation.
And in just 30 seconds, we could link up–
[Grímur, on Zoom] Uhh...41 seconds.
[McGuire] Grímur we're recording.
[Grímur] I can see everything.
[McGuire] You're on Zoom.
[Grímur] Safe distancing.
[McGuire] Distance yourself more.
[Grímur] See you later.
We took that collection (that database of Taco Bell locations) and just linked it up to our design. And that design now applies to every single Taco Bell. A full list.
So. How do we display the badges like Open Late? In our final step, we're going to do this using a nested collection list. And it's actually very straightforward. We have a collection list (a list of all our Taco Bells with our design inside)...and we want another list inside (a collection list that lists out the location features...the badges for each Taco Bell).
So all we do? Is grab another collection list...and we drag that collection list...into our first collection list. And we'll place it in the collection item (since we want it to appear inside each Taco Bell location). When we do? And it feels like this should be more complicated...but we just link that (we link the new child collection list)...to location features.
And there it is — a list of the features for each location. And all we have to do now? Let's open it up in the Navigator so we can be really specific about where we're placing things... and we'll go to the Add panel and grab a text block. We're going to use this text to actually show the words like "Drive Thru" or "Kentucky Fried Chicken." And we do the same thing here. Just link it to the field (the name of the location features).
We can style it in just a second, but we have one last thing to add real quick. We want the badge for each feature to show up. So let's go and add an image element — we're just grabbing an image element to put right next to — right above the text. And we can resize it right away — we'll just grab the corner on the canvas here and drag to resize...maybe something like 30 pixels (we can change this later).
And we can select the parent element (the collection item itself) and use the magic of flexbox (and maybe some wishful thinking) to align everything to the same center point. (That looks pretty good for alignment...let's adjust our text size). We'll use something closer to 13 or 12...and we can go in and change the color — right now it's a bit dark...let's change it to something less harsh...maybe a gray.
And whenever we want? We can link the image up — we can link it to that badge design. And it's a bit tight, so let's add some margin (some space on the right outside of that image)...maybe 10 pixels...
And we can do the same on the collection item itself. (Again, we can select a different one — with collection lists, you can make changes on any one item and it'll affect the others.) This time let's add padding...this is space inside...each collection item (we're holding down option on macOS or alt on Windows and dragging to adjust both sides at once.)
If we scroll through our page? We see each location is automatically populated with the info from our Taco Bell locations collection. (There's a separate card for each.) And, because we nested another collection list which references the location features, each Taco Bell shows when it's Open Late, has Drive-Thru, serves breakfast, and has a KFC built in.
So. We reviewed the structure of our collections (our databases) — by the way, you can create collections for anything like blog posts, or team members, or John Williams albums.
We added a multi-reference field to our Taco Bell locations, which let us reference multiple items (multiple features for each Taco Bell). We made a collection list which takes our simple design and lets us link everything up so the information is tied to each Taco Bell. And finally, we added a collection list inside another parent collection list (just placed it inside any of the collection items in the parent)...so we can showcase which features each location has.
And that's creating magical information cards for Taco Bell locations...using collections and collection lists...in Webflow.
