Table of Contents

Introduction

  1. Package files content.
  2. HTML/CSS templates, definition and usage.

Different usage of this mobile template

  1. Creating a mobile website, redirecting from your desktop website to the mobile one.
  2. Creating a web app, difference between web app and native app.
  3. Converting it into a native app.

Editing this template

  1. Left Slide Menu
  2. Fixed Header
  3. Product Section With Swipe Slider
    1. Swipe Slider Code
    2. Product Card
    3. Price in Cart

CSS files

JavaScript files

Sources and Credits

W3C Validation

Created: 24 Feb 2018
Last Updated: none
Current Version: 1.0

Thank you for purchasing Instashop mobile HTML & CSS template ecommerce. There is a Instashop Documentation HTML & CSS Template.
If you have any questions that are beyond the scope of this help file, please feel free to comments to this post. We are glad to help you.

Buy on Envato

Introduction

1. Package files content.

The package you downloaded from themeforest include the following structure:

The main HTML file main.html will open the preview Main page mobile design of instashop ecommerce template.
The preview folder includes the files just for the preview page.

There are main design available for Instashop template:

  1. The main design found inside the “main” folder.

Once you decided which design you will use for your website/app just copy the files inside one of this folders. The main file of you website will be the main.html file found in each folder of design. Below you can see the files included in one design, for example the “main” folder one.

Where main.html is the home page.


2. HTML/CSS templates, definition and usage.

A HTML/CSS Template is a pre-designed layout that will help you build a final website.

HTML is the basic coding to create web pages. CSS stands and it’s used to define and style the HTML elements.

To install a HTML/CSS template requires just to copy the template files on your webserver.

This can be done using your hosting provider custom interface or a FTP software.

A regular HTML/CSS template does NOT include a CMS to edit/add content of the pages. All content is edited using a HTML editor.

HTML editors can be found as free and paid editors.

Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited.

Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge.

Editing this template

1. Left Side Slide Menu

Left Side Slide Menu – Instashop
Instashop Documentation HTML & CSS Template

This code is responsible for working and displaying the Left Side Slide Menu

<div id="mySidenav" class="sidenav">
    <div class="relative-container">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><img src="/images/icons/black/close-black-icon.svg" alt="..."></a>
        <img class="logo-menu" src="/images/Logo.svg" alt="...">
        <input type="search" name="search" placeholder="search" class="search">
         <ul class="menu">
            <li class="menu-item"><a href="main.html">Home</a></li>
            <li class="menu-item"><a href="product.html">Product</a></li>
            <li class="menu-item"><a href="category.html">Category</a></li>
            <li class="menu-item"><a href="page.html">Page</a></li>
            <li class="menu-item"><a href="post.html">Post</a></li>
            <li class="menu-item"><a href="cart.html">Cart</a></li>
            <li class="menu-item"><a href="checkout.html">Checkout</a></li>
            <li class="menu-item"><a href="profile.html">Profile</a></li>
            <li class="menu-item"><a href="favorites.html">Favorites</a></li>
            <li class="menu-item"><a href="elements.html">Elements</a></li>
            <li class="menu-item"><a href="signin.html">Sing in</a></li>
        </ul>
        <div class="menu-footer">
        <div class="social row">
            <a class="col"><i class="fa fa-facebook-square"></i></a>
            <a class="col"><i class="fa fa-twitter"></i></a>
            <a class="col"><i class="fa fa-pinterest"></i></a>
            <a class="col"><i class="fa fa-google-plus"></i></a>
            <a class="col"><i class="fa fa-envelope"></i></a>
        </div>
            <p class="copyright text-center">
                Instashop.<br>
                Theme inspired by UI / UX instagram<br>
                Made by Wondermedia.ru
            </p>
        </div>
    </div>
</div>

Fixed Header

Fixed position of menu using by CSS class fixed-top. Remove it or Add it for fixed or not fixed position of menu

<nav id="navbar" class="row navbar fixed-top header-nav">
    <div class="col menu">
    <span style="cursor:pointer" onclick="openNav()"><img src="/images/icons/outline/menu-outline-icon.svg" alt="..."></span>
    </div>
    <div class="col logo text-center align-middle">
    <img src="/images/Logo.svg" alt="...">
    </div>
    <div class="col personal text-right">
    <a href="signin.html"><span style="cursor:pointer"><img src="/images/icons/outline/user-outline-icon.svg" alt="..."></span></a>
    </div>
</nav>

Pruduct Section With Swipe Slider

Swipe Slider Code

Insert your photos inside the div class=”swiper-slide”

<div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide"><img data-name="product_image" src="/images/fashion/750x750/instashop_wondermedia_ru_image_product_125.jpg" alt="..."></div>
    <div class="swiper-slide"><img data-name="product_image" src="/images/fashion/750x750/instashop_wondermedia_ru_image_product_124.jpg" alt="..."></div>
    <div class="swiper-slide"><img data-name="product_image" src="/images/fashion/750x750/instashop_wondermedia_ru_image_product_123.jpg" alt="..."></div>
    <div class="swiper-slide"><img data-name="product_image" src="/images/fashion/750x750/instashop_wondermedia_ru_image_product_126.jpg" alt="..."></div>
</div>

 

Product card

This code response all other content inside your product card.

Icons is contained in the

<img class="w-bar-icon w-icon-heart-outline" src="/images/icons/outline/heart-outline-icon.svg" alt="...">
<a href="/product.html#reviews">
<img class="w-bar-icon w-icon-comment-outline" src="/images/icons/outline/comment-outline-icon.svg" alt="...">
</a>

Count Sales is contained in the

<div class="sales-count col-12">Sales: <span>350</span> times</div>

Product description is contained in the

<p class="w-product-desc">Your Description</p>

Full Example

<div class="container">
  <div class="row action-container cd-single-item">
    <div class="icons col-6">
        <img class="w-bar-icon w-icon-heart-outline" src="/images/icons/outline/heart-outline-icon.svg" alt="...">
        <a href="/product.html#reviews"><img class="w-bar-icon w-icon-comment-outline" src="/images/icons/outline/comment-outline-icon.svg" alt="..."></a>
    </div>
    <div class="col-6 text-right parent cd-customization">
        <button class="add-to-cart sc-add-to-cart  btn btn-success btn-sm text-right pull-right">
            <span>Add to Cart</span>
            <svg x="0px" y="0px" width="92px" height="32px" viewBox="0 0 92 32">
                <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
            </svg>
        </button>
    </div>
  </div>
  <div class="row">
      <div class="sales-count col-12">Sales: <span>350</span> times</div>
  </div>
<div class="row">
      <div class="col-12">
            <p class="w-product-desc" data-name="product_desc">Our planet is something unbelievable. It is so diverse and beautiful, so unique and controversial. Earth is worth our admiring. The easiest way to explore all wonders and unique places of our planet is travelling</p>

Price in Cart

This Code response for the price in JS cart. You must add you price inside the tag value=”yourprice”

<input name="product_price" value="90" type="hidden" />
  <input name="product_id" value="12" type="hidden" />

JavaScript Files

<!-- Include jQuery JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Include Slider JS -->
<script src="js/swiper.min.js"></script>
<!-- Include SmartCart JS -->
<script src="js/jquery.smartCart.js"></script>
<!-- Include Main Scripts JS-->
<script src="js/main.js"></script>

Sources and Credits

DEMO RESOURCES:

W3C Validation

All files include in tamplate are Validated by W3C Validator