Introduction:

Download our ecommerce template for free, using jquery and bootstrap with responsiv web design. You find with our template all the components for a true ecommerce index page. First of all, you will find two browsers, one containing your website logo, a search box and some navigation icon. The second bare of navigation, contains a bare of navigation and a list of the links for the information of the contact of your web site. In the following, you will find a view list for displaying items from your store. Finally, you can display an article in large plant with our graphic component. Test a demo version on webi4u.com, and download the full version on our github account.

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 class="container-fluid nav_one">
                        <div class="row justify-content-between">
                            <div class="mobile_icon">
                                <img src="img/menu_icon_02.png" class="menu_icon"/>
                                <img src="img/search_icon.png" class="seach_icon"/>
                            </div>
                            <div class="logo">
                                <img src="img/1280px-Free_logo.svg.png"/>
                            </div>
                            <div class="search_box">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" placeholder="Search" aria-label="Username" aria-describedby="basic-addon1">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">
                                            <img src="img/searchmagnifierinterfacesymbol1_79893.png"/>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <ul>
                                    <li class="icon">
                                        <img src="img/user-outline_icon-icons.com_56871.png"/>
                                    </li>
                                    <li class="label">
                                        Account
                                    </li>
                                </ul>
                                <ul>
                                    <li class="icon">
                                        <img src="img/4544843-business-comerce-delivery-shop-trolley_121443.png"/>
                                    </li>
                                    <li class="label">
                                        Cart
                                    </li>
                                </ul>
                            </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 class="container-fluid nav_two">
                        <div class="row justify-content-between">
                            <nav class="nav_bar">
                                <header>
                                    <img src="img/menu-button_icon-icons.com_72989.png" class="icon"/>
                                    <span class="label">
                                        Categories
                                    </span>
                                </header>
                                <section>
                                    <div class="nav_item">
                                        <em class="label">
                                            Shop Bikes
                                        </em>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                    <div class="nav_item">
                                        <em class="label">
                                            Gears
                                        </em>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                    <div class="nav_item">
                                        <em class="label">
                                            Components
                                        </em>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                    <div class="nav_item">
                                        <em class="label">
                                            Wheels
                                        </em>
                                        <span class="status status_red">
                                            Sale
                                        </span>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                    <div class="nav_item">
                                        <em class="label">
                                            Accessories
                                        </em>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                    <div class="nav_item">
                                        <em class="label">
                                            Groupsets
                                        </em>
                                        <span class="status status_skyble">
                                            New
                                        </span>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                    <div class="nav_item">
                                        <em class="label">
                                            Top Brands
                                        </em>
                                        <span class="status status_maron">
                                            Hot
                                        </span>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                    <div class="nav_item">
                                        <em class="label">
                                            Top Brands
                                        </em>
                                        <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                                    </div>
                                </section>
                            </nav>
                            <div class="contact_info col-lg">
                                <div class="container-fluid pc_display">
                                    <div class="row justify-content-between align-items-center">
                                        <div class="item">
                                            <div class="row align-items-center">
                                                <div class="icon">
                                                    <img src="img/vintage-car-silhouette-of-side-view_icon-icons.com_70578.png"/>
                                                </div>
                                                <div class="label">
                                                    FREE SHIPING
                                                    <br/>
                                                    ON ALL ORDERS
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="row align-items-center">
                                                <div class="icon">
                                                    <div class="container-fluid">
                                                        <div class="row">
                                                            <div>
                                                                <img src="img/planetearth_83728.png"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="label">
                                                    <div class="container-fluid">
                                                        <div class="row">
                                                            <div>
                                                                WORD'S MOST LOVED CYCLE SHOP
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="row align-items-center">
                                                <div class="icon">
                                                    <div class="container-fluid">
                                                        <div class="row">
                                                            <div>
                                                                <img src="img/1497554805-social-media05_84877.png"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="label">
                                                    <div class="container-fluid">
                                                        <div class="row">
                                                            <div>
                                                                NEED HELPS?
                                                                <br/>
                                                                180 000 BICYCLE
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <img src="img/19967.png" class="mobile_icon"/>
                                    </div>
                                </div>
                            </div>
                        </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.

<section class="row article_grand_plan"> 
                <div class="col-lg"> 
                    <div style="
                             position: absolute;
                             left: 0;
                             top: 0;
                             width: 100px;
                             height: 100%;
                             background-color: #eeeeee;
                             "> 
                            
                        </div> 
                    <div class="container-fluid" style="position: relative"> 
                        <div> 
                        <div class="label"> 
                            <span> 
                                TODAY’S DEAL
                            </span> 
                        </div> 
                        <div> 
                            <em class="categorie"> 
                                BURBERRY
                            </em> 
                        </div> 
                        <div class="title"> 
                            <strong> 
                                Sample: Naminos elementum an disus tincidunts
                            </strong> 
                        </div> 
                        <div class="revious"> 
                            <img src="img/Star-icon.png"/> 
                            <img src="img/Star-icon.png"/> 
                            <img src="img/Star-icon.png"/> 
                            <img src="img/Star-icon.png"/> 
                        </div> 
                        <p> 
                            Nam tempus turpis at metus scelerisque 
                            placerat nulla deumantos solicitud felis.
                            Pellentesque diam dolor, elementum etos
                            lobortis des mollis ut risus. 
                            Sedcus faucibus an sullamcorper mattis drosti...
                            Nam tempus turpis at metus scelerisque 
                            placerat nulla deumantos solicitud felis.
                            Pellentesque diam dolor, elementum etos
                            lobortis des mollis ut risus. 
                            Sedcus faucibus an sullamcorper mattis drosti...
                        </p> 
                        <div class="price"> 
                            <span class="last_price">  
                                $145.50
                            </span> 
                            <span class="new_price">  
                                $105.20
                            </span> 
                        </div> 
                        <div> 
                            <input type="button" value="SHOP THIS DEAL" class="btn" style="
                                   background-color: blue;
                                   color: white
                                   "/> 
                            <input type="button" value="DETAILS" class="btn" style="
                                   background-color: white;
                                   color: black;
                                   font-weight: bold;
                                   border: gray 1px solid
                                   "/> 
                        </div> 
                    </div> 
                    </div> 
                </div> 
                <div class="col-lg"> 
                    <img src="img/1.jpg" class="image"/> 
                </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.

<div class="col-lg liste_view_article_one">
                    <header class="container-fluid">
                        <span class="label">
                            NEW PRODUCTS
                        </span>
                        <br/>
                        <a href="">
                            View All
                        </a>
                    </header>
                    <section class="container-fluid">
                        <div class="row justify-content-between">
                            <div class="item">
                                <div>
                                    <span class="status">
                                        Sale
                                    </span>
                                    <img src="img/1.jpg" class="image"/>
                                    <div class="title">
                                        <strong>
                                            BURBERRY
                                        </strong>
                                    </div>
                                    <p>
                                        Download free, an index page for an ecommerce website, with 
                                    </p>
                                    <div class="revious">
                                        <img src="img/Star-icon.png"/>
                                        <img src="img/Star-icon.png"/>
                                        <img src="img/Star-icon.png"/>
                                        <img src="img/Star-icon.png"/>
                                        <img src="img/Star-icon.png"/>
                                        <img src="img/Star-icon.png"/>
                                    </div>
                                    <div class="price">
                                        <span class="last_price">
                                            $145.50
                                        </span>
                                        <span class="new_price">
                                            $100.90
                                        </span>
                                    </div>
                                    <button class="btn"> 
                                        ADD TO CARD
                                    </button>
                                </div>
                            </div>
                        </div>
                    </section>
</div>