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 Nuxt! Nuxt helps you build modern web applications. For getting started an Nuxt application you needs two things as Prerequisites.

For getting started an Nuxt application you need 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.

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
  • Npm package manager

    Nuxt 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 Nuxt we suggest you to once go through official documentation of Nuxt from Nuxtjs

    Nuxt setup

    Installing Nuxt

    Before Creating a nuxt-project make sure that you have instlled npx (although it is included in npm v5.2), just make sure that you have installed it.

    Run the below given command to create a nuxt-project:

    npx create-nuxt-app my-project 
                          
    Serve Application
  • 1. Go to the workspace folder (my-project).
  • cd my-project
                          
  • 2. Install Required Dependencies with following command
  • npm install
                          
  • 2. Launch the server by using the command npm run dev
  •  npm run dev
                          
    Build Application
  • 1. Build you application for host on server using below command:
  •  npm run build
                          
  • 2. Now run generate command to create a html files for static hosting
  • npm run generate
                          
  • 3. It will create one .output folder in your theme folder. Make zip of files inside .output folder. so here you are ready to upload your theme on server.
  • If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder by pastng below code
  •  
      Options -MultiViews
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^ index.html [QSA,L]
                            
                            
  • Now upload your dist folder on public folder
  • For further assistance you can follow the official link given by nuxt team.

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

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
  • 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
                            

    If you are facing issues with installing pinia, then you can use --force option to install pinia by force.

    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.
    • Bootstrap 5   :   Multikart made by using Bootstrap for designing.
    • Google Font   :   You can use unlimited Google fonts.
    • 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
    • SwiperJs   :  We have implemented almost all type of sliders using SwiperJs.
    • 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.

    Folder Structured

    Here we represent Vue Folder Structure and Style Customize

    • Multikart Vue
      • nuxt
      • assets
        • css
        • fonts
        • images
        • scss
      • components
        • commonFiles.vue
      • data
        • alljson files
      • layouts
        • default.vue
      • middleware
      • node_modules
      • pages
        • index.vue
      • plugins
        • plugin.js
      • static
      • store
        • modules
        • index.js
      • .eslintrc.js
      • nuxt.config.js
      • package-lock.json
      • package.json

    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

    img1

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

    img1

    Also you can change your color option by click on:

    img3

    Then you just need to click on configuration button

    img3

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

    img4

    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.

    img4

    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.

    Layout Options
    RTL Layout Class:
    rtl
    Dark body class:
    dark

    Customize Demo

    Suppose you want to take only a single demo then you need to follow below steps (for example, you want only kids demo)

    • Now, remove all others demo except kids demo from pages >> shop >> remove all other demo folder except kids folder.
    • Accordingly, you can select header, footer, product-box and cart-popup as per your choice from components and remove others.for more refer component section
    • Also if you wish diffrent product page, collection page as well as blog page then refer pages components and import accordingly in your demo.

    Components

    Header:

    Remove all other headers from components >> header except your choice header and import that header in your demo index.vue file.

    img1
    Footer:

    Remove all other Footers from components >> footer except your choice footer and import that footer in your demo index.vue file.

    img1
    Product-box:

    Remove all other product-box from components >> product-box except your choice product-box and import that product-box in your demo index.vue file.

    img1
    Product-box:

    Remove all other cart-popup from components >> cart-model except your choice cart-model and import that cart-model in your demo index.vue file.

    img1

    Thank You

    Basically Our team will support in
  • Answering your questions, problems regarding theme with best to solving before 24 working hours,once you generate a ticket.
  • Solution of Reported Bug
  • Update you with latest version of theme
  • Apart from that, if you needs any extra / customization work then also you can get in touch with our experts by raising ticket to help you in customize with affordable extra budget.

    Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

    Best Regards

    Pixelstrap

    Hand crafted & made with