Introduction

Welcome to Multikart Vue!

We are pleased that you have chosen MULTIKART Vue theme for your site and we will not disappoint you with your choice. MultiKart is an excellent theme develop with a concise approach. The code written is a clean and well structured.

MultiKart is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

MultiKart theme template is build focusing on HTML and SCSS and works perfectly fine in all the browsers and it's No jQuery!

Multikart theme include 16 Home page layouts, 35+ inner pages, 10+ product pages, and 9+ shop pages.

We request to have a look at our MultiKart manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

Getting started

Welcome to Vue! Vue helps you build modern applications for the web, mobile, or desktop.

For getting started an Vue application you needs two things as Prerequisites.

Prerequisites

Before you begin, make sure your development environment includes Node and an npm package manager.

Node.js

Download latest version of node.js from nodejs.org.

Npm package manager

Vue CLI, and Vue apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

For better understanding Vue we suggest you to once go through official documentation of Vue from Vuejs.org

Vue setup

Installing Vue CLI

You use the Vue CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks as it is a progressive framework for building user interfaces.

Install the Vue CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g @vue/cli 
                      

For Nuxt.js use:

npm i npx 
                      

Create Initial application

npx create-nuxt-app  
                      

Serve Application

cd my-project
                      

 npm run dev
                      

Build Application

 npm run build
                      

 
  Options -MultiViews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [QSA,L]
                        
                        

Making Sub-folder on Server

 
  export default = {
    mode: 'spa',
    subdirectory: '/multikart/'
  };
                        
                        

 
  router: {
    base: '/multikart/'
  }
                          
                          

 npm run build
                        

 
  Options -MultiViews
  RewriteEngine On
  RewriteBase /multikart/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [QSA,L]
                          
                          

Multikart setup

If you have already download and install node.js and Vue CLI then ignore prerequisites accordingly.

Prerequisites

Node.js

Download latest version of node.js from nodejs.org.

Vue CLI

Install Vue CLI Using:

npm install -g @vue/cli 
                        

For Nuxt.js use:

npm i npx 
                      

Setup Multikart theme by

• 1) Download and extract multikart theme from themeforest
• 2) Extract it and then go in to theme folder.

cd theme
                      

• 3) Import all dependency by installing npm command

npm install
                      

• 4) Now you are in stage to successfully run multikart using below command:

npm run dev
                      

Theme Features

• Responsive Design   :   Looks great on desktops, laptops, tablets and mobiles. Give it a try on your iPhone or iPad now.
• RTL Supported   :   All inner pages of Multikart are RTL supported.
• Made with Sass   :   Multikart is made with sass.
• Customizer   :   Customize your dream theme by manuplutaing single config file.
• Vue Bootstrap 2.1.0   :   Multikart made by Vue boostrap latest version.
• Google Font   :   You can use unlimited Google fonts.
• Firebase   :   Integration of firebase for checking authentication.
• Advance Lookbook   :   This theme allows you to put your own Lookbook on Homepage or a Lookbook Page.
• Amazing Mega-menu   :   A completely different mega-menu with powerfully functionality and flexible layout.
• Product Hover Variation   :   This theme has 8+ product hover variations
• vue-awesome-swiper   :   We have use for all sliders.
• vue2-filters   :   We have use it for filters like currency and orderby.
• Pagination   :   First 12 product display on shop page after than product show by paginate.
• Add to Cart   :  When click on add to cart button, product added in cart page and also display on header cart .
• Quick-view   :   Every product has Quick view modal popup.
• Wishlist   :   Click on wishlist button, product added in wishlist.
• Product Compare   :   Click on Compare button product added in compare list , maximum 4 product allow to add.
• Product Details   :  Every Product have individual details page and 10+ different product pages, and you can any use details page.
• One Page Checkout   :  In product details page added buy now it's re-direct checkout page with selected product.
• Shop Page   :  We have added 9+ different shop pages, and you can any use shop page.
• Filter   :  Various Different type of custom filter (tags, color, size, category. price) it's customizable, you can customize by your logic.
• Payment Method   :  We have added two payment method paypal and stripe.js for checkout.
• Blog Page   :  There three different blog variation pages.
• Inner Page   :  Multikart theme include 35+ inner pages.
• Multi-Browser Support   :   Multikart has multi browser support.

Theme Customize

Layouts

We have provided a bunch of demo layouts and header layouts that can be implemented with just a options change to body!

For creating your dream layout open customizer by click on setting icon

You can change your layout version i.e. RTL and LTR by click on :

Also you can change your color option by click on:

Then you just need to click on configuration button

Configuration popup will be open then just copy config which is in popup model

Now go to our theme >> data >> config.json and then just replace complete config.json with your new configuration and re-run theme using npm run serve.

Please refer the below table for corresponding classes. it is just for your inforamation you do not need to bother about this it's dynamically take particular classes according to your needs.