# Lobster - Retail Marketplace

***

## Intro

<figure><img src="https://816532803-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD6zWrWNSwGtyEAviJt6Z%2Fuploads%2FbkAnwrPco21abG6m0ZpQ%2Fhttps___meta-q.cdn.bubble.io_f1677579285490x467146346963080300_lobster.png?alt=media&#x26;token=7bc9c31d-1556-424d-915a-4c22ed1031a0" alt=""><figcaption></figcaption></figure>

## Links

🖥️ [Preview link](https://newlobster.bubbleapps.io/)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/retail-marketplace-1654687813091x489961752708251650)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://816532803-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD6zWrWNSwGtyEAviJt6Z%2Fuploads%2F5I0iHULFzRLYARQvFIKw%2F1.png?alt=media&#x26;token=2512debf-b517-4a85-a931-9eafa3253c2f" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://816532803-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD6zWrWNSwGtyEAviJt6Z%2Fuploads%2FmyJNsKbZKdBMPGbFmsDf%2F2.png?alt=media&#x26;token=5a624cfa-ed43-4f46-8cee-763bac1ceffb" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://816532803-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD6zWrWNSwGtyEAviJt6Z%2Fuploads%2FLKIVN9DUKhoxDESweYPB%2F3.png?alt=media&#x26;token=f928644e-8f61-4c20-a540-48046fa2bf72" alt=""><figcaption><p>Products page</p></figcaption></figure> <figure><img src="https://816532803-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD6zWrWNSwGtyEAviJt6Z%2Fuploads%2F2SS7zaB7Roktjy3d0NmF%2F4.png?alt=media&#x26;token=bf0b9608-e9f9-4984-a276-8385767b2e25" alt=""><figcaption><p>Product page</p></figcaption></figure> <figure><img src="https://816532803-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD6zWrWNSwGtyEAviJt6Z%2Fuploads%2Ft9NK8WH0p5Zp80vSb67D%2F5.png?alt=media&#x26;token=751a91b2-8bac-42ce-bb5d-42c65934255a" alt=""><figcaption><p>User profile</p></figcaption></figure> <figure><img src="https://816532803-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD6zWrWNSwGtyEAviJt6Z%2Fuploads%2F3xopasgpHE5gyzOLEVni%2F6.png?alt=media&#x26;token=289b425d-a8d3-422c-b301-9f5bef7f355b" alt=""><figcaption><p>Admin dashboard</p></figcaption></figure></div>

***

## Template details

Lobster is a template that is great for someone who wants to open their own marketplace to sell any product. In this case, we chose electronic goods. This is a #nocode template which allows the administrator to publish a product, and the user can select the product that he needs, add the product to the cart and arrange delivery of the product.

Lobster 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;

✅ The function of viewing 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 -> Order delivery of goods -> Add product to favorites -> 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>USER ACCOUNTS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>TECH NEWS AND UPDATES</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>PRODUCT LISTINGS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>WARRANTY AND SUPPORT INFORMATION</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/D6zWrWNSwGtyEAviJt6Z/blobs/uHc0xQAbyOipRDKduwjt/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

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

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/D6zWrWNSwGtyEAviJt6Z/blobs/NOl3iHcXcpt7pFF7aYdG/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/D6zWrWNSwGtyEAviJt6Z/blobs/gryJNltptQ1LaXVZDHVS/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, special offers, categories, blogs, brands, top sales and subscribe section.

<mark style="color:orange;">**Blog:**</mark> This page contains all the information about the blog such as name, theme, category, description, pictures and other necessary information.

<mark style="color:orange;">**Contact Us:**</mark> Connect with platform administrators effortlessly through our user-friendly contact page.

<mark style="color:orange;">**Docs:**</mark> Access all necessary platform documentation, including Privacy Policy, Terms & Conditions, and Frequently Asked Questions (FAQ).

<mark style="color:orange;">**All Products:**</mark> On this page you will find all the products on the site with a little information about them such as picture, name, price, memory and available colors.

<mark style="color:orange;">**User Profile:**</mark> A user's dashboard displaying all information about personal information about user and orders.

* The "Personal Information" tab showcases applications the candidate has submitted.
* In the "My Orders" tab, candidates can find roles they've bookmarked.

<mark style="color:orange;">**Checkout:**</mark> This is the page intended for the user to complete purchases. It displays all the necessary information about the checkout such as shipping details with the products purchased, order summary with price information and at the bottom is a panel with recommended products.

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

* The "Products" tab compiles information about all products on the site such as image, manufacturer, name, code, price, and if necessary the administrator can edit or view detailed information about the product.&#x20;
* The "Orders" tab compiles information about all orders placed on the site such as order number, product images, price, date, status and if necessary the administrator can view all information about the order.&#x20;
* The "Blog" tab compiles information about all blogs on the site such as name, content and as needed the admin can edit or view all blog information.
* The "Users" tab compiles information about all users registered on the site such as image, name, email, phone number, number of orders and if necessary the administrator can view all information about the user.

<mark style="color:orange;">**Product:**</mark> This page contains all product information such as name, price, image, available colors.

<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>
3. **Terms & Conditions** - contains information about Terms & Conditions. Used in the following pages: <mark style="color:orange;">checkout.</mark>
4. **Privacy Policy** - contains information about Privacy & Policy. Used in the following pages: <mark style="color:orange;">index, blog, checkout.</mark>
5. **Our Recomandations** - this item contains information about products that are recommended to users. Used in the following pages: <mark style="color:orange;">checkout, product.</mark>
6. **Free Consultation** - this item displays information on how the user can get free consultation. Used in the following pages: <mark style="color:orange;">checkout, product.</mark>

***

## Data Types

### Blogs

This data type is designed for storing information regarding Blogs.

| Field name      | Type    | Notes                 |
| --------------- | ------- | --------------------- |
| `Content`       | `Text`  | Blog content          |
| `Divider`       | `Text`  | Blog divider          |
| `Enter Excerpt` | `Text`  | Blog excerpt          |
| `Photo`         | `Image` | Blog image            |
| `Second Photo`  | `Image` | Blog second image     |
| `Title`         | `Text`  | Blog name             |
| `Creator`       | `User`  | Blog creator username |
| `Created Date`  | `Date`  | Blog created date     |
| `Modified Date` | `Date`  | Blog modified date    |

### Brand

This data type is designed for storing information regarding Brand.

| Field name | Type                   | Notes            |
| ---------- | ---------------------- | ---------------- |
| `Category` | `List of Categorieses` | Brand categories |
| `ID`       | `Number`               | Brand id         |
| `Image`    | `Image`                | Brand image      |
| `Name`     | `Text`                 | Brand name       |
| `Products` | `List of Productses`   | Brand products   |

### Categories

This data type is designed for storing information regarding Categories.

| Field name       | Type                       | Notes                   |
| ---------------- | -------------------------- | ----------------------- |
| `ID`             | `Number`                   | Category id             |
| `Image`          | `Image`                    | Category image          |
| `Name`           | `Text`                     | Category name           |
| `Products`       | `List of Productses`       | Category products       |
| `Sub Categories` | `List of Sub Categorieses` | Category sub categories |

### Colors

This data type is designed for storing information regarding Colors.

| Field name | Type     | Notes          |
| ---------- | -------- | -------------- |
| `Hex Code` | `Text`   | Color hex code |
| `ID`       | `Number` | Color id       |
| `Name`     | `Text`   | Color name     |

### Newsletter Users

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

| Field name       | Type     | Notes                              |
| ---------------- | -------- | ---------------------------------- |
| `Email`          | `Text`   | Newsletter user email              |
| `Privacy Policy` | `Yes/No` | Newsletter user privacy and policy |
| `User`           | `User`   | Newsletter username                |

### Order

This data type is designed for storing information regarding Order.

| Field name         | Type                         | Notes                 |
| ------------------ | ---------------------------- | --------------------- |
| `Address`          | `Text`                       | Order address         |
| `Checked Product`  | `List of Ordered Productses` | Order checked product |
| `Delivery Method`  | `Text`                       | Order delivery method |
| `Delivery Price`   | `Number`                     | Order delivery price  |
| `Full Name`        | `Text`                       | Order full name       |
| `Order ID`         | `Number`                     | Order id number       |
| `Ordered Products` | `List of Ordered Productses` | Order products        |
| `Owner`            | `User`                       | Order owner username  |
| `Payment Method`   | `Text`                       | Order payment method  |
| `Phone`            | `Text`                       | Order phone           |
| `Products Price`   | `Number`                     | Order product price   |
| `Status`           | `Text`                       | Order status          |
| `Store`            | `Text`                       | Order store           |
| `Total Price`      | `Number`                     | Order total price     |
| `Created Date`     | `Date`                       | Order created date    |

### Order Status

This data type is designed for storing information regarding Order Status.

| Field name | Type     | Notes              |
| ---------- | -------- | ------------------ |
| `Color`    | `Text`   | Order status color |
| `ID`       | `Number` | Order status id    |
| `Image`    | `Image`  | Order status image |
| `Name`     | `Text`   | Order status name  |

### Ordered Products

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

| Field name            | Type       | Notes                      |
| --------------------- | ---------- | -------------------------- |
| `Order Card`          | `Cart`     | Ordered products cart      |
| `Order`               | `Order`    | Ordered products order     |
| `Ordered Products ID` | `Number`   | Ordered products id number |
| `Price`               | `Number`   | Ordered products price     |
| `Product`             | `Products` | Ordered products           |
| `Quantity`            | `Number`   | Ordered products quantity  |

### Ordered Story

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

| Field name | Type    | Notes                         |
| ---------- | ------- | ----------------------------- |
| `ID`       | `Text`  | Ordered story id              |
| `Order`    | `Order` | Ordered story order           |
| `Owner`    | `User`  | Ordered story owner user name |

### Payment Methods

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

| Field name | Type     | Notes                    |
| ---------- | -------- | ------------------------ |
| `ID`       | `Number` | Payment method id number |
| `Image`    | `Image`  | Payment method image     |
| `Name`     | `Text`   | Payment method name      |

### Products

This data type is designed for storing information regarding Products.

| Field name              | Type                       | Notes                         |
| ----------------------- | -------------------------- | ----------------------------- |
| `Audio Technique`       | `Audio Technique`          | Product audio technique       |
| `Brand`                 | `Brand`                    | Product brand                 |
| `Category`              | `Categories`               | Product category              |
| `Color`                 | `List of Colorses`         | Product color                 |
| `Color Image`           | `List of Colorses`         | Product color image           |
| `Description`           | `Text`                     | Product description           |
| `ID`                    | `Number`                   | Product ID number             |
| `Image`                 | `List of Images`           | Product images                |
| `List of Categories`    | `List of Categorieses`     | Product categories            |
| `List of Colors`        | `List of Texts`            | Product colors                |
| `List of Subcategories` | `List of Sub Categorieses` | Product subcategories         |
| `Memory`                | `Text`                     | Product memory                |
| `Notebooks`             | `Notebooks`                | Product notebooks             |
| `Price`                 | `Number`                   | Product price                 |
| `Rating`                | `Number`                   | Product Rating                |
| `Reviews`               | `List of Reviewses`        | Product reviews               |
| `Smartphone ant Tablet` | `Smartphones and Tablets`  | Product smartphone and tablet |
| `Status`                | `Text`                     | Product status                |
| `Stock`                 | `Number`                   | Product stock                 |
| `Sub Category`          | `Sub Categories`           | Product subcategory           |
| `Title`                 | `Text`                     | Product name                  |

### Search Queries

This data type is designed for storing information regarding Search Queries.

| Field name | Type       | Notes                  |
| ---------- | ---------- | ---------------------- |
| `ID`       | `Number`   | Search query ID        |
| `Product`  | `Products` | Search query  product  |
| `Quantity` | `Number`   | Search query  quantity |
| `Query`    | `Text`     | Search query           |

### Sub Categories

This data type is designed for storing information regarding Sub Categories.

| Field name | Type                 | Notes                  |
| ---------- | -------------------- | ---------------------- |
| `Category` | `Categories`         | Subcategory category   |
| `ID`       | `Number`             | Sub category ID number |
| `Name`     | `Text`               | Sub category name      |
| `Products` | `List of Productses` | Sub category products  |

### User

This data type is designed for storing information regarding User.

| Field name         | Type                        | Notes                   |
| ------------------ | --------------------------- | ----------------------- |
| `Day of Birthday`  | `Date`                      | User birthday           |
| `Delivery Address` | `Text`                      | User delivery address   |
| `Favorites`        | `List of Productses`        | User favorites products |
| `Firse Name`       | `Text`                      | User first name         |
| `Full Name`        | `Text`                      | User full name          |
| `Last Name`        | `Text`                      | User last name          |
| `Order`            | `Order`                     | User order              |
| `Order History`    | `List of Ordered Story`     | User order history      |
| `Phone`            | `Text`                      | User phone              |
| `Photo`            | `Image`                     | User photo              |
| `Subscribe`        | `Newsletter Users`          | User subscribe          |
| `User Type`        | `User Type`                 | User type               |
| `Viewed Story`     | `List of Viewed Productses` | User viewed story       |
| `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      |

***

## Option sets&#x20;

#### Car Status

* History
* Active

#### Order Status

* Complete
* Pending

#### Sort

* Price low to high
* Price high to low

***

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