This section states the purpose of each page.

Introduction

In this summary, we will describe each page and its content. The Page Element is the fundamental one that contains all the other elements.
💡
Tip: See Bubble Reference for more information about Pages element https://bubble.io/reference#Elements.Page 🙂

Pages

index

This is the main page typically encountered first on the web app that usually contains links to the other pages of the site. A homepage includes a variety of menus that make it easy for users to find the information they need.
This engaging page begins with a beautiful slideshow🖼 of categories links. You can also locate here the Popular Products, Latest Products, with sections to cover suggested products (Related Products) and most browsed categories.
Image without caption
This template comes with a cool feature to switch between Light🌝 and Dark🌚 modes.
Image without caption
💡
Light/Dark mode: Check the Header reusable element, to see how this toggle works.

admin

This page is designed to manage platform data, e.g. Users, Items, Payments… and others. Only users with admin rights are able to access this page (in read-only mode), and those users who have access rights can edit or delete anything here. This page is for the owner😎of the app.
Here, the admin user is able to manage the platform Sellers, Buyers, Products, as well as preview stats about Orders, set the Platform Fee and approve/decline the Products and manage Refunds.
Image without caption
⚠️
Admin: See the instructions on how to grant Admin Rights in your template.
In order to edit/add/delete data, it is required to grant Admin Rights to some user.
💡
Tip: Initially, your Design tab may be lacking elements but no worries! They are simply hidden in the Bubble editor.
Here is how to unhide👀the elements:
Image without caption
The Button "Approve" can be found here:
Image without caption
Which is making the changes to the Declined by setting it as "no" and Approved as "yes" of this item:
Image without caption
The Platform Fee can be found here:
Image without caption
And when the input value is changed, the platform fee is updated in your database:
Image without caption
The Refund part of this template can be found here:
Image without caption

cart

All products selected by the buyer are summed up here🛒 including the shipping cost. Products can be removed from the cart before proceeding to checkout.
Mainly, this page comes in two groups: the cart itself and checkout:
Image without caption
The "PROCEED TO CHECKOUT" button is simply redirecting to the checkout page, also sending the User object:
Image without caption

category

Products are grouped into🔠categories. This makes products easy to find. You are able to switch between categories and the relevant products will be displayed on the page.
If there are no products, placeholder text will be displayed ( "No items in this category" ).
💡
Tip: The categories are displayed in the rg category A reusable element. There are eight categories in this template that are manually added in Data -> App data -> All Categories tab.
Image without caption
The items are pulled from the database into a repeating group, here:
Image without caption
You are also able to sort↕the items by Newest, Oldest, Price highest, Price lowest & Best sellers.
Image without caption
The dropdown element is pulling sorting options from an Option set:
Image without caption
Which is called Sorting and can be found here:
Image without caption

checkout

This is where the user places the order and pays 💳for it. Here shipping address is added.
💡
Tip: Coupon codes are applied here before orders are placed.
Image without caption
Discount codes are added/edited/deleted on the related database field:
Image without caption
After making an order, you'll get redirected to the profile page to see order details (and orders history when there is more than one order):
Image without caption
The payments implementation is using two different custom events: "discountEmpty" and "discountNotEmpty".
Image without caption
The "discountEmpty" event is triggered if the discount field is "no", and discountNotEmpty is triggered when it is set to "yes".
And the Stripe workflow is implemented in the custom events:
Image without caption
⚠️
Payments: See the documentation on how to set Stripe Payments in Bubble App.

dispute

When a user receives an item that differs significantly from its description he can open a dispute here. By opening a dispute, the user can communicate directly with the seller.
Image without caption
💡
Tip: Sent disputes are followed by an automated mail notification to the seller.
Image without caption
💡
Tip: When opening a dispute, buyers write a message to the seller, but they may also contact the admin user, which will be added to the chat.
💡
Tip: The contacted admin will be the admin user with the least number of disputes.
💡
Tip: The dispute may be closed by either the admin user or the user that opened the dispute (a buyer).
Initially, the design elements might be hidden in your editor.
Here is how to unhide 👀 them:
Image without caption

item

The item's data ℹ is detailed on this page. You are able to preview the overall information about the product, and customer reviews, and add it to your wish list or/and to the shopping cart🛒.
Image without caption
💡
Tip: We are using the Bootstrap Start Rating Input⭐plugin to collect customer reviews.
The "ADD TO CART" button can be found here:
Image without caption
And its workflow can be located here:
Image without caption

login

This page is used to create an account or log in to an existing one. To access it, users click on the FeatherIconF button in the header and press the "Login/Signup" button in the popup.
On this page, users are offered to use demo logins to test all the template features from all the available user types.
For detailed information on how to remove demo users' buttons, see the Remove Demo Login section.
Login is done with an email address and a password. It also uses a verification system.
When signing up, you need to select a user type: Buyer or Seller.
Image without caption
💡
Tip: This page comes with demo logins that have been placed for testing purposes. They may be removed from your app.
Initially, the design elements might be hidden in your Bubble editor. Here is how to unhide👀the elements:
Image without caption
Here you can locate the signup actions:
Image without caption
As you can see, it is also saving the userType, based on the Buyer/Seller account type. The type value is passed into this field, which is a state set on "Buyer" or "Seller" button clicks:
Image without caption
Image without caption

profilebuyer

This is the user's profile👤where as a Buyer the user is able to change the account information like profile picture, delivery address, as well as preview orders made, wishlist, etc.
💡
Tip: A Buyer is able to become a Seller here.

​👤 Account overview

Image without caption
The "Become a seller" button shows the Popup "Company":
Image without caption
Where Buyer is completing his Company details:
Image without caption
And when clicking on the "Save details" button, it registers the user as a seller, changing its userType to Seller:
Image without caption

profileseller

This page is the seller's🏦profile. Here the seller can change profile information, preview products added, sales, and orders made, as well as add some new products.
Image without caption
Initially, the design elements might be hidden in your Bubble editor.
Here is how to unhide👀the elements:
Image without caption

searchresults

The search🔍results are displayed on this page. You just type in a product name in the search bar in the header then hit the search icon or Enter↩to update the page.
💡
Tip: The search bar is located in the Header reusable element.
Image without caption
Note: Only products approved by the admin will be visible and available for search.

terms

This is the page where users see the agreement act between both sides: the company that has the web application and users who access the web application.
💡
Tip: The text on this page is a placeholder and should be modified according to your own terms of service.
This page is designed for your Terms of Service. You can generate the terms here: https://www.shopify.com/tools/policy-generator/terms-and-conditions
💡
Tip: Also, add a Privacy page. It will help you go through App Store and Google Play approval procedures, in case you convert your Bubble app into native iOS and Android apps. These links are also important for Facebook login.

reset_pw

This page is used for resetting the password. It comes with a simple form with two inputs for the new password and password confirmation:
Image without caption
It comes with just 1 workflow event, to submit the new password and go to the main page.
Image without caption

404

This is a custom-designed page for 404 redirect errors, informing a user that the requested web page cannot be found, or it doesn't exist.
Image without caption
💡
Tip: This page has only 1 redirecting workflow, to the index page