How to create a product, contact or booking page

Creating a Product Page in Bubble

This Bubble app I'm building is ultimately going to be turned into a marketplace and one key part of a marketplace is the ability to show a single product. Now the steps that I'm going to demonstrate in this video and other ones in this category are demonstrating how you create a page that displays a single instance like a single line in your database. So if you're building like a calendar or booking app this would be to show one event or one booking. If you are building like a CRM SaaS app then this could be a lead or a contact.

Setting Up the Page Layout

Let's go ahead and create that page. So new page and call this product and let's just create it from scratch. Okay and I'm just going to copy the layout details from my index page. So the UI with just copy that. Change this to column and just get me started. I'm going to copy that navigation bar the header into my page there. Okay, brilliant.

Creating a Two-Column Layout

So I'm going to have a two-column layout so I need to add in a group and this group is going to be of type row and I'm going to have a max width of my page width because I want it contained within there and then I'm also going to check what I've done here. Yeah 20 pixels is a great go-to. I'm going to add my margins in so that means that when the page shrinks down like a tablet or mobile my text isn't touching the very edge of the screen. 20 pixels is a good amount to go for and then I add in two groups and this one is going to be called left and this one's going to be called right and it's going to be a column and let's get rid of that fixed width let's get rid of that min width just I don't want it causing issues when I go responsive later on in this build.

Adding Content to the Product Page

So column okay and then you'll see that because I haven't got a max width or set fit to width the content I end up with perfectly equal columns and finally I want to ensure that there is a gap between them so I'll just put a gap of say 60 pixels okay and so now I have my two columns so what normally goes on a product page again this is going to vary if it's contact page but the layout concepts are all at the same so I'm going to put in an image and we're going to set the image to fixed ratio square yeah and then we'll say take up the full width 100% of the okay so I was expecting that to be 100% of the container that it's in now I'm going to something's not quite work there so I'm going to check my element tree this is all part of learning okay there we go that's why it's not what it is not actually sat in the left column now it is it was having to share group B we'll call this hero section anyway now I have got my image in there and what else does a product page need well it needs to have a header.

Adding Product Details

So I bring in a text box for this product name there'll be a follow-up video showing you how to make all of this dynamic but for now I'm just going to use placeholders and then let's go with header one and we'll just tidy up the width and the height I fit height content that's fine yep okay then we could do with a sub header and just going to add in some value we leave as is I was gonna add in some dummy text but that's not really needed yeah fit height content min height get rid of that yes this will be kind of a brief description of the product right now I think let's add in some additional fields so we have a product name and we have a sub heading or like short we'll call it short description and now I think that okay let's put in some obvious ones we only need the price that's me that should begin to really flesh out that's also going to be 100% of the width min height that brilliant and I just put some default padding in between each of these these are all things that I might tidy up later on.

Adding Call-to-Action Buttons

And then let's put a button in there we need a good strong call to action like an add to cart whoops finger slipped and we will just get rid of the width restraint now because I want to add in a button next to it so I'm going to group this in a row and then I'm going to drag in another group let's see what I'm building in a moment and so this group is going to be of type we'll go over lines parent and you'll see why and then the width 60 min mate element fixed height we want me wanted the full height of the shape that's in cool then if I just go into my element tree I'm going to call this call to actions and I'm going to put some spacing in there and then let's swap these around.

Adding a Wishlist Feature

Okay so I'm creating a box here using a group and the group is going to contain a heart icon because I want to be able to add in a wishlist feature and I'm demonstrating this because it just shows another part of designing a layout in Bubble and then let's bring in an icon okay so place the icon in the middle okay let's have a preview okay so I think it one of the issues is that everything is kind of attaching itself to the left let's try to fix that feeling I have to select my hero section here and then it's just there we go it's now centered can I put a background color into the image here let's give it a boy that just show that it shows up okay and then just because it's driving me mad I think there needs to be some spacing okay there we go.

Conclusion

So that shows a kind of a solid approach for laying out two columns for adding in elements that share a row and yeah there you go you've got the beginnings of a product page but this could just as easily be an image of a person and their person's name like call this if that you'll call them if it's like a CRM or you know you could be showing calendar events whatever your Bubble app requires here is a yeah hopefully this has been a good start of you in creating a page that shows a single item from your database.