Introduction:

Download free responsiv index page for an e-commerce web site, using html 5, jquery and bootstrap. You find with our template three bare navigation at the header level. As a result, and as a modern e-commerce index page, you will find a nice experience for displaying a large plant article, which you can modify to suit your needs. Finally, our template allows you to list your products, on a list view responsiv, composed by a product image, title, taken, description and link to shop now. Test a demo version on our website webi4u.com, and download the free template on github

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: e-commerce theme layout.?

you find that our template is composed by three nav bar, article grand plant, products list view header and products list view content.

            
<body class="container-fluid">
    // e-commerce header
    <header class="row">
        <div class="col-lg">
            // nav bar one
            <nav class="container-fluid">
            </nav>
            
            // nav bare two
            <nav class="container-fluid">
            </nav>
            
            // nav bar three
            <nav class="container-fluid">
            </nav>
        </div>
    </header>

    // e-commerce article grand plan
    <section class="row three_article">
    </secton>
    
    // products liste view nav bar
    <nav class="row justify-content-center categorie_article">
    </nav>
    
    // products liste view content
    <section class="row liste_article justify-content-center">
    </secton>
</body>    
Part 2: How update and use e-commerce three nav bar.?

the bare navigation of our template, is composed by three item, one for the contact information, the second for the site map navigation, and the last for the search box page

<body class="container-fluid">
    // e-commerce header
    <header class="row">
        <div class="col-lg">
            // nav bar one
            <nav class="container-fluid">
                <div class="row justify-content-between">
                    // item one
                    <div class="mobile_navs">
                        <em>
                            // make a text
                        </em>
                    <img src="img/menu_icon.png"/>
                    </div>
                    // item tow
                    <div class="item">
                        <img src="img/location-alt-512.png"/>
                        <em>
                            3 RUE EL BENEPSEJ 2014 PARIS FRANCE
                        </em>
                    </div>
                    // item three
                    <div class="item">
                    </div>
                </div>
            </nav>
            
            // nav bare two
            <nav class="container-fluid">
                <div class="row justify-content-between">
                    // item one
                    <div class="mobile_navs">
                    </div>
                    // item two
                    <div class="item">
                    </div>
                    // item three
                    <nav class="col-lg item">
                    </nav>
                </div>
            </nav>
            
            // nav bar three
            <nav class="container-fluid">
                <div class="row justify-content-center align-items-center">
                    // only one item
                    <div class="col-lg-7">
                    </div>
                </div>
            </nav>
        </div>
    </header>
</body>