In this tutorial you will create a marketplace app for:
And we’ll do this all without code, on Bubble.Checkout a YouTube video walkthrough of the app as a user and explore the demo app here
You can build this app for free on Bubble by signing up and clicking ‘new app’ on the home page.
The marketplace is fully contained in one page. We’re using a fairly traditional design. This page has a header to navigate the app through a search bar or through menu options but the focus of the app is listings which takes up most of the page. Clicking a listing shows detailed views for products and sellers so customers can learn more about a product of their choice and then purchase.
Let’s jump right into the components of this marketplace:
🗄️ Header with a:
🛍️ A page with all uploaded listings
👟 Product detail with Buy Now button
👩💻 Seller detail with their listings
The core of any marketplace app is its listings which requires creating, saving and modifying data in the database so that it can be displayed on the page to customers and sellers. To do this, we need to create the data structure of the marketplace app, which helps represent what users save and modify. In our case, we need three fundamental types: User, Seller and Product.
The database in Bubble can be accessed through the app editor.
Seller: the Seller is to create a branded store with fields to track seller branded assets, contact details and listings sold by them. Seller fields include:
Product: which is the listings themselves. Product fields include:
Here is how you can do this in the Bubble’s interface.
We will cover saving and pulling things from the database in detail but to begin with, let’s discuss the page layout for designing our app with a special focus on the header which is used to navigate the app.
The Design tab is the main workspace to design our app in Bubble. We’re going to make the page responsive: on the index page which is the landing page for new visitors to our app, uncheck ‘Make this page fixed width’. At the top of the index page is the header to navigate the app with a search bar and floating menu.
How do we do we design the header?
Once we have completed the design of the header, we want to display a dropdown menu that appears on clicking the hamburger icon. This gives a better user experience on phones where screen sizes are smaller.
This ends up looking like this.
We will go into what these dropdown options do in a bit, but let’s look into populating the stars of this app - listings.
Listing different items to buy takes us to the key part of our marketplace app: the gallery. We do this with an element called called the Repeating Group. This element is what you would use for a list of posts on Facebook, Apartments on Airbnb, etc. (if you think about it, a lot of the internet is about displaying lists…) With a repeating groups you can set the logic for what needs to be displayed for 1 listing and then it will automatically populate it for all listings.
To do this,
In this video, you can see how we draw the repeating group and define the data source as a search.
Next step is to define how each cell should look starting with the first cell. This step is important as it shows how you can display dynamic information from the database, for instance the price, the image and the description of each product.
In this video, you can see how we populate the first cell as described above.
Click Preview on the top right and we will be able to see all the listings. Now that a user can scan through all that’s being sold on the marketplace and an item catches their interest, they will want to click on it. How will we show them more about the product they want to buy?
Our goal is to guide customers from the gallery view to another area of the screen that shows more information about a listing that caught their attention. We separate these 2 areas of the screen as customers can continue shopping or quickly click on different items in the gallery for comparison. We accomplish this with a workflow that starts when a user clicks on a cell in the repeating group. This workflow will show product details in the detail area. In Bubble terms, this workflow sends data for that cell’s listing to another group and then scrolls the page to that group’s location to make sure the user can see it.
Now that the user is ready to buy the product they are viewing, let’s make it such that clicking the Buy Now button charges the user’s card!
In order to charge the user’s credit card for a listing, we use a payment processor like Stripe. Stripe handles the financial aspect of it, and Bubble lets you access its functionality via a Plugin. Let’s start by creating a Stripe account and get credentials from Stripe account developers dashboard which gives us the permission to integrate the payment service into our app. Back in Bubble app editor, let’s add a workflow on clicking the Buy Now button from the product detail group.
In the charging action, we will achieve 3 goals - charge the buyer, pay the seller and take a commision for the marketplace. Let’s walkthrough the setup for this ‘charge’ action.
We now have a functional marketplace (and we can make money with the commission!) Now how do we keep track of who is buying and who is selling? We do this by ensuring sellers create an account in the app to sell and buyers have the option of logging in but can also guest checkout like most eCommerce apps.
This section will cover how you can add account management to your app. Users will be able to sign up, login and log out.
Specifically, to be an official member of the app usually has 3 entry points for users.
We set these 3 entry points in the same popup displayed to the user using a Bubble concept called custom states. Custom states are a way to save information on the page to use somewhere else without going through the database. Custom states are typically used to set the view of the page to match the intent of the user and deliver instantaneous experiences. Think of this like a Snapchat filter where the same camera view of you can have different filters added on top to give a unique experience. Let’s build these states and user interactions on the popup.
We want to design different views for users based on whether they want to login, signup or reset their password. Each view will show some common and some unique visuals. Let’s plot all possible elements on the popup across views and lay the foundation for defining views.
Now that we know the different possible elements that can be shown to users, let’s set the logic for defining different views
We have defined 3 views that can be shown to users. Let’s make the rules, called Conditions in Bubble, for how elements look and workflows behave in each view. These conditions enable us to show/hide elements based on a dynamic expression, or skip steps in a workflow if a condition isn’t met.
Now that a seller can create an account, how do they add their listings to the marketplace?
Sellers upload their listings to the marketplace with another popup containing relevant fields that we already defined at the start of the tutorial.
Let’s do a deeper dive into this ‘Done’ button workflow
We are ready for primetime. Let’s deploy it to live by so you have a clean version that is exposed to users while you can continue adding fun finishes and features based on customer demand. To deploy, click on ‘development’ at the top right menu > deployment & version control > deploy development to live.
We now have a fully functional marketplace!
(Here’s our demo app)
As a challenge for you that brings together all the concepts we discussed above, can you figure out how to change the colors on the page using custom states and actions? Checkout the video for hints :)
In this tutorial you will create a marketplace app for:
And we’ll do this all without code, on Bubble.Checkout a YouTube video walkthrough of the app as a user and explore the demo app here
You can build this app for free on Bubble by signing up and clicking ‘new app’ on the home page.
The marketplace is fully contained in one page. We’re using a fairly traditional design. This page has a header to navigate the app through a search bar or through menu options but the focus of the app is listings which takes up most of the page. Clicking a listing shows detailed views for products and sellers so customers can learn more about a product of their choice and then purchase.
Let’s jump right into the components of this marketplace:
🗄️ Header with a:
🛍️ A page with all uploaded listings
👟 Product detail with Buy Now button
👩💻 Seller detail with their listings
The core of any marketplace app is its listings which requires creating, saving and modifying data in the database so that it can be displayed on the page to customers and sellers. To do this, we need to create the data structure of the marketplace app, which helps represent what users save and modify. In our case, we need three fundamental types: User, Seller and Product.
The database in Bubble can be accessed through the app editor.
Seller: the Seller is to create a branded store with fields to track seller branded assets, contact details and listings sold by them. Seller fields include:
Product: which is the listings themselves. Product fields include:
Here is how you can do this in the Bubble’s interface.
We will cover saving and pulling things from the database in detail but to begin with, let’s discuss the page layout for designing our app with a special focus on the header which is used to navigate the app.
The Design tab is the main workspace to design our app in Bubble. We’re going to make the page responsive: on the index page which is the landing page for new visitors to our app, uncheck ‘Make this page fixed width’. At the top of the index page is the header to navigate the app with a search bar and floating menu.
How do we do we design the header?
Once we have completed the design of the header, we want to display a dropdown menu that appears on clicking the hamburger icon. This gives a better user experience on phones where screen sizes are smaller.
This ends up looking like this.
We will go into what these dropdown options do in a bit, but let’s look into populating the stars of this app - listings.
Listing different items to buy takes us to the key part of our marketplace app: the gallery. We do this with an element called called the Repeating Group. This element is what you would use for a list of posts on Facebook, Apartments on Airbnb, etc. (if you think about it, a lot of the internet is about displaying lists…) With a repeating groups you can set the logic for what needs to be displayed for 1 listing and then it will automatically populate it for all listings.
To do this,
In this video, you can see how we draw the repeating group and define the data source as a search.
Next step is to define how each cell should look starting with the first cell. This step is important as it shows how you can display dynamic information from the database, for instance the price, the image and the description of each product.
In this video, you can see how we populate the first cell as described above.
Click Preview on the top right and we will be able to see all the listings. Now that a user can scan through all that’s being sold on the marketplace and an item catches their interest, they will want to click on it. How will we show them more about the product they want to buy?
Our goal is to guide customers from the gallery view to another area of the screen that shows more information about a listing that caught their attention. We separate these 2 areas of the screen as customers can continue shopping or quickly click on different items in the gallery for comparison. We accomplish this with a workflow that starts when a user clicks on a cell in the repeating group. This workflow will show product details in the detail area. In Bubble terms, this workflow sends data for that cell’s listing to another group and then scrolls the page to that group’s location to make sure the user can see it.
Now that the user is ready to buy the product they are viewing, let’s make it such that clicking the Buy Now button charges the user’s card!
In order to charge the user’s credit card for a listing, we use a payment processor like Stripe. Stripe handles the financial aspect of it, and Bubble lets you access its functionality via a Plugin. Let’s start by creating a Stripe account and get credentials from Stripe account developers dashboard which gives us the permission to integrate the payment service into our app. Back in Bubble app editor, let’s add a workflow on clicking the Buy Now button from the product detail group.
In the charging action, we will achieve 3 goals - charge the buyer, pay the seller and take a commision for the marketplace. Let’s walkthrough the setup for this ‘charge’ action.
We now have a functional marketplace (and we can make money with the commission!) Now how do we keep track of who is buying and who is selling? We do this by ensuring sellers create an account in the app to sell and buyers have the option of logging in but can also guest checkout like most eCommerce apps.
This section will cover how you can add account management to your app. Users will be able to sign up, login and log out.
Specifically, to be an official member of the app usually has 3 entry points for users.
We set these 3 entry points in the same popup displayed to the user using a Bubble concept called custom states. Custom states are a way to save information on the page to use somewhere else without going through the database. Custom states are typically used to set the view of the page to match the intent of the user and deliver instantaneous experiences. Think of this like a Snapchat filter where the same camera view of you can have different filters added on top to give a unique experience. Let’s build these states and user interactions on the popup.
We want to design different views for users based on whether they want to login, signup or reset their password. Each view will show some common and some unique visuals. Let’s plot all possible elements on the popup across views and lay the foundation for defining views.
Now that we know the different possible elements that can be shown to users, let’s set the logic for defining different views
We have defined 3 views that can be shown to users. Let’s make the rules, called Conditions in Bubble, for how elements look and workflows behave in each view. These conditions enable us to show/hide elements based on a dynamic expression, or skip steps in a workflow if a condition isn’t met.
Now that a seller can create an account, how do they add their listings to the marketplace?
Sellers upload their listings to the marketplace with another popup containing relevant fields that we already defined at the start of the tutorial.
Let’s do a deeper dive into this ‘Done’ button workflow
We are ready for primetime. Let’s deploy it to live by so you have a clean version that is exposed to users while you can continue adding fun finishes and features based on customer demand. To deploy, click on ‘development’ at the top right menu > deployment & version control > deploy development to live.
We now have a fully functional marketplace!
(Here’s our demo app)
As a challenge for you that brings together all the concepts we discussed above, can you figure out how to change the colors on the page using custom states and actions? Checkout the video for hints :)
In this tutorial you will create a marketplace app for:
And we’ll do this all without code, on Bubble.Checkout a YouTube video walkthrough of the app as a user and explore the demo app here
You can build this app for free on Bubble by signing up and clicking ‘new app’ on the home page.
The marketplace is fully contained in one page. We’re using a fairly traditional design. This page has a header to navigate the app through a search bar or through menu options but the focus of the app is listings which takes up most of the page. Clicking a listing shows detailed views for products and sellers so customers can learn more about a product of their choice and then purchase.
Let’s jump right into the components of this marketplace:
🗄️ Header with a:
🛍️ A page with all uploaded listings
👟 Product detail with Buy Now button
👩💻 Seller detail with their listings
The core of any marketplace app is its listings which requires creating, saving and modifying data in the database so that it can be displayed on the page to customers and sellers. To do this, we need to create the data structure of the marketplace app, which helps represent what users save and modify. In our case, we need three fundamental types: User, Seller and Product.
The database in Bubble can be accessed through the app editor.
Seller: the Seller is to create a branded store with fields to track seller branded assets, contact details and listings sold by them. Seller fields include:
Product: which is the listings themselves. Product fields include:
Here is how you can do this in the Bubble’s interface.
We will cover saving and pulling things from the database in detail but to begin with, let’s discuss the page layout for designing our app with a special focus on the header which is used to navigate the app.
The Design tab is the main workspace to design our app in Bubble. We’re going to make the page responsive: on the index page which is the landing page for new visitors to our app, uncheck ‘Make this page fixed width’. At the top of the index page is the header to navigate the app with a search bar and floating menu.
How do we do we design the header?
Once we have completed the design of the header, we want to display a dropdown menu that appears on clicking the hamburger icon. This gives a better user experience on phones where screen sizes are smaller.
This ends up looking like this.
We will go into what these dropdown options do in a bit, but let’s look into populating the stars of this app - listings.
Listing different items to buy takes us to the key part of our marketplace app: the gallery. We do this with an element called called the Repeating Group. This element is what you would use for a list of posts on Facebook, Apartments on Airbnb, etc. (if you think about it, a lot of the internet is about displaying lists…) With a repeating groups you can set the logic for what needs to be displayed for 1 listing and then it will automatically populate it for all listings.
To do this,
In this video, you can see how we draw the repeating group and define the data source as a search.
Next step is to define how each cell should look starting with the first cell. This step is important as it shows how you can display dynamic information from the database, for instance the price, the image and the description of each product.
In this video, you can see how we populate the first cell as described above.
Click Preview on the top right and we will be able to see all the listings. Now that a user can scan through all that’s being sold on the marketplace and an item catches their interest, they will want to click on it. How will we show them more about the product they want to buy?
Our goal is to guide customers from the gallery view to another area of the screen that shows more information about a listing that caught their attention. We separate these 2 areas of the screen as customers can continue shopping or quickly click on different items in the gallery for comparison. We accomplish this with a workflow that starts when a user clicks on a cell in the repeating group. This workflow will show product details in the detail area. In Bubble terms, this workflow sends data for that cell’s listing to another group and then scrolls the page to that group’s location to make sure the user can see it.
Now that the user is ready to buy the product they are viewing, let’s make it such that clicking the Buy Now button charges the user’s card!
In order to charge the user’s credit card for a listing, we use a payment processor like Stripe. Stripe handles the financial aspect of it, and Bubble lets you access its functionality via a Plugin. Let’s start by creating a Stripe account and get credentials from Stripe account developers dashboard which gives us the permission to integrate the payment service into our app. Back in Bubble app editor, let’s add a workflow on clicking the Buy Now button from the product detail group.
In the charging action, we will achieve 3 goals - charge the buyer, pay the seller and take a commision for the marketplace. Let’s walkthrough the setup for this ‘charge’ action.
We now have a functional marketplace (and we can make money with the commission!) Now how do we keep track of who is buying and who is selling? We do this by ensuring sellers create an account in the app to sell and buyers have the option of logging in but can also guest checkout like most eCommerce apps.
This section will cover how you can add account management to your app. Users will be able to sign up, login and log out.
Specifically, to be an official member of the app usually has 3 entry points for users.
We set these 3 entry points in the same popup displayed to the user using a Bubble concept called custom states. Custom states are a way to save information on the page to use somewhere else without going through the database. Custom states are typically used to set the view of the page to match the intent of the user and deliver instantaneous experiences. Think of this like a Snapchat filter where the same camera view of you can have different filters added on top to give a unique experience. Let’s build these states and user interactions on the popup.
We want to design different views for users based on whether they want to login, signup or reset their password. Each view will show some common and some unique visuals. Let’s plot all possible elements on the popup across views and lay the foundation for defining views.
Now that we know the different possible elements that can be shown to users, let’s set the logic for defining different views
We have defined 3 views that can be shown to users. Let’s make the rules, called Conditions in Bubble, for how elements look and workflows behave in each view. These conditions enable us to show/hide elements based on a dynamic expression, or skip steps in a workflow if a condition isn’t met.
Now that a seller can create an account, how do they add their listings to the marketplace?
Sellers upload their listings to the marketplace with another popup containing relevant fields that we already defined at the start of the tutorial.
Let’s do a deeper dive into this ‘Done’ button workflow
We are ready for primetime. Let’s deploy it to live by so you have a clean version that is exposed to users while you can continue adding fun finishes and features based on customer demand. To deploy, click on ‘development’ at the top right menu > deployment & version control > deploy development to live.
We now have a fully functional marketplace!
(Here’s our demo app)
As a challenge for you that brings together all the concepts we discussed above, can you figure out how to change the colors on the page using custom states and actions? Checkout the video for hints :)
In this tutorial you will create a marketplace app for:
And we’ll do this all without code, on Bubble.Checkout a YouTube video walkthrough of the app as a user and explore the demo app here
You can build this app for free on Bubble by signing up and clicking ‘new app’ on the home page.
The marketplace is fully contained in one page. We’re using a fairly traditional design. This page has a header to navigate the app through a search bar or through menu options but the focus of the app is listings which takes up most of the page. Clicking a listing shows detailed views for products and sellers so customers can learn more about a product of their choice and then purchase.
Let’s jump right into the components of this marketplace:
🗄️ Header with a:
🛍️ A page with all uploaded listings
👟 Product detail with Buy Now button
👩💻 Seller detail with their listings
The core of any marketplace app is its listings which requires creating, saving and modifying data in the database so that it can be displayed on the page to customers and sellers. To do this, we need to create the data structure of the marketplace app, which helps represent what users save and modify. In our case, we need three fundamental types: User, Seller and Product.
The database in Bubble can be accessed through the app editor.
Seller: the Seller is to create a branded store with fields to track seller branded assets, contact details and listings sold by them. Seller fields include:
Product: which is the listings themselves. Product fields include:
Here is how you can do this in the Bubble’s interface.
We will cover saving and pulling things from the database in detail but to begin with, let’s discuss the page layout for designing our app with a special focus on the header which is used to navigate the app.
The Design tab is the main workspace to design our app in Bubble. We’re going to make the page responsive: on the index page which is the landing page for new visitors to our app, uncheck ‘Make this page fixed width’. At the top of the index page is the header to navigate the app with a search bar and floating menu.
How do we do we design the header?
Once we have completed the design of the header, we want to display a dropdown menu that appears on clicking the hamburger icon. This gives a better user experience on phones where screen sizes are smaller.
This ends up looking like this.
We will go into what these dropdown options do in a bit, but let’s look into populating the stars of this app - listings.
Listing different items to buy takes us to the key part of our marketplace app: the gallery. We do this with an element called called the Repeating Group. This element is what you would use for a list of posts on Facebook, Apartments on Airbnb, etc. (if you think about it, a lot of the internet is about displaying lists…) With a repeating groups you can set the logic for what needs to be displayed for 1 listing and then it will automatically populate it for all listings.
To do this,
In this video, you can see how we draw the repeating group and define the data source as a search.
Next step is to define how each cell should look starting with the first cell. This step is important as it shows how you can display dynamic information from the database, for instance the price, the image and the description of each product.
In this video, you can see how we populate the first cell as described above.
Click Preview on the top right and we will be able to see all the listings. Now that a user can scan through all that’s being sold on the marketplace and an item catches their interest, they will want to click on it. How will we show them more about the product they want to buy?
Our goal is to guide customers from the gallery view to another area of the screen that shows more information about a listing that caught their attention. We separate these 2 areas of the screen as customers can continue shopping or quickly click on different items in the gallery for comparison. We accomplish this with a workflow that starts when a user clicks on a cell in the repeating group. This workflow will show product details in the detail area. In Bubble terms, this workflow sends data for that cell’s listing to another group and then scrolls the page to that group’s location to make sure the user can see it.
Now that the user is ready to buy the product they are viewing, let’s make it such that clicking the Buy Now button charges the user’s card!
In order to charge the user’s credit card for a listing, we use a payment processor like Stripe. Stripe handles the financial aspect of it, and Bubble lets you access its functionality via a Plugin. Let’s start by creating a Stripe account and get credentials from Stripe account developers dashboard which gives us the permission to integrate the payment service into our app. Back in Bubble app editor, let’s add a workflow on clicking the Buy Now button from the product detail group.
In the charging action, we will achieve 3 goals - charge the buyer, pay the seller and take a commision for the marketplace. Let’s walkthrough the setup for this ‘charge’ action.
We now have a functional marketplace (and we can make money with the commission!) Now how do we keep track of who is buying and who is selling? We do this by ensuring sellers create an account in the app to sell and buyers have the option of logging in but can also guest checkout like most eCommerce apps.
This section will cover how you can add account management to your app. Users will be able to sign up, login and log out.
Specifically, to be an official member of the app usually has 3 entry points for users.
We set these 3 entry points in the same popup displayed to the user using a Bubble concept called custom states. Custom states are a way to save information on the page to use somewhere else without going through the database. Custom states are typically used to set the view of the page to match the intent of the user and deliver instantaneous experiences. Think of this like a Snapchat filter where the same camera view of you can have different filters added on top to give a unique experience. Let’s build these states and user interactions on the popup.
We want to design different views for users based on whether they want to login, signup or reset their password. Each view will show some common and some unique visuals. Let’s plot all possible elements on the popup across views and lay the foundation for defining views.
Now that we know the different possible elements that can be shown to users, let’s set the logic for defining different views
We have defined 3 views that can be shown to users. Let’s make the rules, called Conditions in Bubble, for how elements look and workflows behave in each view. These conditions enable us to show/hide elements based on a dynamic expression, or skip steps in a workflow if a condition isn’t met.
Now that a seller can create an account, how do they add their listings to the marketplace?
Sellers upload their listings to the marketplace with another popup containing relevant fields that we already defined at the start of the tutorial.
Let’s do a deeper dive into this ‘Done’ button workflow
We are ready for primetime. Let’s deploy it to live by so you have a clean version that is exposed to users while you can continue adding fun finishes and features based on customer demand. To deploy, click on ‘development’ at the top right menu > deployment & version control > deploy development to live.
We now have a fully functional marketplace!
(Here’s our demo app)
As a challenge for you that brings together all the concepts we discussed above, can you figure out how to change the colors on the page using custom states and actions? Checkout the video for hints :)
In this tutorial you will create a marketplace app for:
And we’ll do this all without code, on Bubble.Checkout a YouTube video walkthrough of the app as a user and explore the demo app here
You can build this app for free on Bubble by signing up and clicking ‘new app’ on the home page.
The marketplace is fully contained in one page. We’re using a fairly traditional design. This page has a header to navigate the app through a search bar or through menu options but the focus of the app is listings which takes up most of the page. Clicking a listing shows detailed views for products and sellers so customers can learn more about a product of their choice and then purchase.
Let’s jump right into the components of this marketplace:
🗄️ Header with a:
🛍️ A page with all uploaded listings
👟 Product detail with Buy Now button
👩💻 Seller detail with their listings
The core of any marketplace app is its listings which requires creating, saving and modifying data in the database so that it can be displayed on the page to customers and sellers. To do this, we need to create the data structure of the marketplace app, which helps represent what users save and modify. In our case, we need three fundamental types: User, Seller and Product.
The database in Bubble can be accessed through the app editor.
Seller: the Seller is to create a branded store with fields to track seller branded assets, contact details and listings sold by them. Seller fields include:
Product: which is the listings themselves. Product fields include:
Here is how you can do this in the Bubble’s interface.
We will cover saving and pulling things from the database in detail but to begin with, let’s discuss the page layout for designing our app with a special focus on the header which is used to navigate the app.
The Design tab is the main workspace to design our app in Bubble. We’re going to make the page responsive: on the index page which is the landing page for new visitors to our app, uncheck ‘Make this page fixed width’. At the top of the index page is the header to navigate the app with a search bar and floating menu.
How do we do we design the header?
Once we have completed the design of the header, we want to display a dropdown menu that appears on clicking the hamburger icon. This gives a better user experience on phones where screen sizes are smaller.
This ends up looking like this.
We will go into what these dropdown options do in a bit, but let’s look into populating the stars of this app - listings.
Listing different items to buy takes us to the key part of our marketplace app: the gallery. We do this with an element called called the Repeating Group. This element is what you would use for a list of posts on Facebook, Apartments on Airbnb, etc. (if you think about it, a lot of the internet is about displaying lists…) With a repeating groups you can set the logic for what needs to be displayed for 1 listing and then it will automatically populate it for all listings.
To do this,
In this video, you can see how we draw the repeating group and define the data source as a search.
Next step is to define how each cell should look starting with the first cell. This step is important as it shows how you can display dynamic information from the database, for instance the price, the image and the description of each product.
In this video, you can see how we populate the first cell as described above.
Click Preview on the top right and we will be able to see all the listings. Now that a user can scan through all that’s being sold on the marketplace and an item catches their interest, they will want to click on it. How will we show them more about the product they want to buy?
Our goal is to guide customers from the gallery view to another area of the screen that shows more information about a listing that caught their attention. We separate these 2 areas of the screen as customers can continue shopping or quickly click on different items in the gallery for comparison. We accomplish this with a workflow that starts when a user clicks on a cell in the repeating group. This workflow will show product details in the detail area. In Bubble terms, this workflow sends data for that cell’s listing to another group and then scrolls the page to that group’s location to make sure the user can see it.
Now that the user is ready to buy the product they are viewing, let’s make it such that clicking the Buy Now button charges the user’s card!
In order to charge the user’s credit card for a listing, we use a payment processor like Stripe. Stripe handles the financial aspect of it, and Bubble lets you access its functionality via a Plugin. Let’s start by creating a Stripe account and get credentials from Stripe account developers dashboard which gives us the permission to integrate the payment service into our app. Back in Bubble app editor, let’s add a workflow on clicking the Buy Now button from the product detail group.
In the charging action, we will achieve 3 goals - charge the buyer, pay the seller and take a commision for the marketplace. Let’s walkthrough the setup for this ‘charge’ action.
We now have a functional marketplace (and we can make money with the commission!) Now how do we keep track of who is buying and who is selling? We do this by ensuring sellers create an account in the app to sell and buyers have the option of logging in but can also guest checkout like most eCommerce apps.
This section will cover how you can add account management to your app. Users will be able to sign up, login and log out.
Specifically, to be an official member of the app usually has 3 entry points for users.
We set these 3 entry points in the same popup displayed to the user using a Bubble concept called custom states. Custom states are a way to save information on the page to use somewhere else without going through the database. Custom states are typically used to set the view of the page to match the intent of the user and deliver instantaneous experiences. Think of this like a Snapchat filter where the same camera view of you can have different filters added on top to give a unique experience. Let’s build these states and user interactions on the popup.
We want to design different views for users based on whether they want to login, signup or reset their password. Each view will show some common and some unique visuals. Let’s plot all possible elements on the popup across views and lay the foundation for defining views.
Now that we know the different possible elements that can be shown to users, let’s set the logic for defining different views
We have defined 3 views that can be shown to users. Let’s make the rules, called Conditions in Bubble, for how elements look and workflows behave in each view. These conditions enable us to show/hide elements based on a dynamic expression, or skip steps in a workflow if a condition isn’t met.
Now that a seller can create an account, how do they add their listings to the marketplace?
Sellers upload their listings to the marketplace with another popup containing relevant fields that we already defined at the start of the tutorial.
Let’s do a deeper dive into this ‘Done’ button workflow
We are ready for primetime. Let’s deploy it to live by so you have a clean version that is exposed to users while you can continue adding fun finishes and features based on customer demand. To deploy, click on ‘development’ at the top right menu > deployment & version control > deploy development to live.
We now have a fully functional marketplace!
(Here’s our demo app)
As a challenge for you that brings together all the concepts we discussed above, can you figure out how to change the colors on the page using custom states and actions? Checkout the video for hints :)