Plugins
Templates
Blocks
Template Setup Guides

InstaMart - Groceries LIke Instacart Template

Template page link: https://zeroqode.com/template/instamart---groceries-like-instacart-template-1536665740622x394645439700008960

Introduction

InstaMart is a no-code template replicating Instacart's core features for delivering groceries from various supermarkets. Use this template for any application that has delivery of products as a main service. Users can find supermarkets near their locations, browse products offered by that supermarket, add them to a shopping cart and pay with a card. The template comes with a powerful admin panel to manage supermarkets, products etc.

Features

  • Landing page

  • Admin dashboard

  • Stripe integration for credit card payments

  • Integrated API Connector

  • Responsive design

  • Search feature using postal code of a location.

Data Structure

User

User table contains user profile info(name, email, picture, contact, etc.) and location details. In addition to this, user could either be a store user or not and also have a list or favorite items.

Stores

Users can upload stores with details such as the address, a header image, logo, name and zip code. All this fields are always associated to a particular user.

Department

Within a store, a user can have departments which could also be seen as aisles in a supermarket. A user can give each department a name and an image.

Department_Store

A user can always have a department associated with a store and also determine active departments by having details like the department, the store it is associated with and an active field with value set as either Yes or No.

Article

The article is the product users have under a department within their stores. This allows the user to provide information about the products that include the nameof the article, amount or quantity in stock, the brand, price, an image, the sale_price , sale that takes the value of either Yes or No which determines a sold item and the associated department and store.

Order

Users can get orders for their products and the order data table allows for proper handling of ordered items by taking details of an order that include the delivery_time, delivery_date, address, further instructions on how the order should be treated, business name(optional) of the shopper, phone number, total price of all ordered items and the stores associated with those items.

Order_Status

Users can also manage the status of an article.

Shopping Cart

The data table takes details of all the products that has been put on the cart by the shopper. These details include the amount of the product, the item itself, the order data during checkout , the Ordered field that takes the value of either Yes or No, the total price of items on the cart and the store associated with each item.

Pages

This template has seven (7) pages and some reusable elements. The pages include:

index

This is the landing page for the template where an overview of the application is found along with a call to action for user registration in the case of new users, a search element, a list of partners and some other information on the reusable element (footer).

Custom state

States

Elements

Note

Show shopping cart

Header Home A

This sets the shopping cart to be visible when true.

dashboard

This page is the admin panel where the user with required privilege can manage store products and details. It is grouped into three tabs that include:

Store

Within this tab, changes can be made to the store logo, header image, store information, delivery region and departments.

Order

Information about the orders that have been placed is found on this tab.

Articles

This tab gives the user access to create new articles, edit and delete existing ones.

Custom States

States

Elements

Note

nav

dashboard

nav sets and displays the navigation bar.

Edit_Mode

Popup Article

Within the articles tab view, this state sets the view and displays the dialog box when the button new is clicked.

Order

Popup Order Detail

When the Order view is active on the tab, this state sets and displays the view when a list item is clicked

Amount

Popup Article

Sets the value of amount in the Popup Article

Brand

Popup Article

Sets brand value

Department

Popup Article

Sets Department value

Image

Popup Article

Sets the image in the Popup Article

Name

Popup Article

Sets the Name value

Price

Popup Article

Sets the the Price

Article

Popup Article

Sale_Price

Popup Article

Sets and calculates the sale price value

Sale

Popup Article

Sets sale to true or false

Featured

Popup Article

Sets featured to true or false.

myaccount

This page houses user specific details that includes the following:

  • My Profile

  • Orders

  • Favorites

The above three are grouped in a tab format and on clicking one item the residing information is displayed on the Repeating group on the page. Also, within this page, the user can make changes to user information.

Custom States

States

Element

Note

menu

myaccount

The menu state is used to change views

Show shopping Cart

Header Home A

Sets the navigation bar if true

edit

myaccount

Also used to change views to display the edit profile form.

stores

This is a dynamic page that shows the stores within the searched postal code. Available stores can also be filtered using a list of keywords found above the search results. These keywords aids a faster search as a user can indicate not just the store they want their delivery from but also what department in a store they would like to make a purchase in.

Custom States

States

Element

Note

Show shopping Cart

Header Home A

Sets and displays navigation bar if true

department

Text Department

This state is used to alternate between two views, a collapsed panel of departments and a dropdown panel of visible departments.

store

Signup/ Login Popup A

Sets and displays the view for a store

Store_Page

Signup/ Login Popup A

Used for changing views.

checkout

The checkout page is where the user fills in the information about the delivery address, delivery time and instructions. Also, within this page, the user can make last minute changes like increasing and decreasing of quantity of products to completely removing an item from the the cart.

Custom States

States

Element

Note

Show shopping Cart

Header Home A

Sets and displays the navigation bar if true

Date

Input Delivery Time Field

This state is used to calculate the delivery date

Selcted Date

Input Delivery Time Field

Also used to calculated the selected date

index_olld

This is a different and older design of the index page.

store

This page houses details about a particular store and it gets its contents from the list in the data Stores. It is grouped into tabs that include: Home, Departments and Products. It also contains a product logo and a search feature.

Custom States

States

Element

Note

page

Store Nav A

This state sets which view is visible on the menu bar

Store Logo

Header Store A

Sets the logo on the navbar

Store Name

Header Store A

Sets and displays the store name

Popup Item

store

Also displays a popup article

Show My Account

Header Store A

This state displays a view

Show Shopping Cart

Header Store A

Displays shopping cart if state is true

store

Signup/ Login Popup

The store state displays a popup of the signup and login

Departments States

Group Filter with State

This state sets and displays the departments filtered in the search.

Brand

Group Filter with State

Sets and displays the brand

Sale

Group Filter with State

Determines a product for sale.

Item Count

store

This is used to calculate the number of departments in a store

all

Department Filter

Sets and displays all the departments

Count

RepeatingGroup Item Sale

This state is set when the number of items in the dropdown changes

Higher

Dropdown Sort by

Sets the dropdown for departments to sort by higher if true

Specific Reference

Payments

To setup your stripe account, go to stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.

Click on Developers and then, API keys. copy your API keys. Ensure to use a live API key when your template goes live

Paste the API keys in the stripe connector calling the plugin.

Demo to preview the template