Panduan Setting Template Lalaris dan Posting Produk (Versi 2.0.1)

Panduan Template WhatsDeliver Versi 2.0.1

Banyak yang bilang "ORANG INDONESIA MALAS MEMBACA"

Mari buktikan kita bukan orangnya, dengan mengikuti langkah 1 sampai selesai.

Catatan: Khusus untuk yang udah beli dan menggunakan versi sebelumnya:

Jika Anda sebelumnya sudah membeli dan menggunakan versi 2.0.0 dan ingin melakukan update, silakan ikuti mulai dari langkah 2. Untuk pengaturan sama seperti versi 2.0.0, yang membedakan pada langkah 13, yaitu mengatur Google Form.
  • Semua setingan toko di menu Tata Letak harus diseting ulang
  • Postingan produk masih aman, tidak perlu posting ulang

Fitur baru di versi 2.0.1:

  • Data pesanan tersimpan di Google Form & Spreadsheet
  • Penambahan tombol detail produk
  • Form catatan di setiap produk yang dipesan
  • Penambahan widget metode pembayaran QRIS

Langkah 1: Buat blog baru

Sebelum melanjutkan, yang perlu Anda siapkan:

  • Laptop/PC/HP
  • Koneksi internet
  • File Template Blogspot Lalaris (WhatsDeliver) yang sudah dibeli di lalaris.com

Semua langkah di bawah ini wajib dilakukan jika ingin website toko online Anda tampil dan berfungsi sesuai demo.

Langkah 1: Tonton video atau baca tulisan di bawah

  • Login ke Blogger.com menggunakan email gmail.
  • Jika Anda belum pernah membuat Blog di akun Blogger, di pojok kiri atas klik menu 3 garis dan klik Buat Blog.
  • Jika Anda sudah pernah membuat blog, di sebelah kiri, klik tanda panah ke bawah seperti ini Panah bawah
  • Klik Blog baru.
  • Masukkan nama blog, misalnya Nama Toko Anda.
  • Klik Berikutnya.
  • Pilih URL atau alamat blog, misalnya namatokoanda.blogspot.com.
  • Klik Simpan.

Langkah 2: Instalasi template blog

Langkah 2: Tonton video atau baca tulisan di bawah



Setelah Anda melakukan pembayaran dan terkonfirmasi, sistem akan mengirimkan file template Blogger ke alamat email yang digunakan ketika melakukan pemesanan.

Siapkan file template dengan format .xml pastikan untuk didownload terlebih dahulu, jangan langsung di copy paste dari Google Drive, karena bisa error.

Untuk yang belum tahu cara downloadnya, setelah link file Template Website dibuka, klik menu download seperti pada gambar di bawah:

Klik gambar untuk memperbesar



Pada panduan ini, saya akan mencontohkan dengan menggunakan file WhatsDeliver Versi 2.0.1.xml dan file Template Postingan.txt.
  • Buka file menggunakan notepad
  • Copy source code file WhatsDeliver Versi 2.0.1.xml, dengan cara CTRL + A lalu tekan tombol CTRL + C.

Langkah 3: Kembali ke Blogger.com lalu paste kode ke dalam pengaturan tema Blogger

Ada dua opsi cara memasang template website toko online, yaitu dengan cara:
  • Copy paste kode
  • Upload file WhatsDeliver Versi 2.0.1.xml.
Dua cara tersebut bisa ikuti panduan di video ini atau tulisan di bawah.

Catatan: Jika menggunakan perangkat HP, untuk langkah 3 silakan ikuti panduan di halaman ini yaitu upload file .xml.

Opsi a: Copy Paste source code template

Opsi b: upload template

Pada Laptop atau PC bisa mengikuti keduanya, untuk copy paste kode ikuti cara ini:
  • Klik menu Tema (no 1)
  • Klik Tanda Panah seperti ini Panah bawah (no 2)
lihat gambar untuk lebih jelasnya.
Klik gambar untuk memperbesar

  • Klik Edit HTML



Klik gambar untuk memperbesar

  • Blok semua kode dengan cara tekan tombol CTRL + A

Klik gambar untuk memperbesar

  • Lalu hapus kode template lama

Klik gambar untuk memperbesar

  • Paste kode template yang sebelumnya sudah di Copy di Langkah 2, caranya CTRL + V.
Klik gambar untuk memperbesar



  • Tekan tombol Simpan seperti pada gambar di bawah

Klik gambar untuk memperbesar

  • Kembali ke halaman sebelumnya, dengan menekan tandan panah seperti gambar di bawah

Klik gambar untuk memperbesar


  • Refresh halaman, lalu pilih tanda Panah bawah lagi, pada menu Template
Klik gambar untuk memperbesar

  • Klik bagian Setelan Seluler:

Klik gambar untuk memperbesar

  • Pilih Desktop lalu tekan tombol SIMPAN
Klik gambar untuk memperbesar

Langkah 4: Pengaturan lanjutan

Tidak seperti pengaturan template di versi 1.0.0, untuk versi 2.0.0 lebih mudah, karena tidak melalui edit source code, melainkan diatur melalui menu Tata Letak.

Caranya klik menu Tata Letak.

Akan tampil pengaturan untuk website toko online Anda.

Klik gambar untuk memperbesar


Langkah 4.a: Ubah atau Pasang Logo

Mau ubah logo seperti pada gambar di bawah?

Klik gambar untuk memperbesar



Pada menu Tata Letak, silkan klik edit pada bagian header-section.

  • Terdapat dua opsi, bisa langsung pasang URL gambar atau Upload gambar dari perangkat Anda, silakan pilih salah satu. Penempatan gambar harus pilih yang tengah yaitu Selain judul dan deskripsi supaya gambar presisi. Lalu tekan Simpan.
Klik gambar untuk memperbesar

Langkah 4.b: Upload Gambar Banner Slider

Banner slider adalah gambar yang bergeser seperti gambar di bawah.

Klik gambar untuk memperbesar



Cara menggantinya silakan pilih menu Tata Letak > Klik Icon Pensil pada salah satu widget gambar.

Klik gambar untuk memperbesar

Siapkan gambar untuk slider, pastikan gambar slider memiliki ukuran yang sama antara slider satu dengan yang lainnya. Pada contoh demo memiliki ukuran 1200x400 pixel.

Ukuran gambar bebas tentukan sendiri, supaya tampilannya rapi, disarankan setiap gambar ukurannya sama.

Terdapat dua pilihan, bisa memasukkan URL gambar atau langsung pilih upload gambar, jangan lupa tekan tombol Simpan. Lihat gambar di bawah untuk lebih jelasnya.


Klik gambar untuk memperbesar

Langkah 4.c: Nonaktifkan Banner Slider

Untuk versi template 1.0.1 terdapat 6 banner slider, Anda bisa menonaktifkannya jika ingin menampilkan slider kurang dari 6. Caranya...

Klik menu Tata Letak, pilih banner yang ingin dinonaktifkan dengan menekan ikon pensil.

Lihat gambar:

Klik gambar untuk memperbesar

Geser tombol seperti yang terlihat pada gambar di bawah, lalu Simpan.

Klik gambar untuk memperbesar

Langkah 4.d: Pasang Nomor WhatsApp

  • Mengubah nomor WhatsApp, pilih Tata Letak, pada bagian Nomor WhatsApp, klik ikon pensil.

Klik gambar untuk memperbesar



Klik kembali ikon pensil di baris nomor WhatsApp

Klik gambar untuk memperbesar



Ganti nomor dengan nomor WhatsApp yang diinginkan diawali dengan nomor 62 seperti pada gambar di bawah. Klik tombol Simpan. Untuk Versi 2.0.0 sudah tidak menggunakan tanda petik.

Klik gambar untuk memperbesar



Terakhir, klik lagi tombol Simpan

Perhatian: teks waNumber jangan diubah.

Langkah 4.e: Atur Lokasi Outlet/Toko

  • Menentukan lokasi outlet cukup mudah, terutama kalau sudah terdaftar di Google Maps, silakan catat nomor seperti yang terlihat pada gambar di bawah.

Klik gambar untuk memperbesar

  • Jika lokasi toko/outlet Anda belum terdaftar di Google Maps, cukup klik kanan pada titik lokasi, lalu klik kode koordinat, otomatis akan tersalin dan paste di notepad.
  • Kode koordinat terdiri dari 2 bagian, contohnya seperti ini -7.780846978472633, 110.37283237240192.
  • Yang pertama adalah Longtitude -7.780846978472633 dan yang kedua adalah Latitude 110.37283237240192.
  • Pada pengaturan Blogger, pilih menu Tata Letak, lalu klik ikon pensil pada widget Lokasi Outlet, lihat gambar di bawah:

Klik gambar untuk memperbesar


  • Masukkan nomor latitude dan longtitude yang didapatkan dari Google maps, ganti nomor yang ada di template sebelumnya.

Klik gambar untuk memperbesar

Hanya ganti angka yang ada di dalam form URL situs seperti pada gambar di bawah:

Klik gambar untuk memperbesar


Perhatian: teks outletLat dan outletLng jangan diubah.

Langkah 4.f: Seting Tarif Ongkos Kirim

Jika ingin menerapkan gratis ongkir berapapun jaraknya, silakan ikuti tutorial di tautan ini.

Pilih menu Tata Letak, lalu klik ikon pensil pada widget Konfigurasi Tarif.

Klik gambar untuk memperbesar



Sebelum mengatur tarif ongkir, Anda perlu memahami skema tarif yang berlaku pada template ini. 

Berikut ini adalah skemanya:

flatRate adalah tarif tetap, perKMRate adalah tarif yang dikenakan berdasarkan jarak per kilometer, maxDistance adalah batas jarak maksimal flatRate, maxDeliveryDistance adalah jarak maksimal pengiriman.

Berikut adalah perhitungan sesuai dengan gambar di bawah:

Jarak 3 KM ke bawah dikenakan tarif flat Rp10.000, jika di atas 3 KM dikenakan tarif tetap + tarif per KM. Maksimal pengiriman sampai 10 kilometer.

Untuk nilai tidak harus sama dengan contoh, Anda bebas menentukan sendiri.

Klik gambar untuk memperbesar

Perhatian: hanya ubah angka yang ditandai anak panah.

Langkah 4.g: Atur jam Operasional

Pilih menu Tata Letak, lalu klik ikon pensil pada widget Jam Operasional.

Klik gambar untuk memperbesar



Silakan disesuaikan dengan jam operasional outlet Anda, untuk format penulisan jam adalah 24 jam.

Klik gambar untuk memperbesar


Di akhir pengaturan terdapat OrderDiLuarJam, silakan isi TIDAK jika ingin mencegah orderan masuk diluar jam operasional, dan isi YA jika ingin menerima orderan di luar jam operasional.

Perhatian: hanya edit angka jam.

Langkah 4.h: Atur hari dan tanggal libur

Pilih menu Tata Letak, lalu klik ikon pensil pada widget Pengaturan Hari dan Tanggal Libur.

Klik gambar untuk memperbesar



Ada tiga jenis libur yang bisa Anda atur, yaitu Libur berdaarkan hari, Libur berdasarkan tanggal, dan Libur rentang tanggal.

Klik gambar untuk memperbesar

Jika outlet Anda tidak ada hari libur, silakan nonaktifkan widget Pengaturan Hari Libur, dengan cara menggeser tombol yang ada di pojok kanan atas dan klik SIMPAN.

Jika outlet ada hari libur, isi dengan nama hari hurufnya kecil semua. Jika lebih dari satu hari libur, isi nama hari dipisah dengan koma tanpa spasi, seperti ini sabtu,minggu.

hariLibur, tanggalLibur, rentangLibur bisa diisi lebih dari satu hari atau tanggal seperti contoh.

Perhatian: hanya edit nama hari dan tanggal yang ada di dalam form URL situs.


Langkah 4.i: Atur Metode Pembayaran

Pilih menu Tata Letak, pilih salah satu widget metode pembayaran, yaitu Cash, TransferE-Wallet dan QRIS.

Pada versi 2.0.1 terdapat opsi 4 metode pembayaran, Anda bisa menggunakan semua atau salah satu metode pembayaran.

Klik gambar untuk memperbesar



Untuk menambahkan metode pembayaran yang Anda miliki, silkan klik ikon pensil pada widget metode pembayaran yang ingin diubah.

Sebagai contoh adalah metode pembayaran transfer. Klik ikon pensil pada Pembayaran Transfer.

Klik gambar untuk memperbesar

Jika ingin mengubah teks TRANSFER silakan klik ikon pensil di samping kanan, lalu simpan. Edit instruksi pembayaran pada bagian instruction, hanya edit bagian yang diberi garis warna merah.


Klik gambar untuk memperbesar

Terakhir, silakan klik SIMPAN dan klik lagi SIMPAN

Klik gambar untuk memperbesar


Untuk metode pembayaran QRIS, bedanya hanya di penambahan gambar QRIS saja.

Ganti URL gambar dengan url gambar QRIS milik Anda, mulai dari https sampai .jpg, cara mendapatkan url gambar QRIS ikuti cara di halaman ini.

Klik gambar untuk memperbesar


Ganti link gambar QRIS dengan link QRIS milik Anda, mulai dari https sampai .jpg, cara mendapatkan url gambar QRIS ikutin cara ini.


Simpan perubahan dengan menekan tombol SIMPAN


Klik gambar untuk memperbesar


Untuk menonaktifkan metode pembayaran, klik ikon pensil pada salah satu metode pembayaran yang ingin dinonaktifkan.


Geser tombol untuk menonaktifkan lalu klik simpan:

Klik gambar untuk memperbesar

Langkah 5: Posting Produk

  • Pilih menu Setelan.





Klik gambar untuk memperbesar

  • Cari menu Template postingan dengan cara CTRL + F dan ketikkan Template postingan, lalu klik seperti gambar di bawah:

Klik gambar untuk memperbesar

  • Paste isi file Template postingan.txt, lalu klik tombol Simpan.

Klik gambar untuk memperbesar


  • Posting produk pertama Anda: untuk lebih jelasnya silakan lihat gambar di bawah.

Klik gambar untuk memperbesar

  • Sebelum posting, pastikan ubah jenis tampilan editor menjadi tampilan HTML.


Klik gambar untuk memperbesar

  • Lalu pilih Tampilan HTML

Klik gambar untuk memperbesar

  • Masukkan nama produk pada bagian judul:

Klik gambar untuk memperbesar

  • Masukkan harga pada baris harga, hanya masukkan angka saja seperti yang diberi garis bawah warna merah.

Klik gambar untuk memperbesar



  • Untuk upload gambar, silakan klik pada baris kosong di nomor 1 dan klik ikon gambar seperti yang terlihat pada gambar di bawah. Lalu pilih gambar produk di PC Anda.
Klik gambar untuk memperbesar

  • Yang ditandai kuning adalah teks dan angka yang bisa diubah, klik gambar untuk memberbesar.

Klik gambar untuk memperbesar

  • Pada contoh di bawah terdapat 2 variasi dan 1 addon. Untuk variasi bisa dibuat lebih dari satu dengan pilihan tidak terbatas, untuk addon hanya satu dengan pilihan tidak terbatas.
  • Jika produk tidak memiliki variasi atau addon, Anda bisa menghapus kode variasi atau addon, batasnya sesuai yang diberi kotak merah.

Klik gambar untuk memperbesar

  • Jika produk Anda tidak memiliki variasi dan addon, silakan hapus kode yang ada di dalam kotak merah.
Klik gambar untuk memperbesar

  • Jika produk Anda habis, silakan tambahkan kode: <p>Status/Habis</p> di baris paling bawah.
  • Isi kategori pada kolom label, boleh lebih dari satu kategori, dipisah oleh koma.
  • Lalu klik tombol Publikasikan

Klik gambar untuk memperbesar

Langkah 6: Posting Artikel Blog

Untuk posting artikel blog sama seperti posting produk di langkah 5, hanya saja tidak menggunakan format postingan produk.

Berikut langkahnya:

Buat postingan baru seperti posting produk dengan cara memilih menu Postingan > POSTINGAN BARU

Klik gambar untuk memperbesar


  • Masukkan judul dan ubah tampilan menulis seperti yang terlihat pada gambar di bawah.

Klik gambar untuk memperbesar


  • Hapus isi postingan yang otomatis terisi ketika membuat postingan baru, untuk label wajib menggunakan label Blog.

  • Simpan postingan dengan menekan tombol Publikasikan.

Klik gambar untuk memperbesar

Langkah 7: Menonaktifkan jenis pembelian (Opsional)

  • Untuk jenis pembelian ada 2, yaitu Delivery dan Takeaway

Klik gambar untuk memperbesar

  • Cara menonaktifkan jenis pembelian sama seperti menonaktifkan metode pembayaran, sebagai contoh menonaktifkan Takeaway, bukan widget Takeaway , laku geser tombol hijau dan klik tombol SIMPAN

Klik gambar untuk memperbesar

Langkah 8: Untuk jual produk digital (Opsional)

  • Untuk menjual produk digital, cukup nonaktifkan jenis pembelian Delivery, lalu edit widget Taeaway, ubah teksnya misal menjadi Digital atau Produk Digital. Anda bisa ubah bagian yang ditandai kotak merah. Jangan lupa klik tombol SIMPAN untuk menyimpan perubahan.

Klik gambar untuk memperbesar


Langkah 9: Seting diskon

  • Untuk diskon terdapat dua jenis, yaitu Diskon Ongkir dan Diskon Total belanja.
Klik gambar untuk memperbesar


  • Mengatur diskon total belanja, cukup edit widget Diskon Total Belanja dengan menekan tombol ikon pensil, lalu edit angka pada minOrder dan besaran diskon yang ingin diterapkan. Pada contoh ini, minimal beli 100.000 akan mendapatkan potongan harga 15.000. Setelah mengganti harga, jangan lupa tekan tombol SIMPAN.

Klik gambar untuk memperbesar

  • Untuk mengatur diskon ongkir, sama seperti mengatur diskon total belanja. Pada contoh di bawah, diskon ongkir 10.000 jika belanja minimal 50.000.

Klik gambar untuk memperbesar

  • Untuk menonaktifkan jenis diskon, cukup geser tombol berwarna hijau lalu klik tombol SIMPAN.

Klik gambar untuk memperbesar

Langkah 10: atur jumlah produk dan postingan di home

Untuk mengatur jumlah produk dan postingan di home, silakan pilih menu Tata Letak, lalu pada bagian widget Postingan Blog klik Edit.

Klik gambar untuk memperbesar

Setelah itu isi angka, misalnya 50 lalu klik tombol SIMPAN.

Klik gambar untuk memperbesar

Langkah 11: Atur menu di header

Pada bagian header terdapat menu dropdown yang bisa Anda isi ke halaman lain, misalnya halaman cara pemesanan, About, atau halaman lainnya yang sudah dibuat melalui menu Halaman.

Klik gambar untuk memperbesar

Pada menu Tata Letak silakan pilih widget Menu dan klik Edit

Klik gambar untuk memperbesar

Pada halaman pengaturan ini Anda bisa edit, hapus, tambah menu seperti yang terlihat pada gambar di bawah.

Klik gambar untuk memperbesar

Langkah 12: Sembunyikan teks Blog dan tombol Lihat Semua Blog >>


Cara ini dilakukan jika website Anda tidak membuat konten blog berupa artikel dan ingin menghilangkan teks Blog dan tombol Lihat Semua Blog>> seperti gambar di bawah:

Klik gambar untuk memperbesar

Silakan edit kode template, caranya:
  • Klik menu Tema (no 1)
  • Klik Tanda Panah seperti ini Panah bawah (no 2)
lihat gambar untuk lebih jelasnya.

Klik gambar untuk memperbesar

  • Klik Edit HTML



Klik gambar untuk memperbesar

  • Cari teks Blog</ dengan cara klik sembarang pada kode, lalu tekan CTRL + F pada keyword dan tekan Enter.

  • Selanjutnya pada baris kode Blog dan tombol  Lihat Semua Blog, tambahkan kode ini <!-- di awal, dan kode ini -->> di akhir kode. Lihat gambar di bawah untuk lebih jelasnya.

Klik gambar untuk memperbesar


Sebelum diperbarui:
<h2 style='font-size:1.5rem;margin-bottom:18px;'>Blog</h2>
Setelah diperbarui:
<!-- <h2 style='font-size:1.5rem;margin-bottom:18px;'>Blog</h2> -->

Setelah diperbarui:
<a class='load-more' href='/search/label/blog'>Lihat Semua Blog &gt;&gt;</a>
Setelah diperbarui:
<!-- <a class='load-more' href='/search/label/blog'>Lihat Semua Blog &gt;&gt;</a> -->

  • Silakan simpan.

Klik gambar untuk memperbesar

Langkah 13: Seting penyimpanan data transaksi

Untuk melakukan pengaturan supaya data pesanan yang dikirimkan ke WhatsApp juga tersimpan di Google Sheet, ikuti langkah di halaman ini.

Langkah 14: Upload halaman Kontak, Kebijakan Privasi, Syarat dan Ketentuan

Pilih menu Setelan dan klik Impor konten


Klik gambar untuk memperbesar

Klik tombol IMPOR, lalu pilih file Halaman Privasi Kontak Syarat Ketentuan yang sudah didownload

Klik gambar untuk memperbesar

Setelah proses impor selesai, klik menu HALAMAN, silakan sesuaikan isi konten pada setiap halaman tersebut, terutama pada halaman Kontak


Klik gambar untuk memperbesar

Klik gambar untuk memperbesar

Langkah 15: Konfirmasi Alamat Website Toko Online Anda


Setelah semua langkah di atas selesai, silakan lakukan konfirmasi alamat website, caranya:

Di bagian bawah halaman dashboard/admin pada Blogger.com, klik kanan teks Lihat blog lalu pilih Copy link address atau Salin URL
Klik gambar untuk memperbesar

Setelah dicopy, silakan klik Lihat blog, halaman website akan terbuka di tab baru, lalu klik link lalaris.com, akan diarahkan ke halaman konfirmasi website.

Silakan isi Nama, no WA, Email, dan paste/tempel link yang dicopy tadi pada kolom Alamat blog....
Klik gambar untuk memperbesar

Silakan tekan tombol Kirim ke WhatsApp, nanti akan diarahkan ke pesan WhatsApp, silakan kirimkan pesannya. Tunggu balasan dari admin.

Klik gambar untuk memperbesar

Catatan:
* Pastikan semua produk memiliki ukuran gambar panjang x lembar yang sama, supaya tampilan rapi.
** Anda wajib konfirmasi alamat blog yang ingin digunakan untuk template yang dibeli.
*** Jika pada tutorial ada yang tidak sesuai atau belum dipahami, silakan chat ke WhatsApp.


Komentar

Postingan populer dari blog ini

Panduan Setting Template Lalaris dan Posting Produk (Versi 2.0.0)

Panduan Seting Template Lalaris dan Posting Produk (Versi 1.0.0)