17min

Pages Overview

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.

Here, it simply lists all the available Products. Users are able to 🔍 search, sort by Newest, Oldest, Price high to low, Price low to high, as well as set the Dark 🌚 mode.

Index: Preview
Index: Preview

Tip: The Dark mode is turned on by switching the Current User's darkmode field to yes. All the design elements have Conditionals that change the UI when the dark mode is turned on.

For example, even the "Dark mode" text itself contains this conditional to change its color:

Index: Dark mode conditional (design)
Index: Dark mode conditional (design)

Tip: Initially, the design elements might be hidden in your editor.

Here is how to unhide 👀 them:

To unhide, press the "eye" icon
To unhide, press the "eye" icon

Tip: This page is designed as an SPA (Single Page Application), meaning there is no separate page for products, but everything is being displayed on the same page by hiding/showing design elements. However, when you click on a Product to display it, the ?product= param is added to the URL with its unique id value.

Here is where to locate this logic:

Index: Displaying a product (workflow)
Index: Displaying a product (workflow)

dashboard

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.

Here, the admin user is able to manage the platform data like Users, Products, Messages, as well as preview stats in the Dashboard tab, set a Platform Fee and reply to messages.

🔢dashboard

Dashboard: Stats
Dashboard: Stats



👤Users

Dashboard: Users
Dashboard: Users



🛒Products

Dashboard: Products
Dashboard: Products

Tip: Here, you are able to change the Platform Fee.

✉️Messages

Dashboard: Messages
Dashboard: Messages

Admin: See the instructions on how to grant Admin Rights in your template.

reset_pw

This page is used for resetting the password. It simply comes with a form to set the new password and confirm it.

Reset password: Design
Reset password: Design

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.

404: Design
404: Design

It is simply asking you to contact the support email in case you have any troubles.

📜 Table of Contents

In order to properly configure the template please read the *required sections of this documentation.