We are pleased that you have chosen MULTIKART React 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 CSS3 and works perfectly fine in all the browsers.
Multikart theme include 16 inner pages, 10 product pages, and 3 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!
When you unpack downloaded archive from ThemeForest.net you'll get folder containing 4 folders.
There are followings basics packages you should install before go further.
<html lang="en" dir="rtl">
<body class="rtl">
<!-- Vertical Menu -->
<ul id="sub-menu" class="sm sm-rtl pixelstrap sm-vertical ">
Multikart include 12 color option, You need to change index.scss.
@import 'scss/color1';
@import 'scss/color2';
... as on
If you want to use another color, change $theme-deafult variable in style scss
$theme-deafult: #ff4c3b;
<!--Google font-->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<!-- Brand Logo -->
<div className="brand-logo">
<Link to={`${process.env.PUBLIC_URL}/`}> <img src={`/assets/images/icon/logo.png`} class="img-fluid" alt="" /></Link>
</div>
<!-- footer logo -->
<div className="footer-logo">
<img src={`/assets/images/icon/logo.png`} alt="" />
</div>
Vertical & Horizontal menu
<!-- Vertical Menu -->
<ul id="sub-menu" className="sm pixelstrap sm-vertical ">
...
</ul>
<!-- Horizontal menu -->
<ul id="main-menu" className="sm pixelstrap sm-horizontal">
..
</ul>
Dropdown and Mega menu
<!-- dropdown menu -->
<li><a href="#">pages</a>
<ul>
..
</ul>
</li>
<!-- mega menu -->
<li className="mega"><a href="#">Home</a>
<ul className="mega-menu">
<li>
..
</li>
</ul>
</li>
Multikart theme include 2 types of buttons
<a href="#" className="btn btn-solid">shop now</a>
<a href="#" className="btn btn-outline">shop now</a>
<!-- Title 1 -->
<div className="title1">
<h4>recent story</h4>
<h2 className="title-inner1">trending products</h2>
</div>
<!-- Title 2 -->
<div className="title2">
<h4>recent story</h4>
<h2 className="title-inner2">trending products</h2>
</div>
<!-- Title 3 -->
<div className="title3">
<h4>recent story</h4>
<h2 className="title-inner3">trending products</h2>
<div className="line"></div>
</div>
<!-- Title 4 -->
<div className="title4">
<h2 className="title-inner4">trending products</h2>
<div className="line">
<span>
</span>
</div>
</div>
<div className="footer-end">
<p><i className="fa fa-copyright" aria-hidden="true"></i> {{today | date:'y'}} theme forest powered by pixelstrap</p>
</div>
Located in /src/api/shop.js file.
import _products from './data.json'
const TIMEOUT = 100
export default {
getProducts: (cb, timeout) => setTimeout(() => cb(_products), timeout || TIMEOUT),
buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT)
}
<!-- Sample json data -->
[{
"id": 1,
"name": "Flare Dress",
"price": 100,
"salePrice": 200,
"discount": 50,
"pictures": ["assets/images/fashion/product/1.jpg", "assets/images/fashion/product/21.jpg", "assets/images/fashion/product/36.jpg", "assets/images/fashion/product/12.jpg"],
"shortDetails": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
"stock": 5,
"new": true,
"sale": true,
"category": "women",
"colors": ["yellow", "gray", "green"],
"size": ["M", "L", "XL"],
"tags": ["nike", "caprese", "lifestyle"],
"variants": [
{
"color": "yellow",
"images": "assets/images/fashion/product/1.jpg"
},
{
"color": "gray",
"images": "assets/images/fashion/product/21.jpg"
},
{
"color": "green",
"images": "assets/images/fashion/product/36.jpg"
}]
}]
if you do want second image in product, Add Back div in product-list-item.jsx file
<!-- front image -->
<div class="front">
<a href="#"><img src="assets/images/pro3/1.jpg" class="img-fluid" alt=""></a>
</div>
<!-- hover back image -->
<div class="back">
<a href="#"><img src="assets/images/pro3/2.jpg" class="img-fluid" alt=""></a>
</div>
if you do no want thumbanail image in product, Remove Code product-list-item.jsx file
{product.variants.map((vari, i) =>
<li className={`grid_thumb_img ${(vari.images === this.state.image)?'active':''}`} key={i}>
<a href="javascript:void(0)" title="Add to Wishlist">
<img src={`${vari.images}`} onClick={() => this.onClickHandle(vari.images)} />
</a>
</li>)
}
</ul>
Located in /src/components/layouts/fashion/instagram.jsx file.
componentWillMount() {
const instagram = ig({
accessToken: 'YOUR_ACCESS_TOKEN',
});
const users = instagram.media();
users.then(res => this.setState({InstaData:res.data}));
}
Located in /src/components/checkout/index.jsx file.
StripeClick = () => {
var handler = (window).StripeCheckout.configure({
key: 'pk_test_glxk17KhP7poKIawsaSgKtsL',
locale: 'auto',
token: (token: any) => {
console.log(token)
this.props.history.push({
pathname: '/order-success',
state: { payment: token, items: this.props.cartItems, orderTotal: this.props.total, symbol: this.props.symbol }
})
}
});
handler.open({
name: 'Multikart',
description: 'Online Fashion Store',
amount: this.amount * 100
})
}
Located in /src/components/checkout/index.jsx file.
const client = {
sandbox: 'PAYPAL_SANDBOX_KEY',
production: 'PAYPAL_PRODUCTION_KEY',
}
if you do no want color scheme, Remove color script in /src/components/common/headers/footer-one.jsx file.
if you do no want RTL for live preview, Remove code in /src/components/common/headers/footer-one.jsx file.
Add class in Parent child
If you want parallax image, Add class in Parent child
If you do not want color swatches, add class "no-color-varient" in parent child