Panduan Setting Simple Shop Template

panduan simple shop template


Langkah #1. Install Template ke Blogspot
1. Download file template dari link yang sudah disediakan
2. Decompress (unzip) file.
3. Buka file template dengan notepad.
4. Masuk ke dashboard blogspot anda, menuju ke menu template >> klik edit html
5. Copy dan paste semua file template dari notepad tadi ke kolom html template.
6. Simpan Template.

Langkah #2. Setting Meta Tag Description
1. Masuk ke template >> klik edit html
2. cari kode berikut, dan ganti text warna merah dengan data blog anda.

<meta content='nama pemilik blog' name='DC.Creator'/>
<meta content='Nama blog Anda' lang='en' name='DC.Title'/>
<meta content='Nama blog Anda' lang='en' name='DC.Subject'/>
<meta content='Deskripsi blog disini' lang='en' name='DC.Description'/>
<meta content='1998-09-22' name='DC.Date.LastModified' scheme='ISO 31-1'/>
<meta content='url blog anda' name='DC.Identifier'/>
<meta content='Nama pemilik Blog' name='DC.Publisher'/>
<meta content='en' name='DC.Language' scheme='ISO639'/>
<meta content='url blog anda' name='DC.Relation.IsPartOf'/>
<meta content='url blog anda' name='DC.Rights'/>
<b:include data='blog' name='all-head-content'/>
<meta content='Deskripsi blog disini' name='description'/>
<meta content='kata kunci blog disini' name='keywords'/>
<meta content='nama pemilik blog' name='Author'/>
<meta content='emailanda@gmail.com' name='Email'/>
<meta content='global' name='distribution'/>
<meta content='5 days' name='revisit'/>
<meta content='5 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='ID' name='geo.region'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='language'/>
<meta content='id' name='country'/>
3. save template

Note 
Untuk Template Simple Red Blue Update cukup merubah Meta Tag berikut:
<meta content='YOUR-HOMEPAGE-KEYWORDS' name='keywords'/>
<link href='YOUR-GOOGLE-PLUS-URL' rel='author'/>
<meta content='YOUR-NAME' name='author'/>
Rubah text dengan huruf besar tersebut dengan data blog anda.

Langkah #3. Edit Hotline Toko
1. masuk ke template >> klik edit html
2. cari kode berikut :
<div id="searchbarright1">081234 567 891</div>
Ganti text warna merah dengan hotline Toko Anda

Langkah #4. Setting data untuk invoice email.
1. Masuk ke template >> klik edit html
2. cari kode berikut, dan ganti text warna merah dengan data toko anda.

  // Customize URL, links and Blogshop name
  data.shop_name = "Nama Toko Online";
  data.shop_url = "//namatoko.blogspot.com/";
  data.shop_thankyou = "//namatoko.blogspot.com/p/success.html";
  data.shop_sendFail = "//namatoko.blogspot.com/p/error.html";
  data.shop_email = "emailadmin@gmail.com";
  // Currency to display in email invoice
  data.shop_currency = "Rp&nbsp;";
  // Customize blogshop business preferences. Leave " - " (dash) if not required
  data.shop_bizname = "Nama Toko Anda";
  data.shop_bizaddress = "Jakarta, Indonesia";
  data.shop_bizphone1 = "021-234 5678";
  data.shop_bizphone2 = "021-234 5678";
  data.shop_bizphone3 = "021-234 5678";
  // Customize blogshop banking preferences. Leave " - " (dash) if not required
  data.bank1 = "Bank BCA";
  data.bank1_acc_no = "1234 1234 1111 22";
  data.bank1_acc_name = "John Doe";

  data.bank2 = "Bank Mandiri";
  data.bank2_acc_no = "1234 1234 1111 22";
  data.bank2_acc_name = "Jane Doe";
  data.bank3 = "Bank BNI";
  data.bank3_acc_no = "1234 1234 1111 22";
  data.bank3_acc_name = "John Doe";
  // Customize blogshop additional notes. Leave " - " (dash) if not required
  // Additional notes to include in automated e-mail
  data.note1 = "Kontak Pin BBM :abc123";
  data.note_detail1 = "Kontak whatsapp: 081234 567 891";
  data.note2 = "Kontak YM : CSsimpleshop";
  data.note_detail2 = "Secepatnya Kami akan memproses Order anda dan mengirimkan jumlah total order anda secara lengkap berikut biaya pengiriman barang dari Order Anda melaui sms ke nomor telepon yang sudah anda daftarkan";
3. save template

Langkah #5. Membuat halaman lihat kranjang
1. Masuk ke menu laman / page.
2. Buat sebuah laman dengan judul Lihat Kranjang
3. Pastikan alamat url laman anda adalah :

namatoko.blogspot.com/p/lihat-kranjang.html
4. masuk ke mode HTML.
5. Copy dan paste script berikut ke laman tsb.
<center>
<div id="cart-details">
<h4 style="text-align: center;">
    <span style="color: #073763;"><u>Item di Keranjang Anda Sekarang</u></span></h4>
<div class="simpleCart_items">
<table><tbody>
<tr class="headerRow" style="background: #DBDBDB;"><th class="item-thumbimg" style="background: #DBDBDB;"></th><th class="item-name" style="background: #DBDBDB;">Item</th><th class="item-price" style="background: #DBDBDB;">Price</th><th class="item-decrement" style="background: #DBDBDB;"></th><th class="item-quantity" style="background: #DBDBDB;">Qty</th><th class="item-increment" style="background: #DBDBDB;"></th><th class="item-total" style="background: #DBDBDB;">Total</th><th class="item-remove" style="background: #DBDBDB;">Cancel</th></tr>
</tbody></table>
</div>
<h4 class="button" style="display: block; text-align: center;">
    Total Belanja Anda : <span style="color: red;"><span class="simpleCart_total">Rp&nbsp;0.00</span></span>
    </h4>
</div>
</center>
<div style="text-align: center;">
<b>&lt;&lt;</b> <a href="http://simpleshoptemplate.blogspot.com/"><b>Lanjutkan Belanja</b></a> --- <a href="http://simpleshoptemplate.blogspot.com/p/checkout.html"><b>Langsung Checkout </b></a><b>&gt;&gt;</b></div>
Keterangan: 
ganti url (text warna merah) dengan url toko anda

Tips :

Agar tidak gagal saat membuat permalink (url) lihat-kranjang di laman/page blog anda, Ketika pertama membuat laman baru, isi judul dengan tulisan 'Lihat Kranjang' (tanpa tanda petik), lalu publikasikan, tanpa mengedit opsi lainnya dulu. Kemudian setelah laman terbentu baru anda edit kembali.
Langkah #6. Membuat halaman checkout
1. Masuk ke menu laman / page.
2. Buat sebuah laman dengan judul checkout
3. Pastikan alamat url laman anda adalah :

namatoko.blogspot.com/p/checkout.html
4. masuk ke mode HTML.
5. Copy dan paste script berikut ke laman tsb.

<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheC2QDL3d2YNcOYjCikIhFr27VRn_MoNpgF8t05PgnHHS12_T5D84gVIrVg21nYVDiNJH0n1YpmAXQlSdKVBAMitYxMJr5xyHBjZH72NYHNaVc4GxtZx43q9knlYsreYozf51Z-q1tz4nw/s1600/checkout%2520image%2520animasi.gif" width="100%" /> <br />
<div id="cart-details">
<h4 style="text-align: center;">
    <span style="color: #073763;"><u>Item di Keranjang Anda Sekarang</u></span></h4>
<div class="simpleCart_items">
<table><tbody>
<tr class="headerRow"><th class="item-thumbimg"></th><th class="item-name">Item</th><th class="item-price">Price</th><th class="item-decrement"></th><th class="item-quantity">Qty</th><th class="item-increment"></th><th class="item-total">Total</th><th class="item-remove">Cancel</th></tr>
</tbody></table>
</div>
<h4 class="button" style="display: block; text-align: center;">
    Total Belanja Anda : <span style="color: red;"><span class="simpleCart_total">Rp&nbsp;0.00</span></span>
    </h4>
</div>
</center>
<br />
<table><tbody>
<tr><td><div class="checkout-form" style="max-width: 500px;">
<form action="" id="contact" method="post">
<center>
    <label for="firstname">Nama Depan</label>:<br />
    <input id="first_name" name="firstname" placeholder="First Name" title="Enter your First Name" type="text" /><br />
    <label for="lastname">Nama Belakang</label> :<br />
    <input id="last_name" name="lastname" placeholder="Last Name" title="Enter your Last Name" type="text" /><br />
    <label for="email">Alamat E-mail</label> :<br />
    <input id="email" name="email" placeholder="Valid e-mail required." title="Your e-mail address" type="text" /> <br />
    <div id="emailInfo">
<b><i><span style="color: red;">Mohon.., diisi dengan Valid Email.</span></i></b></div>
<label for="phone">Telp. / HP</label> :<br />
    <input id="phone" name="phone" placeholder="Preferred mobile number" type="text" /><br />
    <b>Lokasi Pengiriman?</b><br />
<select id="deliveryLocation"> <option selected="" value="Not_Selected"> - Tarif Pengiriman JNE OKE kota Pilihan - </option>
<option value="7000"> Jakarta Kota - 1 pc Rp 7,000 </option>
<option value="Not_Selected"> --Jawa Barat-- </option>
<option value="9000"> Bandung - 1 pc Rp 9,000 </option>
<option value="12000"> Tasikmalaya - 1 pc Rp 12,000</option>
<option value="Not_Selected"> --Jawa Timur-- </option>
<option value="15000"> Surabaya - 1 pc Rp 15,000 </option>
<option value="17000"> Malang - 1 pc Rp 17,000 </option>
<option value="Not_Selected"> --Jawa Tengah-- </option>
<option value="14000"> Semarang - 1 pc Rp 14,000 </option>
<option value="14000"> Solo - 1 pc Rp 14,000 </option>
<option value="Not_Selected"> --Banten-- </option>
<option value="8000"> Serang - 1 pc Rp 8,000 </option>
<option value="Not_Selected"> --Bali-- </option>
<option value="17000"> Denpasar - 1 pc Rp 17,000 </option>
<option value="Not_Selected"> --Other-- </option>
<option value="TBC"> Others </option>
</select><br />
    <label for="address">Alamat Pengiriman</label> :<br />
    &nbsp;<textarea id="address" name="address" placeholder="Full address please for prompt delivery, include unit number, street, area, state and country."> </textarea><br />
    <label for="postcode">Kode Pos</label> :<br />
    &nbsp;<input id="postcode" name="postcode" placeholder="Address postal code" type="text" /><br />
    <label for="message">Pesan Anda</label> :<br />
    &nbsp;<textarea id="comments" name="message" placeholder="Optional"> </textarea><br />
    </center>
<br />
<div style="text-align: center;">
<a class="simpleCart_checkout button" href="javascript:;" id="sent-order">Beli Sekarang</a></div>
<div style="color: blue;">
<br />
Rincian selengkapnya akan dikirimkan ke email anda secara otomatis. Kami berharap anda puas berbelanja di toko kami. Kami akan selalu menunggu kedatangan Anda kembali untuk pengalaman berbelanja di toko kami selanjutnya. <i>Terima Kasih.</i></div>
</form>
</div>
<!-- End checkout-form --></td>
    <td><div class="checkout-details">
<b>Panduan Checkout</b> <br />
<ol></ol>
<ul>
<li>Pilih Produk.</li>
<li>Lengkapi form data yang sesuai dengan data anda yang valid untuk mempercepat proses order dan pengiriman. Semua data yang dikirim dijaga secara rahasia sesuai dengan kebijakan Toko Kami. </li>
<li>Kirimkan (Send) order Anda. </li>
<li>Anda bisa menemukan rincian order dan metode pembayaran yang bisa membantu memilih sesuai dengan preferensi anda. </li>
</ul>
<ol></ol>
<b>Mitra Pembayaran Kami :</b> <br />
<ol></ol>
<ul>
<li>Bank BCA (Bank Transfer) </li>
<li>Bank Mandiri (Bank Transfer) </li>
<li>Bank BRI (Bank Transfer) </li>
<li>Bank BTN (Bank Transfer) </li>
<li>Bank BNI (Bank Transfer)</li>
<li>Bank BRI (Bank Transfer) </li>
</ul>
<ol></ol>
<b>Mitra Kurir Toko Kami :</b> <br />
<ol></ol>
<ul>
<li><b>JNE - </b>Kurir JNE. </li>
<li><b>Tiki - </b>Titipan Kilat. </li>
<li><b -="" b="" gt="" ind.="">POS Indonesia. </b></li>
</ul>
<ol></ol>
</div>
<!-- End checkout-details --></td>
    </tr>
</tbody></table>
Keterangan: 

  • Untuk text warna merah (Dellivery JNE), anda bisa mengganti angka (tarif) dan kota (kota besar) disesuaikan dengan tarif Kota besar yang ingin anda cantumkan yang disesuaikan dengan tarif JNE darii kota Anda.
  • Atau bisa juga dengan tarif pengiriman kurir lainnya.
  • Sedangkan untuk text warna biru anda bisa mengeditnya dari mode compose


6. Publikasikan laman.
Tips :Agar tidak gagal saat membuat permalink (url) checkout di laman/page blog anda, Ketika pertama membuat laman baru, isi judul dengan tulisan Checkout, lalu publikasikan, tanpa mengedit opsi lainnya dulu.Kemudian setelah laman terbentu baru anda edit kembali.
7. Buat sebuah laman baru dengan judul Success dengan langkah seperti tips di atas.
Pastikan url nya adalah seperti berikut ini :
namatoko.blogspot.com/p/success.html
Isi laman tersebut dengan kalimat anda sendiri

8. Buat sebuah laman baru dengan judul Error dengan langkah seperti tips di atas.
Pastikan url nya adalah seperti berikut ini :
namatoko.blogspot.com/p/error.html
Isi laman tsb. dengan kalimat anda sendiri.

Langkah #7. Memasang menu navigasi atas dan banner.
edit widget navigasi atas

1. masuk ke Tata Letak / Layout (lihat gbr dia atas)
2. masukkan script berikut ke widget menu atas.
<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>
Keterangan : Ganti dengan data menu di toko online anda.

3. masukkan script berikut ke widget gambar (banner) spt contoh screen shot di atas.
<center><a href="link_yg_ingin_dipasang"><img src="link_banner.jpg" width="100%"/></a></center>
 Keterangan : Ganti dengan data banner anda.

Langkah #8. Posting Produk
Lakukan posting produk seperti anda biasa melakukan entry post di blogspot default, hanya bedanya tambahkan kode berikut setiap anda melakukan posting produk baru:
<span class="item_price">Rp 999,000</span>
Keterangan :
text Rp 999,000 bisa anda rubah sesuai harga produk anda.
Letakkan kode tersebut di tempat terserah anda.
Catatan :
Usahakan agar judul  posting tidak melebihi 35 karakter.

Langkah #9. Menambahkan Badge Label di Setiap Posting (Khusus Template Simple Red Blue)

Di setiap entri posting produk yang anda lakukan cukup tambahkan salah satu label berikut :
New, Promo, Hot atau Habis
Karena karakternya sensitif, perhatikan penulisan huruf besar dan kecilnya harus sama.
Tulis label tersebut untuk setiap kondisi produk yang ingin anda posting dan memunculkan label tersebut.