Introduction:

Free download ecommerce template, using bootstrap and jquery, responsiv with all mobile resolution, pc and tablet. You find here an index page for your ecommerce site, which you can modify to your functional needs. Our template is composed first of all by two navigation bar. The first nav bar contains the logo of your site, a search box and the list of social media links. The second nav bar is a set of navigation links between the pages that your site contains. Next, you find an article in large plant, with a short description. The display management of your ecommerce site articles are organized by view list in different style, which you can adapt and modify as you want. The template is responsiv with all mobile resolution, pc and tablet

Plant of the guide

At the end of this course, you will be able to:

Prerequisites: (5)

Before starting this guide, you must already have the following skills:

Part 1: how using nav bar one?

The first navbar, is composed by a logo, search box, is a list of your social media, used by your website. The layout of nav bar is use by bootstrap.

            
<header class="row">
    <div class="col-lg">
        <!-- nav bar one -->
        <nav class="container-fluid nav_one">
            <div class="row justify-content-between">
                <!-- web site logo -->
                <div class="sigle_img">
                    <img src="img/logo.png"/>
                </div>
                <!-- search box: bootstrap input group -->
                <div class="search_box">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Enter Your Keyword... ">
                        <div class="input-group-prepend">
                            <!-- search setting -->
                            <select>
                                <option>
                                    Caterories
                                </option>
                            </select>
                            <span class="input-group-text" id="basic-addon1">
                                <img src="img/android-search_icon-icons.com_50501.png"/>
                            </span>
                        </div>
                    </div>
                </div>
                <!-- social media links -->
                <div class="social_media">
                    <div>
                        <img src="img/social_facebook_fb_75.png"/>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>
                        
Part 2: How using nav bar two?

Our second navigation bar is a list of clients, for managing navigation on your site. Each nav bar item is compsé by a bind is a label.

<header class="row">
    <div class="col-lg">
        <!-- nav bar one -->
        <nav class="container-fluid nav_two">
            <div class="row justify-content-between">
                <div class="menu_icon">
                    <img src="img/Menu_icon-icons.com_55865.png"/>
                </div>
                <nav class="nav_bar">
                    <!-- nav bar item -->
                    <div class="nav_bar_item">
                        <!-- nav bar item link -->
                        <a href="">
                            <!-- label -->
                            <em class="label">
                                Home
                            </em>
                        </a>    
                    </div>
                </nav>
            </div>
        </nav>
    </div>
</header>
Part 3: How using article large plan?

Like a modern ecommerce index page, you can view an article in large plant, by are image, are description and are link of shopping. You can change the name of your article, the image, the price is all the other information you find on the template code.

<!-- article in large plan --> 
<section class="row article_grand_plant justify-content-center">
    <!-- image -->
    <div class="image">
        <img src="img/01.jpg"/>
    </div>
    <!-- article description -->
     <div class="desc">
         <div>
             <!-- article categorie -->
             <div class="categorie">
                 <em>
                     Costume
                 </em>
             </div>
             <!-- article title -->
             <h2 class="title">
                 Costume Sweatshirt Sport homme
             </h2>
             <!-- desc -->
             <p>
                 Caractéristiques:, Matière: 60% coton, 40% polyester,
                 Couleur: gris clair, Sexe: Hommes, Taille: XXL, NOTE: 
                 S'il vous plaît comparer les tailles
             </p>
             <!-- shopping button -->
             <input type="button" value="BY NOW" class="btn"/>
         </div>
     </div>
</section>
           
                        
Part 4: How add, delete, update product list view?

Displaying the list of your items on our ecommerce page, is ensure by a collection of list view in modern style. For each style of view list, you find an image, title, price, is all the necessary information for each article in question.

<!-- list view  -->
<div class="container-fluid liste_view_products_one">
    <!-- liste view header -->
    <header class="row justify-content-between">
        <!-- header label -->
        <div class="label">
            Featured Products
        </div>
        <!-- link to all article -->
        <div class="link_all">
            <div>
                <img src="img/1486348532-music-play-pause-control-go-arrow_80458.png"/>
            </div>
            <div>
                <img src="img/1486348532-music-play-pause-control-go-arrow_80458_left.png"/>
            </div>
        </div>
    </header>
    <section class="row justify-content-between">
        <!-- liste view item -->
        <div class="item">
            <div>
                <!-- item status -->
                <div class="status">
                    <div class="row justify-content-between">
                        <div>
                            <span>
                                Sale
                            </span>
                        </div>
                        <div>
                            <span>
                                New
                            </span>
                        </div>
                    </div>
                </div>
                <!-- article image -->
                <div class="image">
                    <img src="img/02.png"/>
                </div>
                <div class="footer row justify-content-between">
                    <div>
                        <!-- item title -->
                        <strong class="title">
                            Women Black Dress
                        </strong>
                        <!-- item revious -->
                        <div class="revious">
                            <img src="img/start_icon.jpg"/>
                            <img src="img/start_icon.jpg"/>
                            <img src="img/start_icon.jpg"/>
                            <img src="img/start_icon.jpg"/>
                        </div>
                    </div>
                    <!-- item price -->
                    <div class="price">
                        <span class="new">
                            $145.50
                        </span>
                        <br/>
                        <span class="last">
                            $170.45
                        </span>
                    </div>
                </div>
            </div>    
        </div>
    </section>
</div>