NGltYlfpHgWiSSUCGik6kh8ZIoXqxuoYARA4nUWi
Bookmark

Template Toko Online berbasis WhatsApp (WA)

Bilalcoy
Bilalcoy
Update:
... menit baca
Dengarkan

Di era digital saat ini, berjualan secara online harus cepat, instan, dan efisien. Bagi Anda seorang Pebisnis Online yang menjual produk fisik, produk digital, maupun jasa, memiliki website toko online sendiri adalah sebuah keharusan untuk meningkatkan kepercayaan pelanggan.

Kabar baiknya, Anda tidak perlu menyewa hosting mahal! Cukup menggunakan platform gratis dari Blogger (Blogspot) yang dipadukan dengan Template Toko Online berbasis WhatsApp (WA) + Keranjang Pesanan. Setiap pesanan pelanggan akan otomatis direkap dan dikirimkan langsung ke nomor WhatsApp Anda. Sangat praktis!

🌟 Penasaran dengan hasil akhirnya?
Anda bisa melihat langsung simulasi nyata (Live Demo) dari template toko online ini melalui tautan berikut:


⚠️ Catatan Penting Lisensi Tema:
Template toko online ini bisa Anda gunakan secara 100% GRATIS selama Anda menggunakan subdomain bawaan Blogger (contoh: tokoanda.blogspot.com). Namun, jika Anda ingin menggunakan Domain Custom (contoh: tokoanda.com atau .co.id), Anda WAJIB membeli Lisensi Domain.

Spesial: Bagi Anda yang mengambil paket Berlangganan di layanan kami, lisensi penuh untuk tema ini akan kami berikan secara Cuma-cuma (Gratis)!
💎 Akses Lisensi

Info Singkat: Panduan ini akan membahas langkah demi langkah mulai dari cara instalasi tema, mengatur nomor WhatsApp, hingga cara mempublikasikan produk menggunakan berbagai generator praktis yang telah disediakan. Pastikan Anda sudah mengekstrak (unzip) 1 File Paket Tema yang Anda unduh, karena semua file pendukung ada di dalamnya.

1. Cara Instalasi Tema Blogger Toko Online

Buka folder paket tema yang sudah Anda ekstrak. Di dalamnya, cari file yang memiliki format .xml. Ada dua cara yang bisa Anda lakukan untuk memasang file ini ke dalam blog Anda.

💎 file Tema.xml

Peringatan! Pastikan Anda sudah membackup (mencadangkan) template lama Anda sebelum melakukan instalasi tema baru untuk menghindari hilangnya data modifikasi sebelumnya.

Cara 1: Melalui Fitur Pulihkan (Restore)

  1. Login ke dashboard Blogger.
  2. Pilih menu Tema (Theme) di bilah navigasi kiri.
  3. Klik tombol panah bawah di sebelah tombol Sesuaikan.
  4. Pilih Pulihkan (Restore).
  5. Klik Upload dan cari file .xml template toko online dari folder paket tema Anda.
  6. Tunggu beberapa saat hingga muncul notifikasi "Tema berhasil dipulihkan".

Cara 2: Melalui Edit HTML (Salin & Tempel Kode)

Gunakan cara ini jika terjadi error saat menggunakan fitur "Pulihkan" di Cara 1.

  1. Buka file .xml template toko online menggunakan aplikasi Text Editor (seperti Notepad di Windows atau TextEdit di Mac).
  2. Salin (Copy) seluruh teks kode yang ada di dalam file tersebut (tekan Ctrl + A lalu Ctrl + C).
  3. Login ke dashboard Blogger dan masuk ke menu Tema.
  4. Klik tombol panah bawah di sebelah tombol Sesuaikan, lalu pilih Edit HTML.
  5. Klik di sembarang tempat di dalam kotak kode editor, lalu blok semua kode bawaan (tekan Ctrl + A) dan Hapus (Delete).
  6. Tempel (Paste) kode template baru yang sudah Anda salin sebelumnya ke area kosong tersebut (tekan Ctrl + V).
  7. Klik tombol Simpan (ikon disket/simpan) di pojok kanan atas layar editor.

2. Cara Mengatur Nomor WA, Pembayaran & Pengiriman

Agar sistem keranjang belanja berjalan lancar, Anda perlu mengatur nomor WhatsApp penerima pesanan, detail rekening pembayaran, dan opsi pengiriman. Kami sudah menyediakan alat khusus agar Anda tidak perlu mengedit kode rumit.

Tips Produk Digital/Jasa: Jika Anda hanya menjual produk digital (Top Up, E-Course, dll) atau Jasa yang tidak memerlukan kurir fisik, Anda bisa menonaktifkan fitur Pengiriman (di-off-kan) langsung melalui generator di bawah ini.
  1. Buka halaman
    Generator Pembayaran & Pengirimanmelalui tautan ini

  2. Ikuti panduan dan isi formulir yang ada di generator tersebut (Nomor WA, Bank/E-Wallet, Ongkir dll).
  3. Setelah selesai, Salin (Copy) kode yang dihasilkan.
  4. Masuk ke menu Tata Letak (Layout) di Blogger Anda.
  5. Cari widget bernama Pengaturan WA & Pembayaran (atau Metode Pengiriman).
  6. Edit widget tersebut, paste kodenya, lalu klik Simpan.

3. Cara Membuat Halaman (Pages) Pendukung

Sama seperti postingan produk, di dalam paket tema juga sudah disiapkan file format HTML khusus untuk Halaman Statis pendukung toko seperti Cara Pemesanan, Tentang Kami, atau Syarat & Ketentuan. Ikuti langkah praktis ini:

Halaman (Pages)melalui tautan ini

  1. Masuk ke menu Halaman (Pages) di dashboard Blogger.
  2. Klik Halaman Baru dan beri judul, misalnya "Cara Pemesanan".
  3. Ubah mode penulisan ke Tampilan HTML (<>).
  4. Buka file format Halaman (Pages) dari folder paket tema, salin seluruh isinya, lalu Paste ke editor Blogger.
  5. Kembalikan ke mode Tampilan Menulis (Compose).
  6. Isi panduan, teks, dan langkah pembelian toko Anda langsung di dalam tabel yang sudah muncul di layar.
  7. Klik Publikasikan.

4. Cara Membuat Postingan Produk(Top Up, dll)

Selain produk standar, template ini memiliki fitur khusus untuk membuat halaman penjualan produk digital seperti Top Up Games, Voucher, dan layanan digital lainnya. Anda tidak perlu menyusun tampilan atau tombol dari nol karena semuanya dapat dibuat secara otomatis menggunakan generator.

Sebelum membuat halaman produk digital, Anda dapat melihat contoh hasil akhirnya melalui tautan berikut:



Berikut langkah-langkah untuk membuat postingan produk digital:

  1. Buka halaman Generator Produk Top Up melalui tautan berikut. Di dalam halaman generator tersedia panduan dan form pengisian untuk membuat tampilan produk digital secara otomatis.

    Buka Generator Top Up
    Generator Produk Top Upmelalui tautan ini

  2. Ikuti instruksi dan panduan pengisian form yang tersedia di halaman generator tersebut.
  3. Setelah form terisi lengkap, Salin (Copy) kode HTML hasil generator.
  4. Kembali ke Dashboard Blogger, kemudian buat Postingan Baru.
  5. Pindahkan editor ke mode Tampilan HTML (<>), lalu Tempel (Paste) kode HTML tersebut.
  6. Kembalikan ke mode Tampilan Menulis, sesuaikan jika diperlukan, lalu klik Publikasikan.

5. Cara Membuat Menu Navigasi Halaman (Pages) Pendukung

Menu navigasi berfungsi untuk memudahkan pengunjung mengakses halaman penting pada toko online Anda, seperti Tentang Kami, Kontak, Kebijakan Privasi, Cara Pemesanan, dan halaman pendukung lainnya.

Menu Navigasi Toko Online

Untuk membuat menu navigasi halaman, Anda cukup membuat halaman baru di Blogger, kemudian menambahkan URL halaman tersebut ke menu navigasi toko.

6 Langkah Menambahkan Halaman ke Menu Navigasi

Pengaturan Menu Navigasi Blogger
  1. Buat terlebih dahulu halaman baru melalui menu Halaman (Pages) di Blogger.
  2. Setelah halaman dibuat, salin URL halaman tersebut.
  3. Buka halaman Smart Navigation Generator V3 melalui tautan berikut. Tool ini juga menyediakan fitur Panduan & Pratinjau Ikon SVG Siap Pakai untuk membantu Anda membuat tampilan menu navigasi yang lebih menarik.

    Navigation Generator V3 Klik untuk membuka

  4. Masuk ke menu Tata Letak (Layout) pada dashboard Blogger.
  5. Cari widget Menu Navigasi, kemudian klik tombol Edit.
  6. Tambahkan nama menu, tempel URL halaman yang sudah disalin, lalu klik Simpan.

Setelah selesai, menu navigasi baru akan tampil pada bagian header toko online Anda dan dapat digunakan oleh pelanggan untuk mengakses berbagai informasi penting.

7. Cara Mengatur Tombol "Kunjungi Menu Di Bawah"

Pengaturan Menu Navigasi Blogger

Tombol "Kunjungi Menu Di Bawah" merupakan fitur navigasi cepat yang membantu pelanggan mengakses menu utama toko online dengan lebih mudah. Tombol ini dapat digunakan untuk mengarahkan pengunjung menuju katalog produk, halaman belanja, atau menu penting lainnya.

Untuk mempermudah pengaturan tombol ini, Anda dapat menggunakan Generator Kunjungi Menu Di Bawah yang sudah disediakan. Dengan generator ini, Anda hanya perlu mengikuti panduan, membuat konfigurasi tombol, lalu menyalin kode yang dihasilkan.

Langkah Mengatur Tombol Kunjungi Menu Di Bawah

  1. Buka halaman Generator Kunjungi Menu Di Bawah melalui tautan berikut:
    Generator Kunjungi Menu Di Bawah Klik untuk membuka

  2. Setelah halaman generator terbuka, ikuti Panduan Pengaturan yang tersedia untuk membuat tombol sesuai kebutuhan Anda.
  3. Setelah selesai melakukan pengaturan, klik tombol Generate, kemudian copy kode yang sudah dibuat oleh generator.
  4. Masuk ke dashboard Blogger, lalu buka menu Tata Letak (Layout).
  5. Cari bagian widget Kunjungi Menu Di Bawah, kemudian klik tombol Edit.
  6. Hapus kode lama (jika ada), lalu tempelkan kode hasil generator yang sudah Anda salin sebelumnya.
  7. Klik Simpan, kemudian buka halaman toko online Anda untuk melihat hasil perubahan.
💡 Tips:
Pastikan URL tujuan tombol sudah benar agar pelanggan dapat langsung menuju halaman menu atau katalog produk yang Anda inginkan.

Dengan fitur Kunjungi Menu Di Bawah, pelanggan dapat menemukan menu toko dengan lebih cepat sehingga pengalaman berbelanja menjadi lebih praktis dan profesional.

8. Cara Membuat Postingan Produk di Toko Online

Setelah template berhasil dipasang, langkah berikutnya adalah menambahkan produk ke dalam toko online. Pada template ini, Anda dapat membuat postingan produk dengan 2 metode, yaitu:

  • Metode 1: Menggunakan Generator Postingan Produk (Cara Cepat)
  • Metode 2: Menggunakan Format HTML Manual (Cara Fleksibel)

Kedua metode tersebut akan menghasilkan tampilan produk yang rapi lengkap dengan informasi produk, harga, deskripsi, serta tombol Keranjang Pesanan.

Metode 1: Membuat Produk Menggunakan Generator Postingan

Metode ini sangat direkomendasikan bagi pengguna yang ingin membuat produk dengan cepat tanpa harus mengedit kode HTML secara manual.

Langkah-langkah:

  1. Buka halaman Generator Postingan Produk melalui link berikut:

    Generator Postingan Produk Klik untuk membuka

  2. Isi semua data produk pada generator, seperti:

    ✅ Nama produk
    ✅ Foto/gambar produk
    ✅ Harga produk
    ✅ Deskripsi produk
    ✅ Spesifikasi produk
    ✅ Informasi tambahan lainnya
  3. Setelah semua data selesai diisi, klik tombol Generate.
  4. Copy seluruh kode HTML hasil generate.
  5. Masuk ke dashboard Blogger, lalu pilih:

    Postingan → Postingan Baru
  6. Pada editor postingan, ubah mode dari:

    Tampilan Menulis (Compose) menjadi Tampilan HTML (<>)
  7. Paste kode HTML hasil generator ke dalam editor postingan.
  8. Kembali ke mode:

    Tampilan Menulis (Compose)
  9. Tambahkan label produk pada bagian kanan postingan.

    Label wajib:

    Produk atau Product
  10. Klik tombol Publikasikan.
🎉 Selesai!
Produk Anda sudah berhasil dibuat dan otomatis tampil pada halaman toko online dengan tombol keranjang pesanan.

Metode 2: Membuat Produk Menggunakan Format HTML Manual

Selain menggunakan generator, Anda juga dapat membuat produk menggunakan file HTML yang sudah disediakan. Cara ini cocok bagi pengguna yang ingin melakukan pengeditan lebih detail pada tampilan produk.

File kode HTML format postingan produk dapat diakses melalui folder berikut:

Kode HTML Format Postingan Produk Klik untuk membuka folder

Langkah-langkah:

  1. Download file format postingan produk dari folder yang sudah disediakan.
  2. Buka menu:

    Postingan → Postingan Baru

    pada dashboard Blogger.
  3. Ubah mode editor dari:

    Tampilan Menulis (Compose) menjadi Tampilan HTML (<>)
  4. Buka file format produk yang sudah didownload (biasanya berformat .txt atau .html).
  5. Copy seluruh kode HTML yang terdapat pada file tersebut.
  6. Paste kode HTML ke dalam editor postingan Blogger.
  7. Ubah kembali mode editor ke:

    Tampilan Menulis (Compose)
  8. Tampilan produk akan otomatis tersusun dengan rapi. Silakan edit bagian berikut:

    🖼️ Gambar produk
    🏷️ Judul produk
    💰 Harga produk
    📋 Spesifikasi produk
    📝 Deskripsi produk
  9. Pada bagian kanan postingan, tambahkan label wajib:

    Produk atau Product

    Label ini berfungsi agar sistem toko online mengenali postingan tersebut sebagai produk.
  10. Klik tombol Publikasikan.
💡 Tips:
Gunakan Generator Postingan Produk jika ingin membuat produk dengan cepat dan mudah.

Gunakan metode HTML Manual jika ingin mengatur tampilan produk secara lebih detail.

Selamat! Produk Anda sekarang sudah berhasil ditambahkan ke toko online. Pelanggan dapat melihat produk, memasukkan ke keranjang pesanan, dan melakukan pemesanan melalui WhatsApp.

9. Fitur Advanced: Sistem Member Area & Panel Admin (Khusus Produk Digital)

Jika Anda ingin membangun bisnis produk digital yang lebih profesional, template ini sudah dilengkapi dengan fitur Advanced berupa Member Area dan Panel Admin.

Dengan fitur ini, Anda dapat membuat sistem penjualan produk digital yang lebih lengkap dengan dukungan:

  • 🔐 Sistem Login Member
  • 👤 Member Area Pelanggan
  • 📋 Riwayat Pesanan
  • 📦 Manajemen Produk Digital
  • ⚙️ Panel Admin Toko
  • 🔥 Database Firebase Google

Sistem Advanced ini menggunakan Firebase Google sebagai database untuk menyimpan data pengguna, pesanan, dan informasi produk digital.

⚠️ Syarat Wajib:
Sebelum menggunakan fitur Member Area dan Panel Admin, pastikan Anda sudah menyelesaikan langkah pada panduan sebelumnya:

3. Cara Membuat Halaman (Pages) Pendukung

Halaman pendukung diperlukan agar sistem toko dapat berjalan dengan baik. Jika halaman tersebut sudah dibuat, Anda dapat melanjutkan ke proses instalasi fitur Advanced berikut.

Langkah Instalasi Sistem Member Area & Panel Admin

  1. Setup Database Firebase

    Langkah pertama adalah membuat dan menghubungkan database Firebase dengan template toko online.

    Gunakan tool berikut:

    Generator Setting Firebase Klik untuk membuka panduan

    Ikuti semua langkah pada generator untuk membuat Firebase Project, mengatur database, dan menghubungkannya dengan template.

  2. Pasang Halaman Admin & Member Area

    Setelah Firebase berhasil dikonfigurasi, buka kembali folder paket tema yang sudah Anda ekstrak sebelumnya.

    Di dalam paket tema sudah tersedia file HTML khusus untuk:

    ✅ Panel Admin
    ✅ Member Area
    ✅ Sistem pendukung produk digital

    Copy kode HTML dari file tersebut, kemudian buat halaman baru di Blogger.

    Cara pemasangan sama seperti panduan:

    3. Cara Membuat Halaman (Pages) Pendukung

  3. Membuat Postingan Produk Digital

    Setelah Firebase berhasil dikonfigurasi dan halaman pendukung sudah dibuat, langkah berikutnya adalah membuat postingan produk digital.

    Untuk membuat produk digital, gunakan Generator Postingan Produk yang sudah dibuat sebelumnya.

    Anda dapat mengikuti panduan: Pada generator tersebut, pilih dan sesuaikan data produk digital yang akan dibuat.

    Isi informasi produk seperti:

    ✅ Nama produk
    ✅ Gambar produk
    ✅ Harga produk
    ✅ Deskripsi produk
    ✅ File atau link download produk
    ✅ Informasi tambahan lainnya

    Setelah selesai:

    1. Klik tombol Generate.
    2. Copy kode HTML hasil generator.
    3. Buat postingan baru di Blogger.
    4. Pilih mode Tampilan HTML (<>).
    5. Paste kode HTML tersebut.
    6. Klik Publikasikan.