# MG - Stylish Fashion Marketplace

***

## Intro

<figure><img src="https://2242098880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTgQH94xLDEgRL5hZla7%2Fuploads%2Fsa24kpf6DXWkErGR9Vff%2Fhttps___meta-q.cdn.bubble.io_f1675251286520x111769099766142910_Frame%2520904.png?alt=media&#x26;token=281ab3bf-c714-4ab8-b4e5-e643c60c5729" alt=""><figcaption></figcaption></figure>

## Links

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

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/stylish-fashion-marketplace-1670839681215x154279541544845300)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://2242098880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTgQH94xLDEgRL5hZla7%2Fuploads%2FsZJQKlWloou8nTz7dsUd%2F1.png?alt=media&#x26;token=76c4f5b1-419f-4584-97c8-b7ff5aa86651" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://2242098880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTgQH94xLDEgRL5hZla7%2Fuploads%2FI96t6QDJzsqaeaOutfzx%2F2.png?alt=media&#x26;token=0063e678-9160-4886-9cc2-deebf9dd088e" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://2242098880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTgQH94xLDEgRL5hZla7%2Fuploads%2Fx9LAzBfronoaiw9Fsuq3%2F3.png?alt=media&#x26;token=ee7f9c74-4877-4e62-855d-5ea826527fc1" alt=""><figcaption><p>Products page</p></figcaption></figure> <figure><img src="https://2242098880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTgQH94xLDEgRL5hZla7%2Fuploads%2FDPU2rF9w40qkm2eEudPr%2F4.png?alt=media&#x26;token=aac3229a-8185-48e3-9b46-ddc29cf854b4" alt=""><figcaption><p>User dashboard</p></figcaption></figure> <figure><img src="https://2242098880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTgQH94xLDEgRL5hZla7%2Fuploads%2FfIbYUxs99zML8p884fOu%2F5.png?alt=media&#x26;token=522ae7be-9fbc-4ef1-ac09-69c866127b75" alt=""><figcaption><p>Admin dashboard</p></figcaption></figure> <figure><img src="https://2242098880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTgQH94xLDEgRL5hZla7%2Fuploads%2FRKqrNvXIyIH6uikst5PN%2F6.png?alt=media&#x26;token=3925e65a-6b0d-498b-9fbf-18b1fd0b816f" alt=""><figcaption><p>Register page</p></figcaption></figure></div>

***

## Template details

MG is a template that is great for those who want to open their own marketplace to sell any kind of fashion products. In this case, we chose a marketplace for selling clothes and accessories. This is a #nocode template that allows the administrator to upload products and allows the user to select the desired product, add the product to the cart, and checkout.

MG template features the following:&#x20;

✅ Responsive design&#x20;

✅ Signup/Login&#x20;

✅ Admin dashboard&#x20;

✅ User dashboard&#x20;

✅ Create and edit products from admin panel&#x20;

✅ Show recommendations based on the products viewed&#x20;

✅ Quick and flexible product search&#x20;

✅ Search across all product categories&#x20;

✅ Sort and filter using multiple criteria&#x20;

✅ Adding an item to favorites&#x20;

✅ View all order history

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.\
\
We hope this template would become 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 -> Product search -> View product description -> Add product to favorites -> Checkout; -> View all orders in your personal account.

***

## 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>DIVERSE CLOTHING COLLECTION</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>SIZE AND FIT GUIDE</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>TRENDING AND SEASONAL COLLECTIONS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>SECURE PAYMENT GATEWAY</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/TTgQH94xLDEgRL5hZla7/blobs/Ota3QueNUKO2tHbmoq7n/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/YtNHIUBIHd9y1lX22kEU/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/TTgQH94xLDEgRL5hZla7/blobs/DmsX0AX5KEBD8QE1tHGQ/exmp%203.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/DISNs70JVuel2luNVgWA/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/TTgQH94xLDEgRL5hZla7/blobs/ofu2SiZHEOKllyiiTaYX/exmp%205.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/fLOLy9InpXPNV1tgr37h/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/TTgQH94xLDEgRL5hZla7/blobs/6o9g5T2uJWtzf4XV10sL/exmp%207.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/BKSJMDxIXFseIptmA6tI/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/TTgQH94xLDEgRL5hZla7/blobs/sT5NOhdi5vIPi9C1tbWX/exmp%209.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/Fbrall5jdW18LhdPa1uR/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/TTgQH94xLDEgRL5hZla7/blobs/ybrQdfb9gLWGN3WG2ErM/purple%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/ftRuXdqTgEJgpDcdOuhR/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/TTgQH94xLDEgRL5hZla7/blobs/8WTrzwGGFGZwe6lUGdkK/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/SUwjNME84qt4BbRoFgVo/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/TTgQH94xLDEgRL5hZla7/blobs/AWZ7Jv9zdZCSFCgjVSTR/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, seasonal wardrobe, campaigns, categories of clothes.

<mark style="color:orange;">**Product Page:**</mark> This page contains all the information about a product such as name, price, available sizes and colors, pictures and product description and discover section.

<mark style="color:orange;">**Shopping Bag:**</mark> On this page are described all the products added to the cart with short information like price, color, image, size, name, weight and also the check out part where the total price is displayed and gives the possibility to the customer to check out.

<mark style="color:orange;">**About Us:**</mark> Exploring this page the user can find out more interesting and useful information about us

<mark style="color:orange;">**Admin Dashboard:**</mark> A admin's dashboard displaying all information - products, orders, users and general information.

* The "Dashboard" tab compiles general information about what is happening on the site such as total earning, items sold, total visitors,  total users, last orders and graphics about visitors and sales
* The "Products" tab compiles information about all products that are added to the site with general information such as name, image, product code, category and all at once gives the admin the possibility to modify the product or delete it.
* The "Orders" tab compiles information about all orders placed on the site with general information such as order number, date placed, quantity, price and offers the administrator to delete or inspect the order
* The "Users" tab compiles information about all registered users on the site with general information such as name, email, address and gives the administrator the possibility to inspect or delete the user
* The "Settings" tab compiles profile information and tools needed to modify it.

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

* The  "Account Settings" tab compiles profile information and tools needed to modify it.
* The  "My Orders" tab compiles all orders placed and information about them such as order number, date placed, number of products, total price, order payment status and delivery status, and if necessary the user can analyze information about the order in more detail by opening it.
* The  "Payment Methods" tab compiles all the payment methods the user has added
* The  "My Wishlist" tab compiles all the products added to the favorites list that the user wants to buy.

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

<mark style="color:orange;">**Docs:**</mark> Here is displayed all the information about Privacy Policy, Terms & Conditions and FAQ.

<mark style="color:orange;">**Products:**</mark> On this page you can review all products that are on the site with picture and little information about it such as name, price and how many colors the product is sold

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

***

## Reusable elements

1. **Footer** - a section at the bottom of a web page containing additional information such as contacts and links.  <mark style="color:orange;">Found on all application pages.</mark>
2. **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

### Category

This data type is designed for storing information regarding Category.

| Field name    | Type                                     | Notes               |
| ------------- | ---------------------------------------- | ------------------- |
| `Subcategory` | `List of` [`Subcategorys`](#subcategory) | Subcategories names |

### Ordered Products

This data type is designed for storing information regarding Ordered Products.

| Field name | Type                                                                     | Notes                    |
| ---------- | ------------------------------------------------------------------------ | ------------------------ |
| `Color`    | `Color`                                                                  | Ordered product color    |
| `Order`    | [`Order`](#order)                                                        | Ordered product number   |
| `Price`    | `Number`                                                                 | Ordered product price    |
| `Product`  | [`Product`](#product)                                                    | Ordered product name     |
| `Quantity` | `Number`                                                                 | Ordered product quantity |
| `Size`     | <p><code>Option set:</code><br><a href="#size"><code>Size</code></a></p> | Ordered product size     |
| `Creator`  | [`User`](#user)                                                          | User ordered product     |

### Ordered Story

This data type is designed for storing information regarding Ordered Story.

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

### Subcategory

This data type is designed for storing information regarding Subcategory.

| Field name | Type                                                                                            | Notes             |
| ---------- | ----------------------------------------------------------------------------------------------- | ----------------- |
| `Human`    | <p><code>Option set:</code><br><code>List of</code> <a href="#human"><code>Human</code></a></p> | Subcategory human |
| `Title`    | `Text`                                                                                          | Subcategory name  |
| `Type`     | <p><code>Option set:</code><br><a href="#subcategory-1"><code>Subcategory</code></a></p>        | Subcategory type  |

### User

This data type is designed for storing information regarding User.

| Field name             | Type                                         | Notes                            |
| ---------------------- | -------------------------------------------- | -------------------------------- |
| `Address 1`            | `Text`                                       | User first address               |
| `Address 2`            | `Text`                                       | User second address              |
| `City`                 | `Text`                                       | User city name                   |
| `Current Order`        | [`Order`](#order)                            | User current order number        |
| `First Name`           | `Text`                                       | User first name                  |
| `Full Name`            | `Text`                                       | User full name                   |
| `Image`                | `Image`                                      | User avatar image                |
| `Last Name`            | `Text`                                       | User last name                   |
| `Order History`        | `List of` [`Ordered Storys`](#ordered-story) | User order history               |
| `Payment`              | `Text`                                       | User payment name                |
| `Phone Number`         | `Text`                                       | User phone number                |
| `Region`               | `Text`                                       | User region name                 |
| `State`                | `Text`                                       | User state name                  |
| `Subscribe Newsletter` | `Yes/No`                                     | User subscribe newsletter status |
| `User Type`            | [`User Type`](#user-type)                    | User type                        |
| `Wishlist`             | `List of` [`Products`](#product)             | User wishlist products           |
| `ZIP Code`             | `Text`                                       | User ZIP code number             |
| `Email`                | `Text`                                       | User email                       |

### User Type

This data type is designed for storing information regarding User Type.

| Field name | Type     | Notes               |
| ---------- | -------- | ------------------- |
| `ID`       | `Number` | User type id number |
| `Name`     | `Text`   | User type name      |

### Color

This data type is designed for storing information regarding Color.

| Field name | Type    | Notes       |
| ---------- | ------- | ----------- |
| `Image`    | `Image` | Color image |
| `Name`     | `Text`  | Color name  |

### Product

This data type is designed for storing information regarding Product.

| Field name       | Type                                                                                          | Notes                       |
| ---------------- | --------------------------------------------------------------------------------------------- | --------------------------- |
| `Code`           | `Number`                                                                                      | Product code number         |
| `Color`          | `List of` [`Colors`](#color)                                                                  | Product colors              |
| `Description`    | `Text`                                                                                        | Product description content |
| `Human`          | <p><code>Option set:</code><br><a href="#human"><code>Human</code></a></p>                    | Product category human      |
| `Image`          | `List of Images`                                                                              | Product images              |
| `Material`       | <p><code>Option set:</code><br><a href="#material"><code>Materials</code></a></p>             | Product materials           |
| `Name`           | `Text`                                                                                        | Product name                |
| `Price`          | `Number`                                                                                      | Product price               |
| `Size`           | <p><code>Option set:</code><br><code>List of</code> <a href="#size"><code>Size</code></a></p> | Product size                |
| `Style`          | <p><code>Option set:</code><br><a href="#style"><code>Style</code></a></p>                    | Product style               |
| `Subcategory`    | [`Subcategory`](#subcategory)                                                                 | Product subcategory name    |
| `Subcategory OS` | <p><code>Option set:</code> <br><a href="#subcategory-1"><code>Subcategory</code></a></p>     | Product subcategory         |
| `Top`            | `Number`                                                                                      | Product top number          |
| `Visits`         | `Number`                                                                                      | Product visits number       |
| `Creator`        | [`User`](#user)                                                                               | Product creator user name   |

### Order

This data type is designed for storing information regarding Order.

| Field name       | Type                                                                                         | Notes                   |
| ---------------- | -------------------------------------------------------------------------------------------- | ----------------------- |
| `Delivery`       | <p><code>Option set:</code><br><a href="#delivery"><code>Delivery</code></a></p>             | Order delivery status   |
| `Order ID`       | `Number`                                                                                     | Order order id number   |
| `Order Number`   | `Text`                                                                                       | Order number            |
| `Order Products` | `List of` [`Ordered Productses`](#ordered-products)                                          | Order products          |
| `Payment Method` | <p><code>Option set:</code><br><a href="#payment-method"><code>Payment Method</code></a></p> | Order payment method    |
| `Status`         | <p><code>Option set:</code><br><a href="#status"><code>Status</code></a></p>                 | Order status            |
| `Total Price`    | `Number`                                                                                     | Order total price       |
| `Creator`        | [`User`](#user)                                                                              | Order creator user name |

***

## Option sets&#x20;

#### Delivery

* On the way

#### Human

* Women
* Man
* Children

#### Material

* Cotton
* Cotton & Polyamide
* Cotton & polyester
* Organic cotton
* Recycled materials

#### Payment Method

* Pay with card
* PayPal
* Google Pay
* Apple Pay

#### Size

* XS
* S
* M
* L
* XL
* XXL

#### Status

* Paid
* Draft

#### Subcategory

* SHOES
* WALLETS & SMALL ACCESSORIES
* HANDBAGS
* TRAVEL
* ACCESSORIES
* READY-TO-YEARS

#### Style

* Casual
* Elegant
* Sport

#### Sort

* Our selection
* Name (A-Z)
* Name (Z-A)
* Price (Low-Hight)
* Price (Hight-Low)

***

<figure><img src="https://content.gitbook.com/content/TTgQH94xLDEgRL5hZla7/blobs/ciutEyFUgIVTa8ifKnYP/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>