Cuz Template: Simple shop

Seringnya tim blogspot melakukan update, sedikit atau banyak pasti berpengaruh terhadap tampilan template yang Saya bikin. Khususnya untuk template lama yang dilakukan desain ulang, baik dari sisi fitur responsive design maupun dari sisi lainnya.

Termasuk salah satunya adalah template Simple Shop. Template ini merupakan salah satu template yang memiliki banyak request download. Kebanyakan yang tertarik memakainya karena tampilannya yang memang simple dan proses edit serta settingnya yang tidak begitu merepotkan.

Beberapa kali update blogspot yang dilakukan untuk meningkatkan layanannya, ternyata juga berpengaruh terhadap template ini. Khususnya di bagian desain layoutnya, sehingga cukup menyulitkan pengguna untuk melakukan editing berbagai widget.

Selain itu, ternyata kebanyakan pengguna template simple juga menginginkan proses checkout yang lebih mudah. Ternyata banyak yang tidak memakai fitur shopping cart di template ini, karena lebih banyak yang memilih opsi checkout dengan menggunakan metode chat, baik itu melalui SMS, WhatsApp atau aplikasi chat lainnya. Jika dibandingkan dengan shopping cart yang melalui email.

Beberapa masukan di atas akhirnya menggerakkan Saya memperbaharui template simple shop free ini.

Berikutnya, akan saya jelaskan beberapa fitur perubahan atau tambahan untuk Template ini.

Silakan dibaca sampai tuntas, karena panduan setting juga akan langsung saya masukkan ke dalam lanjutan tulisan di bawah.

Template Simple Shop Free v.2

LIVE DEMO

#Homepage. Ada perubahan yang cukup mendasar di tampilan homepage dari versi sebelumnya.

Terdapat beberapa penambahan fitur seperti penambahan font awesome, perubahan warna dari yang sebelumnya hanya hitam putih, menjadi lebih kontras dengan beberapa varian warna antara hitam, putih, biru dan merah,

Pada template ini juga sudah ditambahkan meta tag, anda tinggal mengganti dengan meta data blog anda sendiri. Script meta tag yang bisa anda edit akan tampak seperti ini :

<meta content='Deskripsi blog disini' name='description'/>
<meta content='kata kunci blog disini' name='keywords'/>

Teks warna merah bisa diganti dengan data blog/toko masing-masing.

Ada beberapa perubahan di bagian header, namun tidak cukup siknifikan. Hanya penyempurnaan di beberapa bagian saja.

Menu responsive pada header

Untuk editing bagian menu masih sama. Tinggal menambahkan script berikut ini ke bagian widget yang bisa diedit melalui menu tata letak/layout di bagian dashboard blog Anda.

<nav id="menu"><input type="checkbox" /><label>≡<span>Menu</span></label>
<ul><li><a href="/" style="background:#000;" title="Home">Home</a></li>
<li><a href="#" title="menu1">menu1</a></li>
<li><a href="#" title="menu2">menu2</a></li>
<li><a href="#" title="menu3">menu3</a></li>
<li><a href="#" title="menu4">menu4</a></li>
<li><a class="prett" href="#" title="Drop Menu">Menu</a>
<ul class="menus">
<li><a href="#" title="submenu1">submenu1</a></li>
<li><a href="#" title="submenu2">submenu2</a></li>
<li><a href="#" title="submenu3">submenu3</a></li>
</ul></li>
</ul></nav>

Tinggal mengganti data menu dari script di atas dengan menu yang ingin anda masukkan.

Widget Selamat datang pada bagian header lebih mudah diedit dan ditambahkan di layout dashboard. Bagian ini bisa diisi ucapan selamat datang ataupun info berbagai promo terbaru toko Anda.

widget welcome store atau bisa untuk promo produk pada header

Ada penambahan link dan logo marketplate seperti facebook, bukalapak, tokopedia dan instagram. Sehingga diharapkan semua toko yang anda miliki bisa lebih terhubung.

Link ke toko lainnya di socmed atau marketplace

Untuk mengeditnya tinggal cari script berikut ini:

<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di FACEBOOK</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTySFF_a3TalSuk0Ydd4wisQlk7hpl_tYYVSGRmni8E8tnPr9DyQmsq8-__t3G6TyF6EdEaona-JDbRUq3QKW3hDxQLH9zOZeaV6kdftL_Sl-c3izKLGfnWfxUKiXXQiMQGW9v_8zaak/s1600/facebook.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TWITTER</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_jR9IV5ED9yHW_pfkwstfCMGR7SeDCIt3K62XaIzexf3_VQDQNRFw2jEXXpQtHS8PmKvhWJb9mFMxW6meLLuYl6DarZ7JNEiPRMGib_1RBdcLtLreIveOWrAZioIpA5slIMt-34vSrw/s1600/twitter.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di INSTAGRAM</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYX16bypVWGsoeNhf5kxQJaFD17Sn7hCmM_i_Fti-LXm8Pknc84QetfqIW25751FlebiajBEIvldlNtZEB-3OAcuhdF7qQu6MzSRhlxA-RzvR38qoslZcW_NtXSaJX6zEqMd3slpotjS8/s1600/instagram.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di KASKUS</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0P9KQPkjraiZa6LcZ4gO9SfLHlZhz8ZKUVS9bUgbcQscppC1rBWFzTBti7MxDyv2MzCd2Bc97ptvv8mwhhzNwn3QVrapwBC76tYjXAlv8_NtIVS9boiFPqAYkpG0wcHTsp5FCjGHbwk/s1600/kaskus.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TOKOPEDIA</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_AHxt_HoDIJb_9WmpWDEEiG3omECS_TSnctnAl1dR3GDV3TFuixh8-7Lv1_xoQBTJvmy-D-X0Z36cRd1_RUYbkH2_dhRVob4ZVsUwyvFjeBNU-Vs6fRwJDXtrSDy14w7p8AiVp25Wvo/s1600/tokopedia.jpg' width='180'/></a>

Anda tinggal mengganti # dengan link toko Anda sesuai dengan petunjuk di atas.

Pada widget Contact Us di bagian footer, Anda tinggal menambahkan kode script seperti ini :

<div class="smart_ftbox conta">
<div class="kontak"><div class="iconct telp"></div>
<div class="cnt"><p>Telpon:</p> 0212345567</div></div>
<div class="kontak"><div class="iconct sms"></div>
<div class="cnt"><p>SMS/WhatsApp:</p> 085779188529</div></div>
<div class="kontak"><div class="iconct bbm"></div>
<div class="cnt"><p>BB Messenger:</p> ABCDEF</div></div>
<div class="kontak"><div class="iconct mail"></div>
<div class="cnt"><p>Email:</p> kontak@email.com</div></div>
</div>

Setelah script tsb dimasukkan ke dalam widget contact us, tinggal diedit text warna merah dengan data kontak toko masing-masing.

#Product Page. Beberapa perubahan cukup mendasar saya lakukan di halaman produk ini. Yang paling utama adalah dengan menggantikan metode checkout yang sebelumnya menggunakan shopping cart, digantikan dengan metode pop up windows yang berisi informasi checkout/petunjuk order melalui sms/aplikasi chating.

Tombol Order

Panduan order ini sudah ada di script html template, cara mengeditnya tinggal mencari kata-kata/text seperti yang terlihat pada gambar di bawah, dan selanjutnya anda tinggal menggantinya sesuai dengan cara order dari masing-masing toko.

Panduan Order muncul ketika klik tombol order

Beberapa fitur tambahan lainnya adalah dengan adanya fitur related post, serta tombol icon shared ke sosial media dari AddThis.

Tampilan Product Page

Untuk format pengaturan pengisian konten produk, Anda bisa memakai script post template berikut ini:

Upload Gambar Utama produk Disini
<span class="item_price">Rp 350,000</span><br />
<table border="1px" max-width="100%"><tbody>
<tr style="background: #D5D2D2;"><td style="font-weight: bold; padding: 5px;">SKU</td><td style="padding: 5px;">Tulis kode produk</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Ukuran</td><td style="padding: 5px;">Tulis ukuran produk</td></tr>
<tr style="background: #D5D2D2;"><td style="font-weight: bold; padding: 5px;">Stock </td><td style="padding: 5px;">Ready</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Summary Spec </td><td style="padding: 5px;">Deskripsikan secara singkat produk Anda</td></tr>
</tbody></table>
<br/>
Tambahkan gambar atau deskripsi lainnya disini

Agar setiap tampilan memiliki layout yang sama, script tersebut harus di tambahkan di post template.
Lokasinya di bagian dashboard blog pada Setting/Setelan >> Post and Comments/Post dan komentar >> cari opsi untuk menambahkan post template, dan pasang script tersebut.
Sehingga setiap kali posting produk, sudah ada templatenya dan lebih memudahkan untuk posting produk Anda.

#Test Template coba saya lakukan dengan beberapa tool online.
Untuk menguji speed loading, template ditest dengan memanfaatkan tool gtmetrix dan hasilnya adalah seperti ini :

Speed Loading Simple shop free v.2 di GTMetrix

Untuk ukuran toko online, hasil tersebut sudah cukup lumayan.

Untuk menguji fitur mobile friendly, Saya memanfaatkan tool dari Google dan hasilnya adalah seperti ini :

Cara Download Template Simple Shop Free v.2

Template ini sengaja saya bagikan gratis. Namun yang Saya inginkan hanya untuk yang benar-benar serius memakai template ini saja dan bukan sekedar iseng, sehingga ada sedikit effort yang harus dilakukan untuk mendapatkannya.

Berikut ini cara mendapatkan link downloadnya.

Like/follow salah satu Medsos Tukang Toko Online (Facebook, Google+ atau Twitter). Pilih salah satunya ( ada di bagian header, ujung atas kanan). Jika sudah pernah me like/follow, lanhgsung ke langkah 2.
Konfirmasi melalui form kontak DISINI, Jangan lupa dikasih judul/subyek Nama template ini (Simple Shop Free v.2) dan sertakan bukti sudah follow /like nya.
Setiap email akan Saya respon.

Jasa Pembuatan Toko Online