Generator Katalog Produk — Fungsi, Cara Pakai, dan Manfaatnya
Dalam dunia penjualan online, kecepatan dan kerapihan tampilan produk menjadi faktor penting untuk menarik perhatian pembeli. Banyak penjual yang ingin membuat tampilan katalog seperti marketplace besar — rapi, otomatis, dan mudah diperbanyak.
Untuk itulah Generator Katalog Produk hadir sebagai solusi.
Apa Itu Generator Katalog Produk?
Generator Katalog Produk adalah sebuah alat otomatis yang digunakan untuk membuat HTML produk secara instan hanya dengan mengisi form seperti nama barang, harga, gambar, stok, rating, dan link pembelian.
Setelah data diisi, alat ini langsung membuat blok HTML rapi dan siap dipakai, berbentuk layaknya katalog marketplace seperti Lazada atau Shopee.
Alat ini sangat cocok untuk pengguna Blogspot, WordPress, landing page, atau website custom yang ingin tampilan produk terlihat profesional tanpa harus mengetik HTML manual.
Tujuan Dibuatnya Generator Ini
- Mempermudah pembuatan katalog produk
- Tidak perlu coding — tinggal isi data → otomatis jadi
- Menghemat waktu ketika menambah banyak produk
- Mencegah kesalahan HTML manual
- Membantu membuat desain produk lebih profesional
- Meningkatkan minat pembeli
Fitur Unggulan Generator Ini
- Responsive Layout (HP 2 kolom, Tablet 3 kolom, Desktop 5 kolom)
- Preview Langsung
- HTML Output Siap Copy
- Label Stok Otomatis
- Tombol Keranjang
- Rating Bintang Dinamis
- Harga Diskon + Coret Harga Asli
- Desain Card Profesional
Cara Menggunakan Generator Katalog Produk
- Buka halaman alat generator.
- Isi form data produk:
- Nama produk
- Nama toko
- Kategori
- Harga asli
- Harga diskon
- Stok
- Rating
- URL gambar
- Link pembelian
- Klik Tambah Produk.
- Produk akan muncul di area preview.
- HTML otomatis muncul di kotak Output.
- Klik Output → HTML otomatis tercopy.
- Tempelkan ke Blogspot / website anda.
Keuntungan Menggunakan Generator Ini
- Tampil profesional seperti marketplace besar
- Bisa menambahkan ratusan produk tanpa capek
- Cocok untuk katalog, dropship, afiliasi, CPA, dll
- Hemat waktu, efisien
- Tidak perlu bisa coding
- Tampilan rapi di semua ukuran layar
Kesimpulan
Generator Katalog Produk adalah alat yang sangat membantu bagi pemilik blog atau website yang ingin membuat tampilan produk secara cepat, rapi, dan profesional.
Dengan fitur lengkap seperti rating, stok, tombol beli, responsif grid, serta HTML yang otomatis rapi, alat ini bisa meningkatkan kualitas tampilan katalog dan menarik lebih banyak pengunjung untuk membeli.
klik untuk menyalin
👇
<!DOCTYPE html>
<html>
<head>
<style>
.output-box {
width: 100%;
background: #f5f5f5;
border: 1px solid #ccc;
padding: 12px;
margin-top: 25px;
border-radius: 6px;
white-space: pre-wrap;
cursor: pointer;
}
.output-box:hover { background: #e8e8e8; }
.toast {
position: fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#00c853;
color:#fff;
padding:10px 20px;
border-radius:8px;
display:none;
}
.form-box input, .form-box select {
width:100%;
padding:8px;
margin-bottom:10px;
border-radius:6px;
border:1px solid #ccc;
}
button {
padding:10px;
border:none;
border-radius:6px;
background:#00b0ff;
color:white;
width:100%;
}
</style>
</head>
<body>
<h3>Tambah Produk</h3>
<form id="addProductForm" class="form-box">
Nama Produk:<br>
<input type="text" id="name" required>
Toko:<br>
<input type="text" id="shop" required>
Kategori:<br>
<select id="category" required>
<option value="Elektronik">Elektronik</option>
<option value="Fashion">Fashion</option>
<option value="Makanan">Makanan</option>
</select>
Harga Asli:<br>
<input type="number" id="originalPrice" required>
Harga Diskon:<br>
<input type="number" id="discountPrice" required>
Stok Barang (contoh: 1/2/habis):<br>
<input type="text" id="stock" required>
Rating (1–5):<br>
<input type="number" id="rating" min="1" max="5" required>
URL Gambar:<br>
<input type="text" id="imgURL" required>
URL Pembelian:<br>
<input type="text" id="buyURL" required>
<button type="submit">Tambah Produk</button>
</form>
<h3>Beranda Produk</h3>
<div id="productContainer"></div>
<h3>Output HTML (Klik untuk Copy)</h3>
<div id="outputBox" class="output-box">Belum ada output...</div>
<div id="toast" class="toast">✔ Disalin!</div>
<script>
document.getElementById("addProductForm").addEventListener("submit", function(e){
e.preventDefault();
const name = document.getElementById("name").value;
const shop = document.getElementById("shop").value;
const category = document.getElementById("category").value;
const originalPrice = document.getElementById("originalPrice").value;
const discountPrice = document.getElementById("discountPrice").value;
const imgURL = document.getElementById("imgURL").value;
const buyURL = document.getElementById("buyURL").value;
const stock = document.getElementById("stock").value;
const rating = document.getElementById("rating").value;
const date = new Date().toLocaleDateString("id-ID");
let stars = "";
for(let i=0; i<rating; i++) stars += "⭐";
const cardHTML = `
<div class="card" style="border-radius: 8px; border: 1px solid rgb(221,221,221); box-sizing: border-box; display: inline-block; margin: 10px; padding: 10px; vertical-align: top; width: 180px; position:relative;">
<div style='position:absolute; top:5px; left:5px; background:#ff0000; color:white; padding:2px 5px; font-size:11px; border-radius:4px;'>${stock}</div>
<div onclick="alert('Ditambahkan ke troli: ${name}')"
style="position:absolute; top:5px; right:5px; background:white; border-radius:50%; padding:5px; box-shadow:0 0 4px rgba(0,0,0,0.3); cursor:pointer;">
🛒
</div>
<img alt="${name}" src="${imgURL}" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 5px; border: 1px solid rgb(238,238,238); box-shadow: rgba(0,0,0,0.1) 1px 1px 5px; box-sizing: border-box; display: block; height: auto; max-width: 100%; padding: 5px; width: 158px;" />
<div class="title" style="box-sizing: border-box; font-weight: bold; margin-top: 5px;">${name}</div>
<div class="shop" style="box-sizing: border-box; color: #555; font-size: 12px;">${shop}</div>
<div class="category" style="box-sizing: border-box; color: #555; font-size: 12px;">${category}</div>
<div class="price" style="box-sizing: border-box; font-weight: bold; margin-top: 5px;">
Rp ${discountPrice}
<span class="old-price" style="box-sizing: border-box; color: #999; font-size: 12px; margin-left: 5px; text-decoration-line: line-through;">Rp ${originalPrice}</span>
</div>
<div class="date" style="box-sizing: border-box; margin-top:4px;">
${stars} | ${date}
</div>
<a class="button" href="${buyURL}" style="background: rgb(0,191,255); border-radius: 5px; box-sizing: border-box; color: white; display: block; margin-top: 8px; padding: 5px; text-decoration-line: none;">Beli Sekarang</a>
</div>
`.trim();
const temp = document.createElement("div");
temp.innerHTML = cardHTML;
document.getElementById("productContainer").appendChild(temp.firstElementChild);
document.getElementById("outputBox").textContent = cardHTML;
this.reset();
});
document.getElementById("outputBox").addEventListener("click", function(){
navigator.clipboard.writeText(this.textContent).then(() => {
const t = document.getElementById("toast");
t.style.display = "block";
setTimeout(()=> t.style.display="none", 1200);
});
});
</script>
</body>
</html>
Komentar untuk Script katalog Produk generator