6 Contoh Coding HTML Website Penjualan untuk E-Commerce

6 Contoh Coding HTML Website Penjualan untuk E-Commerce

Kamu sedang mencari contoh coding HTML untuk website penjualan? Membangun website e-commerce seringkali terasa rumit bagi pemula. Terutama jika kamu tidak tahu harus mulai dari mana untuk membuat halaman produk, tombol pembelian, atau fitur penting lainnya. 

Namun, kamu tidak perlu khawatir sebab artikel ini akan memberikan  contoh coding HTML praktis yang khusus dirancang untuk membangun website penjualan yang menarik. Simak terus sampai akhir ya!

Daftar Isi Tutup
Contoh Coding HTML Website Penjualan
1. Navigasi/menu
2. Contoh coding untuk hero image
3. Contoh coding untuk kategori produk
4. Contoh coding produk
5. Contoh coding footer
6. Contoh coding HTML detail produk
Hasil Coding HTML Website Penjualan
Siap Buat Website Jualan dengan Coding HTML?

 Contoh Coding HTML Website Penjualan

Dalam menyusun website e-commerce, ada berbagai elemen dan halaman yang perlu dibuat, seperti halaman produk, keranjang belanja, hingga halaman pembayaran. Namun, pada tutorial kali ini akan fokus membahas 6 bagian utama. Untuk memastikan tampilannya menarik dan profesional, kamu juga bisa mengintegrasikan CSS sebagai pendukung untuk mempercantik gaya dan tata letak halaman.

Berikut adalah beberapa contoh coding kombinasi HTML untuk struktur dan CSS untuk desain dengan tema produk kecantikan. 

1. Navigasi/menu

Navigasi atau menu adalah elemen penting pada setiap website, terutama untuk e-commerce. Elemen ini berfungsi sebagai pemandu bagi pengunjung untuk menemukan halaman yang mereka butuhkan, seperti katalog produk, keranjang belanja, atau halaman kontak. Berikut adalah coding HTML untuk membuat navigasi/header website.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Template</title>
    
    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="style_home.css">
    
    <!-- Google Fonts for Roboto -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>

<header>
    <nav class="navbar">
        <a href="#">Home</a>
        <a href="#">Shop</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

Pada coding di atas akan menghasilkan beberapa menu yaitu:

  • Home
  • Shop
  • About
  • Contact

Setiap menu tersebut nantinya akan mengarah ke halaman masing-masing, untuk URL nya bisa kamu sesuaikan saja di dalam <a href>.

2. Contoh coding untuk hero image

Hero image adalah gambar besar yang biasanya berada di bagian atas halaman website, berfungsi sebagai elemen visual utama yang menyampaikan pesan kepada pengunjung. Dalam konteks e-commerce, hero image dapat digunakan untuk menampilkan produk unggulan atau promosi. Elemen ini sangat penting karena menjadi fokus perhatian pertama pengguna. Berikut adalah contoh coding HTML untuk hero image.

<header>
    <nav class="navbar">
        <a href="#">Home</a>
        <a href="#">Shop</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

3. Contoh coding untuk kategori produk

Menampilkan kategori produk di website e-commerce sangat penting untuk memudahkan pengunjung dalam menemukan barang yang mereka cari. Dengan adanya kategori produk yang jelas, pengguna dapat lebih cepat menavigasi situs dan menemukan item yang sesuai dengan kebutuhan mereka. 

Misalnya, pada contoh coding berikut terdapat 4 kategori yang dibuat yaitu make up, skin care, hair care, dan body care.

Promo Dewaweb

Kategori berikut juga dilengkapi dengan gambar dan teks. Untuk memastikan gambar dapat muncul dengan baik, pastikan gambar yang diunggah disimpan dalam folder yang benar dan dengan format yang sesuai. Pada contoh ini, gambar produk disimpan dalam folder kategori/, dengan nama file seperti make_up.jpg, skin_care.jpg, dan sebagainya. Pastikan gambar memiliki nama yang sesuai dengan yang ada di kode HTML.

<div class="categories-container">
    <h2>Shop by Category</h2>
    <div class="categories">
        <div class="category">
            <img src="kategori/make_up.jpg" alt="Product Image" class="product-image">
            <h3>Make Up</h3>
        </div>
        <div class="category">
            <img src="kategori/skin_care.jpg" alt="Product Image" class="product-image">
            <h3>Skin Care</h3>
        </div>
        <div class="category">
            <img src="kategori/hair_care.png" alt="Product Image" class="product-image">
            <h3>Hair Care</h3>
        </div>
        <div class="category">
            <img src="kategori/body_care.jpg" alt="Product Image" class="product-image">
            <h3>Body Care</h3>
        </div>
    </div>
</div>

4. Contoh coding produk

Setelah membuat kategori, selanjutnya kamu perlu membuat jenis-jenis produk dari kategori tersebut. Untuk membuat tampilan produk di sini tidak jauh berbeda dengan kategori, berikut coding HTML yang dapat kamu buat untuk tampilan produk. Pada contoh berikut hanya menjelaskan beberapa contoh produk untuk kategori make up saja. 

Setiap produk dilengkapi dengan gambar, teks, harga, dan button untuk menambah ke keranjang. Serta di paling bawah juga terdapat button “Tampilkan Lebih Banyak” untuk menampilkan lebih banyak produk.

<div class="products-container">
    <h2>Make Up</h2>
    <div class="products">
        <div class="product">
            <img src="make_up/cushion.jpg" alt="Product Image" class="product-image">
            <h3>Make Over Glow Cushion</h3>
            <p>Rp216.000</p>
            <button class="add-to-cart">Tambah ke keranjang</button>
        </div>
        <div class="product">
            <img src="make_up/lipstik.png" alt="Product Image" class="product-image">
            <h3>Wardah Glasting Liquid Lip</h3>
            <p>Rp97.000</p>
            <button class="add-to-cart">Tambah ke keranjang</button>
        </div>
        <div class="product">
            <img src="make_up/mascara.png" alt="Product Image" class="product-image">
            <h3>Lash Sensational Sky High Mascara</h3>
            <p>Rp100.685</p>
            <button class="add-to-cart">Tambah ke keranjang</button>
        </div>
        <div class="product">
            <img src="make_up/foundation.jpg" alt="Product Image" class="product-image">
            <h3>Make Over Ultra Cover Liquid Matt Foundation</h3>
            <p>Rp163.000</p>
            <button class="add-to-cart">Tambah ke keranjang</button>
        </div>
    </div>
</div>

<div class="load-more-container" style="text-align: center; margin-top: 2rem; margin-bottom: 4rem;">
    <button 
        class="load-more-btn"
        style="background-color: #c28e78; color: #fff; padding: 0.8rem 2rem; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s;"
        onclick="tampilkanLebihBanyak()">Tampilkan Lebih Banyak
    </button>
</div>

5. Contoh coding footer

Selanjutnya, terdapat contoh coding HTML untuk footer. Footer berfungsi sebagai tempat untuk menyediakan informasi tambahan yang dibutuhkan pengunjung, seperti informasi kontak, kebijakan pengembalian barang, cara pembayaran, serta link penting lainnya yang dapat membantu meningkatkan kenyamanan pengguna.

Berikut adalah contoh coding untuk membuat tampilan footer yang dapat kamu ikuti. Ada pun beberapa bagian yang terdapat pada contoh footer berikut yakni:

  • Toko online yang tersedia, dalam hal ini digambarkan menggunakan logo eCommerce yang dapat disisipkan link.
  • Link yang mengarah ke halaman lain seperti Komplain Produk, Pengiriman, dan Syarat & Ketentuan.
  • Link yang mengarah ke sosial media.

Setiap syntax link yang ada pada contoh berikut bisa langsung kamu tambahkan sesuai dengan URL halaman kamu.

<footer>
    <div class="footer-content">
        <h3>Kami juga tersedia</h3>
        
        <div class="footer-icons">
            <img src="logo/tokped.png" alt="Tokopedia">
            <img src="logo/shopee.png" alt="Shopee">
            <img src="logo/tiktok.png" alt="TikTok">
        </div>
        
        <div class="footer-links">
            <a href="#">Komplain Produk</a>
            <a href="#">Pembayaran & Pengiriman</a>
            <a href="#">Syarat & Ketentuan</a>
        </div>
        
        <div class="footer-socials">
            <a href="#">Instagram</a>
            <a href="#">YouTube</a>
            <a href="#">Facebook</a>
        </div>
    </div>
    
    <p>&copy; 2024 Your Website. All Rights Reserved.</p>
</footer>

</body>

</html>

6. Contoh coding HTML detail produk

Contoh coding HTML terakhir yang dapat kamu buat adalah detail produk, halaman ini akan muncul apabila salah satu produk di klik. Halaman detail produk tentu menjadi salah satu halaman wajib yang harus ada pada web eCommerce. Di dalam halaman berikut terdapat navigasi, detail produk, dan footer.

Ada pun, beberapa data detail produknya seperti:

  • Gambar produk
  • Harga
  • Deskripsi
  • Button tambah ke keranjang
  • Button beli melalui WhatsApp

Data yang akan tampil pada detail produk ini tentu bisa kamu kustomisasi sesuai kebutuhan, tidak harus sesuai dengan contoh berikut. Perlu kamu tahu juga bahwa kode ini file-nya dibuat terpisah pada file detailproduk.html.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Produk</title>
    
    <!-- External CSS link for styling -->
    <link rel="stylesheet" href="style_detailproduk.css">
    
    <!-- Google Fonts link for Roboto font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>

<body>
    <!-- Navbar -->
    <header>
        <nav class="navbar">
            <a href="#">Home</a>
            <a href="#">Shop</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <!-- Product Details Section -->
    <div class="product-container">
        <div class="product-image">
            <img src="make_up/lipstik.png" alt="Product Image">
        </div>
        <div class="product-details">
            <h1>Wardah Glasting Liquid Lip</h1>
            <p class="price">Rp120.000</p>
            <p class="description">
                Bibir Plump Glass dengan Warna Pigmented yang Nyaman Tidak lengket, ringan dan Transferproof! 
                Didukung oleh teknologi terbaru: GLASSCUSHION dan Ceramide
            </p>

            <div class="buttons">
                <button class="add-to-cart">Tambah ke keranjang</button>
                <button class="buy-whatsapp">Beli Lewat WhatsApp</button>
            </div>
        </div>
    </div>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2024. All rights reserved. <a href="#">Syarat & Ketentuan</a>.</p>
    </footer>
</body>

</html>

Seperti yang dijelaskan di atas, pada tutorial kali ini tidak hanya menggunakan HTML tetapi juga terdapat tambahan CSS untuk styling halaman agar lebih menarik. Namun, di sini tidak menggunakan JavaScript sehingga button dan menu belum fungsional atau belum bisa di klik.

Ada pun, file CSS ini dibuat terpisah dari HTML agar kamu lebih memahaminya. Terdapat 2 file CSS yaitu style_home.css yang berisikan style untuk halaman home.html (navigasi, hero image, kategori, produk, dan footer) serta style_detailproduk.css khusus untuk halaman detailproduk.html. Berikut adalah 2 file CSS tersebut.

File style_home.css

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

/* Navbar styling */
.navbar {
  background-color: #c28e78;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.navbar a:hover {
  color: #ddd;
}

/* Hero image styling */
.hero-image-container {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image {
  width: 100%;
  height: auto; 
}

/* Categories styling */
.categories-container {
  text-align: left;
  padding: 2rem;
}

.categories-container h2 {
  margin-bottom: 1rem;
  font-size: 24px;
  color: #333;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem; 
}

.category {
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #fff;
}

.product-image {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 5px;
}

.category h3 {
  margin: 0.5rem 0;
  font-size: 16px;
  color: #333;
}

.category p {
  font-size: 14px;
  color: #666;
  margin: 0.5rem 0;
}

.add-to-cart {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 14px;
  color: #fff;
  background-color: #c28e78;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart:hover {
  background-color: #b27a63;
}

/* Footer styling */
footer {
  background-color: #c28e78;
  color: #fff;
  padding: 2rem;
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-icons {
  display: flex;
  gap: 1rem;
}

.footer-icons img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  font-size: 14px;
}

.footer-socials {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.footer-socials a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}

.footer-socials a:hover {
  color: #ddd;
}

/* Products styling */
.products-container {
  text-align: left;
  padding: 2rem;
}

.products-container h2 {
  margin-bottom: 1rem;
  font-size: 24px;
  color: #333;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem; /* Reduced gap */
}

.product {
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #fff;
}

File style_detailproduk.css

body {
  font-family: "Roboto", sans-serif; 
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Navbar styling */
.navbar {
  background-color: #c28e78;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.navbar a:hover {
  color: #ddd;
}

/* Main content */
.product-container {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.product-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image img {
  max-width: 100%;
  border-radius: 5px;
}

.product-details {
  flex: 1;
}

.product-details h1 {
  font-size: 24px;
  margin-bottom: 0.5rem;
}

.product-details .price {
  font-size: 20px;
  color: #c28e78;
  margin-bottom: 1rem;
}

.product-details .description {
  margin-bottom: 1.5rem;
  color: #666;
}

.product-details .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.product-details button {
  padding: 0.8rem 2rem;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.add-to-cart {
  background-color: #333;
  color: #fff;
}

.add-to-cart:hover {
  background-color: #555;
}

.buy-whatsapp {
  background-color: #25d366;
  color: #fff;
}

.buy-whatsapp:hover {
  background-color: #1ebe58;
}

/* Footer styling */
footer {
  background-color: #c28e78;
  color: #fff;
  text-align: center;
  padding: 1.5rem;
  margin-top: 2rem;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

Hasil Coding HTML Website Penjualan

Sekarang, kamu sudah berhasil membuat halaman website penjualan menggunakan HTML dan styling CSS, diantaranya yaitu membuat

  • Navigasi / menu
  • Hero image
  • Kategori produk
  • Jenis produk
  • Detail produk
  • Footer

Berikut ini adalah tampilan website dari coding HTML di atas.

Halaman Home

contoh halaman penjualan hasil coding HTML

kategori penjualan hasil coding HTML

produk penjualan hasil coding HTML

footer website penjualan hasil coding HTML

Halaman Detail Produk

contoh coding HTML website penjualan halaman produk

Siap Buat Website Jualan dengan Coding HTML?

Membangun website e-commerce yang menarik dan fungsional tidak begitu sulit, terutama jika kamu sudah memiliki contoh coding HTML seperti yang telah dibahas di atas. Dengan kombinasi HTML dan CSS, kamu dapat menciptakan tampilan profesional dan tetap menarik yang sesuai dengan kebutuhan bisnismu. 

Untuk mulai membangun website eCommerce, pastikan kamu memiliki hosting dan domain yang andal sebagai fondasi websitemu. Hosting yang cepat dan stabil akan memastikan websitemu berjalan lancar, sementara domain yang menarik akan membantu membangun identitas online bisnis kamu. Selamat mencoba ya, semoga membantu!