Cara buat e-Katalog produk di blog + gratis source code
salah satu cara untuk meningkatkan penjualan produk adalah dengan promosi, dalam konteks yang lebih luas promosi adalah salah satu pilar utama yang menentukan sukses atau tidaknya sebuah bisnis. Tanpa promosi yang tepat, produk sehebat apa pun akan sulit dikenal oleh calon konsumen.
Tujuan Utama Promosi
Bukan sekadar "biar laku", promosi memiliki beberapa fungsi krusial:
Meningkatkan Brand Awareness: Mengenalkan keberadaan produk atau toko Anda ke pasar yang lebih luas.
Mengedukasi Konsumen: Menjelaskan manfaat produk, cara pakai, dan mengapa mereka membutuhkan produk tersebut.
Membujuk dan Menggerakkan: Mengubah calon pembeli yang tadinya ragu menjadi yakin untuk melakukan transaksi (pembelian).
Membedakan dari Pesaing: Menunjukkan nilai lebih (unique selling point) yang dimiliki produk Anda dibanding kompetitor.
Strategi Promosi Efektif di Era Digital
Di era modern, promosi tidak lagi terbatas pada brosur fisik atau spanduk di pinggir jalan. Beberapa strategi yang sangat relevan saat ini antara lain:
Pemasaran Konten (Content Marketing): Membuat artikel blog edukatif, video tutorial, atau infografis yang relevan dengan produk.
Media Sosial: Memanfaatkan platform seperti Instagram, TikTok, atau Facebook untuk berinteraksi langsung dengan audiens.
E-Katalog Interaktif: Seperti yang sedang Anda bahas di draf blog, menyediakan katalog digital yang rapi, menarik, dan mudah diakses kapan saja oleh konsumen adalah bentuk promosi yang sangat efisien.
Nah dari penjelasan tersebut dapat kita simpulkan bahwa sebenarnya promosi adalah suatu metode yang dirancang secara sistematis untuk mengenalkan produk baru ke calon konsumen sehingga mereka tertarik untuk menggunakan produk tersebut.
Apa itu E-Katalog ?
Secara sederhana, E-Katalog adalah etalase digital yang menyajikan informasi lengkap mengenai produk secara terstruktur. Di dalam e-katalog, konsumen tidak hanya melihat nama produk, tetapi juga komponen penting lainnya seperti:
Foto/Gambar Produk: Visual berkualitas tinggi yang merepresentasikan produk asli.
Deskripsi & Spesifikasi: Informasi mendalam mengenai bahan, ukuran, fungsi, atau fitur produk.
Harga: Transparansi harga yang membantu konsumen mengambil keputusan lebih cepat.
Tombol Aksi (Call to Action/CTA): Link yang mengarah langsung ke WhatsApp penjual, marketplace, atau formulir pembelian.
Mengapa Bisnis Anda Butuh E-Katalog? (Kelebihan dibanding Katalog Cetak)
berikut adalah perbandingannya:
Setelah melihat daftar perbandingan tersebut maka kita bisa memilih sesuai dengan kebutuhan, nah kali ini kami akan memberikan source code cara buat e-katalog tersebut yang bisa kau akses secara online tanpa menyimpan file tersebut.Source Code E-katalog produk di blog
<div class="jsd-container">
<div class="jsd-tools">
<input id="searchBox" type="text" />
<select id="filterKategori">
<option value="SSD">SSD</option>
</select>
<button onclick="toggleDarkMode()">🌙 Dark Mode</button>
</div>
<div class="produk-grid" id="produkContainer"></div>
</div>
<style>
.jsd-container{
max-width:1200px;
margin:auto;
font-family:Arial,sans-serif;
padding:15px;
}
.jsd-title{
text-align:center;
margin-bottom:20px;
}
.jsd-tools{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:20px;
}
.jsd-tools input,
.jsd-tools select,
.jsd-tools button{
padding:10px;
border:1px solid #ddd;
border-radius:8px;
}
.produk-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:15px;
}
.card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,.1);
transition:.3s;
}
.card:hover{
transform:translateY(-5px);
}
.card img{
width:100%;
height:200px;
object-fit:cover;
}
.info{
padding:12px;
}
.nama{
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
.harga{
font-size:18px;
font-weight:bold;
color:#e53935;
margin-bottom:10px;
}
.badge{
display:inline-block;
background:red;
color:white;
padding:4px 8px;
border-radius:20px;
font-size:12px;
margin-bottom:10px;
}
.btn{
display:block;
text-align:center;
background:#ff6d00;
color:white;
padding:10px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
}
.dark{
background:#111;
color:white;
}
.dark .card{
background:#222;
color:white;
}
</style>
<script>
const produk = [
{
harga:"Rp380.000 - Rp425.000",
kategori:"SSD",
gambar:"https://down-id.img.susercontent.com/file/id-11134207-7r98o-llvrp0ccq0zye8@resize_w450_nl.webp",
link:"https://s.shopee.co.id/AKY6mF24hd",
badge:"Diskon 20%"
},
{
harga:"Rp.380.000 - Rp425.000",
kategori:"RAM",
gambar:"linkgambar",
link:"https://s.shopee.co.id/4VaJp34AQV",
badge:"Best Seller"
},
{
harga:"Rp490.500 - Rp2.337.600",
kategori:"Aksesoris",
gambar:"linkgambar",mjp9pqy6x5heba.webp",
link:"https://s.shopee.co.id/AAEga7katU",
badge:"Terlaris"
},
{
nama:"SSD EYOTA 256GB",
harga:"Rp605.000",
kategori:"Aksesoris",
gambar:"linkgambar",
link:"https://s.shopee.co.id/7KuhOACBKE",
badge:"Promo"
},
{
harga:"Rp789.999",
kategori:"Aksesoris",
gambar:"linkgambar",
badge:"Diskon"
},
{
nama:"Osmous Slim Plus Hardisk HDD External",
harga:"Rp689.000",
kategori:"SSD",
gambar:"linkgambar",
badge:"Hot"
},
{
nama:"Osmous Expansion Hardisk HDD External 1TB ",
harga:"Rp1.439.000",
kategori:"SSD",
gambar:"linkgambar",
link:"https://s.shopee.co.id/4VaW1s7EJd",
badge:"Top"
},
{
nama:"HDD WD",
harga:"Rp500.000",
kategori:"HDD",
gambar:"linkgambar",
link:"https://s.shopee.co.id/1qZkrOlEUU",
badge:"Promo"
},
{
nama:"Cooling Pad",
harga:"Rp75.000",
kategori:"Aksesoris",
gambar:"linkgambar",
link:"#",
badge:"Murah"
},
{
nama:"Flashdisk 64GB",
harga:"Rp59.000",
kategori:"Aksesoris",
gambar:"linkgambar",
link:"#",
badge:"Hemat"
},
{
nama:"Produk 11",
harga:"Rp100.000",
kategori:"SSD",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 12",
harga:"Rp100.000",
kategori:"RAM",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 13",
harga:"Rp100.000",
kategori:"Laptop",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 14",
harga:"Rp100.000",
kategori:"Aksesoris",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 15",
harga:"Rp100.000",
kategori:"SSD",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 16",
harga:"Rp100.000",
kategori:"RAM",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 17",
harga:"Rp100.000",
kategori:"Laptop",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 18",
harga:"Rp100.000",
kategori:"Aksesoris",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 19",
harga:"Rp100.000",
kategori:"SSD",
gambar:"linkgambar",
link:"#",
badge:"Promo"
},
{
nama:"Produk 20",
harga:"Rp100.000",
kategori:"RAM",
gambar:"linkgambar",
link:"#",
badge:"Promo"
}
];
function tampilkanProduk(data){
const container =
document.getElementById("produkContainer");
container.innerHTML="";
data.forEach(item=>{
container.innerHTML += `
<div class="card">
<img src="${item.gambar}">
<div class="info">
<div class="badge">${item.badge}</div>
<div class="nama">${item.nama}</div>
<div class="harga">${item.harga}</div>
<a class="btn"
href="${item.link}"
target="_blank">
🛒 Beli di Shopee
</a>
</div>
</div>
`;
});
}
tampilkanProduk(produk);
searchBox.addEventListener("keyup", function(){
let keyword =
this.value.toLowerCase();
let hasil = produk.filter(item =>
item.nama.toLowerCase().includes(keyword)
);
tampilkanProduk(hasil);
});
filterKategori.addEventListener("change", function(){
let kategori = this.value;
if(kategori==="all"){
tampilkanProduk(produk);
return;
}
let hasil =
produk.filter(item =>
item.kategori===kategori
);
tampilkanProduk(hasil);
});
function toggleDarkMode(){
document.body.classList.toggle("dark");
}
</script>
Kesimpulan
Pembuatan katalaog ini bisa kamu gunakan untuk promosi produk yang kamu punya, sangat cocok untuk program affiliasi dan tentunya bisa kamu custom sesuai dengan keinginan, mohon perhatikan bagian gambar itu diisi dengan link gambar sedangkan "link#" adalah link produk yang kamu promosikan.
Penulis
Posting Komentar