Skip to main content

HTML code for e-commerce store

 




To create a simple HTML page for an e-commerce store with a list of products like shoes, watches, shorts, phones, laptops, jewelry, skin beauty products, creams, clothes, and cosmetics, you can structure it as follows:


```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Your E-Commerce Store</title>

    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->

</head>

<body>

    <header>

        <h1>Your E-Commerce Store</h1>

        <nav>

            <ul>

                <li><a href="index.html">Home</a></li>

                <li><a href="products.html">Products</a></li>

                <li><a href="cart.html">Cart</a></li>

            </ul>

        </nav>

    </header>

    

    <main>

        <section class="product-category">

            <h2>Shoes</h2>

            <!-- List of shoe products -->

            <ul class="product-list">

                <li>

                    <img src="shoe1.jpg" alt="Shoe 1">

                    <h3>Shoe 1</h3>

                    <p>Price: $49.99</p>

                    <button>Add to Cart</button>

                </li>

                <!-- Add more shoe products here -->

            </ul>

        </section>


        <section class="product-category">

            <h2>Watches</h2>

            <!-- List of watch products -->

            <ul class="product-list">

                <li>

                    <img src="watch1.jpg" alt="Watch 1">

                    <h3>Watch 1</h3>

                    <p>Price: $99.99</p>

                    <button>Add to Cart</button>

                </li>

                <!-- Add more watch products here -->

            </ul>

        </section>


        <!-- Repeat the above section structure for other product categories -->

        

    </main>


    <footer>

        <p>&copy; 2023 Your E-Commerce Store</p>

    </footer>

</body>

</html>

```


This is a basic HTML template with two product categories (shoes and watches). You should repeat the structure for other product categories like shorts, phones, laptops, jewelry, skin beauty products, creams, clothes, and cosmetics. You'll also need to add images and descriptions for each product and link the "Add to Cart" button to your shopping cart functionality, which is typically handled on the server side or with JavaScript.


Remember to create separate HTML pages for your product details and shopping cart, and use CSS to style your website. This is a starting point, and for a fully functional e-commerce site, you'd need backend programming and a database to manage products, orders, and user accounts.

Comments