Shop


The shop view looks like menu page, so do you want to know how to insert your data? Read menu.

		...
		<div class="menu-item">
			<a href="product.html" class="hidden-xs unveil">
				<figure>
					<img src="img/placeholder.png" data-src="img/food/1.jpg" alt="Menu item"/>
					<div class="actions">
						<i class="icon-magnifier-add"></i>
					</div>
				</figure>
			</a>
			<div class="item-description">
				<div class="">
					<div class="">
						<div class="rating">
							<span><span style="width: 80%"></span></span>
						</div>
						<a href="product.html"><h6>Burbon Chicken</h6></a>
						<p>200g</p>
						<div class="price">
							<span class="old-price">$24.90</span>
							<span class="new-price item-price">$22.90</span>
						</div>
						<div class="shop-button"><a href="product.html" class="btn btn-default btn-sm">buy now</a></div>
					</div>
				</div>
			</div>
		</div>
		...
		

Shopping cart view

We presented a sample view shopping cart with added products. Remember it's only view, not working shop. The cart content you find in cart.html. We created 2 cart views, a small view shows on hover at the list category and main cart view. If you want to change styles check cart.less or read more styles.

		small cart view
		<li class="shop-list">
			<ul>
				<li class="shopping">
					<a href="cart.html">Checkout</a>
				</li>
				<li class="shopping">
					<a href="#">Wishlist</a>
				</li>
				<li class="shopping">
					<a href="#">Login</a>
				</li>
				<li class="shopping-cart">
					<a href="cart.html" class="cart">Cart</a>
					<ul class="show-cart">
						<li class="product">
							<a href="product.html" class="img-product">
								<figure><img src="img/food/1.jpg"/></figure>
							</a>
							<div class="list-product">
								<a href="product.html"><h5>Burbon Chicken</h5></a>
								<div class="quantity">1</div>
								<div class="price-product">$22.90</div>
								<div class="remove-product"><i class="icon-close"></i></div>
							</div>
						</li>
		...

		main cart view
		...
		<div class="row cart-item">
			<div class="col-xs-4 col-sm-5 product-name">
				<a href="product.html" class="product-thumbnail"><img src="img/food/th1.jpg" class="" alt=""></a>	
				<a href="product.html" class="name">Burbon Chicken</a>
				<span>Size: M</span>							
				<span>Color: Red</span>
			</div>
			<div class="col-xs-2 product-position product-price">
				<span class="amount">$22.90</span>		
			</div>
			<div class="col-xs-2 product-position product-quantity">
				<div class="quantity">
					<input type="text" step="1" name="" value="1" title="Qty" class="input-text qty text" size="4">
					<input type="button" value="+" class="plus hidden-xs">
					<input type="button" value="-" class="minus hidden-xs">
				</div>		
			</div>
			<div class="col-xs-2 product-position product-subtotal">
				<span class="amount">$22.90</span>		
			</div>
			<div class="col-xs-1 product-position product-remove">
				<a href="#" class="remove" data-djax-exclude="true" title="Remove this item"><i class="icon-close"></i></a>	
			</div>
		</div>
		...
		

Single product

The product page is a view gallery product with full description product and reviews. To add product photos insert url image in product.html. More information about lightbox check here.

		<div class="product-photos">
			<a href="img/blog/post1.jpg" class="open-overlay" rel="product">
				<figure>
					<img src="img/blog/post1.jpg" alt="product item"/>
					<div class="actions">
						<i class="icon-magnifier-add"></i>
					</div>
				</figure>
			</a>
		...
		

To change a main product photo or add data product, find class "product-gallery" and fill the appropriate place.

		<div class="product-gallery menu-item">
			<a href="img/blog/blog2.jpg" class="open-overlay" rel="product">
				<figure>
					<img src="img/blog/blog2.jpg" alt="product item"/>
					<div class="actions">
						<i class="icon-magnifier-add"></i>
					</div>
				</figure>
			</a>
			<div class="product item-description">
				<div class="">
					<div class="">
						<div class="rating">
							<span><span style="width:80%"></span></span>
						</div>
						<h6>Burbon Chicken</h6>
						<div class="product-category">Category: <a href="#">food</a> / <a href="#">chicken</a></div>
						<p>Quisque luctus semper auctor. Duis mattis tristique blandit. Aliquam euismod pellentesque justo ac aliquet.</p>
						<div class="price">
							<span class="old-price">$24.90</span>
							<span class="new-price item-price">$22.90</span>
						</div>
					</div>
				</div>
			</div>
		...
		

Reviews section includes last reviews and review form view. We used owl carousel to show last reviews with author and rating. Slides play automatically but if you want you can change slider option in main.js.

		reviews content
		<div class="owl-carousel" id="reviews-carousel">
			<div class="item">
				<div class="reviews-author">
					<span>John Doe</span>
					<div class="rating">
						<span><span style="width: 100%"></span></span>
					</div>
				</div>
				<div class="reviews-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare turpis urna, ut tincidunt elit molestie ut. Nulla aliquam varius dapibus. Phasellus cursus nibh consequat facilisis molestie. Duis eu erat rutrum mauris elementum aliquam sed tempus dolor. 
					</p>
				</div>
			</div>
		...

		options slider
		var reviews = {
			init: function() {

				var that = this;
				var owl = $("#reviews-carousel");
				
				owl.owlCarousel({
					items: 1,
					loop:true,
					margin:10,
					nav:true,
					autoplay:true,
					autoplayTimeout:5000,
					autoplayHoverPause:true,
					autoplaySpeed: 1500,
					navText: ['<i class="icon-arrow-left"></i>', '<i class="icon-arrow-right"></i>'],
					dots: false,