Intro to Product listing page using Repeating Groups

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble tutorial we build a simple product listing page using the Repeating Groups element. We explore how to add data to a Repeating Group element, how to style a Repeating Group and how to link the whole cell in a Repeating Group to a page displaying a single entry in our Bubble database.

.

This is the beginnings of marketplace website and I have my
here to show a single product. But I want to be able to display a list of products too.

Create a new page


So I'm going to create a new page called Listings and let's just make it... I'm going to copy my index page just so I get my header and footer or just my header and then delete the content of the page so I'm left with my header.

Set up Repeating Group

, just three different items of clothing, each with a price and a thumbnail image. And we're going to be putting that data into this repeating group.

So first of all, let's get the
as possible.

Dynamic image field


So we're just bearing that in mind as we build it. Right, so let's start adding in fields. So we have an image field, in layout, I'm going to change my sales
to column. I then make my image full width.

I'm going to put a standard photographic
in there just so that my image doesn't appear squished in any way. Then we need to have a title. Just going to use the default ones that Bubble's provided in here just so I can get quickly.

So adding in dynamic data, we refer to the cell that since the current cell's product title and then let's make that full width. Let's get rid of that min-height.

I want to be able to control again, building a responsive app is always the primary thought process in my head. So I don't want to over exaggerate heights with these fields. I want to use my
. Just a bit of best practise for you there. So we got title and then the last information to pull forward onto this page is going to be price.

Format a number as currency


So current cell's product price. If we have a look in my database, price is a number field. So in order to display currency. I could add currency up front and that would be useful if like my store was handling multiple currencies. That would be the way to do it. So I put in a dynamic field for a symbol of a currency, probably using
decimal places, two, and then select the currency. Because I'm British, I'm going to go the pound.

Then let's make this full width and move down that to bottom. Get rid of that height value that's skewing the table and then let's just make this get a little bit oh, I have to put a min-height now.

I think I chose Light. It's not showing up. There we go.

Remember to set the data source


Cool. Okay. Shall we see what that looks like? Let me close that prove in case it's out of date. Okay. Nothing's loaded. Why's that? Well, I've not given it a data source. So in this instance you can do a lot of really refined filtering down with Bubble; it's fantastic for doing that. But right now we just want to search the whole database for products without any constraints and then to display them.

Okay. So there we go. We can see that it's pulling through my data correctly. I also forgot to make the image dynamic image thumbnail.

SEO Tip: Alt tags


Then for accessibility and for
, I probably want to add in an alt tag here. So current products title, we'll put in the title like Sun Hat. I'm just going to put thumbnail as regular static text at the end.

Let's just tie this up and make it look a little bit better. So first of all, I'm going to not have this full width. I'm going to say max-width of 1000 and then align essentially and its parent. To make that work, I've got to remove the 100% value there. Give that a refresh. Great. It's now sitting nicely in the middle of my screen.

And what else can we do with this?

Repeating Groups: Padding & Gap between cells


Well, let's look at the padding, or rather the
between each cell. So this is adjusted in the repeating group style. And something that I find myself doing over and over again is rather than padding out or adding a margin to elements in the cell (so it appears more uniform that only appears between the cells) I can use width here and then just set the line to completely transparent.

Okay. So then I have a more uniformed gap. It's not quite uniform because that images square, but you get the idea. You can see how it looked like on the editor, right?

Making the Repeating Group cell a link


I think the last thing I need to do here is to link these items when they're clicked through to the product page. There's a number of ways of doing that and I'm going to show you the quickest one that I know, which is just select every item in the cell, right click group elements into a column, and that then means that I can apply one
type you're working with.

Styling: Border & Padding


So by combining them into a group and here's another little trick: it's hard to select that group now, but it's much more easy to do so from the element tree. So there we go. There's my group containing everything and by applying a
to that group, it means that anything in that group when clicked, will activate that workflow and we'll go through to the page.

One final thing, because I like things to be neat and tidy, I'm going to just add a bit of uniform spacing using row gap.

There we go. Let's just do one more thing to make it look even better on the front end. So I'm on my group that contains my image and my text fields, and I'm going to add a border to it - a light grey.

Yeah, I go to square corners and then because I've had the border, it would now only really look right with a little bit padding.

There we go. So the borders show how the gap between each element, each cell in the repeating group is nice and uniform. Let's click through on the page. Takes us through to baseball cap. The image isn't showing because on a previous video I was demonstrating how to do a slide show. But you see that this is the Baseball Cap page because it has the title and the price.

Wrap up


So that's it for this video. If you have any questions, please leave a comment below. If you're interested in one to one
, head to our website. We have a number of really affordable offers going.

In fact, right now we're just trying some free coaching and you can read how we can offer that's and how to sign up on our website