Panduan Menggunakan VioToko
Cara Posting Produk
Untuk posting produk langkah-langkahnya sama seperti posting artikel, bedanya untuk posting produk wajib menggunakan mode HTML.
Caranya:
- Login ke “Blogger” > Buat Postingan baru
- Pada editor postingan pilih mode “HTML”
- Setelah itu letakan kode ini pada bagian konten :
<div class="gambar-produk">
<div class="gambar-slide">
<img alt="Gambar Produk" src="URL-GAMBAR-1" />
<img alt="Gambar Produk 2" src="URL-GAMBAR-2" />
</div>
<div class="status-produk">
<div class="promo">Promo</div>
<div class="produk-terlaris">Terlaris</div>
<div class="stok-habis">Stok Habis</div>
</div>
</div>
<div class="detail-produk">
<div class="harga-produk"><strike>Rp200.000</strike> Rp150.000</div>
</div>
<div class="deskripsi-produk">
Deskripsi produk di sini...
</div>
<meta content="150000" itemprop="price"/>KETERANGAN :
- URL-GAMBAR-1, URL-GAMBAR-2
Ganti dengan URL gambar produk, usahakan gambar diupload di blogger, bukan dari tempat lain.
Rekomendasi ukuran gambar menggunakan aspek rasio 4:5, misalnya jika lebar gambar 300px, maka tingginya adalah 375px. (cara upload gambar ke blogger baca di sini)
- Untuk menghilangkan keterangan stok habis, hapus kode:
<div class="stok-habis">Stok Habis</div>
- Untuk menghilangkan keterangan promo, hapus kode:
<div class="promo">Promo</div>
- Untuk menghilangkan keterangan terlaris, hapus kode:
<div class="produk-terlaris">Terlaris</div>
- <strike>Rp200.000</strike>
Ganti angkanya sesuai dengan harga yang ingin dicoret.
- Rp150.000
Ganti angkanya sesuai dengan harga produk yang dijual.
- Deskripsi produk di sini…
Ganti dengan deskripsi produk yang dijual.
- content=”150000″
Ganti angka 150000 dengan harga produk tanpa pemisah koma/titik dan juga tanpa simbol mata uang.
- Jika sudah, klik “Publikasikan“
Cara Posting Artikel
Cara posting artikel prosesnya sama seperti posting artikel biasa, tanpa perlu lewat mode HTML.
Namun untuk posting artikel harus menyertakan salah satu dari label berikut:
- Blog
- Artikel
- Articles
Note:
- Nama label harus sama persis, diawali huruf besar.
- Postingan artikel akan ikut muncul di homepage. Supaya tidak muncul di homepage, atur tanggal postingan artikelnya lebih lama dari tanggal postingan produk.
- Template VioToko tidak dioptimalkan untuk posting artikel biasa. Saran saya jangan terlalu banyak memposting artikel.
- Masuk ke menu “Tata Letak”
- Klik edit pada Widget Menu Navigasi
- Setelah itu masukan kode ini:
<li><a href="#">Contoh Menu</a></li>Ganti yang bertanda merah dengan URL tujuan, misalnya jika ingin menunya mengarah ke halaman label, maka isi dengan URL label.
Yang bertanda hijau juga diganti sesuai dengan keinginan.
Jika ingin menambahkan menu lagi, cukup salin kodenya dan letakan tepat di bawahnya.
Menambah menu dengan submenu
Untuk menambahkan menu disertai dengan submenu, gunakan kode ini:
<li class="has-sub"><a href="#">Menu Utama</a>
<ul>
<li><a href="#">Submenu Satu</a></li>
<li><a href="#">Submenu Dua</a></li>
<li><a href="#">Submenu Tiga</a></li>
</ul>
</li>Letakan kode tersebut tepat di bawah kode menu yang sebelumnya.
Ganti yang bertanda merah dengan URL tujuan, dan yang berwana hijau diganti dengan nama menu sesuai kebutuhan.
Contoh kode yang digunakan di blog demo:
<li><a href="/search/label/Produk%20Pria">Produk Pria</a></li>
<li class="has-sub"><a href="#">Mantabb</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
</ul>
</li>
<li><a href="https://sugeng.id/viotoko-template-toko-online-blogspot/">Download Template Ini</a></li>Menambah Icon Media Sosial
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Icon Media Sosial
- Masukan kode ini di bagian konten widget:
<a aria-label="facebook" href="#"><span class="social-icon facebook-icon"><i></i></span></a>
<a aria-label="twitter" href="#"><span class="social-icon twitter-icon"><i></i></span></a>
<a aria-label="youtube" href="#"><span class="social-icon youtube-icon"><i></i></span></a>
<a aria-label="instagram" href="#"><span class="social-icon instagram-icon"><i></i></span></a>
<a aria-label="linkedin" href="#"><span class="social-icon linkedin-icon"><i></i></span></a>
<a aria-label="whatsapp" href="#"><span class="social-icon whatsapp-icon"><i></i></span></a>
<a aria-label="googlemaps" href="#"><span class="social-icon googlemaps-icon"><i></i></span></a>
<a aria-label="telegram" href="#"><span class="social-icon telegram-icon"><i></i></span></a>
<a aria-label="pinterest" href="#"><span class="social-icon pinterest-icon"><i></i></span></a>Silakan edit yang bertanda merah dengan URL akun media sosial milik sobat.
Untuk menghapus salah satu icon media sosial, cukup hapus dari kode <a sampai </a>
Misalnya ingin menghapus icon instagram, maka cukup hapus kode ini :
<a aria-label="instagram" href="#"><span class="social-icon instagram-icon"><i></i></span></a>Mengedit Kode Pengaturan Template
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Kode Pengaturan Template
- Masukan kode ini di bagian konten widget:
<script>
var vioTokoSetting = {
relatedPosts: true,
jumlahRelatedPosts: 4,
relatedPostsThumb: true,
sliderLoop: true
};
</script>Berikut penjelasan dari kode tersebut:
- relatedPosts
Isi true untuk mengaktifkan fitur related posts, atau isi false untuk menonaktifkannya. - jumlahRelatedPosts
Jumlah postingan yang muncul di related posts di bawah postingan, edit sesuai selera. - relatedPostsThumb
Isi true untuk menampilkan related posts dengan thumbnail, atau isi false untuk menampilkan related posts tanpa thumbnail. - sliderLoop
Isi true untuk mengaktifkan mode loop pada slider gambar produk, atau isi false untuk menonaktifkannya.
Mengedit Kode Pengaturan Call-to-Action
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Kode Pengaturan Call-to-Action
- Masukan kode ini di bagian konten widget:
<script>
var vioTokoCta = {
judulCTA : true,
teksJudulCTA : "Order Sekarang :",
tombolWA : true,
nomorWA : "6285000000000",
teksPesanWA : "Halo Bosku. Saya mau pesan",
tombolSMS : true,
nomorSMS : "085000000000",
teksPesanSMS : "Halo Kak. Saya mau pesan",
tombolTelpon : true,
nomorTelpon : "085000000000",
};
</script>Berikut penjelasan dari kode tersebut:
- judulCTA
Isi true untuk menampilkan judul di atas tombol Call-to-Action. Isi false untuk menyembunyikannya. - teksJudulCTA
Teks judul di atas tombol Call-to-Action. Edit sesuai selera. - tombolWA
Isi true untuk menampilkan tombol WhatsApp. Isi false untuk menyembunyikannya. - nomorWA
Isi dengan nomor WhatsApp milik sobat. (Harus diawali dengan 628, bukan 08) - teksPesanWA
Teks yang otomatis muncul ketika pembeli melakukan chat melalui WhatsApp. Edit sesuai selera. - tombolSMS
Isi true untuk menampilkan tombol SMS. Isi false untuk menyembunyikannya. - nomorSMS
Isi dengan nomor untuk menerima SMS. - teksPesanSMS
Teks yang otomatis muncul ketika pembeli melakukan SMS. Edit sesuai selera. - tombolTelpon
Isi true untuk menampilkan tombol telpon. Isi false untuk menyembunyikannya. - nomorTelpon
Isi dengan nomor untuk menerima panggilan telpon.
Memasang Widget Logo Jasa Pengiriman
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Logo Jasa Pengiriman
- Masukan kode ini di bagian konten widget:
<span class='pengiriman gosend'></span>
<span class='pengiriman grab'></span>
<span class='pengiriman jne'></span>
<span class='pengiriman jdant'></span>
<span class='pengiriman posindonesia'></span>
<span class='pengiriman tiki'></span>
<span class='pengiriman sicepat'></span>
<span class='pengiriman wahana'></span>
<span class='pengiriman indah'></span>
<span class='pengiriman herona'></span>
<span class='pengiriman pandu'></span>
<span class='pengiriman dakota'></span>- Terakhir klik “Simpan“
#1. Menghapus Logo yang Tidak Digunakan
Sobat bisa menghapus beberapa kode logo pengiriman yang tidak dibutuhkan.
Misalnya jika ingin menghapus logo wahana, maka cukup hapus kode:
<span class='pengiriman wahana'></span>Hapus dari kode <span sampai dengan /span>
#2. Menambah Logo Pengiriman Sendiri
Jika sobat ingin menambahkan logo pengiriman milik sendiri, silakan salin kode ini :
<span class='pengiriman' style='background-image:url(URL-GAMBAR);width:95px;'></span>Ganti URL-GAMBAR dengan URL gambar yang ingin sobat gunakan.
Letakan kode tersebut pada kolom konten widget yang sudah dipasang sebelumnya.
Memasang Widget Logo Pembayaran
- Masuk ke menu “Tata Letak”
- klik “Tambahkan gadget” di atas Footer
- Pilih Gadget “HTML/JavaScript“
- Masukan kode ini di bagian konten widget:
<span class='pembayaran bca'></span>
<span class='pembayaran bcasyariah'></span>
<span class='pembayaran bni'></span>
<span class='pembayaran bri'></span>
<span class='pembayaran brisyariah'></span>
<span class='pembayaran btpn'></span>
<span class='pembayaran cimb'></span>
<span class='pembayaran cimbsyariah'></span>
<span class='pembayaran dana'></span>
<span class='pembayaran gopay'></span>
<span class='pembayaran mandiri'></span>
<span class='pembayaran mandirisyariah'></span>
<span class='pembayaran ovo'></span>
<span class='pembayaran paypal'></span>
<span class='pembayaran permata'></span>#1. Menghapus Logo yang Tidak Digunakan
Sobat bisa menghapus beberapa kode logo pembayaran yang tidak dibutuhkan.
Misalnya jika ingin menghapus logo OVO, maka cukup hapus kode:
<span class='pembayaran ovo'></span>Hapus dari kode <span sampai dengan /span>
