Home / HTML / Membuat Struktur HTML untuk Website E-commerce

Membuat Struktur HTML untuk Website E-commerce

Created at by Aris Munandar
Share on

Membangun website e-commerce yang profesional dimulai dari fondasi yang kuat, yaitu struktur HTML yang baik dan terorganisir. Dalam panduan ini, Anda akan mempelajari cara membuat struktur HTML untuk website e-commerce dari nol menggunakan HTML5 dan CSS3, tanpa bergantung pada CMS atau platform siap pakai.

Struktur HTML website e-commerce yang efektif tidak hanya membuat website Anda mudah dikelola, tetapi juga meningkatkan performa SEO, kecepatan loading, dan pengalaman pengguna. Artikel ini akan membahas struktur folder dan file HTML website e-commerce, contoh kode lengkap, serta best practice yang dapat Anda terapkan langsung untuk bisnis kecil maupun menengah.

Daftar isi

Baca juga: Membuat Template Web Company Profile Lengkap

Mengapa Struktur HTML Penting untuk Website E-commerce?

Sebelum memulai coding, penting untuk memahami mengapa struktur HTML yang baik sangat krusial:

  1. SEO Friendly – Mesin pencari lebih mudah mengindeks website dengan struktur HTML yang semantik dan terorganisir
  2. Responsif – Struktur HTML5 modern mendukung tampilan optimal di berbagai perangkat
  3. Maintainability – Kode yang terstruktur memudahkan pengembangan dan pemeliharaan jangka panjang
  4. Performance – Struktur yang efisien meningkatkan kecepatan loading website
  5. User Experience – Navigasi yang jelas dan layout yang konsisten meningkatkan konversi penjualan

Struktur Folder dan File HTML Website E-commerce

Langkah pertama dalam membuat struktur HTML website e-commerce adalah mengorganisir folder dan file. Berikut adalah struktur folder yang efektif untuk website e-commerce multi halaman:

ecommerce-website/
│
├── index.html                 # Halaman Home
├── product-detail.html        # Halaman Detail Produk
│
├── css/
│   └── style.css             # File CSS Utama (sudah termasuk responsive)
│
├── js/
│   └── script.js             # JavaScript untuk Interaktivitas
│
├── images/
│   ├── products/             # Gambar Produk
│   ├── icons/                # Icon Website
│   └── logo.png              # Logo Toko
│
└── assets/
    └── fonts/                # Font Custom (opsional)Code language: PHP (php)

Catatan Penting tentang Gambar:

  • Dalam demo ini, kami menggunakan gambar dari Unsplash (layanan gambar gratis) untuk kemudahan dan kecepatan development
  • Untuk project production, Anda sebaiknya:
    • Download gambar dan simpan di folder images/products/
    • Ganti URL Unsplash dengan path lokal, contoh: images/products/laptop-gaming.jpg
    • Optimasi gambar untuk web (compress, resize, gunakan format WebP)
    • Implementasi lazy loading untuk performa lebih baik

Struktur folder ini memisahkan konten berdasarkan fungsinya, membuat website lebih terorganisir dan mudah di-maintain.

Membuat Halaman Home Website E-commerce

Halaman home adalah pintu gerbang utama website e-commerce Anda. Halaman ini harus mencakup navigasi yang jelas, keranjang belanja, dan daftar produk yang menarik. Mari kita bahas setiap bagian secara detail.

1. Struktur Dasar HTML5

Setiap halaman HTML5 dimulai dengan deklarasi DOCTYPE dan struktur dasar berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Toko Online Modern - Belanja produk berkualitas dengan harga terbaik. Struktur HTML5 website e-commerce responsif dan SEO friendly.">
    <meta name="keywords" content="toko online, e-commerce, belanja online, produk berkualitas">
    <title>Toko Online Modern - Belanja Produk Berkualitas</title>
    <link rel="stylesheet" href="css/style.css">
</head>Code language: HTML, XML (xml)

Penjelasan:

  • <!DOCTYPE html> – Mendeklarasikan dokumen sebagai HTML5
  • <html lang="id"> – Menentukan bahasa halaman (Indonesia) untuk SEO
  • <meta charset="UTF-8"> – Encoding karakter untuk mendukung berbagai bahasa
  • <meta name="viewport"> – Membuat website responsif di berbagai perangkat
  • <meta name="description"> – Deskripsi untuk mesin pencari (penting untuk SEO)
  • <meta name="keywords"> – Kata kunci untuk SEO
  • <title> – Judul halaman yang muncul di tab browser
  • <link rel="stylesheet"> – Menghubungkan file CSS eksternal

2. Header dengan Navigasi dan Keranjang Belanja

Header adalah bagian paling atas website yang berisi logo, menu navigasi, search box, dan icon keranjang belanja:

<header class="main-header">
    <div class="container">
        <div class="header-content">
            <!-- Logo Toko -->
            <div class="logo">
                <h1>TokoKita</h1>
            </div>
            
            <!-- Menu Navigasi -->
            <nav class="main-navigation">
                <ul>
                    <li><a href="index.html" class="active">Beranda</a></li>
                    <li><a href="#products">Produk</a></li>
                    <li><a href="#categories">Kategori</a></li>
                    <li><a href="#about">Tentang</a></li>
                    <li><a href="#contact">Kontak</a></li>
                </ul>
            </nav>
            
            <!-- Search Box dan Keranjang -->
            <div class="header-actions">
                <div class="search-box">
                    <input type="search" placeholder="Cari produk...">
                    <button type="submit">🔍</button>
                </div>
                
                <div class="cart-icon">
                    <a href="#cart">
                        🛒 <span class="cart-count">0</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>Code language: JavaScript (javascript)

Penjelasan:

  • <header> – Tag semantik HTML5 untuk bagian header
  • .container – Class untuk membatasi lebar konten dan center alignment
  • .logo – Menampilkan nama atau logo toko
  • <nav> – Tag semantik untuk navigasi (bagus untuk SEO)
  • .search-box – Input pencarian produk
  • .cart-icon – Icon keranjang dengan counter jumlah item
  • .cart-count – Span untuk menampilkan jumlah produk di keranjang

3. Hero Section (Banner Utama)

Hero section adalah area besar di bawah header yang menarik perhatian pengunjung:

<section class="hero-section">
    <div class="container">
        <div class="hero-content">
            <h2>Selamat Datang di Toko Online Kami</h2>
            <p>Temukan produk berkualitas dengan harga terbaik</p>
            <a href="#products" class="btn-primary">Belanja Sekarang</a>
        </div>
    </div>
</section>Code language: HTML, XML (xml)

Penjelasan:

  • <section> – Tag semantik untuk mengelompokkan konten terkait
  • <h2> – Heading utama hero section
  • .btn-primary – Tombol Call-to-Action (CTA) yang mengarah ke section produk
  • Smooth scroll akan bekerja karena menggunakan anchor link #products

4. Section Daftar Produk

Ini adalah bagian paling penting di halaman home – menampilkan daftar produk dalam bentuk grid:

<section id="products" class="products-section">
    <div class="container">
        <h2 class="section-title">Produk Terbaru</h2>
        
        <div class="products-grid">
            <!-- Product Card 1 -->
            <article class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern">
                    <span class="badge-new">Baru</span>
                </div>
                <div class="product-info">
                    <h3 class="product-title">Laptop Gaming Modern</h3>
                    <p class="product-description">Laptop gaming dengan spesifikasi tinggi untuk performa maksimal</p>
                    <div class="product-price">
                        <span class="price-current">Rp 12.500.000</span>
                        <span class="price-original">Rp 15.000.000</span>
                    </div>
                    <div class="product-rating">
                        ⭐⭐⭐⭐⭐ <span>(128 ulasan)</span>
                    </div>
                    <a href="product-detail.html?id=1" class="btn-add-cart">Lihat Detail</a>
                </div>
            </article>
            
            <!-- Product Card 2, 3, 4... (struktur sama) -->
        </div>
    </div>
</section>Code language: JavaScript (javascript)

Penjelasan Struktur Product Card:

  • <article> – Tag semantik untuk konten independen (setiap produk)
  • .product-image – Container untuk gambar produk
  • .badge-new / .badge-sale – Label untuk produk baru atau diskon
  • alt attribute – Deskripsi gambar untuk SEO dan accessibility
  • .product-title – Nama produk menggunakan <h3>
  • .product-description – Deskripsi singkat produk
  • .product-price – Menampilkan harga saat ini dan harga asli (jika ada diskon)
  • .product-rating – Rating bintang dan jumlah ulasan
  • .btn-add-cart – Link menuju halaman detail produk

Footer berisi informasi tambahan tentang toko, layanan pelanggan, dan kontak:

<footer class="main-footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>Tentang Kami</h3>
                <p>TokoKita adalah platform e-commerce terpercaya yang menyediakan produk berkualitas dengan harga terbaik.</p>
            </div>
            
            <div class="footer-section">
                <h3>Layanan Pelanggan</h3>
                <ul>
                    <li><a href="#help">Pusat Bantuan</a></li>
                    <li><a href="#shipping">Pengiriman</a></li>
                    <li><a href="#returns">Pengembalian</a></li>
                    <li><a href="#payment">Metode Pembayaran</a></li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h3>Hubungi Kami</h3>
                <ul>
                    <li>📧 Email: info@tokokita.com</li>
                    <li>📱 Telepon: (021) 1234-5678</li>
                    <li>📍 Jakarta, Indonesia</li>
                </ul>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>&copy; 2024 TokoKita. Semua hak dilindungi.</p>
        </div>
    </div>
</footer>Code language: HTML, XML (xml)

Penjelasan:

  • <footer> – Tag semantik untuk bagian footer
  • .footer-content – Grid layout untuk membagi footer menjadi beberapa kolom
  • .footer-section – Setiap kolom berisi informasi berbeda
  • .footer-bottom – Copyright dan informasi legal

6. Kode Lengkap Halaman Home (index.html)

Berikut adalah kode lengkap file index.html yang menggabungkan semua bagian yang telah dijelaskan di atas:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Toko Online Modern - Belanja produk berkualitas dengan harga terbaik. Struktur HTML5 website e-commerce responsif dan SEO friendly.">
    <meta name="keywords" content="toko online, e-commerce, belanja online, produk berkualitas">
    <title>Toko Online Modern - Belanja Produk Berkualitas</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Header dengan Navigasi -->
    <header class="main-header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>TokoKita</h1>
                </div>
                
                <nav class="main-navigation">
                    <ul>
                        <li><a href="index.html" class="active">Beranda</a></li>
                        <li><a href="#products">Produk</a></li>
                        <li><a href="#categories">Kategori</a></li>
                        <li><a href="#about">Tentang</a></li>
                        <li><a href="#contact">Kontak</a></li>
                    </ul>
                </nav>
                
                <div class="header-actions">
                    <div class="search-box">
                        <input type="search" placeholder="Cari produk...">
                        <button type="submit">🔍</button>
                    </div>
                    
                    <div class="cart-icon">
                        <a href="#cart">
                            🛒 <span class="cart-count">0</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h2>Selamat Datang di Toko Online Kami</h2>
                <p>Temukan produk berkualitas dengan harga terbaik</p>
                <a href="#products" class="btn-primary">Belanja Sekarang</a>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="products-section">
        <div class="container">
            <h2 class="section-title">Produk Terbaru</h2>
            
            <div class="products-grid">
                <!-- Product Card 1 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern">
                        <span class="badge-new">Baru</span>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Laptop Gaming Modern</h3>
                        <p class="product-description">Laptop gaming dengan spesifikasi tinggi untuk performa maksimal</p>
                        <div class="product-price">
                            <span class="price-current">Rp 12.500.000</span>
                            <span class="price-original">Rp 15.000.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐⭐ <span>(128 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=1" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>

                <!-- Product Card 2 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9" alt="Smartphone Premium">
                        <span class="badge-sale">Diskon 20%</span>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Smartphone Premium</h3>
                        <p class="product-description">Smartphone dengan kamera 108MP dan layar AMOLED</p>
                        <div class="product-price">
                            <span class="price-current">Rp 8.000.000</span>
                            <span class="price-original">Rp 10.000.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐⭐ <span>(256 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=2" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>

                <!-- Product Card 3 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" alt="Headphone Wireless">
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Headphone Wireless</h3>
                        <p class="product-description">Headphone dengan noise cancelling dan baterai 30 jam</p>
                        <div class="product-price">
                            <span class="price-current">Rp 2.500.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐☆ <span>(89 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=3" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>

                <!-- Product Card 4 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="Smartwatch Fitness">
                        <span class="badge-new">Baru</span>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Smartwatch Fitness</h3>
                        <p class="product-description">Smartwatch dengan fitur tracking kesehatan lengkap</p>
                        <div class="product-price">
                            <span class="price-current">Rp 3.200.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐⭐ <span>(174 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=4" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Tentang Kami</h3>
                    <p>TokoKita adalah platform e-commerce terpercaya yang menyediakan produk berkualitas dengan harga terbaik.</p>
                </div>
                
                <div class="footer-section">
                    <h3>Layanan Pelanggan</h3>
                    <ul>
                        <li><a href="#help">Pusat Bantuan</a></li>
                        <li><a href="#shipping">Pengiriman</a></li>
                        <li><a href="#returns">Pengembalian</a></li>
                        <li><a href="#payment">Metode Pembayaran</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Hubungi Kami</h3>
                    <ul>
                        <li>📧 Email: info@tokokita.com</li>
                        <li>📱 Telepon: (021) 1234-5678</li>
                        <li>📍 Jakarta, Indonesia</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 TokoKita. Semua hak dilindungi.</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>Code language: HTML, XML (xml)

Dengan kode lengkap di atas, Anda sudah memiliki halaman home yang fungsional dengan semua elemen penting untuk website e-commerce.

Berikut ini adalah hasil dari browser yang dibuat menggunakan kode html di atas.

Halaman index ecommerce dengan HTML

Membuat Halaman Detail Produk

Halaman detail produk menampilkan informasi lengkap tentang satu produk spesifik. Berikut struktur HTML halaman produk website e-commerce yang efektif:

1. Breadcrumb Navigation

Breadcrumb membantu pengguna memahami posisi mereka di website:

<nav class="breadcrumb">
    <div class="container">
        <ul>
            <li><a href="index.html">Beranda</a></li>
            <li><a href="index.html#products">Produk</a></li>
            <li><a href="#electronics">Elektronik</a></li>
            <li class="active">Laptop Gaming Modern</li>
        </ul>
    </div>
</nav>Code language: HTML, XML (xml)

Penjelasan:

  • Breadcrumb menunjukkan hierarki halaman
  • Bagus untuk SEO dan user experience
  • Class .active menandai halaman saat ini

2. Product Detail Grid

Layout dua kolom: gambar di kiri, informasi di kanan:

<div class="product-detail-grid">
    <!-- Kolom Kiri: Gambar Produk -->
    <div class="product-images">
        <div class="main-image">
            <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern" id="mainProductImage">
        </div>
        <div class="thumbnail-images">
            <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Tampilan 1" class="thumbnail active">
            <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45" alt="Tampilan 2" class="thumbnail">
            <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2" alt="Tampilan 3" class="thumbnail">
            <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853" alt="Tampilan 4" class="thumbnail">
        </div>
    </div>
    
    <!-- Kolom Kanan: Informasi Produk -->
    <div class="product-detail-info">
        <!-- Konten detail produk -->
    </div>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • .main-image – Gambar utama yang besar
  • .thumbnail-images – Gambar kecil yang bisa diklik untuk mengganti gambar utama
  • JavaScript akan menangani interaksi klik thumbnail

3. Informasi Produk Lengkap

<div class="product-detail-info">
    <h1 class="product-detail-title">Laptop Gaming Modern ROG Series</h1>
    
    <!-- Rating dan Ulasan -->
    <div class="product-rating-detail">
        <span class="stars">⭐⭐⭐⭐⭐</span>
        <span class="rating-score">4.8/5.0</span>
        <span class="review-count">(128 ulasan)</span>
        <span class="sold-count">| 450+ terjual</span>
    </div>

    <!-- Harga -->
    <div class="product-price-detail">
        <span class="price-current-large">Rp 12.500.000</span>
        <span class="price-original-large">Rp 15.000.000</span>
        <span class="discount-badge">Hemat 17%</span>
    </div>

    <!-- Deskripsi -->
    <div class="product-description-detail">
        <h2>Deskripsi Produk</h2>
        <p>Laptop gaming dengan performa tinggi yang dirancang untuk para gamers profesional dan content creator.</p>
    </div>

    <!-- Spesifikasi -->
    <div class="product-specifications">
        <h2>Spesifikasi</h2>
        <ul>
            <li><strong>Prosesor:</strong> Intel Core i9-13900HX</li>
            <li><strong>RAM:</strong> 32GB DDR5</li>
            <li><strong>Storage:</strong> 1TB NVMe SSD</li>
            <li><strong>Kartu Grafis:</strong> NVIDIA RTX 4080 12GB</li>
        </ul>
    </div>
</div>Code language: HTML, XML (xml)

4. Varian Produk dan Quantity Selector

<!-- Pilihan Varian -->
<div class="product-variants">
    <div class="variant-group">
        <label>Warna:</label>
        <div class="variant-options">
            <button class="variant-btn active">Hitam</button>
            <button class="variant-btn">Abu-abu</button>
            <button class="variant-btn">Putih</button>
        </div>
    </div>
</div>

<!-- Pemilih Jumlah -->
<div class="product-quantity">
    <label>Jumlah:</label>
    <div class="quantity-selector">
        <button class="qty-btn minus">-</button>
        <input type="number" value="1" min="1" max="10" class="qty-input">
        <button class="qty-btn plus">+</button>
    </div>
    <span class="stock-info">Stok: <strong>23 unit</strong></span>
</div>

<!-- Tombol Aksi -->
<div class="product-actions">
    <button class="btn-add-to-cart">🛒 Tambah ke Keranjang</button>
    <button class="btn-buy-now">⚡ Beli Sekarang</button>
    <button class="btn-wishlist">❤️</button>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • .variant-btn – Tombol untuk memilih varian (warna, ukuran, dll)
  • .quantity-selector – Input untuk memilih jumlah produk
  • Tombol +/- untuk menambah/mengurangi jumlah
  • Tiga tombol aksi utama: tambah ke keranjang, beli langsung, dan wishlist

5. Section Ulasan Pelanggan

<div class="product-reviews">
    <h2>Ulasan Pelanggan</h2>
    
    <div class="review-summary">
        <div class="rating-overview">
            <div class="rating-score-large">4.8</div>
            <div class="stars-large">⭐⭐⭐⭐⭐</div>
            <p>Dari 128 ulasan</p>
        </div>
        
        <div class="rating-breakdown">
            <div class="rating-bar">
                <span>5 ⭐</span>
                <div class="bar"><div class="fill" style="width: 85%"></div></div>
                <span>109</span>
            </div>
            <!-- Rating 4, 3, 2, 1 bintang... -->
        </div>
    </div>

    <div class="reviews-list">
        <article class="review-item">
            <div class="review-header">
                <div class="reviewer-info">
                    <strong>Budi Santoso</strong>
                    <span class="verified">✓ Pembeli Terverifikasi</span>
                </div>
                <div class="review-date">15 Oktober 2024</div>
            </div>
            <div class="review-rating">⭐⭐⭐⭐⭐</div>
            <p class="review-text">Laptop gaming terbaik yang pernah saya beli!</p>
        </article>
    </div>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • .review-summary – Ringkasan rating keseluruhan
  • .rating-breakdown – Bar chart menunjukkan distribusi rating
  • .reviews-list – Daftar ulasan individual dari pembeli
  • .verified – Badge untuk pembeli terverifikasi

6. Kode Lengkap Halaman Detail Produk (product-detail.html)

Berikut adalah kode lengkap file product-detail.html yang menggabungkan semua bagian yang telah dijelaskan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Detail produk Laptop Gaming Modern - Spesifikasi lengkap, harga terbaik, dan ulasan pelanggan. Belanja sekarang di TokoKita.">
    <title>Laptop Gaming Modern - Detail Produk | TokoKita</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Header dengan Navigasi -->
    <header class="main-header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>TokoKita</h1>
                </div>
                
                <nav class="main-navigation">
                    <ul>
                        <li><a href="index.html">Beranda</a></li>
                        <li><a href="index.html#products">Produk</a></li>
                        <li><a href="#categories">Kategori</a></li>
                        <li><a href="#about">Tentang</a></li>
                        <li><a href="#contact">Kontak</a></li>
                    </ul>
                </nav>
                
                <div class="header-actions">
                    <div class="search-box">
                        <input type="search" placeholder="Cari produk...">
                        <button type="submit">🔍</button>
                    </div>
                    
                    <div class="cart-icon">
                        <a href="#cart">
                            🛒 <span class="cart-count">0</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Breadcrumb Navigation -->
    <nav class="breadcrumb">
        <div class="container">
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="index.html#products">Produk</a></li>
                <li><a href="#electronics">Elektronik</a></li>
                <li class="active">Laptop Gaming Modern</li>
            </ul>
        </div>
    </nav>

    <!-- Product Detail Section -->
    <section class="product-detail-section">
        <div class="container">
            <div class="product-detail-grid">
                <!-- Product Images -->
                <div class="product-images">
                    <div class="main-image">
                        <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern" id="mainProductImage">
                    </div>
                    <div class="thumbnail-images">
                        <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Tampilan 1" class="thumbnail active">
                        <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45" alt="Tampilan 2" class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2" alt="Tampilan 3" class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853" alt="Tampilan 4" class="thumbnail">
                    </div>
                </div>

                <!-- Product Information -->
                <div class="product-detail-info">
                    <h1 class="product-detail-title">Laptop Gaming Modern ROG Series</h1>
                    
                    <div class="product-rating-detail">
                        <span class="stars">⭐⭐⭐⭐⭐</span>
                        <span class="rating-score">4.8/5.0</span>
                        <span class="review-count">(128 ulasan)</span>
                        <span class="sold-count">| 450+ terjual</span>
                    </div>

                    <div class="product-price-detail">
                        <span class="price-current-large">Rp 12.500.000</span>
                        <span class="price-original-large">Rp 15.000.000</span>
                        <span class="discount-badge">Hemat 17%</span>
                    </div>

                    <div class="product-description-detail">
                        <h2>Deskripsi Produk</h2>
                        <p>Laptop gaming dengan performa tinggi yang dirancang untuk para gamers profesional dan content creator. Dilengkapi dengan prosesor terbaru, kartu grafis powerful, dan sistem pendingin canggih untuk performa maksimal dalam waktu lama.</p>
                    </div>

                    <div class="product-specifications">
                        <h2>Spesifikasi</h2>
                        <ul>
                            <li><strong>Prosesor:</strong> Intel Core i9-13900HX</li>
                            <li><strong>RAM:</strong> 32GB DDR5</li>
                            <li><strong>Storage:</strong> 1TB NVMe SSD</li>
                            <li><strong>Kartu Grafis:</strong> NVIDIA RTX 4080 12GB</li>
                            <li><strong>Layar:</strong> 17.3" QHD 240Hz</li>
                            <li><strong>Baterai:</strong> 90Wh</li>
                            <li><strong>Berat:</strong> 2.8 kg</li>
                        </ul>
                    </div>

                    <div class="product-variants">
                        <div class="variant-group">
                            <label>Warna:</label>
                            <div class="variant-options">
                                <button class="variant-btn active">Hitam</button>
                                <button class="variant-btn">Abu-abu</button>
                                <button class="variant-btn">Putih</button>
                            </div>
                        </div>

                        <div class="variant-group">
                            <label>Kapasitas Storage:</label>
                            <div class="variant-options">
                                <button class="variant-btn">512GB</button>
                                <button class="variant-btn active">1TB</button>
                                <button class="variant-btn">2TB</button>
                            </div>
                        </div>
                    </div>

                    <div class="product-quantity">
                        <label>Jumlah:</label>
                        <div class="quantity-selector">
                            <button class="qty-btn minus">-</button>
                            <input type="number" value="1" min="1" max="10" class="qty-input">
                            <button class="qty-btn plus">+</button>
                        </div>
                        <span class="stock-info">Stok: <strong>23 unit</strong></span>
                    </div>

                    <div class="product-actions">
                        <button class="btn-add-to-cart">🛒 Tambah ke Keranjang</button>
                        <button class="btn-buy-now">⚡ Beli Sekarang</button>
                        <button class="btn-wishlist">❤️</button>
                    </div>

                    <div class="product-features">
                        <div class="feature-item">
                            <span class="icon">🚚</span>
                            <div>
                                <strong>Gratis Ongkir</strong>
                                <p>Untuk pembelian di atas Rp 500.000</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <span class="icon">🔒</span>
                            <div>
                                <strong>Pembayaran Aman</strong>
                                <p>Transaksi dijamin 100% aman</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <span class="icon">↩️</span>
                            <div>
                                <strong>Garansi 14 Hari</strong>
                                <p>Pengembalian mudah jika tidak sesuai</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Reviews Section -->
            <div class="product-reviews">
                <h2>Ulasan Pelanggan</h2>
                
                <div class="review-summary">
                    <div class="rating-overview">
                        <div class="rating-score-large">4.8</div>
                        <div class="stars-large">⭐⭐⭐⭐⭐</div>
                        <p>Dari 128 ulasan</p>
                    </div>
                    
                    <div class="rating-breakdown">
                        <div class="rating-bar">
                            <span>5 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 85%"></div></div>
                            <span>109</span>
                        </div>
                        <div class="rating-bar">
                            <span>4 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 10%"></div></div>
                            <span>13</span>
                        </div>
                        <div class="rating-bar">
                            <span>3 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 3%"></div></div>
                            <span>4</span>
                        </div>
                        <div class="rating-bar">
                            <span>2 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 1%"></div></div>
                            <span>1</span>
                        </div>
                        <div class="rating-bar">
                            <span>1 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 1%"></div></div>
                            <span>1</span>
                        </div>
                    </div>
                </div>

                <div class="reviews-list">
                    <article class="review-item">
                        <div class="review-header">
                            <div class="reviewer-info">
                                <strong>Budi Santoso</strong>
                                <span class="verified">✓ Pembeli Terverifikasi</span>
                            </div>
                            <div class="review-date">15 Oktober 2024</div>
                        </div>
                        <div class="review-rating">⭐⭐⭐⭐⭐</div>
                        <p class="review-text">Laptop gaming terbaik yang pernah saya beli! Performa sangat kencang, bisa main game AAA dengan setting ultra tanpa lag. Sistem pendinginnya juga bagus, tidak terlalu panas saat digunakan lama. Highly recommended!</p>
                    </article>

                    <article class="review-item">
                        <div class="review-header">
                            <div class="reviewer-info">
                                <strong>Siti Rahayu</strong>
                                <span class="verified">✓ Pembeli Terverifikasi</span>
                            </div>
                            <div class="review-date">10 Oktober 2024</div>
                        </div>
                        <div class="review-rating">⭐⭐⭐⭐⭐</div>
                        <p class="review-text">Sempurna untuk editing video 4K. Rendering cepat banget, layarnya juga jernih dengan refresh rate tinggi. Packaging rapi dan pengiriman cepat. Worth the price!</p>
                    </article>
                </div>
            </div>

            <!-- Related Products -->
            <div class="related-products">
                <h2>Produk Terkait</h2>
                <div class="products-grid">
                    <article class="product-card">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9" alt="Smartphone Premium">
                        </div>
                        <div class="product-info">
                            <h3 class="product-title">Smartphone Premium</h3>
                            <div class="product-price">
                                <span class="price-current">Rp 8.000.000</span>
                            </div>
                            <a href="product-detail.html?id=2" class="btn-add-cart">Lihat Detail</a>
                        </div>
                    </article>

                    <article class="product-card">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" alt="Headphone Wireless">
                        </div>
                        <div class="product-info">
                            <h3 class="product-title">Headphone Wireless</h3>
                            <div class="product-price">
                                <span class="price-current">Rp 2.500.000</span>
                            </div>
                            <a href="product-detail.html?id=3" class="btn-add-cart">Lihat Detail</a>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Tentang Kami</h3>
                    <p>TokoKita adalah platform e-commerce terpercaya yang menyediakan produk berkualitas dengan harga terbaik.</p>
                </div>
                
                <div class="footer-section">
                    <h3>Layanan Pelanggan</h3>
                    <ul>
                        <li><a href="#help">Pusat Bantuan</a></li>
                        <li><a href="#shipping">Pengiriman</a></li>
                        <li><a href="#returns">Pengembalian</a></li>
                        <li><a href="#payment">Metode Pembayaran</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Hubungi Kami</h3>
                    <ul>
                        <li>📧 Email: info@tokokita.com</li>
                        <li>📱 Telepon: (021) 1234-5678</li>
                        <li>📍 Jakarta, Indonesia</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 TokoKita. Semua hak dilindungi.</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>Code language: HTML, XML (xml)

Dengan kode lengkap di atas, Anda sudah memiliki halaman detail produk yang komprehensif dengan semua fitur penting seperti image gallery, varian produk, quantity selector, dan section ulasan pelanggan.

Berikut ini adalah target tampilan pada halaman detail produk pembuatan website ecommerce dengan HTML.

Halaman detail produk ecommerce dengan HTML

Styling dengan CSS

File CSS mengatur tampilan visual website. Berikut adalah bagian-bagian penting dari style.css:

1. CSS Variables dan Global Styles

:root {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --accent-color: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --border-color: #e5e7eb;
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}Code language: CSS (css)

Penjelasan:

  • CSS Variables (:root) – Menyimpan nilai warna dan style yang sering digunakan
  • Reset CSS (*) – Menghilangkan margin dan padding default browser
  • box-sizing: border-box – Membuat perhitungan ukuran lebih mudah

2. Layout dengan Flexbox dan Grid

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}Code language: CSS (css)

Penjelasan:

  • Flexbox – Untuk layout horizontal (header, navigation)
  • CSS Grid – Untuk layout produk yang responsif
  • auto-fill dan minmax() – Membuat grid otomatis menyesuaikan jumlah kolom

3. Hover Effects dan Transitions

.product-card {
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}Code language: CSS (css)

Penjelasan:

  • transition – Membuat animasi smooth saat hover
  • transform: translateY() – Mengangkat card saat di-hover
  • box-shadow – Menambah depth dengan bayangan

4. Responsive Design

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

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

    .product-detail-grid {
        grid-template-columns: 1fr;
    }
}Code language: CSS (css)

Penjelasan:

  • Media queries untuk tampilan mobile
  • Layout berubah dari horizontal ke vertical
  • Grid columns menyesuaikan ukuran layar

5. Kode Lengkap File CSS (style.css)

Berikut adalah kode lengkap file css/style.css yang mencakup semua styling untuk website e-commerce:

/* ===================================
   Global Styles & Reset
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --accent-color: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --border-color: #e5e7eb;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* ===================================
   Header & Navigation
   =================================== */
.main-header {
    background-color: var(--bg-white);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo h1 {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
}

.main-navigation ul {
    display: flex;
    gap: 2rem;
}

.main-navigation a {
    color: var(--text-dark);
    font-weight: 500;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 200px;
    font-size: 0.95rem;
}

.search-box button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
}

.cart-icon {
    position: relative;
}

.cart-icon a {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cart-count {
    background-color: var(--danger-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    right: -8px;
}

/* ===================================
   Hero Section
   =================================== */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 5rem 0;
    text-align: center;
}

.hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.btn-primary {
    display: inline-block;
    background-color: white;
    color: var(--primary-color);
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: var(--transition);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ===================================
   Products Section
   =================================== */
.products-section {
    padding: 4rem 0;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-dark);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.product-card {
    background-color: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.product-image {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-new,
.badge-sale {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.badge-new {
    background-color: var(--success-color);
}

.badge-sale {
    background-color: var(--danger-color);
}

.product-info {
    padding: 1.5rem;
}

.product-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.product-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.price-current {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
}

.price-original {
    font-size: 1rem;
    color: var(--text-light);
    text-decoration: line-through;
}

.product-rating {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.btn-add-cart {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    padding: 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-add-cart:hover {
    background-color: var(--secondary-color);
}

/* ===================================
   Breadcrumb Navigation
   =================================== */
.breadcrumb {
    background-color: var(--bg-white);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb ul {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 0.5rem;
    color: var(--text-light);
}

.breadcrumb a {
    color: var(--text-light);
    font-size: 0.9rem;
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb .active {
    color: var(--text-dark);
    font-weight: 500;
}

/* ===================================
   Product Detail Section
   =================================== */
.product-detail-section {
    padding: 3rem 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.product-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.main-image {
    background-color: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.main-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.thumbnail-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.thumbnail {
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: var(--transition);
    height: 100px;
    object-fit: cover;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--primary-color);
}

.product-detail-info {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.product-detail-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.product-rating-detail {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.stars {
    color: var(--accent-color);
}

.rating-score {
    font-weight: 600;
    color: var(--text-dark);
}

.review-count,
.sold-count {
    color: var(--text-light);
}

.product-price-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.price-current-large {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.price-original-large {
    font-size: 1.3rem;
    color: var(--text-light);
    text-decoration: line-through;
}

.discount-badge {
    background-color: var(--danger-color);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.product-description-detail,
.product-specifications {
    margin-bottom: 2rem;
}

.product-description-detail h2,
.product-specifications h2 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}

.product-description-detail p {
    color: var(--text-light);
    line-height: 1.8;
}

.product-specifications ul {
    list-style: none;
}

.product-specifications li {
    padding: 0.5rem 0;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
}

.product-specifications li:last-child {
    border-bottom: none;
}

.product-variants {
    margin-bottom: 2rem;
}

.variant-group {
    margin-bottom: 1.5rem;
}

.variant-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}

.variant-options {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.variant-btn {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--border-color);
    background-color: var(--bg-white);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.95rem;
}

.variant-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.variant-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.product-quantity {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.product-quantity label {
    font-weight: 600;
    color: var(--text-dark);
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.qty-btn {
    padding: 0.6rem 1rem;
    border: none;
    background-color: var(--bg-light);
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
}

.qty-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.qty-input {
    width: 60px;
    text-align: center;
    border: none;
    padding: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
}

.stock-info {
    color: var(--text-light);
    font-size: 0.9rem;
}

.product-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-add-to-cart,
.btn-buy-now {
    flex: 1;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-add-to-cart {
    background-color: var(--bg-white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-add-to-cart:hover {
    background-color: var(--primary-color);
    color: white;
}

.btn-buy-now {
    background-color: var(--primary-color);
    color: white;
}

.btn-buy-now:hover {
    background-color: var(--secondary-color);
}

.btn-wishlist {
    padding: 1rem;
    border: 2px solid var(--border-color);
    background-color: var(--bg-white);
    border-radius: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-wishlist:hover {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.product-features {
    display: grid;
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 8px;
}

.feature-item .icon {
    font-size: 2rem;
}

.feature-item strong {
    display: block;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
}

.feature-item p {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* ===================================
   Product Reviews
   =================================== */
.product-reviews {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 3rem;
}

.product-reviews h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

.review-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.rating-overview {
    text-align: center;
}

.rating-score-large {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.stars-large {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rating-bar span:first-child {
    min-width: 50px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.rating-bar .bar {
    flex: 1;
    height: 8px;
    background-color: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.rating-bar .fill {
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.5s ease;
}

.rating-bar span:last-child {
    min-width: 40px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--text-light);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.review-item {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.reviewer-info strong {
    color: var(--text-dark);
}

.verified {
    color: var(--success-color);
    font-size: 0.85rem;
}

.review-date {
    color: var(--text-light);
    font-size: 0.9rem;
}

.review-rating {
    color: var(--accent-color);
    margin-bottom: 0.8rem;
}

.review-text {
    color: var(--text-light);
    line-height: 1.8;
}

/* ===================================
   Related Products
   =================================== */
.related-products {
    margin-bottom: 3rem;
}

.related-products h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

/* ===================================
   Footer
   =================================== */
.main-footer {
    background-color: var(--text-dark);
    color: white;
    padding: 3rem 0 1rem;
    margin-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.footer-section p,
.footer-section li {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    font-size: 0.95rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .main-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .search-box input {
        width: 150px;
    }

    .hero-content h2 {
        font-size: 1.8rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .main-image img {
        height: 350px;
    }

    .review-summary {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-actions {
        flex-direction: column;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 1.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-title {
        font-size: 1.5rem;
    }

    .price-current-large {
        font-size: 1.5rem;
    }
}Code language: CSS (css)

File CSS di atas mencakup semua styling yang diperlukan untuk website e-commerce, termasuk styling untuk halaman home, halaman detail produk, responsive design, dan berbagai komponen UI seperti buttons, cards, dan forms.

JavaScript untuk Interaktivitas

File script.js menambahkan fungsi interaktif pada website:

1. Shopping Cart Counter

let cartCount = 0;

function updateCartCount() {
    const cartCountElement = document.querySelector('.cart-count');
    if (cartCountElement) {
        cartCountElement.textContent = cartCount;
    }
}Code language: JavaScript (javascript)

Penjelasan:

  • Variabel cartCount menyimpan jumlah item di keranjang
  • Fungsi updateCartCount() memperbarui tampilan counter
const thumbnails = document.querySelectorAll('.thumbnail');
const mainImage = document.getElementById('mainProductImage');

thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener('click', function() {
        thumbnails.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        mainImage.src = this.src;
    });
});Code language: JavaScript (javascript)

Penjelasan:

  • Menangkap klik pada thumbnail
  • Mengganti gambar utama dengan gambar thumbnail yang diklik
  • Menambah/menghapus class active untuk styling

3. Quantity Selector

const minusBtn = document.querySelector('.qty-btn.minus');
const plusBtn = document.querySelector('.qty-btn.plus');
const qtyInput = document.querySelector('.qty-input');

minusBtn.addEventListener('click', function() {
    let currentValue = parseInt(qtyInput.value);
    if (currentValue > 1) {
        qtyInput.value = currentValue - 1;
    }
});

plusBtn.addEventListener('click', function() {
    let currentValue = parseInt(qtyInput.value);
    let maxValue = parseInt(qtyInput.max);
    if (currentValue < maxValue) {
        qtyInput.value = currentValue + 1;
    }
});Code language: JavaScript (javascript)

Penjelasan:

  • Tombol minus mengurangi jumlah (minimum 1)
  • Tombol plus menambah jumlah (maksimum sesuai stok)
  • Validasi untuk mencegah nilai di luar range

4. Add to Cart Function

const addToCartBtn = document.querySelector('.btn-add-to-cart');

addToCartBtn.addEventListener('click', function() {
    const quantity = qtyInput ? parseInt(qtyInput.value) : 1;
    cartCount += quantity;
    updateCartCount();
    alert(`${quantity} produk berhasil ditambahkan ke keranjang!`);
});Code language: JavaScript (javascript)

Penjelasan:

  • Mengambil jumlah produk dari input
  • Menambahkan ke total cart count
  • Menampilkan notifikasi sukses

5. Smooth Scroll

const anchorLinks = document.querySelectorAll('a[href^="#"]');

anchorLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        const href = this.getAttribute('href');
        if (href !== '#' && href !== '#cart') {
            e.preventDefault();
            const target = document.querySelector(href);
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        }
    });
});Code language: JavaScript (javascript)

Penjelasan:

  • Menangkap klik pada anchor link (link dengan #)
  • Scroll smooth ke section target
  • Meningkatkan user experience

6. Kode Lengkap File JavaScript (script.js)

Berikut adalah kode lengkap file js/script.js yang mencakup semua fungsi interaktif untuk website e-commerce:

// ===================================
// Shopping Cart Functionality
// ===================================
let cartCount = 0;

function updateCartCount() {
    const cartCountElement = document.querySelector('.cart-count');
    if (cartCountElement) {
        cartCountElement.textContent = cartCount;
    }
}

// ===================================
// Product Detail - Image Gallery
// ===================================
document.addEventListener('DOMContentLoaded', function() {
    // Thumbnail image click handler
    const thumbnails = document.querySelectorAll('.thumbnail');
    const mainImage = document.getElementById('mainProductImage');
    
    thumbnails.forEach(thumbnail => {
        thumbnail.addEventListener('click', function() {
            // Remove active class from all thumbnails
            thumbnails.forEach(t => t.classList.remove('active'));
            
            // Add active class to clicked thumbnail
            this.classList.add('active');
            
            // Update main image
            if (mainImage) {
                mainImage.src = this.src.replace('-thumb', '-large');
            }
        });
    });
    
    // ===================================
    // Quantity Selector
    // ===================================
    const minusBtn = document.querySelector('.qty-btn.minus');
    const plusBtn = document.querySelector('.qty-btn.plus');
    const qtyInput = document.querySelector('.qty-input');
    
    if (minusBtn && plusBtn && qtyInput) {
        minusBtn.addEventListener('click', function() {
            let currentValue = parseInt(qtyInput.value);
            if (currentValue > 1) {
                qtyInput.value = currentValue - 1;
            }
        });
        
        plusBtn.addEventListener('click', function() {
            let currentValue = parseInt(qtyInput.value);
            let maxValue = parseInt(qtyInput.max);
            if (currentValue < maxValue) {
                qtyInput.value = currentValue + 1;
            }
        });
    }
    
    // ===================================
    // Variant Selection
    // ===================================
    const variantButtons = document.querySelectorAll('.variant-btn');
    
    variantButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from siblings
            const siblings = this.parentElement.querySelectorAll('.variant-btn');
            siblings.forEach(btn => btn.classList.remove('active'));
            
            // Add active class to clicked button
            this.classList.add('active');
        });
    });
    
    // ===================================
    // Add to Cart Button
    // ===================================
    const addToCartBtn = document.querySelector('.btn-add-to-cart');
    
    if (addToCartBtn) {
        addToCartBtn.addEventListener('click', function() {
            const quantity = qtyInput ? parseInt(qtyInput.value) : 1;
            cartCount += quantity;
            updateCartCount();
            
            // Show notification
            alert(`${quantity} produk berhasil ditambahkan ke keranjang!`);
        });
    }
    
    // ===================================
    // Buy Now Button
    // ===================================
    const buyNowBtn = document.querySelector('.btn-buy-now');
    
    if (buyNowBtn) {
        buyNowBtn.addEventListener('click', function() {
            alert('Mengarahkan ke halaman checkout...');
            // Redirect to checkout page
            // window.location.href = 'checkout.html';
        });
    }
    
    // ===================================
    // Wishlist Button
    // ===================================
    const wishlistBtn = document.querySelector('.btn-wishlist');
    
    if (wishlistBtn) {
        wishlistBtn.addEventListener('click', function() {
            this.style.color = this.style.color === 'rgb(239, 68, 68)' ? '' : '#ef4444';
            const isAdded = this.style.color === 'rgb(239, 68, 68)';
            alert(isAdded ? 'Produk ditambahkan ke wishlist!' : 'Produk dihapus dari wishlist!');
        });
    }
    
    // ===================================
    // Smooth Scroll for Anchor Links
    // ===================================
    const anchorLinks = document.querySelectorAll('a[href^="#"]');
    
    anchorLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (href !== '#' && href !== '#cart') {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });
    });
    
    // ===================================
    // Search Functionality
    // ===================================
    const searchInput = document.querySelector('.search-box input');
    const searchButton = document.querySelector('.search-box button');
    
    if (searchButton && searchInput) {
        searchButton.addEventListener('click', function() {
            const searchTerm = searchInput.value.trim();
            if (searchTerm) {
                alert(`Mencari: "${searchTerm}"`);
                // Implement search functionality here
                // window.location.href = `search.html?q=${encodeURIComponent(searchTerm)}`;
            }
        });
        
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchButton.click();
            }
        });
    }
    
    // Initialize cart count
    updateCartCount();
});

// ===================================
// Product Card Interactions (Home Page)
// ===================================
document.addEventListener('DOMContentLoaded', function() {
    const productCards = document.querySelectorAll('.product-card');
    
    productCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});Code language: JavaScript (javascript)

Penjelasan Fungsi-Fungsi JavaScript:

  1. Shopping Cart Counter – Mengelola jumlah item di keranjang belanja
  2. Image Gallery – Mengganti gambar utama saat thumbnail diklik
  3. Quantity Selector – Menambah/mengurangi jumlah produk dengan validasi
  4. Variant Selection – Memilih varian produk (warna, ukuran, dll)
  5. Add to Cart – Menambahkan produk ke keranjang dengan notifikasi
  6. Buy Now – Tombol untuk langsung checkout
  7. Wishlist – Toggle produk favorit
  8. Smooth Scroll – Navigasi smooth ke section tertentu
  9. Search – Fungsi pencarian produk dengan Enter key support
  10. Product Card Hover – Animasi hover pada card produk

Best Practice Struktur HTML Website E-commerce

Untuk memastikan website e-commerce Anda optimal, ikuti best practice berikut:

1. Gunakan Semantic HTML5

Gunakan tag HTML5 semantik seperti <header>, <nav>, <main>, <article>, <section>, dan <footer> untuk struktur yang lebih jelas dan SEO friendly.

2. Optimasi Meta Tags

Setiap halaman harus memiliki meta description, title tag, dan meta keywords yang relevan dengan konten halaman.

3. Struktur URL yang Baik

Gunakan URL yang deskriptif dan mudah dibaca, misalnya: /product-detail.html?id=laptop-gaming-modern lebih baik daripada /product.html?id=123.

4. Implementasi Breadcrumb Navigation

Breadcrumb membantu pengguna memahami posisi mereka di website dan meningkatkan SEO.

5. Optimasi Gambar

  • Format Gambar: Gunakan WebP untuk web modern, fallback ke JPG/PNG
  • Atribut Alt: Tambahkan deskripsi alt pada semua gambar untuk SEO dan accessibility
  • Lazy Loading: Implementasi loading="lazy" untuk performa lebih baik
  • Ukuran Gambar: Compress dan resize gambar sesuai kebutuhan (max 1200px untuk produk)
  • Lokasi Gambar:
    • Untuk development/demo: Boleh gunakan URL eksternal (Unsplash, Pexels)
    • Untuk production: Simpan gambar lokal di folder images/products/
    • Gunakan CDN untuk performa optimal

6. Responsive Design

Pastikan website dapat diakses dengan baik di semua perangkat menggunakan CSS media queries dan viewport meta tag.

7. Struktur Data Schema.org

Implementasikan structured data untuk produk, rating, dan harga agar lebih mudah diindeks mesin pencari.

8. Accessibility (A11y)

  • Gunakan label yang jelas pada form
  • Pastikan kontras warna memadai
  • Tambahkan ARIA labels jika diperlukan

Tips Membuat Struktur HTML Website E-commerce untuk Bisnis Kecil

Jika Anda membangun website e-commerce untuk bisnis kecil, pertimbangkan hal berikut:

  1. Mulai Sederhana – Fokus pada halaman esensial: Home, Product List, Product Detail, Cart, dan Checkout
  2. Prioritaskan Mobile – Mayoritas pengguna berbelanja melalui smartphone
  3. Optimasi Kecepatan – Minimalkan penggunaan library eksternal yang berat
  4. Fokus pada Konversi – Pastikan tombol CTA (Call-to-Action) jelas dan mudah diakses
  5. Implementasi Analytics – Tambahkan Google Analytics untuk memahami perilaku pengunjung

Kesimpulan

Membuat struktur HTML website e-commerce dari nol memerlukan perencanaan yang matang dan pemahaman tentang best practice web development. Dengan mengikuti panduan ini, Anda telah mempelajari cara membuat struktur HTML untuk website e-commerce yang responsif, SEO friendly, dan mudah di-maintain.

Template struktur HTML website e-commerce lengkap yang telah dijelaskan di atas dapat Anda kembangkan lebih lanjut sesuai kebutuhan bisnis. Ingat untuk selalu mengutamakan pengalaman pengguna, performa website, dan optimasi SEO dalam setiap pengembangan yang Anda lakukan.

Dengan struktur HTML toko online menggunakan HTML5 CSS3 yang solid, website e-commerce Anda siap bersaing di mesin pencari dan memberikan pengalaman berbelanja yang menyenangkan bagi pelanggan.

Ringkasan

Dalam artikel ini, kita telah membahas secara lengkap cara membuat struktur HTML untuk website e-commerce dari nol, meliputi:

✅ Struktur Folder dan File – Organisasi project yang rapi dan terstruktur
✅ Halaman Home – Header, navigasi, hero section, daftar produk, dan footer
✅ Halaman Detail Produk – Breadcrumb, image gallery, spesifikasi, varian, dan ulasan
✅ CSS Styling – Variables, Flexbox, Grid, hover effects, dan responsive design
✅ JavaScript Interaktivity – Cart counter, image gallery, quantity selector, dan smooth scroll
✅ Best Practices – SEO, accessibility, dan optimasi performa

Dengan mengikuti panduan ini, Anda dapat membangun website e-commerce yang profesional, responsif, dan SEO-friendly tanpa bergantung pada CMS atau platform siap pakai.

Share on

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Your email address will not be published. Required fields are marked *

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading