Tips jualan online · 15 menit baca
Dulu, punya halaman khusus untuk jualan berarti menyewa desainer dan developer, atau berjam-jam mengotak-atik template. Sekarang, kamu bisa meminta AI membuatkan kerangka sebuah landing page lengkap dengan tampilan yang rapi, cukup dari satu prompt. Hasilnya bukan jaminan sempurna, tapi sering sudah cukup bagus untuk dijadikan titik awal.
Landing page adalah satu halaman dengan satu tujuan: membuat pengunjung melakukan satu tindakan, misalnya memesan lewat WhatsApp. Karena tujuannya sempit, struktur halamannya bisa dipetakan dengan jelas, dan itu membuatnya cocok untuk dibantu AI. Yang menentukan kualitas hasil bukan panjangnya prompt, melainkan seberapa jelas kamu menyebut siapa tokomu, apa yang dijual, gaya yang diinginkan, dan bagian apa saja yang harus ada.
Artikel ini menjelaskan lima langkah: menulis prompt, menyebut isi halaman, menilai hasil, merevisi dengan kalimat biasa, dan mengecek sebelum dipakai. Contoh toko, produk, harga, dan testimoni di sini fiktif. Hasil AI bisa berbeda tiap percobaan dan bisa keliru, jadi cek ulang semua sebelum dipublikasikan.
Persiapan
Prompt yang baik adalah hasil dari bahan yang jelas. Sebelum membuka AI, tulis dulu jawaban untuk enam hal berikut. Cukup satu atau dua kalimat untuk masing-masing.
- 1Nama dan jenis toko: misalnya “Kopi Senja, toko kopi susu literan”.
- 2Produk dan harga: daftar singkat produk utama beserta harga yang benar.
- 3Calon pembeli: siapa mereka, misalnya pekerja kantoran yang suka kopi praktis.
- 4Gaya visual: hangat, minimalis, ceria, atau elegan. Sebut juga warna kalau kamu punya preferensi.
- 5Isi halaman: bagian apa saja yang harus ada, dari bagian pembuka sampai tombol pemesanan.
- 6Aksi utama: apa satu hal yang kamu ingin pengunjung lakukan, misalnya memesan lewat WhatsApp.
Untuk contoh dan pelatihan
Saat belajar, pakai data contoh dulu. Jangan memasukkan nomor pribadi, data pelanggan, atau informasi rahasia usahamu ke AI. Isi data asli nanti, setelah hasilnya kamu pindahkan ke halamanmu sendiri.
Langkah 1
Prompt dasar cukup memuat lima hal: jenis halaman, nama dan jenis toko, gaya, isi, dan format hasil. Berikut prompt yang dipakai untuk halaman contoh di video.
Prompt yang dipakai di video
Buatkan landing page 1 halaman untuk toko kopi online bernama Kopi Senja (kopi susu literan, toko fiktif untuk contoh). Gaya hangat dan modern, mobile-first. Isi: hero dengan tombol pesan, 3 keunggulan, 3 varian produk beserta harga contoh, testimoni, FAQ, dan tombol WhatsApp. Satu file HTML, tanpa gambar eksternal.
Simulasi: dari prompt ke halaman
Simulasi ini mengilustrasikan urutan bagian yang dihasilkan. Tampilan sungguhan bisa kamu lihat di rekaman pada langkah 3.
Perhatikan bagaimana setiap kalimatnya punya tugas. “Landing page 1 halaman” menetapkan jenis dan ruang lingkup. “Toko kopi online bernama Kopi Senja” memberi identitas. “Gaya hangat dan modern, mobile-first” mengarahkan visual dan prioritas tampilan ponsel, karena sebagian besar pengunjung toko online membuka halaman dari ponsel. Daftar isi menentukan struktur. Dua kalimat terakhir menentukan format hasil supaya kamu menerima satu file yang bisa langsung dibuka.
Kalau mau memakainya untuk tokomu sendiri, ganti bagian yang ditandai kurung siku pada template berikut.
Template (ganti bagian dalam kurung siku)
Buatkan landing page 1 halaman untuk [jenis toko] bernama [nama toko] yang menjual [produk utama]. Calon pembeli: [siapa mereka]. Gaya: [hangat / minimalis / ceria / elegan], modern, mobile-first. Warna utama: [warna, kalau ada]. Isi halaman: hero dengan tombol pesan, [jumlah] keunggulan, [jumlah] produk beserta harga contoh, testimoni, FAQ, dan tombol WhatsApp. Aksi utama yang kuinginkan: pengunjung memesan lewat WhatsApp. Format: satu file HTML dengan CSS di dalamnya, tanpa gambar atau pustaka dari internet. Pakai bahasa Indonesia yang ramah. Semua nama, harga, dan testimoni adalah contoh yang nanti kuganti.
Mengapa “contoh” perlu ditulis
Kalau kamu tidak menyebut bahwa harga dan testimoni hanya contoh, AI bisa menulisnya seolah-olah asli. Menandainya sebagai contoh membuat hasilnya lebih jujur dan mengingatkanmu untuk menggantinya.
Langkah 2
Bagian yang paling sering menentukan bagus atau tidaknya sebuah landing page adalah urutan isinya. Landing page yang efektif biasanya mengikuti alur yang mirip dengan cara orang mengambil keputusan: tertarik, paham, percaya, lalu bertindak. Karena itu, sebut bagian halamannya secara eksplisit di prompt.
Anatomi landing page dan fungsinya
| Bagian | Fungsinya | Yang perlu kamu sebut di prompt |
|---|---|---|
| Hero (bagian paling atas) | Menjelaskan apa tokomu dalam beberapa detik dan mengajak bertindak | Judul, satu kalimat penjelas, teks tombol, dan apakah ada ilustrasi |
| Keunggulan | Menjawab “kenapa harus beli di sini?” | Jumlah keunggulan (tiga biasanya cukup) dan topiknya |
| Produk | Menunjukkan pilihan dan harga | Jumlah produk, nama, deskripsi singkat, harga contoh |
| Testimoni | Membangun rasa percaya | Jumlah dan format; tandai sebagai contoh sampai kamu punya yang asli |
| FAQ | Menjawab keraguan terakhir | Pertanyaan yang sering muncul, misalnya pengiriman dan pembayaran |
| Tombol WhatsApp | Memudahkan pemesanan | Nomor (contoh dulu), teks pesan awal, dan apakah tombolnya mengambang |
Urutan ini bukan aturan baku. Untuk produk yang butuh banyak penjelasan, kamu bisa menaruh keunggulan lebih awal atau menambah bagian cara pesan.
Satu prinsip yang layak dijaga: halaman ini hanya punya satu ajakan utama. Kalau ada lima tombol dengan lima tujuan berbeda, pengunjung justru bingung. Sebut aksi utamanya di prompt dan minta tombol yang sama muncul di beberapa titik: di hero, di bagian produk, dan sebagai tombol mengambang.
Prompt tambahan untuk struktur
Susun halaman dengan urutan: hero, keunggulan, produk, testimoni, FAQ, ajakan penutup, lalu footer. Satu ajakan utama di seluruh halaman: memesan lewat WhatsApp. Tombol itu muncul di hero, di tiap kartu produk, dan sebagai tombol mengambang di ponsel. Teks tombol harus spesifik (misalnya “Pesan via WhatsApp”), bukan “Klik di sini”.
Langkah 3
Setelah AI selesai, simpan hasilnya sebagai file dengan akhiran .html lalu buka di browser. Lihat di dua ukuran: lebar ponsel dan lebar laptop. Kalau kamu memakai browser di komputer, ada mode tampilan ponsel di alat pengembang yang membantu mensimulasikannya.
Pada contoh di video, model AI menghasilkan halaman dengan arah visual yang konsisten: latar krim hangat, warna tombol terakota, teks dan blok gelap berwarna cokelat espresso, kombinasi huruf Inter dengan aksen serif miring pada kata kunci di judul, serta ilustrasi botol dan gelas kopi yang dibuat dari SVG di dalam file itu sendiri, tanpa gambar dari internet. Struktur halamannya mengikuti daftar di prompt: bagian pembuka dengan tombol pesan, tiga keunggulan, tiga varian produk dengan harga contoh, testimoni, FAQ yang bisa dibuka-tutup, ajakan penutup, dan tombol WhatsApp yang muncul mengambang di ponsel. Halaman itu dicek di lebar ponsel dan laptop, dan hasilnya tidak ada bagian yang menyebabkan layar bergeser ke samping. Ini hanya satu hasil dari satu percobaan dengan model Claude Opus. Prompt yang sama di AI lain atau di percobaan lain bisa menghasilkan tampilan yang berbeda.
Saat menilai hasil, pakai daftar berikut. Kamu tidak perlu paham desain untuk memakainya.
- 1Lima detik pertama: apakah orang paham toko ini jual apa dan harus melakukan apa?
- 2Tombol utama: apakah mudah dilihat dan cukup besar untuk ditekan jari di ponsel?
- 3Keterbacaan: apakah teks cukup besar dan kontrasnya enak dibaca di layar ponsel?
- 4Ritme halaman: apakah tiap bagian punya jarak yang konsisten, dan tidak ada bagian yang terasa menempel atau kosong terlalu lebar?
- 5Ilustrasi dan warna: apakah gayanya konsisten dari atas sampai bawah?
- 6Isi: adakah kalimat yang berlebihan, klaim yang tidak bisa dibuktikan, atau angka yang tidak sesuai?
Soal hasil yang berbeda-beda
Prompt yang sama bisa menghasilkan halaman yang berbeda tiap kali dijalankan, dan kualitasnya bergantung pada model AI yang dipakai. Kalau hasil pertama kurang cocok, jangan menulis ulang dari nol. Lanjutkan ke langkah revisi.
Langkah 4
Kekuatan utama bekerja dengan AI adalah revisi bertahap. Kamu tidak perlu menyebut istilah teknis. Cukup jelaskan apa yang ingin diubah seperti sedang berbicara ke desainer.
Contoh revisi
Bikin tombol “Pesan via WhatsApp” di bagian atas lebih besar, dan ganti warna utama jadi lebih hangat. Jangan ubah bagian lain.
- Satu permintaan, satu tujuan. Revisi yang terlalu banyak sekaligus membuat hasilnya sulit dibandingkan.
- Sebut bagian yang dimaksud: “di hero”, “di kartu produk kedua”, atau “di bagian FAQ”.
- Sebut batasannya: “jangan ubah bagian lain” mencegah AI menulis ulang seluruh halaman.
- Minta penjelasan singkat perubahan, supaya kamu tahu apa yang diubah.
- Kalau hasilnya justru lebih buruk, minta kembali ke versi sebelumnya dan coba cara lain.
Revisi: tampilan di ponsel
Periksa halaman ini di lebar layar 360 sampai 390 piksel. Perbaiki teks yang terpotong, tombol yang terlalu kecil (minimal 48 piksel), dan bagian yang membuat layar bisa digeser ke samping. Sebutkan apa yang kamu ubah.
Revisi: nada tulisan
Tulis ulang teks hero dan keunggulan dengan nada yang lebih santai dan akrab, kalimat pendek, tanpa janji berlebihan seperti “terbaik” atau “nomor satu”.
Langkah 5
Halaman yang bagus belum tentu halaman yang benar. Karena semua isi awalnya berupa contoh, langkah ini menentukan apakah halamanmu aman dan jujur untuk dipakai berjualan.
- 1Harga: ganti semua harga contoh dengan harga sebenarnya, termasuk satuan dan ukuran.
- 2Nomor WhatsApp: pakai nomor tokomu sendiri dan coba tombolnya sampai terbuka ke chat yang benar.
- 3Testimoni: pakai hanya dari pelanggan yang benar-benar ada dan sudah mengizinkan. Menulis testimoni palsu menyesatkan pembeli dan bisa merugikanmu.
- 4Klaim produk: hapus atau sesuaikan klaim yang tidak bisa kamu buktikan, misalnya kesehatan, izin edar, atau kata “terbaik” tanpa dasar.
- 5Informasi toko: periksa nama toko, jam layanan, area pengiriman, cara pembayaran, dan kebijakan retur kalau ada.
- 6Uji tampilan: buka di dua atau tiga ukuran layar dan di browser yang berbeda sebelum dibagikan.
Setelah isinya benar, kamu perlu menaruh halamannya di internet agar bisa dibuka orang lain. Satu file HTML bisa dipasang di layanan hosting halaman statis, atau diminta bantuan orang yang mengelola situsmu. Banyak layanan menyediakan paket gratis atau murah untuk halaman sederhana, tapi syarat dan batasnya berbeda dan bisa berubah, jadi baca ketentuan terbaru layanan yang kamu pilih.
Jangan lupa
Halaman yang dihasilkan AI belum mencakup hal teknis seperti pelacakan pengunjung, optimasi mesin pencari yang mendalam, atau pembayaran otomatis. Untuk kebutuhan itu, pertimbangkan bantuan profesional atau platform khusus.
Bank prompt
Audit UX oleh AI
Berikut kode landing page tokoku: [tempel kode]. Periksa dari sisi pengalaman pengguna di ponsel. Beri maksimal 5 perbaikan yang paling berdampak, urut dari yang terpenting, masing-masing dengan alasan satu kalimat. Jangan mengubah kodenya dulu.
Perbaiki teks jualan
Berikut teks halaman tokoku: [tempel teks]. Tulis ulang agar lebih jelas dan mudah dipindai: judul yang menjelaskan manfaat, kalimat pendek, dan tombol dengan teks spesifik. Jangan menambah klaim yang tidak kuberikan.
Tambah satu bagian
Tambahkan satu bagian “Cara pesan” dengan 3 langkah sederhana di antara bagian produk dan testimoni. Gaya visualnya harus sama dengan bagian lain. Jangan ubah bagian yang sudah ada.
Versi lebih ringan
Buat versi halaman ini yang lebih ringan: kurangi ilustrasi dan efek yang tidak perlu, tapi pertahankan tampilan dan semua isi.
Panduan
- Prompt terlalu umum, misalnya “buatkan landing page toko”. Hasilnya akan generik karena AI harus menebak semuanya.
- Tidak menyebut aksi utama, sehingga halaman penuh tombol dengan tujuan berbeda.
- Tidak menandai data contoh, lalu lupa mengganti harga atau testimoni sebelum dipublikasikan.
- Langsung mempublikasikan hasil pertama tanpa mengecek di ponsel.
- Merevisi semuanya sekaligus, lalu bingung mana perubahan yang membuat hasil memburuk.
- Menganggap hasil AI pasti benar. Cek klaim, angka, dan tautan satu per satu.
Ringkasan
Apa yang kamu lakukan di tiap langkah
| Langkah | Yang kamu lakukan | Hasilnya |
|---|---|---|
| 1. Tulis prompt | Sebut jenis halaman, nama toko, gaya, isi, dan format | Kerangka halaman lengkap |
| 2. Sebut isi halaman | Tentukan bagian dan satu aksi utama | Struktur yang runtut |
| 3. Lihat hasil | Buka di ponsel dan laptop, pakai daftar nilai | Daftar hal yang perlu diperbaiki |
| 4. Revisi | Satu permintaan per revisi, sebut bagiannya | Halaman yang makin sesuai |
| 5. Cek | Harga, nomor, testimoni, klaim, dan tampilan | Halaman yang jujur dan siap dipakai |
Semua contoh toko dan isi halaman di artikel ini fiktif.
Apakah saya perlu bisa coding?+
Tidak untuk membuat dan merevisi halaman, karena kamu cukup menjelaskan keinginanmu dengan kalimat biasa. Namun untuk memasangnya di internet kamu perlu mengikuti langkah dari layanan hosting yang dipilih, atau minta bantuan orang yang paham.
Apakah hasil di video benar-benar dari satu prompt?+
Halaman di video dibuat oleh model AI dari prompt yang ditampilkan di video dan di artikel ini. Untuk keperluan perekaman, ditambahkan batasan teknis (misalnya semua isi harus langsung terlihat dan tidak boleh memuat gambar dari internet). Hasilnya bisa berbeda tiap percobaan, dan model yang dipakai memengaruhi kualitasnya.
Pakai AI yang mana?+
Prompt-nya bisa dicoba di AI apa saja yang bisa menulis kode. Contoh di video dibuat dengan model Claude Opus. Kualitas dan gaya hasil tiap AI berbeda, jadi coba beberapa dan bandingkan.
Bisa dipakai untuk toko sungguhan?+
Bisa sebagai titik awal, asalkan semua isi diganti dengan data asli dan kamu mengecek tampilannya di berbagai perangkat. Untuk kebutuhan yang lebih kompleks seperti pembayaran otomatis, gunakan platform atau bantuan profesional.
Hasilnya jelek, apa yang harus dilakukan?+
Jangan mulai dari nol. Sebut dengan spesifik apa yang kurang, revisi satu hal per permintaan, dan minta AI menjelaskan perubahannya. Kalau tetap tidak cocok, coba perbaiki prompt dasarnya dengan gaya, warna, dan contoh yang lebih jelas.
Aman nggak memasukkan data toko ke AI?+
Untuk membuat halaman, kamu tidak perlu memasukkan data pribadi atau data pelanggan. Pakai data contoh dulu, dan cek ketentuan privasi layanan AI yang kamu pakai.
Toko Kopi Senja, produk, harga, nomor WhatsApp, dan testimoni di artikel dan video ini fiktif dan hanya untuk contoh. Hasil dari AI bisa berbeda tiap percobaan dan bisa keliru. Pastikan semua isi halaman sesuai kenyataan tokomu sebelum dipublikasikan. Artikel ini bagian dari seri tips jualan online.
Ivan Darmawan
Tutorial Claude AI buat kerjaan & bisnis