Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online

Toko Online Blogspot Super Responsive dengan tukutoko THEME

Pada posting kali ini, ada beberapa sub bahasan mengenai template toko online dan alasannya mengapa menggunakan fitur whatsapp sebagai media checkoutnya. Berikut adalah daftar isi yang ada, sehingga Anda bisa langsung menuju ke bagian template jika ingin langsung mengetahui secara detail template ini.

  1. Alasan memakai fitur Whatsapp untuk checkout
  2. Sekilas Template tukutoko THEME
  3. Preview Template tukutoko THEME
  4. Q & A tukutoko THEME
  5. Panduan Edit Template tukutoko THEME

1. Alasan memakai fitur Whatsapp untuk checkout

Hampir semua Toko Online yang menggunakan website dengan berbagai platform, bisa dipastikan menggunakan whatsapp sebagai salah media untuk terhubung langsung dengan pengunjungnya, pembeli atau calon pembelinya. Berbagai kemudahan yang tersedia pada aplikasi chat yang dimiliki oleh Facebook, serta menjadi aplikasi chat dengan pengguna aktif terbanyak di dunia ini, menjadi salah satu penyebab pemilihan whatsapp.

Bahkan, berdasarkan statistik terakhir dari wearesocial.com, pengguna whatsapp aktif di Indonesia sudah mencapai 83%, hanya kalah dari pengguna youtube yang mencapai 88%.

Grafik pengguna aktif whatsapp menurut wearesocial.com
Foto dari we are social


Menurut exrush.com, dalam bisnis, whatsapp setidaknya memiliki 5 manfaat yaitu :

  1. Kemudahan saat berkomunikasi dengan dengan pelanggan. 
  2. Bisa sebagai alat promosi dan  pemasaran
  3. Bisa dipakai sebagai ruang untuk berkomunikasi bagi tim bisnis
  4. Bisa dimanfaatkan untuk tempat order/pemesanan
  5. Dengan cara yang tepat bisa dimanfaatkan untuk membesarkan bisnis.
Pada poin 4 di atas inilah tepatnya, Whatsapp saat ini banyak dipakai sebagai salah satu alternatif checkout untuk banyak web toko online. Sejak mulai populernya Whatsapp, saat ini sudah banyak template toko online yang melengkapi fitur checkoutnya menggunakan whatsapp, mulai dari fitur checkout yang sederhana sampai dengan fitur yang cukup lengkap.

Salah satu contohnya adalah template toko online tukutoko THEME ini yang memanfaatkan fitur checkout dengan memakai whatsapp, namun juga memanfaatkan form order yang sudah diatur sedemikian rupa untuk memudahkan pembelinya.

2. Sekilas Template tukutoko THEME

Template blogspot toko online baru ini dirancang dengan tampilan yang sederhana dan terfokus pada produk yang dijual. Dan yang terpenting adalah sengaja dirancang untuk memfokuskan pada berbagai fitur di tampilan mobilenya. Hal ini untuk menjawab penetrasi akses internet melalui mobile device (smartphone) yang sudah mencapai 80% lebih di Indonesia.

Ya, tujuannya adalah untuk menggaet pembeli yang mengakses internet via ponsel karena pasar yang besar tersebut. Otomatis beberapa fitur yang disematkan pada template ini sebisa mungkin fitur-fiturnya juga sudah harus mendukung untuk tujuan tersebut.

Sebelum membahas lebih jauh tentang berbagai fitur yang tersemat pada tukutoko THEME ini, sebaiknya Anda memeriksa dulu live demo templatenya, karena difokuskan untuk tampilan yang mobile friendly, Anda bisa mengeceknya melalui smartphone favorit Anda.

Lihat juga posting terkait ini : 

tukutoko THEME super responsive template toko online blogspot

3. Preview Template TUKUTOKO



4. Q & A tukutoko THEME

Berikut ini adalah informasi mengenai berbagai fitur pada template ini yang sengaja Saya kemas berupa tanya jawab untuk mempermudah pemahaman, khususnya bagi yang awam sekalipun. Sekalian untuk memberikan informasi terhadap beberapa pertanyaan yang sering mampir ke Tukang Toko Online.

Question (Q) : Apa platform template ini?
Answer (A): Ini adalah template Blogspot/Blogger

Q : Apakah bisa dipakai di platform selain blogspot?
A : Sayang sekali belum bisa.

Q : Apakah Saya perlu menyewa hosting tersendiri?
A : Blogspot sudah menyediakan hosting gratis dengan akses dan ruang penyimpanan yang tanpa batas.

Q : Apakah template ini sudah responsive
A : ya.., Anda bisa memeriksanya dengan memakai tool pengujian situs responsive yang banyak tersedia secara online.

Q : Apa fitur utama dari template ini?
A : ini adalah template untuk toko online dan fitur utamanya dimaksimalkan untuk tampilan mobilenya, ada fitur order langsung melalui 3 pilihan, yaitu telpon, SMS dan whatsapp yang hanya akan muncul otomatis di tampilan mobile seperti gambar berikut ini.

3 pilihan order tukutoko THEME

Ada fitur slide show post produk terbaru yang hanya muncul pada tampilan mobile.


slide show tukutoko THEME

Tersedia juga badge khusus jika stok kosong atau habis.


Tampilan label Habis tukutoko THEME

Masih banyak lagi fitur lainnya yang bisa Anda cek langsung melalui live demo.

Q : Apa ada kelebihan lainnya dari template ini?
A : tukutoko THEME juga sudah valid pada pengujian data terstruktur dari google, sehingga lebih mudah di rayapi oleh robot Google dan hasilnya setiap halaman lebih mudah dan cepat terindeks oleh Google.

uji data terstruktur google tukutoko THEME

Q : Apakah Template ini cukup cepat loadingnya?
A : Pada template ini sudah disematkan juga plugin lazy load yang sangat membantu meningkatkan kecepatan pemuatannya.

Q : Apakah template ini bisa diunduh gratis?
A : tukutoko THEME bisa diunduh gratis dari link unduhan yang disediakan di atas.

Q : Bagaimana cara mendapatkan versi lengkap tukutoko THEME dengan semua fiturnya dan tanpa credit link?
A : Anda bisa membelinya langsung melalui tombol beli di bawah ini

BELI TEMPLATE

5. Penting saat Editing tukutoko THEME

Untuk menginstal template bisa cek panduannya DISINI.

1. Mengedit Popup Order pada Desktop

edit popup order

Fitur order ini hanya muncul pada tampilan desktop atau tidak muncul di tampilan mobile (smartphone).

Di HTML Template >> cari Kode berikut ini >> Edit text yang berwarna merah.
<!-- Konten popup, silahkan ganti sesuai kebutuhan -->
  Produk : <font style='color:#da7d7d;text-transform: uppercase;'><data:post.title/></font><br/>
  Kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag' style='color:#da7d7d;'><data:label.name/></a><b:if cond='not data:label.isLast'>, </b:if></b:loop><br/>  Harga : <span id='harga'><script type='text/javascript'>var MyDiv1 = document.getElementById(&#39;item_price&#39;);
  var MyDiv2 = document.getElementById(&#39;harga&#39;);   MyDiv2.innerHTML = MyDiv1.innerHTML;</script></span>

  <center>Order via <b>SMS / WhatsApp: 08123 456 789</b> dengan format:<br/><br/>
    <span style='font-size:18px;font-weight:bold;border: dashed #333 1px;padding: 1px;color: #000;background:#fff;'>Nama/Nama Produk/jumlah/alamat/kota</span><br/></center><br/>
  Contohnya seperti ini : <br/><br/>
<b style='color:yellow;border:1px dashed #eee;padding:3px;margin:auto;'>Upin / <font style='color:#da7d7d;'><data:post.title/></font> / 3pcs / Jl. Wijaya 39A, Sidalaya / Tasikmalaya</b><br/><br/>
Format order tidak harus sama, yang penting bisa kami pahami. Secepatnya Kami akan melakukan konfirmasi melalui SMS ke no Hp Anda, setelah Order Kami terima.

<!-- Konten popup sampai disini-->

2. Mengedit Hubungi CS di Homepage

Fitur ini hanya muncul di tampilan mobile (smartphone) dan tidak muncul di laman produk.


edit hubungi Kami
di HTML Template >> cari kode berikut ini dan ganti text warna merah dengan no kontak toko Anda
<div class='orderbottom'><font style='font-size: 15px;font-weight:700;'> Hubungi CS Kami :</font> <a class='orderwhatsapp' expr:href='&quot;https://api.whatsapp.com/send?phone=6287865479684&amp;text=Halo%20CS,%20Saya%20mau%20tanya...&quot;'><i class='fab fa-whatsapp'/></a> <a class='ordersms' expr:href='&quot;sms:+6287865479684?body=Halo%20CS,%20Saya%20mau%20tanya...&quot;'><i class='fab fa-telegram'/></a> <a class='ordertelephon' href='tel:+62898928XXX'><i class='fas fa-phone'/></a></div>
Note:
Ganti  6287865479684 dengan No WA Anda
Ganti  +6287865479684 dengan No SMS Anda
Ganti  +62898928XXX dengan No Telp. Anda

3. Mengedit Order Sekarang di Laman Post

Fitur ini hanya muncul di tampilan Mobile (Smartphone) dan hanya muncul di laman Post Produk


edit order sekarang

di HTML Template >> cari kode berikut ini dan ganti text warna merah dengan no kontak toko Anda

<a class='ordersms' expr:href='&quot;sms:+628123456789?body=Saya%20mau%20pesan:%20&quot; + data:post.title + &quot;,%20Qty%20:%201%20pc,%20dari%20link%20produk:%20&quot; + data:post.url'><i class='fab fa-telegram'/></a> <a class='ordertelephon' href='tel:+62898928XXX'><i class='fas fa-phone'/></a></div>
Note:
Ganti  +6287865479684 dengan No SMS Anda
Ganti  +62898928XXX dengan No Telp. Anda

Sedangkan untuk Order via form Wa, cari kode berikut ini :
        //no wa admin
        $("#noAdmin").val("085866239094");
 
Ganti angka 085866239094 dengan no admin Whatsapp toko Anda

4. Memasang Posting Template Produk

memasang post template

Masuk Ke Setting / Setelan >> Postingan, Komentar dan Berbagi >> Tambahkan script berikut di bagian Post Template
<span id="item_price">&nbsp;Rp 435.500</span> <br />
<br />
<!--more--><br /><br/>
Upload Gambar Utama disini,
Deskripsi produk dan Gambar tambahan bisa upload disini juga
<br />
<center>
<hr style="margin-bottom: 0px;" />
<span style="color: #f9a37b; font-family: &quot;oswald&quot;; letter-spacing: 1px;">Anda Juga Bisa Order Produk ini melalui :</span><br />
<table><tbody>
<tr>  <td class="marketplace1"><a href="http://linkbukalapak.com/"><img src="https://lh3.googleusercontent.com/-o9NcyHResYU/XC8Ubiao3QI/AAAAAAAADUI/Csj1Kh7GguE8wVxTzcH6xhdQg2dZTeskgCLcBGAs/h40/icon%2Bbukalapak.png" /></a></td>  <td class="marketplace1"><a href="http://linktokopedia.com/"><img src="https://lh3.googleusercontent.com/-uWdAVvVUFPw/XC8UdwqNmiI/AAAAAAAADUM/av9C8BIeYggE_6N1lt8g609qJjaB85PCACLcBGAs/h40/icon%2Btokopedia.png" /></a></td>  <td class="marketplace1"><a href="http://linkshopee.com/"><img src="https://lh3.googleusercontent.com/-U88Yklcg0o4/XC8UgLjjrdI/AAAAAAAADUQ/CqPaQKBscCwYKdVxb9UZgy0tTA75SWQWwCLcBGAs/h40/icon%2Bshopee.png" /></a></td> </tr>
</tbody></table>
</center>
Note : Text warna merah bisa Anda hapus, jika Anda tidak menghubungkan produk Anda ke marketplace Shopee, Tokopedia dan Bukalapak.

5. Cara Posting Produk - PENTING!!

  • Setelah memasang post template seperti poin 3, setiap kali Anda melakukan posting akan muncul post template seperti berikut ini.


post template


  • Lakukan posting produk seperti petunjuk dari post template tersebut, jangan dirubah posisi / layout nya supaya hasil posting tidak berantakan.
  • Opsi yang lainnya seperti posting biasa di blogspot.

5. Menambahkan Badge untuk Terlaris, Habis dan Promo
memasang badge label

Pada template ini sudah dilengkapi dengan badge khusus untuk menampilkan label tertentu sesuai dengan kondisi item produk yang dijual, seperti jika produk habis, atau produk paling dicari.
Untuk memunculkan badge tersebut, setiap kali posting tinggal menambahkan label berikut ini.
Pastikan Label text harus sama persis huruf besar dan kecilnya, untuk memunculkan badge-nya.

Nama BadgeText Label
HabisHabis
PromoPromo
TerlarisTerlaris
-5%Diskon 5%
-10%Diskon 10%
-15%Diskon 15%
-20%Diskon 20%
-25%Diskon 25%
-30%Diskon 30%
-35%Diskon 35%
-40%Diskon 40%
-45%Diskon 45%
-50%Diskon 50%

Nah, kelima poin penting di atas cukup untuk bahan editing utama pada tukutoko THEME, untuk editing yang lainnya bisa Anda sesuaikan sendiri seperti halnya saat mengedit blogspot pada umumnya.

Jangan lupa tinggalkan komentar jika ada masalah atau pertanyaan supaya bisa jadi bahan diskusi untuk perbaikan template supaya lebih baik.

Semoga bermanfaat.

36 komentar untuk "Toko Online Blogspot Super Responsive dengan tukutoko THEME"

  1. Untuk beli yg verai premium, bisa langsung kontak admin.

    BalasHapus
  2. kurang paham cara menambahkan badge nya

    BalasHapus
  3. Bang Admin....
    Terimakasih sekali template nya...
    Sya sdh cba pasang template nya di blog saya, tpi klo dibuka dari smartphone tmpilannya ndak sebagus tampilan dibuka dari Desktop ya ? Hrus klik Web Version dlu bru tampilan nya jdi bagus...

    Kenpa ya ?

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  4. Saya masukkan label Diskon 10%, badgenya muncul tapi harganya ga berkurang atau tidak ada coretnya, kenapa y?

    BalasHapus
  5. kurang faham cara pasang badge nya, mohon bantuannya..

    BalasHapus
  6. Kang cara ngilangin banner diatasnya gmna ya? Yang berupa gif, saya cari2 enggak ketemu, apakah itu ada di CSS?

    BalasHapus
  7. GIMANA cara beli template yg premiumnya


    BalasHapus
  8. badgenya gimana mas mohon langkah2nya mas
    untuk yg lain bermanfaat

    BalasHapus
  9. sukses terus gan..
    klo beli yang premium brp ya gan??

    BalasHapus
  10. gan ane mau tanya
    itu script yang untuk posting produk kenapa ada menu deskripsi singkat, kategori dan bagikan ke:...di sebelah kanan foto produk yg kita upload dan deskripsi produk kita malah nongol dibawah foto....bisa bantu saya???

    BalasHapus
  11. Cara beli nya gmn gan ? lalu kirim template nya lewat mana ya kak ?

    BalasHapus
  12. Keren gan template ya, seo ndk?

    BalasHapus
  13. Sayangnya blogspot udh kalah seo

    BalasHapus
  14. cara ngilangin benner gif di atas gmn caranya.

    BalasHapus
  15. Thanks for sharing.

    Joox Mp3 Downloader.
    https://mp3downloader.my.id

    Digital Sell
    https://jupaiter.web.id

    BalasHapus
  16. Download File xml nya dmana gan?

    BalasHapus
  17. Bang kursus seo di jakarta di mana?

    BalasHapus
  18. Keren, ada update terbarunya?

    BalasHapus
  19. Setelah sekiat lama keliling dunia google, akhirnya aku menemukan Tema yang sesuai dengan harapan saya, maaf saya baru bisa download yg gratis,, mudah2an suatu saat bisa beli yng premium
    terima kasih tukangtokoonline.web.id

    BalasHapus
  20. produk terkaitnya gak tampil. gimana ngaturnya?

    BalasHapus
  21. Beli yg premium supaya template bersih, gaada banner yg di atas.
    Kalo yg free harus edit sendiri (kalo yg ga paham kode HTML pusing dah apalagi pake script)
    Hargai admin yg udah bikin template ini, segini masih baik hati ada template free yg siap pakai meski kita harus edit sendiri

    Terima kasih untuk template nya bro

    BalasHapus
  22. keren banget templatenya, ini jangan dihapus ya,

    BalasHapus
    Balasan
    1. cara memunculkan badge nya gmana kak?ditambahkan postingan dibagian mananya ?mhn info kakak

      Hapus
    2. Di bagian label, coba dibaca lagi panduannya pelan2.

      Hapus
  23. ini sangat keren banget mas, versi premium template ini dibeli apa gimana mas?

    BalasHapus
    Balasan
    1. Di artikel udah ada tombol belinya kok, coba dicek lagi, ya...

      Hapus
  24. harus ngumpulin uang dulu buat versi premiumnya, semangat untuk saya, hehehe

    BalasHapus
  25. Kalau template yang kamu pakek ini namanya apa gan?

    BalasHapus