While signed in your Blogger account > go to Template > Backup/Restore > (Download current template if required) > Choose File > Select the template file in your PC. > Upload the file.
Go to Layout and inspect your widget. A sample widget layout for this theme will look like so:-
Setting up Automated Product Page Tables
In Settings > Post and Comments > Post Template and copy / paste codes below in the widget body:-
<div class="content-store simpleCart_shelfItem">
<table border="1" class="content-image"><tbody>
<tr>
<td class="item_thumb" id="thumb" style="text-align: center;"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhTzjC10LxO0mI_rhIV-gOUykcqcmvrpcXr2rxUhoPtNtS1WpUaaFgDkS43wjXg6AxTBCwxXbQdncieeepLu78xWIKCwu6i2uq1RerugK1PcApH6sgw3qPOTnHMAHCjW5MnXt6SR9gj_D1/s320/28271936.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhTzjC10LxO0mI_rhIV-gOUykcqcmvrpcXr2rxUhoPtNtS1WpUaaFgDkS43wjXg6AxTBCwxXbQdncieeepLu78xWIKCwu6i2uq1RerugK1PcApH6sgw3qPOTnHMAHCjW5MnXt6SR9gj_D1/s320/28271936.jpg" width="320" /></a></div>
</td>
</tr>
</tbody>
</table>
<input class="item_add button" type="button" value="Buy Now" /> <br />
<table border="1" class="content-details"><tbody>
<tr>
<th><h3>Item</h3></th>
<td class="item_name">Product title here!</td></tr>
<tr> <th><h3>Item Price</h3></th>
<td class="item_price">$39.90</td> </tr>
<tr>
<th><h3>Select Size</h3></th>
<td><select class="item_Size" id="itemSize">
<option selected="selected" value="Not_Selected"> - Select Size - </option>
<option value="S"> S </option>
<option value="M"> M </option>
<option value="L"> L </option>
<option value="XL"> XL </option>
</select>
</td>
</tr>
<tr> <th><h3>
Item Description</h3>
</th> <td class="item_description">Product Description here!</td> </tr>
<tr>
<th><h3>Item Features</h3>
</th>
<td class="item_features" style="position: relative;">Product detail description here!</td>
</tr>
</tbody>
</table>
</div>
<div class="buy-now-bottom">
<input class="item_add button" type="button" value="Buy Now" /><br />
<br />
<a class="simpleCart_checkout" href="http://www.blogger.com/p/checkout.html">Order Now<br /> <small><span class="simpleCart_quantity"></span> item(s)in cart.</small></a>
</div>
Click Save Settings.
To check if proper installation > go to Posts > Add a new post > A sample product page will be displayed on your new blog post editor. Edit to desire.
Create Checkout and Cart Order Auto E-Mailing Page
In Blogger > Pages > Add Page > name your new page with " Checkout " (without quotes) > Click HTML button > now copy and paste below codes:-
<div class="simpleCart_items"> </div> <div id="cartTotal"> <div class="total_quantity"> You have <strong><span class="simpleCart_quantity"></span></strong> items in cart.</div> <div class="total_amount"> Total Amount in Cart: <strong><span class="simpleCart_total"></span></strong></div> </div> <div class="clear"> </div> <br /> <form action="" id="contact" method="post"> <fieldset> <label for="firstname">First Name</label><input id="first_name" name="firstname" placeholder="First Name" title="Enter your First Name" type="text" /><br /> <br /> <label for="lastname">Last Name</label><input id="last_name" name="lastname" placeholder="Last Name" title="Enter your Last Name" type="text" /><br /> <br /> <label for="email">Your E-mail</label><input id="email" name="email" placeholder="yourname@gmail.com" title="Your e-mail address" type="text" /><br /> <br /> <label for="phone">Phone/Mobile</label><input id="phone" name="phone" placeholder="Preferred mobile number" type="text" /><br /> <br /> <label for="delivery_address">Your Delivery Location</label> <select id="deliveryLocation"> <!-- Customize your delivery options here --><option selected="selected" value="Not_Selected"> - Delivery Location - </option> <option value="1"> Semenanjung Malaysia - RM 1.00</option> <option value="3"> Semenanjung Malaysia - RM 5.00</option> <option value="10"> Malaysia - RM 10.00</option> <option value="30"> Other Places - RM 30.00</option><!-- End Customize your delivery options here --> </select> <br /> <br /> <label for="address">Delivery Address</label><textarea id="address" name="address" placeholder="Full address please for prompt delivery, include unit number, street, area, state and country."></textarea><br /> <br /> <label for="postcode">Postal Code</label><input id="postcode" name="postcode" placeholder="Address postal code" type="text" /><br /> <br /> <label for="message">Your Message</label><textarea id="comments" name="message" placeholder="Optional"></textarea><br /> <br /> Further details will be sent to you automatically via e-mail. We hope you had a great experience here at our store. We look forward for your next visit. Thank You. <br /> <br /> <span style="float: right; font-size: 85%; margin-left: 2%; width: 48%;">Please read through on our <a alt="terms and policy" href="http://blog.irsah.com/p/contact.html"><strong>Terms and Policy</strong></a> for purchase orders submission. All details submitted are kept confidential and will not be published. </span><a class="simpleCart_checkout button turquoise" href="javascript:;"><span class="checkout_btn">Send Order</span></a></fieldset> </form>
Click Publish Page and Click View. Now copy the URL and save it in your favourite text editor. This URL is needed for your custom e-mail data.
Create Success Submission Send Order Page
In Blogger > Pages > Add Page > name your new page with " Success " (without quotes) > Click HTML button > now copy and paste below codes:-
<div class="separator" style="clear: both; text-align: center;"> </div> <div> <div style="text-align: left;"> <h2> Success Submission!</h2> </div> An automated e-mail notification is sent to you for your reference. Please check your e-mail inbox for purchase order details and banking transaction options.</div> <div> Thank you again for your purchase and support!.<br /> <br /> Our Malaysian banking and payment merchant partners:<br /> <br /> <div style="text-align: left;"> <table cellpadding="10"> <tbody> <tr> <td><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4AUid9UBw64mg7nlEotI9LH61rHr7sN1QEyc_j2OL5IPDwhEs1vuUqKxQJguwApa8nI9ltBCYFh_IKiPF6ggcr7HhIDId3xC8XLNSwY5cV44vIfF5Q98lrHXFujFios_BYKmu8S5UAuI/s200/cimb-clicks.jpg" width="200" /> </td> <td><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdXmp34ZIQTQumlKzJxIo-dtc17t1ZcvUbjGoJFBCafBEEsVKHOodZZNfGN2HY6IEEQ_qS_6ObyoxcYIR2OnxXgRXoJ1XE9oYvbv2fmX1ZQhLhvErdZchOo2k2rMWXX3UkBTXnGv72e0BQ/s200/images.jpg" width="200" /> </td> <td><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib7huv6c0d4oe1J8eUnPfaSK8EGHmyY1f-xAmlgMD-ppvEQgZZ3s9UOsYSgH6qVQNR9qneL2Qb4qaPv3J5ZaZetWRJBuBpBs8Ra6wgd1bBLwCrRQqPwmAigaDCNrbbvF34dmsnsroAiKRn/s200/bank+islam2.png" width="200" /> </td> </tr> <tr> <td><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIlx5fhVNRu40EkSuyIc8RrKbp9UD_kH6ROdsZv_pV6XHSJxSnvU67mHVjOZFpg5UaxEd8F_SFps4mjPgYSBExdlvTSJd2P9Va7TtXTztqPAkcTWDsxPXmsqvrK3fSRQ47guD5X1KBTL4U/s200/PayPal-logo-1.png" width="200" /> </td> <td><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNFOYDNj4BeYVTULF6Wy-vyhOA41Ut9Wd1F89pscTS81I9VXF-42f_kfhW_g-ybAYtn78zkd7SbC_T01dswC6Ui6aOv1Nah6ss8MsMig9QzWb3pxFhMMo7gwcUfT4r1YHIfbuL4hreXO0S/s200/Google-Wallet.png" width="200" /> </td> <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Hxdkc4fqXTl6gxvdEh-_Ckf9oFqEPJxnMSWKpV3uDWskmMp-NdU8bvy5UTOHL9C3bmctkPW1wLYS949TujJantnxORHaZiBUNt0GmdBJuyzAyPKmYQl_v7arD2qSfT2_00IHHb3V_i0m/s200/easy-by-RHB.png" width="200" /> </td> </tr> <tr> <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPo0oQ-AHeaQ0dntspqX40xLk8rDTBI3aK7lZBvjySemWvmDnAVEOIWcCYERqlM4uQ5bk8E9ASO3zKWi8NVuhI85JW9B6THjdL3ufup3PnzcSiB9ezMRHKm56Oz1SPPXIvvGiuvalBELb/s320/public-bank-western-union.gif" width="200" /> </td> <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC0S7YKQcMA0u_82qzTsZlrJ4w7BCkAp2fNFENCAss68v-AHdptFKSiVdjvgmPe31qtC46kRyhA-Ui0lsbdRDpQCGGwZSAaGwasRSf0cUQ85DnZaa7LOmxNUa1QBTs-030MYklEw-M6XqF/s1600/jawatan-kosong-bsn.jpg" width="200" /> </td> <td><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhirI6mqwsJLf-D7IuapGOo_SGLYm-vp1OiflanWR29Gud86oRCp_ScKntHmKUlqhsUAgFLrc4YuZBLWdG8r5utheck1vTcLp1wGzUmqhVS7KUwKXVAufSqRLTqausbuoSs_Hy69eYE_y/s1600/logo+ambank.jpg" width="200" /> </td> </tr> </tbody> </table> </div> </div>
Click Publish Page and Click View. Now copy the URL and save it in your favourite text editor. This URL is needed for your custom e-mail data.
Create Error Submission Sent Order Page
In Blogger > Pages > Add Page > name your new page with " Error " (without quotes) > Click HTML button > now copy and paste below codes:-
<h2 style="text-align: center;"> We're Sorry.</h2> <h4 style="text-align: center;"> There was a slight problem sending your orders.</h4> <br /> <h4 style="text-align: center;"> Possible Cause: </h4> <ul> <li style="text-align: center;">Invalid e-mail address</li> <li style="text-align: center;">Invalid telephone number. (by telco provider)</li> <li style="text-align: center;">Invalid postcode by address. </li> <li style="text-align: center;">Did not specify your product size.</li> </ul> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> <br /></div> <h4 style="text-align: center;"> Solution</h4> <ul> <li style="text-align: center;">You can click the checkout link to re-submit your orders. </li> <li style="text-align: center;">You do not have to re-select your product as we have kept your choices/selection in our system.</li> <li style="text-align: center;">Fill in the simple form with valid inputs and your order submission would be successful.</li> </ul> <br /> <br /> <br /> <div style="text-align: center;"> <a class="button blue" href="http://blogrshop-template.blogspot.com/p/checkout.html"><span style="font-size: large;">Return to Checkout</span></a></div> <br />
Click Publish Page and Click View. Now copy the URL and save it in your favourite text editor. This URL is needed for your custom e-mail data.
Install Responsive Homepage Product Slider Display
In Layout > Find Homepage Slider widget > edit > Add codes below in the HTML/Javascript widget body:-
<script type='text/javascript'>
/*<![CDATA[*/
$(function() {
$(".rslides").responsiveSlides({
auto: true,
speed: 500,
timeout: 3000,
nav: true,
pause: true,
prevText: "Previous",
nextText: "Next",
navContainer: "ul.rslides",
});
});
//]]>
</script>
<div class='blogrshop-slider'>
<ul class='rslides'>
<li><a href='http://theme-niaga.blogspot.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu8BJarAkVTS92AHq_niKCXKPE7EFrxApCHsoUCy0N4gMJjE7ii6vJxGfYNjymHe_6RWW0jhkHIz0BqoDP7fUiGtcsikEXLT2NI05AAxMsEq3Mwr2wj9s5sZXcBTNeM9BLYkGpIFej4iQZ/s1600/28271936.jpg' width='1500px'/></a></li>
<li><a href='http://theme-niaga.blogspot.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_VFqUKccUbvkuuRhVn8AWWpYRJSoRgqaFxvaF1h2l3lsd-7Ue7NG9HJtr5z4VJA8HH8-OBTFrjDKUmQ5l7nFaKmjy8J_bOc_y6ikq19wWVY2sGJJLY3qUMHvNNS5-mfGdfYqVP02550va/s1600/Ben-Sherman-Banner-small-1350x900.jpg' width='1500px'/></a></li>
<li><a href='http://theme-niaga.blogspot.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdl3iLdRIP35yHlH3oYZpLiI0TfIh_sLDT6DiZUpnU2YOCOdTewpTTMADvrZfY1J99aQpJEFB-0F7lvy9olVtLsDLWSK5t_8CAMZMuwhkjZTMjN9i8CNKzBCb1JTCS5dzE-5K6NbxTpGe/s1600/christian-louboutin-banner-france-high-heeled-shoes-designer-fashion-luxury.jpg' width='1500px'/></a></li>
<li><a href='http://theme-niaga.blogspot.com/'><img alt='' height='1500px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAht1S0nR4sm_lUTq56_SPCCIydpEvzCX42m_SNzO0Pc8ETjpLtQZXbqdDs9YZG4kxoabQ-0mW-DfnrI2m33eBsPsJQSTT7d2TyLddw-CFRSpBLSDZIerI2T7-QDki_Jq2aQB5TXE1vz5b/s1600/Womens-Jackets-Banner-Small.jpg'/></a></li>
</ul>
</div>
Now click Save > Save Arrangements.
To customize your slider product image display, make sure:-
- All images uploaded at the same pixel size, preferably 1200px in width and 520px in height.
- Images file size foes not exceed 300kb (max) for template optimization purposes.
To insert your custom slider images, at the codes above, find the image source codes for each <li> ... </li> tags and change to your uploaded slider images URL (example like below):-
src='http://insert-your-uploaded-image-url-here.jpg'
To insert the links to your slider images, find the image target URL codes for each <li> ... </li> tags and change to taget link URL (example like below):-
a href='http://your-blog-url/your-blog-link-to-page.html'
NEW! Add Click to Action Text to Responsive Slider Images
To change the Click to Action text on your Index pages > In Template > Edit HTML > find these codes below using ctrl+F4 with below keyword(s):-<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#content-wrapper .outer-wrapper").prepend("<h2>Your click to action text on homepage slider!</h2><br /><br />");
});
//]]>
</script>
</b:if>
Now change the text in between <h2> Your click to action text on image slider! </h2> tags. When done, click save template and view your homepage.
Add Featured Products by Label / Title above Footer Area
In Layout > Find Homepage Slider widget > edit > Add codes below in the HTML/Javascript widget body:-
<script>
var bsrpg_thumbSize = 280;
var bsrpg_showTitle = false;
</script>
<script src="/feeds/posts/summary/-/Feature
?max-results=4&alt=json-in-script&callback=bsrpGallery"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".offers").after("<div class='special-offers'><h3>Discounts Up To 10%</h3><span class='special-offers1'>Hurry! While Promotion is Still Valid!</span></div>");
});
//]]>
</script>
<br class="clear" />
To customize your image with edit here:-
var bsrpg_thumbSize = your-preferred-image-size;
To customize which product pages by label you want to display, edit at sample code below:-
script src="/feeds/posts/summary/-/Insert-Your-Label-Here ?max-results=4&alt=json-in-script&callback=bsrpGallery
To change the highlighted text displayed at your featured product posts by label, edit at below sample code:-
<div class='special-offers'><h3>Edit Here To Include the Special Highlighted Text at Your Featured Area</span>
Changing the Title Displayed at Your Homepage Gallery
In Template > Edit HTML > find these codes in between Line 3390 and 4410:-
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#header-wrapper").prepend("<h1>Awesome YouTube Fashion Video Revealed</h1>");
});
//]]>
</script>
</b:if>
To customize the title to be displayed, edit at the below sample of codes:-
<h1>Edit Your Awesome Title Here</h1>
Add Custom Search Bar For Product Page
Go to Layout > find Search widget > Edit > copy below codes to widget body:-
<form id="searchThis" action="/search" method="get"> <input id="searchButton" value="Search" type="submit" style="width: 29%;"/> <input style="width:70%;float: right; padding: 3px 5px;" id="searchBox" name="q" size="21" type="text" value="Search Templat..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> </form>
Click Save > Save Arrangements..
Add Your Custom Blog Store Name
Go to Layout > find BlogStore Name widget > Edit > Insert your preferred store name (Works best with 21 chars or less including spaces) > Click Save > Save Arrangements.
Editing Your Auto E-Mail Invoice Data
We provided the necessary area to customize your automated invoice e-mail body. To find and customize, go to Template > (Backup if required) > Edit HTML > scroll down at template bottom and find this pieces of codes:-
// Edit your Blog Shop Preferences data.shop_name = "Your Blog Store Name"; data.shop_url = "http://blog-store-url.blogspot.com/"; data.shop_thankyou = "http://blog-store-url.blogspot.com/p/success.html"; data.shop_sendFail = "http://blog-store-url.blogspot.com/p/error.html"; data.shop_email = "your-blog-store-email@gmail.com"; data.shop_currency = "RM"; // Edit your Business Preferences data.shop_bizname = "Your Business name"; data.shop_bizaddress = "Your Business Address"; data.shop_bizphone1 = "017-361 8321"; data.shop_bizphone2 = "013-361 8321"; data.shop_bizphone3 = "016-361 8321"; // Edit your Banking Preferences data.bank1 = "MYBANK"; data.bank1_acc_no = "1234 1234 1111 22"; data.bank1_acc_name = "John Jane"; data.bank2 = "Bank Commerce"; data.bank2_acc_no = "1234 1234 1111 22"; data.bank2_acc_name = "Jane Doe"; data.bank3 = "Central Bank"; data.bank3_acc_no = "1234 1234 1111 22"; data.bank3_acc_name = "John Doe"; // Additional notes to include in automated e-mail data.note1 = "Our PAYPAL secured gateway at http://www.your_PAYPAL_secured_link.com"; data.note_detail1 = "Our Google Wallet secured payment gateway at http://www.your_GOOGLEWallet_secured_link.com"; data.note2 = "Altenative Our merchant MYBANK2PAY at:"; data.note_detail2 = "http://www.your_MYBANK2PAY_secured_payment_link.com"; });
We have included indicators for you to customize to your preferences. Please edit in between the " (quotes) section. Any changes in the " (quotes) " section will be displayed in your custom automated e-mail invoice to your users.
Displaying Your Blogger Store Currency
In Template > Edit HTML > find these codes in between Line 1685 and 1710:-
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
simpleCart.currency({
code: "MYR" ,
name: "Malaysia Ringgit" ,
symbol: "RM" ,
delimiter: " " ,
decimal: "." ,
after: false ,
accuracy: 2
});
});
//]]>
</script>
By default, the plug-in uses US Dolar as currency. Delete these codes if you require US dolars.
Find more settings at simpleCart documentation page here www.simplecartjs.org. To customize include relevant data in between " (quotes) " as shown above.
Change Product Page Background Image
Some where in Line 259 find below codes:-
#header-wrapper {
[codes]
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQFjy1yGjHkut3XNP2WMHh0-sAeJN96m7XN2K229QM_4NXUVvzda7_bre58XTkPjpVcluEPtNoAFY0qnXwmTIx31Zz43FH-fkQiynnxcUgSGZ47A1GRKEVr1PLhvCdm4LwHp_6fgIViQ/s1600/5464870387_52d4b92d20_o.jpg'
[more code]
Insert your uploaded image URL in between the quotes in this line of code.
For best view, upload an optimized image (say below 100kb in file size) with a minimum width of 1200px. This will allow crisp and clear image to display as your new background image and loads your page(s) much quicker.
