Daftar Isi
ingin membuat halaman e-commerce sendiri, tapi malah bingung harus mulai dari mana? Anda mungkin sudah belajar HTML dan CSS, tapi saat harus merancang tampilan toko online—dengan produk, tombol beli, hingga layout responsif—tiba-tiba semuanya terasa rumit. Padahal, dengan bantuan Bootstrap, Anda bisa membangun desain profesional tanpa harus jadi ahli frontend.
Artikel ini hadir sebagai solusi lengkap. Di sini Anda akan belajar cara membuat halaman e-commerce sederhana menggunakan HTML, CSS, dan Bootstrap, langkah demi langkah. Mulai dari struktur dasar, layout produk, hingga tampilan responsive yang rapi di perangkat mobile. Tidak perlu khawatir, semua dijelaskan secara praktis dan mudah diikuti.
Setelah mengikuti panduan ini, Anda akan memiliki halaman toko online sederhana yang siap dikembangkan menjadi lebih profesional.
Persiapan Awal: File & Struktur Proyek
Buat folder proyek, lalu buat file berikut:
/ecommerce/
├── index.html
└── style.cssTambahkan link Bootstrap di dalam <head> file index.html:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">Langkah-Langkah Desain Halaman E-commerce: Menggunakan HTML, CSS, dan Bootstrap
1. Membuat Navbar E-commerce (Bootstrap)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyStore</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Produk</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kontak</a></li>
</ul>
</div>
</div>
</nav>2. Menampilkan Banner atau Hero Section
<section class="bg-light py-5 text-center">
<h1>Selamat Datang di MyStore</h1>
<p>Temukan produk terbaik dengan harga terjangkau.</p>
<a href="#" class="btn btn-primary">Belanja Sekarang</a>
</section>3. Layout Produk dengan Bootstrap Grid
<div class="container py-5">
<div class="row">
<!-- Card Produk 1 -->
<div class="col-md-3">
<div class="card">
<img src="https://via.placeholder.com/200" class="card-img-top" alt="Produk">
<div class="card-body text-center">
<h5 class="card-title">Produk 1</h5>
<p class="card-text">Rp 100.000</p>
<a href="#" class="btn btn-success">Tambah ke Keranjang</a>
</div>
</div>
</div>
<!-- Duplikat card untuk produk lainnya -->
</div>
</div>4. Menambahkan Footer Sederhana
<footer class="bg-dark text-white text-center py-3">
<p>© 2025 MyStore. All Rights Reserved.</p>
</footer>5. Custom CSS untuk Sentuhan Lebih Rapi — style.css
.card img {
height: 200px;
object-fit: cover;
}
footer p {
margin: 0;
}Anda sudah memiliki halaman e-commerce dasar menggunakan HTML, CSS, dan Bootstrap. Mulai dari navbar, banner, hingga tampilan produk. Langkah selanjutnya? Tinggal tambahkan fitur keranjang, halaman detail produk, atau integrasi checkout.
Ingin melangkah lebih jauh?
Baca juga: Cara Mengoptimalkan Kecepatan Website WordPress untuk SEO Maksimal.
👉 Jika Anda ingin memperdalam, jangan lewatkan artikel terkait lainnya: