How to create a product, contact or booking page
In this Bubble.io tutorial we demonstrate how to start laying out a page to display dynamic content from a single entry in your Bubble database. This video explains this process using a marketplace as an example but it would be a very similar process if you were building a CRM in Bubble or a booking application in Bubble.
Unlock the power of single-item pages: Create dynamic product, contact, or booking displays with Bubble's data source magic!
Master two-column layouts: Learn how to craft responsive designs using columns and groups for stunning product showcases.
Transform your marketplace app: Discover essential elements like images, headers, and call-to-action buttons for irresistible product pages.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.