Multistore

Introduction

Multistore is an ultimate collection of templates that comes to fit your needs in terms of e-commerce. This pack contains within itself two templates at this moment, one is oriented towards the fashion industry and the other one is focused on electronic products. Multistore provides plenty of elements and powerful features that you can configure based on your personal needs. It guarantees speed and performance which is a must for your business.

Business, Marketplace, Retail

If you have an idea, we can back you up on the rest. Multipurpose is a platform that was designed from ground up for building authentic and functional online stores. The main focus is on the end user, but be sure that we didn't forget about the store's owner who will manage the inventory. It comes with a powerful admin page that gives you full control over the products, as well as product details. Build the online store that is best suitable for your audience.

Style Settings Panel

Everything has been tweaked and developed to respond to your customization requests with a minimum of fuss so what you are left with is a highly customizable website that can adapt to your change requests easily and quickly. Part of customization is the store logo, there's a field in the admin panel that allows you to change it everywhere on the page with just a couple of clicks.

Responsive design

It goes without saying that our store features completely responsive design that manipulates itself so that it looks well and structured on various devices. We guarantee that your website will display fluidly across multiple devices, with minimum to no effort from your side, depending on the customizations you will apply. Laptops, PCs, smartphones and tablets – have been carefully thought out and included in this smart website theme design.

Retina ready

We’ve also made sure that your store will display with the highest possible pixel density as per users device. If that happens to be a retina ready device then that display will light up with colors that look stunning.

Make the most of your product photos with this retina ready platform, you will love it.

Custom headers No matter what you're building, the header is always a big part of the game since it's usually the first element that users see whenever they open your website. We made sure that headers remain consistent with your shop type, that is why we built custom headers both of our templates.

Features

Multipurpose design
Multiple page styles
Responsive design
Cross-browser compatibility
2 unique homepage layouts
2 different headers
Google web fonts
Clean and well organized groups
Responsive architecture of the layout
Well thought database
Custom logo for header and footer
Highly robust and easy to use payment system
Different button styles
Powerful filter system
SVG logos
Go up button
Customizable layouts
Powerful admin panel
Quick add to cart
Quick search product
Quick view product
Custom hover effects
Wishlist
Order history

Data structure

Down below you have listed all the data types from the application. Within the app in the Data tab, you can see the description for every field within every data type if you click the chat icon on the right of every data field.

Data types

Notes

Brand

This data type holds within itself information about a brand.

Pages Description

Pages description will list all pages of the web application whilst describing the purpose of the page, the reusable elements available on page (if available), custom state attached to page, element actions which link to other pages , name of the pages , and notes.

Page title

Notes

Index

This is the landing page of the multipurpose pack. It contains a couple of blocks that serve to describe what's inside. Template benefits block describes the key points of this pack. "Our demo" block showcases our templates, whenever clicking on any on them it will redirect you to that template index. Next we have a block with a CTA that if clicked will scroll to our demos block.

Page title

Notes

Electronic_store

This is the index of our electronics store, it has several customizable blocks, some of them being dynamic - meaning you can decide what to display there from your admin panel. First is the hero, with generic information. Then you have four blocks that are fully customizable, you can rearrange blocks as per your desire, maintaining the ability to decide what to show within them from our admin panel. Please be advised that for the time being all those elements are fully responsive, and if you decide to modify them, make sure you setup responsiveness as well. You then have two static banners that you can modify from the editor. Following that there's the logo block, that can also be dynamically setup. Last but not least - the footer, one of the pleasant parts about it, the dynamic logo that is setup from the admin panel.

Electronic_store

This state checks for product availability.

Page title

Notes

Electronic_login

Electronic login page hosts both login and signup modules. It offers you the possibility to sign-up/sign-in using your google or facebook accounts. If you want you can test the app using the demo signup/login button.

Page title

Notes

Electronic_profile

This page holds your personal information and more. First menu that you will observe called My account holds info such as your first and last name, within this block you can edit them and your password. Second block called Shipping lists your addresses, you can set up as many addresses as you want but only one can be default. Third is the Orders menu that will store the history of your purchases with detailed info about every item. Last but not least is Wishlist, it stores all the products that you've saved.

Page title

Notes

Electronic_products

Products page will list all the available products on the platform. You are able to filter them using the side menu on the left. Over there you can filter your search by : price, brands and category. On the right side of your screen you have a dropdown with a couple of options for filtering such as: A-Z, Z-A, Newest, Oldest, Highest price, Lowest price.

Page title

Notes

Electronic_product_details

Product_details_page has all the information available for a specific product that you selected. On the left side of the screen you have a carousel with pictures and the main picture, on the right side of the screen you can see the product title, category, number of items left for each color scheme, how many colors are available. You'll be able to modify the quantity, add this product to your cart or wishlist. Down below you will have specifications with descriptions. Two blocks with products that were either recently viewed and related items.

Page title

Notes

Electronic_checkout

On this page you can see a container on the left with information about the customer, which basically is a list of addresses where you want your product shipped. You can either use your default one, select a different one, or use a new address. On the right side of the screen you have information about your order and a button pay which will lead you to a popup where you can choose one of the methods - paypal or credit card.

Page title

Notes

Fashion_store

This is the index of our fashion store, it has several customizable blocks, some of them being dynamic - meaning you can decide what to display there from your admin panel. First is the hero, with generic information. Then you have four blocks that are fully customizable, you can rearrange blocks as per your desire, maintaining the ability to decide what to show within them from our admin panel. Please be advised that for the time being all those elements are fully responsive, and if you decide to modify them, make sure you setup responsiveness as well. You then have two static banners that you can modify from the editor. Following that there's the logo block, that can also be dynamically setup. Last but not least - the footer, one of the pleasant parts about it, the dynamic logo that is setup from the admin panel.

Page title

Notes

Fashion_login

Fashion login page hosts both login and signup modules. It offers you the possibility to sign-up/sign-in using your google or facebook accounts. If you want you can test the app using the demo signup/login button.

Page title

Notes

Fashion_profile

Page title

Notes

Fashion_product

Page title

Notes

Fashion_product_details

Product_details_page has all the information available for a specific product that you selected. On the left side of the screen you have a carousel with pictures and the main picture, on the right side of the screen you can see the product title, category, number of items left for each color scheme, how many colors are available as well as sizes. You'll be able to modify the quantity, add this product to your cart or wishlist. Down below you will have specifications with descriptions. Two blocks with products that were either recently viewed and related items.

Page title

Notes

Fashion_checkout

Page title

Notes

admin

Our admin panel is very powerful and is divided in 6 sections. When you enter the admin panel, you will automatically see the dashboard for the selected shop. The selection happens on the top side of the screen, where you will see a shop name and icon. Whenever you select a shop it will trigger changes in the whole admin panel, and corresponding information will be pulled from the database. Down below you will have a chart with order activity, right after it you'll have a table with detailed information about any order. In the same menu you will have the possibility to see and change a store's currency. Below you'll see lister categories and brands, you can either add/delete a new one or modify the existing one.

Next menu is related to a store's products. Here you will see a list with your existing products which you can search through or sort by a number of options such as : A-Z, Z-A, Newest, Oldest, Left in stock, Highest and lowest prices. Here you can edit or delete a specific product, and within the edit mode you can actually control what shows up in the store, meaning you can either publish or take it off the store using a toggle. You can also control the products that are published using a checkbox in the initial table. In the top right corner you will see two options inbound goods and create a product.

Next menu is called shipping, here you have all the detailed information about products that have been shipped. You can change their status from Processing to Shipped and Delivered. You can also sort them by the same values from the dropdown that is located in your top right corner.

Coming next is the landing page customization. Here you have a couple of controls that can dynamically change content on the website. You can change the logo and landing main page. Next you can create 3 types of layouts out of the existing products in your store. You can either do 4 blocks in one row, 4 blocks in two rows or 5 blocks in one row. You can name your layout section as well. After you've created the layouts you can edit them anytime you want or delete them.

Fifth menu is related to the users registered on the platform. Here you can see general info about them, as well as what order's did they perform.

The last menu from within this panel is a representation of people who have admin rights on the platform. You have the option to update a user name or email, remove the admin rights, or update one's password.

Reusable Elements Description

Reusable element

Notes

Header

This is the top element from the multistore landing page. It contains links that will scroll to the benefits and themes block.

Reusable element

Notes

headerElectronic

This is the top element from the electronicStore landing page. It is used within electronic_checkout, electronic_product_details, electronic_products, electronic_profile pages. Within this element there are two containers that are being visible depending on the width of the page. It is done so for responsive purposes. This header contains a logo, a search bar and a Cart. It also has two groups that are being shown depending on the state of the current user, if he is logged in, you will see the user's name and a picture. If you'll click on either of them a menu will appear with options to navigate to a certain page. It contains Profile, Wishlist, Multistore and Logout options. In case the user isn't logged in, you will be shown Signup and Login.

Reusable element

Notes

mainHeaderElectronic

This is the top element from the electronicStore landing page. It is used only on the electronics_store page. Within this element there are two containers that are being visible depending on the width of the page. It is done so for responsive purposes.This header contains a logo, a search bar, contact info as well as a dropdown with categories, a cart and a wishlist icon. It also has two groups that are being shown depending on the state of the current user, if he is logged in, you will see the user's picture. If you'll click on it a menu will appear with options to either got to your profile or log out. It also contains Products, About us and Multistore options. In case the user isn't logged in, you will be shown Signup and Login.

Reusable element

Notes

footerElectronic

This is the bottom elements of almost all pages. It has within itself the store's logo, contact information and links that you can setup to your preferences.

Reusable element

Notes

item

This is an element used to present a product card on the electronic_store and electronic_product_details pages. It holds all the information needed for a certain product such as product image, price, available colors, category. It has one group focus and one simple group with call to actions such as add to cart and wishlist. Group focus is used to show those CTA's for whenever a user navigates from a desktop app, and the simple group is used for whenever a user navigates from a mobile app. It also has a popup called wishlist that serves as a notification for whenever you wishlist a product. You will notice the addToCart reusable element that is self explanatory.

Reusable element

Notes

shoppingCart

Shopping cart is self-explanatory but I will give you some insights on what you can find there, and what specificity exists on how we built that. First of all it has an html element that defines the style of the scrollbar within the repeating group. Second it has the repeating group itself with all the added products. It offers you the possibility to either go back shopping or checkout. In terms of informations, it shows you the title of the product, the quantity which can be modified, its price, as well as the shipping fee for your order and the total.

Reusable element

Notes

addToCart

Add to cart reusable element pops up when you add something to your cart. It has all the important info about a product such as title, price, color variety and two buttons to Shopping & Go to cart.

Reusable element

Notes

itemClothes

This is an element used to present a product card on the fashion_store and fashion_store_product_details pages. It holds all the information needed for a certain product such as product image, price, available sizes & colors, brand. It has two groups with an add to cart button. One is used to show the button for whenever a user navigates from a desktop app, and the group is used for whenever a user navigates from a mobile app. It was done this way so that you can have different interactions based off the device you're using. You will notice the addToCartClothes reusable element that is self explanatory.

Reusable element

Notes

addToCartClothes

Add to cart reusable element pops up when you add something to your cart. It has all the important info about a product such as title, price, size & color variety and two buttons to Shopping & Go to cart.

Reusable element

Notes

footerClothes

This is the bottom elements of almost all pages. It has within itself the store's logo, contact information and links that you can setup to your preferences.

Reusable element

Notes

mainHeaderClothes

This is the top element from the fashionStore landing page. It is used only on the fashion_store page. Within this element there are two containers that are being visible depending on the width of the page. It is done so for responsive purposes.This header contains a logo, a search bar and icons for your profile, wishlist and cart. If the user is logged in, you will be able to click on the user's icon subsequently a menu will appear with options to go to Profile, Multistore or Logout. You will also see an admin option in case you are the platform's admin.

Reusable element

Notes

shoppingCartClothes

Shopping cart is self-explanatory but I will give you some insights on what you can find there, and what specificity exists on how we built that. First of all it has an html element that defines the style of the scrollbar within the repeating group. Second it has the repeating group itself with all the added products. It offers you the possibility to either go back shopping or checkout. In terms of information, it shows you the title of the product, the quantity which can be modified, its price, as well as the shipping fee for your order and the total.

Reusable element

Notes

wishlistClothes

This reusable element is a notification for whenever a user adds a product to his wishlist. It contains important information about a product such as its picture, title and price.

Reusable element

Notes

adminOption

This reusable element holds within itself all the actions related to the admin's menu from the admin panel.

Reusable element

Notes

categoryEdit

This reusable element holds within itself all the actions related to the dashboard menu from the admin panel. It controls editing of the categories.

Reusable element

Notes

brandEdit

This reusable element holds within itself all the actions related to the dashboard menu from the admin panel. It controls editing of the brands.

Things to Note

All the created states together with the description for them are available in the notes menu. If you double click on the page a window will appear with information about this page. In the top right corner you will notice three icons, the middle one that looks like a dialogue when clicked will open a side panel on the right. Below notes, on the right side you will see a See all text. When clicked on it will unfold all the states that are present in the app. If clicked on any of it, it will redirect you to the page were this state was created.

In case you missed this note earlier, within the app in the Data tab, you can see the description for every field within every data type if you click the chat icon on the right of every data field.

Payments

This app uses two payment gateways: Stripe and Paypal. To set them up is very easy, all you have to do for both Stripe and Paypal is change the keys for development and live version from within the Plugins tab for each payment system. If you have any specific workflows that you want to add, please see the documentation on how to set Stripe Payments in Bubble App.

Also an important detail regarding paypal, whenever you want to push your app live you have to make sure Production mode is checked from within the paypal menu on the checkout page.

Custom Code

Admin page

HTML noScroll - This code is used for styling the scrollbar within the RG finishedOrders.
HTML dropdown - This code is used to make sure all dropdown elements look good on the majority of browsers.
HTML imageStyles - This code performs a specific zoom in hover effect on every element it is attributed to.
HTML product image - This code performs a specific zoom plus glow warp hover effect on every element that gets the id from the html.

Electronic_login & Fashion_store_login

HTML hero - This code makes sure the image is being shown on 100% on the viewport.

Electronic_product_details

HTML styles - This code performs a zoom in effect on the element it is applied.

Electronic_products

HTML styles - This code stores code for styling the dropdowns within the page, as well as zoom image on hover. You can link this piece of code by using the id written in the html and applying it on the element you desire.

Electronic_store

HTML productImage - This code performs a specific zoom plus glow warp hover effect on every element that gets the id from the html.
HTML scroll bar - This code is used for styling the scrollbar within the RG finishedOrders.

Fashion_store

HTML productImage - This code performs a specific zoom plus glow warp hover effect on every element that gets the id from the html.

Fashion_store_product_details

HTML styles - This code performs a zoom in effect on the element it is applied.

Fashion_store_products

HTML styles - This code stores code for styling the dropdowns within the page, as well as zoom image on hover. You can link this piece of code by using the id written in the html and applying it on the element you desire.

item & item_Clothes (reusable elements)

HTML imageStyles - This code performs a specific zoom in hover effect on every element it is attributed to.

shoppingCart & ShoppingCartClothes (reusable elements)

HTML noScrollBar - This code is used for styling the scrollbar within the RG it refers to.

Electronic_store

In the custom event runSwiperGallery, you can observe a run javascript action. It refers to the animation in the hero section when previewing this page.

PreviousBufferly NextEventy - Events like Eventbrite & Meetup Template

Last updated 3 years ago