Plugins
Templates

Multistore - E-commerce Like Shopify Template

Template page link: https://zeroqode.com/template/multistore---e-commerce-like-shopify-template-1596551555367x391902822380424200

Introduction

Multistore - E-commerce Like Shopify is an e-commerce solution that you can use to build various online stores. Currently, the pack contains two templates (more to come) - one built for the fashion industry and the other is focused on electronic products. Multistore as a platform was designed from the ground up for building authentic and functional online stores and provides plenty of elements and powerful features that you can configure based on your personal needs.

Features

  • Landing page

  • Electronics Store

  • Fashion Store

  • Admin dashboard

  • Inventory Management

  • Payments via Stripe and Paypal

  • Quick product view

  • Quick product search

  • Responsive design

Data Types

Data structure contains database related information about data types.

Brand

This data type holds within itself information about a brand.

Category

This data type holds information about categories presented for each type of shop.

ClothesOptions

This data type holds information about fashion_store products.

FinishedOrder

This data type stores information about a user finished orders.

LandingBlock

This data type stores within itself information about blocks that can be dynamically manipulated from our admin panel.

Product

This data type is used to store all the information possible for a specific product.

ProductColorSize

This data type is created so that we can have quantitative information about a product.

ProductOption

Product option data type stores a detailed information about specific features a product has.

ShippingInfo

This data type contains information about a user's shipping information.

Shop

This data type stores within itself information about a shop.

Shopping Cart

This data type holds lists of shopping cart items a user has created.

Shopping Cart Item

This data type stores information about an item that you're about to add to your cart.

SubscriptionRequest

This data type stores all the users that required subscription, on the bottom of either the store or fashion storeю

User

This data field store information about user that will register on your platform.

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.

Pages Overview

Pages description will list all pages of the web application whilst describing the purpose of the page.

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.

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_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. This page let's you test the app using the demo signup/login button which can be removed upon purchasing.

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.

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.

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.

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.

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.

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. This page let's you test the app using the demo signup/login button which can be removed upon purchasing.

fashion_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.

fashion_product

Products page will list all the available fashion 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.

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.

fashion_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.

admin

Template has an admin panel which 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.

404

This page comes up whenever the user search couldn't be located on the server.

reset_pw

This page is for cases when user wants to reset his password.

Reusable Elements Overview

Reusable elements description should provide information details about reusable elements inside the application.

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

This section represents things like, Custom Code or Javascript used in app , Payment Integration etc. It is recommended to have intermediate knowledge with Bubble and basic js and css knowledge to tweak this part. 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 side in data field.

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.

🔐 Admin Rights

For security purposes, this template has limited rights for potential customers. Meaning, you will not be able to use the admin features at its fullest until you purchase the template and enable admin rights.

Note: Users will not be able to access the admin page unless being granted the admin rights.

Tip: It is possible to access the admin panel via Demo Admin user. But, for security purposes, the features are not enabled unless purchasing the template and turning this feature on.

In order to grant the admin rights, please follow the instruction below.

1. Go to admin page -> Data -> App data -> All Users tab. Select any user record and edit it. Set the Admin field to yes:

Grant the admin rights

Note: Remember to hit the SAVE button.

Now, you will be able to access the admin panel and use its features at the fullest because this On page load event is passing the condition, so the user will not be redirected to the index page:

Page access restriction (on page load)

Congrats! You have successfully granted the admin rights. Now you can use all the admin page and its features as an admin user.

💳 Payments

Note: Unfortunately, for technical reasons testing Paypal payments in this template is temporarily unavailable.

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.

Payments: 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 & eashion_store_login

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

electronic_product_details page

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

electronic_products page

  • 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 page

  • 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 page

  • 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 page

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

fashion_store_products page

  • 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 page

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.

Demo to preview the template