Start learning

Ecommrce Free Templates

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.


Simple Ecommerce website Templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-commerce Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
    <aside id="sidebar">
        <h2>Menu</h2>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </aside>

    <main>
        <header>
            <h1>Our Shop</h1>
        </header>
<section id="home">
            <h2>Welcome to Our Shop!</h2>
            <p>Explore our collection of amazing products.</p>
        </section>

        <section id="products">
            <h2>Our Products</h2>

            <div class="product">
                <h3>Product 1</h3>
                <p>Price: $19.99</p>
                <p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <button onclick="addToCart('Product 1', 19.99)">Add to Cart</button>
            </div>

            <div class="product">
                <h3>Product 2</h3>
                <p>Price: $29.99</p>
                <p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <button onclick="addToCart('Product 2', 29.99)">Add to Cart</button>
            </div>

            <div class="product">
                <h3>Product 3</h3>
                <p>Price: $39.99</p>
                <p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <button onclick="addToCart('Product 3', 39.99)">Add to Cart</button>
            </div>
        </section>
    </main>

<aside id="cart">
        <h2>Shopping Cart</h2>
        <ul id="cart-items"></ul>
    </aside>
</div>

<section id="contact">
    <h2>Contact Us</h2>

    <form id="contact-form">
        <label for="product">Select Product:</label>
        <select id="product" name="product">
            <option value="Product 1">Product 1</option>
            <option value="Product 2">Product 2</option>
            <option value="Product 3">Product 3</option>
        </select>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <button type="submit">Submit Order</button>
    </form>
</section>

<script src="script.js"></script>
</body>
</html>

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
}

#sidebar {
    width: 20%;
    background-color: #333;
    color: white;
    padding: 20px;
}

#sidebar h2 {
    margin-bottom: 20px;
}

main {
    width: 60%;
    padding: 20px;
}

header {
    background-color: #333;
    color: white;
    padding: 1em;
    text-align: center;
}

nav {
    display: flex;
    justify-content: center;
}

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-bottom: 10px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

section {
    padding: 20px;
    text-align: center;
}

#products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
}

.product {
    border: 1px solid #ddd;
    padding: 10px;
}

button {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

#cart {
    width: 20%;
    background-color: #f0f0f0;
    padding: 20px;
}

#cart h2 {
    margin-bottom: 20px;
}

#cart-items {
    list-style-type: none;
    padding: 0;
}

#cart-items li {
    margin-bottom: 10px;
}

Preview