# Kids Toys - Marketplace

***

## Intro

<figure><img src="https://4029482391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcwGBvKG1YjRRukAGkXb4%2Fuploads%2FeJo05kGn6eP4BBrJjLUE%2Fhttps___meta-l.cdn.bubble.io_f1698084138877x311720266040522050_KidsToys20Bubble.jfif?alt=media&#x26;token=30589176-bf48-45d0-bf73-afd525388d12" alt=""><figcaption></figcaption></figure>

## Links

🖥️ [Preview link](https://kids-toys-template.bubbleapps.io/)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/kids-toys-marketplace-1698084043474x389156304881713150)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://4029482391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcwGBvKG1YjRRukAGkXb4%2Fuploads%2F6Bg1GX2zHUecz7fG2ElB%2F1.png?alt=media&#x26;token=1648c287-6414-4a85-afb3-e85aef0c4dbb" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://4029482391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcwGBvKG1YjRRukAGkXb4%2Fuploads%2FwbnHO7zgQoE3vtUCAwvi%2F2.png?alt=media&#x26;token=53b443ea-abf3-4c05-a069-b8557c842ccb" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://4029482391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcwGBvKG1YjRRukAGkXb4%2Fuploads%2FW5ExQWj4jTBGbn82Yc5o%2F3.png?alt=media&#x26;token=87452845-e43b-451e-95fd-1dfa7fd56756" alt=""><figcaption><p>Catalog page</p></figcaption></figure> <figure><img src="https://4029482391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcwGBvKG1YjRRukAGkXb4%2Fuploads%2FWEhmRitFE8Dd67SClJ3m%2F4.png?alt=media&#x26;token=eb6854aa-f1f5-4988-9fbd-9645b622eb13" alt=""><figcaption><p>User dashboard</p></figcaption></figure> <figure><img src="https://4029482391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcwGBvKG1YjRRukAGkXb4%2Fuploads%2Fsvpsfqdf4MpuNKOwM16H%2F5.png?alt=media&#x26;token=d3094033-aa87-4a68-9066-648bce0bb2b9" alt=""><figcaption><p>Admin dashboard</p></figcaption></figure> <figure><img src="https://4029482391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcwGBvKG1YjRRukAGkXb4%2Fuploads%2FuwWDOYRt2WqFgNs0OZ6q%2F6.png?alt=media&#x26;token=79abe162-842c-4b48-b08d-9124dd53bde3" alt=""><figcaption><p>Register page</p></figcaption></figure></div>

***

## Template details

Introducing "Kids Toys Marketplace" – the ultimate solution for launching your startup or a similar marketplace dedicated to buying and selling children's toys. Our platform, built on the powerful bubble.io, is designed to cater to the needs of both administrators and regular users, offering a seamless experience for all.

For Admin:

* Effortless Product Management: Admin have the power to create and publish toy listings with ease. Add images, descriptions, prices, and more, all from your personalized dashboard.
* Insightful Analytics: Stay informed about the performance of your marketplace with detailed statistics on purchases, order data, and user information. Monitor the growth of your platform and make data-driven decisions.

For Regular Users:

* Easy Registration: Users can quickly create accounts to explore the world of children's toys. Browse a wide array of products and find that perfect toy for your little ones.
* User-Friendly Shopping: Add items to your cart, choose your preferred delivery and payment options, and seamlessly complete your order. Your convenience is our priority.
* Purchase History: Keep track of your buying history in your personalized user dashboard. See what you've ordered and relive the joy of past purchases.

Our dedicated Appassion team has invested extensive time and effort into crafting this marketplace template. We are confident that you will find it not only visually appealing but also incredibly user-friendly. Whether you're looking to launch a thriving children's toy marketplace or simply enhance your startup, "Kids Toys" has got you covered. We hope you enjoy using this template as much as we enjoyed creating it. Happy selling and shopping!

Kids Toys template features the following:&#x20;

✅ Responsive design&#x20;

✅ Signup/Login&#x20;

✅ Demo User/Admin&#x20;

✅ User dashboard&#x20;

✅ Admin dashboard&#x20;

✅ Add and edit products&#x20;

✅ Statistics in the admin dashboard&#x20;

✅ Opportunity to leave a review&#x20;

✅ Search products by category

This template is sold "as is" but if there are any critical bugs, feel free to reach out. Our team will try to fix them ASAP.\
\
We tried to keep all the workflows and design architecture simple for beginner-intermediate users to use and adjust. However, we recommend having at least moderate experience with Bubble to be able to fully use and edit the app’s backend.\
\
If you need any assistance to customize this template for your personal or business project, feel free to reach out to our team via <dev@appassion.io>. We are always there to help build new products and mobile/web applications.

Under the Standard license, this template can be used multiple times to create applications for you own use, personal or business, that you can monetize your application with paid users or advertising. You should not use this license to build apps for others.&#x20;

The Developer license lets you build multiple applications based on this template for yourself and for others.\
\
We hope this template is a great starting point for your project.

{% hint style="warning" %}
*<mark style="color:red;">**Removing the banner**</mark>*

*<mark style="color:red;">**1. Open the app in Bubble editor**</mark>*&#x20;

*<mark style="color:red;">**2. Go to settings -> SEO/Metatags**</mark>*&#x20;

*<mark style="color:red;">**3. Remove the content of "Script in the body"**</mark>*
{% endhint %}

***

## User flows&#x20;

Main user flow:&#x20;

-> Sign up/Login; -> Products search; -> View products; -> Ability to leave review; -> View all purchase history in the personal dashboard.

***

## Key features

<table data-view="cards"><thead><tr><th></th><th align="center"></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-type="checkbox"></th></tr></thead><tbody><tr><td></td><td align="center"><mark style="color:orange;"><strong>MULTISELECT DROPDOWN</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"> <mark style="color:orange;"><strong>RICH TEXT EDITOR</strong></mark></td><td></td><td></td><td>false</td></tr><tr><td></td><td align="center"> <mark style="color:orange;"><strong>SEARCH AND FILTER OPTIONS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>PRODUCT REVIEWS AND RATINGS</strong></mark> </td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>WISHLIST AND FAVORITES</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>EXTENSIVE TOY CATALOG</strong></mark></td><td></td><td></td><td>false</td></tr></tbody></table>

## Workflows&#x20;

### Primary colors and their purposes

### **Green**

Emphasizes actions related to creating or modifying records in the database, indicating successful operation completion.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/LfYaIvqCYGf1QcoL9g6z/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/ifyYgk0AMKNPBxEvE8u1/exmp%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Red**

Designated for actions involving deletion or resetting of values, aiding users in quickly identifying them.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/lROGM6HAfzn69nNBBr3H/exmp%203.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/rkKoJyT7tXjnaHdip1Zf/exmp%204.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Blue**

Reserved for actions that do not impact application resources, such as opening or closing pop-up windows.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/DixliOsiTvnrh5zuR4qQ/exmp%205.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/pqJm3ZxUuJtAGvuUaCff/exmp%206.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Orange**

Used for actions related to app navigation, providing ease of orientation within the interface.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/f6K8rYE6nprIJ2Uw5ahn/exmp%207.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/An24l3XC3YsluWvPm2KP/exmp%208.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Brown**

&#x20;Utilized for custom workflows and API work, highlighting these actions among others.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/SPFXk9XO1kfXGmkPzRvT/exmp%209.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/Ro9tWxzGwGgNUxn6B5dB/exmp%2010.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Purple**

Left to the developer's discretion for assigning color to actions as they see fit.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/1xlKIkwyFRc7eyWNfS8b/purple%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/hEsvaTYnfNzRHb9VfuDy/purple%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Cyan**

&#x20;**I**ntended for actions involving the use of Custom Events, ensuring ease of perception for complex operations.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/a8mr03IrysbzXrP1lwTX/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/gLgt4nuh20N3PSZwmctL/cyan%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Grey**

Employed for all other actions not covered by other colors, aiding in making the interface clear and balanced.

For example:

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/Khjx6WH4ZmDNaSvylagy/grey%201.svg" alt="" width="352"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
These standards are purely recommendations. Possible discrepancies do not affect the functionality of the application.
{% endhint %}

***

## Pages

*Below, you will find a list of all the pages available on this platform, along with a brief description of their functionality.*

\ <mark style="color:orange;">**Index:**</mark> Explore our landing page for insights on the template, featuring descriptions, popular products, our brands, recommendations.

<mark style="color:orange;">**Cart:**</mark> In the cart you can see all added products, change these products in the cart and proceed to checkout to order and buy the products.

<mark style="color:orange;">**Delivery:**</mark> In this page you can examine all the information about delivery

<mark style="color:orange;">**Product Page:**</mark> This is the page where you can find all the general information about the product such as name, price, pictures, as well as other information such as product description, reviews, shipping, etc.

<mark style="color:orange;">**Terms of Use:**</mark> This is the terms of use information page

<mark style="color:orange;">**Wishlist:**</mark> In this page we can see the products that the user wants to buy.

<mark style="color:orange;">**Admin Dashboard:**</mark> An admin's dashboard providing essential and up-to-date information.&#x20;

* The "Dashboard" tab compiles statistics on top products, last products, products low quality, total sales, total orders, total sold products, total users.
* The  "Catalog" tab compiles information about all products on the site such as pictures, name, price, description, category, brand and others.
* The  "Orders" tab compiles information about all orders on the site such as order number, images, user, price, date, paid and others.
* The  "Users" tab compiles information about all users on the site such as name, email, phone, orders, registration date and others.
* The  "Mail" tab compiles information about all reviews the site such as name, email, phone, message, date and others.

<mark style="color:orange;">**User Dashboard:**</mark> An user's dashboard providing essential and up-to-date information.&#x20;

* The  "Personal Information" tab compiles all information about user such as name, last name, birthday, phone, email, address and options to edit personal data or change password.
* The  "Wish List" tab compiles information about all the products that the user wants to buy but can't get to the current.
* The  "My Orders" tab compiles information about all orders the user has made with details such as order number, product image, price, date, status and others.

<mark style="color:orange;">**Reset Password:**</mark> Effortlessly reset your password and receive updated login credentials for seamless access.

<mark style="color:orange;">**Catalog:**</mark> This page compile all information about all products on site.

<mark style="color:orange;">**Privacy and Policy:**</mark> Dive into detailed company profiles, showcasing descriptions, benefits, job openings, social links, and captivating images.

<mark style="color:orange;">**Signup Login:**</mark> Page where the user can create an account to register, log in and sing up to the site.

***

## Reusable elements

1. **Mobile Menu** - a menu bar used only for mobile platform. Used in the following pages: <mark style="color:orange;">index, cart, delivery, product\_page, terms\_of\_user, wishlist, catalog, privacy\_policy, signup\_login, user\_profile.</mark>
2. **Footer** - a section at the bottom of a web page containing additional information such as contacts and links. Used in the following pages: <mark style="color:orange;">index, cart, delivery, product\_page, terms\_of\_user, wishlist, catalog, privacy\_policy, signup\_login, user\_profile.</mark>
3. **Product** - a visible element containing general product information. Used in the following pages: <mark style="color:orange;">index, cart, product\_page, wishlist, catalog, user\_profile.</mark>
4. **Product2** - a visible element containing general product information. Used in the following pages: <mark style="color:orange;">index, cart, product\_page, wishlist, catalog, user\_profile.</mark>
5. **Header** - the top part of a web page containing the logo, application name, navigation elements, and other important components. <mark style="color:orange;">Found on all application pages.</mark>

***

## Data Types

### Brand

This data type is designed for storing all Brand related information.

| Field name | Type                                | Notes            |
| ---------- | ----------------------------------- | ---------------- |
| `Category` | `List of` [`Categories`](#category) | Brand categories |
| `ID`       | `Number`                            | Brand id         |
| `Image`    | `Image`                             | Brand image      |
| `Name`     | `Text`                              | Brand name       |
| `Products` | `List of` [`Products`](#product)    | Brand products   |

### Category

This data type is designed for storing information related to Category.&#x20;

| Field name | Type                             | Notes             |
| ---------- | -------------------------------- | ----------------- |
| `ID`       | `Number`                         | Category id       |
| `Image`    | `Image`                          | Category image    |
| `Name`     | `Text`                           | Category name     |
| `Products` | `List of` [`Products`](#product) | Category products |

### Content

This data type is designed for storing information related to Banners.

| Field name | Type      | Notes          |
| ---------- | --------- | -------------- |
| `Banner`   | `Image`   | Banner image   |
| `Cont`     | `Content` | Banner content |

### Delivery Methods

This data type is designed for storing information regarding Delivery Methods.

| Field name      | Type     | Notes                |
| --------------- | -------- | -------------------- |
| `Date`          | `Date`   | Delivery date        |
| `Date Delivery` | `Text`   | Delivery period      |
| `Delivery Days` | `Number` | Delivery days        |
| `Image`         | `Image`  | Delivery image       |
| `Name`          | `Text`   | Delivery method name |
| `Price`         | `Number` | Delivery price       |

### Mail

This data type is designed for storing information regarding Mail.&#x20;

| Field name  | Type            | Notes          |
| ----------- | --------------- | -------------- |
| `Email`     | `Text`          | User email     |
| `Full Name` | `Text`          | User full name |
| `Mail`      | `Text`          | Mail content   |
| `Status`    | `Yes/No`        | Mail status    |
| `User`      | [`User`](#user) | User name      |

### Newsletter Users

This data type is designed for storing information regarding Newsletter Users.

| Field name       | Type            | Notes                     |
| ---------------- | --------------- | ------------------------- |
| `Email`          | `Text`          | User email                |
| `Privacy Policy` | `Yes/No`        | Privacy and policy status |
| `User`           | [`User`](#user) | User name                 |

### Order

This data type is designed for displaying preview of Order.

| Field name        | Type                                                      | Notes                  |
| ----------------- | --------------------------------------------------------- | ---------------------- |
| `Adress`          | `Text`                                                    | Order address delivery |
| `Checked Product` | `List of` [`List of Ordered Products`](#ordered-products) | Order checked products |
| `Delivery Method` | `Text`                                                    | Order delivery method  |
| `Delivery Price`  | `Number`                                                  | Order delivery price   |
| `Full Name`       | `Text`                                                    | Order user name        |
| `Order Number`    | `Number`                                                  | Order number           |
| `Order Products`  | `List of` [`List of Ordered Products`](#ordered-products) | Order products         |
| `Order Number`    | `Text`                                                    | Order number           |
| `Owner`           | [`User`](#user)                                           | Order owner            |
| `Payment Method`  | `Text`                                                    | Order payment method   |
| `Phone`           | `Text`                                                    | Order user phone       |
| `Products Price`  | `Number`                                                  | Order products price   |
| `Status`          | `Text`                                                    | Order status           |
| `Store`           | `Text`                                                    | Order store            |
| `Total Price`     | `Number`                                                  | Order total price      |

### Ordered Products

This data type is designed for storing all information related to Ordered Products.<br>

| Field name            | Type                  | Notes               |
| --------------------- | --------------------- | ------------------- |
| `Order`               | [`Order`](#order)     | Product order       |
| `Ordered Products ID` | `Number`              | Product products id |
| `Owner`               | [`User`](#user)       | Product owner       |
| `Price`               | `Number`              | Product price       |
| `Product`             | [`Product`](#product) | Product name        |
| `Quantity`            | `Number`              | Product quantity    |

### Ordered Story

This data type is designed for storing all candidate related Ordered Story.<br>

| Field name | Type              |             |
| ---------- | ----------------- | ----------- |
| `ID`       | `Number`          | Order id    |
| `Order`    | [`Order`](#order) | Order name  |
| `Owner`    | [`User`](#user)   | Order owner |

### Payment Methods

This data type is designed for storing user related information and precisely to Payment Methods.<br>

| Field name | Type     |                      |
| ---------- | -------- | -------------------- |
| `Date`     | `Text`   | Payment method date  |
| `ID`       | `Number` | Payment method id    |
| `Image`    | `Image`  | Payment method image |
| `Name`     | `Text`   | Payment method name  |
| `Price`    | `Number` | Payment method price |

### Product

This data type is designed for displaying a chart that is build from Product.

| Field name       |                                 |                        |
| ---------------- | ------------------------------- | ---------------------- |
| `Brand`          | [`Brand`](#brand)               | Product brand          |
| `Category`       | [`Category`](#category)         | Product category       |
| `Code`           | `Text`                          | Product code           |
| `Description`    | `Text`                          | Product description    |
| `Images`         | `List of Images`                | Product images         |
| `Material`       | `Text`                          | Product materials      |
| `Price`          | `Number`                        | Product price          |
| `Quantity`       | `Number`                        | Product quantity       |
| `Rating`         | `Number`                        | Product rating         |
| `Reviews`        | `List of` [`Reviews`](#reviews) | Product reviews        |
| `Sale`           | `Number`                        | Product sale number    |
| `Sale Price`     | `Number`                        | Product sale price     |
| `Sale yes/no`    | `Yes/No`                        | Product sale status    |
| `Sales Quantity` | `Number`                        | Product sales quantity |
| `Title`          | `Text`                          | Product title          |

### Reviews

This data type is designed for displaying a chart that is build from Reviews.

| Field name |                       |                |
| ---------- | --------------------- | -------------- |
| `Owner`    | [`User`](#user)       | Review owner   |
| `Photo`    | `List of Images`      | Review photos  |
| `Product`  | [`Product`](#product) | Product review |
| `Rating`   | `Number`              | Review rating  |
| `Review`   | `Text`                | Review content |
| `Title`    | `Text`                | Review title   |

### User

This data type is designed for displaying a chart that is build from User.

| Field name         |                                                     |                       |
| ------------------ | --------------------------------------------------- | --------------------- |
| `Cart`             | `List of` [`Ordered productses`](#ordered-products) | User products cart    |
| `Day of Birth`     | `Date`                                              | User birthday         |
| `Delivery Address` | `Text`                                              | User delivery address |
| `Favorites`        | `List of` [`Products`](#product)                    | User favorites list   |
| `Full Name`        | `Text`                                              | User full name        |
| `Last Name`        | `Text`                                              | User last name        |
| `Order`            | [`Order`](#order)                                   | User order            |
| `Order History`    | `List of` [`Ordered Products`](#ordered-products)   | User order history    |
| `Phone`            | `Text`                                              | User phone            |
| `Photo`            | `Image`                                             | User photo            |
| `Subscribe`        | [`Newsletter Users`](#newsletter-users)             | User subscribes       |
| `User Type`        | [`User Type`](#user-type)                           | User type             |
| `Email`            | `Text`                                              | User email            |

### User Type

This data type is designed for displaying a chart that is build from User Type

| Field name |          |                        |
| ---------- | -------- | ---------------------- |
| `Admin`    | `Yes/No` | User type admin status |
| `Demo`     | `Yes/No` | User type demo status  |
| `ID`       | `Number` | User type id           |
| `Name`     | `Text`   | User type name         |

***

## Option sets&#x20;

#### Sortation

* Price low to high
* Price high to low
* Rating low to high
* Rating high to low

***

<figure><img src="https://content.gitbook.com/content/cwGBvKG1YjRRukAGkXb4/blobs/YDzCKLkvPsP51SdcWIHU/Logo-Appassion.png" alt=""><figcaption></figcaption></figure>

The template is available in its current form, however, further alterations can be negotiated.&#x20;

Don't hesitate to reach out to us with any questions, and we'll gladly explore options to accommodate your concepts – Visit us at [<mark style="color:orange;">https://appassion.io/</mark>](https://appassion.io/) or email us at <mark style="color:orange;"><dev@appassion.io></mark>

<mark style="color:orange;">**We are always at your service through:**</mark> [Upwork](https://www.upwork.com/agencies/1472948949083369472/), [Clutch](https://clutch.co/profile/appassion#highlights). \ <br>