Accueil

Modèles de commerce électronique gratuits

Vous pouvez librement copier le code ou utiliser notre éditeur HTML en direct pour modifier le code selon vos besoins spécifiques.


Modèles de sites web simples pour le commerce électronique

<!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;
}

Aperçu