Update July 2016 - BlogrCart PLUS version 2.0 (2016) has bee released! View new theme features here at http://blogrcart-plus.blogspot.com/p/features.html . Download link & files made available at live template preview. Grab it now guys!
 |
| BlogrCart PLUS Version 2.0 (2016) |
This Guide below is for BlogrCart PLUS Version 1.6 or lower.
Important Blogger Theme Update - April 14 2016! To allow the Theme Plug-ins gadget to register itself with your new theme setup, users are required to activate the
HTML/Javascript gadget with the title Plugin or DoNotRemove Cart Plugins or Plug-ins Cart located at the bottom of theme Layout. Click Edit the said gadget & add some content to save it. View screenshot below for reference.
Update September 2014
We have received reports from users that using Blogger domain to country specific URL's will not work properly for the Send Order page. An example would be like so: http://YOUR-BLOG-NAME.blogspot.id (for Indian Blogger users etc).
Details provided at the respective section for you to update to blogspot.com domain.
Complete tutorial guide to install BlogrCart Plus, an e-commerce inspired responsive Blogger Blogspot template. We also included the links to the demo page which displays the various e-commerce functionalities that also includes a dedicated custom homepage with responsive full width product image slider and click to action, the product gallery page with add to cart button, product post page, shopping cart feature and the checkout pages (Paypal checkout and unlimited send order to e-mail).
IMPORTANT UPDATE 01/04/2014 - New template e-mail invoice code structure was updated at this below field:-
data.shop_url = "//your-blogshop-NAME.blogspot.com/"; data.shop_thankyou = "//your-blogshop-NAME.blogspot.com/p/sucess.html"; data.shop_sendFail = "//your-blogshop-NAME.blogspot.com/p/error.html";
Current users can remove the "http:" from your leading url in order to pass through the e-mail validations. The example is as shown above and should reflect the customizations at your Blogger shopping cart template.
Please read BlogrCart Plus template download versions in this blog or at the template demo for the details functionalities included for both FREE and PRO version.
 |
| BlogrCart Plus Responsive E-commerce Blogger Template |
Install Blogger Template
- Create a new Blog > Get a suitable URL for the blog > Name the Blog > Select "Simple" template as default template > Click "Create Blog"
- In Template > Backup /Restore > Find BlogrCart Plus file in your computer > Upload the file content.
Install Product Post Template
In Settings > Posts and Comments > Post Template > copy below codes and paste in the box given:-<table border="1" class="product-image"> <tbody> <tr> <th class="thumb_image" id="thumb"><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVi3c2PrUepny7PVnOTClkvkstFReEXX93YrzbSrl0supzVEhwQMvhkTrpGDSmPE-YtHJbvi36psLW6vVBUHfuPWGB_fCsvwMtKIBBHL4NFnE-CaPcTYAAdu_VMYaDJAEr6ZgiJEsk3YuK/s1600/placeholder-product-image-large.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVi3c2PrUepny7PVnOTClkvkstFReEXX93YrzbSrl0supzVEhwQMvhkTrpGDSmPE-YtHJbvi36psLW6vVBUHfuPWGB_fCsvwMtKIBBHL4NFnE-CaPcTYAAdu_VMYaDJAEr6ZgiJEsk3YuK/s320/placeholder-product-image-large.png" width="320" /></a></div> </th> </tr> </tbody> </table> <table border="1" class="product-details"> <tbody> <tr> <td class="item_price">RM 69.00</td> </tr> <tr> <td class="add_cart"><a class="item_add button" href="javascript:;">Add to Cart</a></td> </tr> <tr> <td class="total_quantity">Currently <strong><span class="simpleCart_quantity"></span></strong> item(s) in cart.</td> </tr> <tr> </tbody> </table> <!--more--> <table border="1" class="product-descriptions"> <tbody> <tr> <td class="product-label"><strong>Description</strong></td> </tr> <tr> <td class="item_description">Lorem ipsum dolor sit amet, dolor pericula te eos. Cum melius definitionem et, te impetus mediocrem persequeris mei. Per cu populo diceret reformidans, ei nam dolor apeirian. Postea consetetur an pri, an inani mollis recusabo eum, ea possit pertinax usu. Eligendi principes vim no, ei sea cibo corrumpit. <br /> <br /> Ad pro philosophia suscipiantur. Ne vis populo principes, alienum gubergren conceptam vix id. Te est homero vidisse offendit, id his facete dissentiet. No sit aliquid salutatus, case vero homero ei mea, iudicabit sadipscing vix id. Sed te vero aeterno rationibus. <br /> <br /> Natum vocibus verterem eu sed, sed modo posse nihil in. Cu mucius integre invenire eam. An pro qualisque hendrerit, saperet ancillae persecuti cu qui, vis ne labitur epicuri. An vidit justo nec, facete nonumes reprehendunt ut mei. <br /> <br /> Cu ius wisi euripidis. Assum erroribus ullamcorper ex pro, summo semper diceret vis in, habemus fuisset eum ea. Nam ne suas intellegebat, dicant adversarium quo no. Ad quot nostrud vim, pro timeam integre an, at. </td> </tr> </tbody> </table> <table border="1" class="product-thumbnails"> <tbody> <tr> <td class="thumb-images"><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" width="125" /></a></div> </td> <td class="thumb-images"><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" width="125" /></a></div> </td> <td class="thumb-images"><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" width="125" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> </td> <td class="thumb-images"><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" width="125" /></a></div> </td> </tr> </tbody> </table>
Click "Save Settings". Test the automated product post template by creating a new post > fill in the required fields > publish the post.
Wan't to skip these steps? Get the entire codes and auto upload via your Blogger dashboard. Files include FULL template codes, pages and sample product posts with just ONE CLICK INSTALL. Tutorial included. Get one now >>
Install Main Navigations
Go to Layout > find Main Navigation widget > Click Edit > copy below codes and paste in the widget body:-<a class="menu-link" id="home-nav-mobile" ref="#menu">Menu</a> <nav id="menu" class="menu"> <ul> <li><a href="/">New In</a></li> <li class="has-submenu"><a href="#">Latest</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> <li><a href="#">Sub Menu 5</a></li> <li><a href="#">Sub Menu 6</a></li> <li><a href="#">Sub Menu 7</a></li> <li><a href="#">Sub Menu 8</a></li> </ul> </li> <li class="has-submenu"><a href="#">About</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> <li><a href="#">Sub Menu 5</a></li> <li><a href="#">Sub Menu 6</a></li> </ul> </li> <li class="has-submenu"><a href="#">Menu</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> <li class="has-submenu"><a href="#">Offers</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> <li><a href="#">Sub Menu 5</a></li> <li><a href="#">Sub Menu 6</a></li> <li><a href="#">Sub Menu 7</a></li> </ul> </li> <li><a href="#">Our Blog</a> </li> </ul> </nav>
When completed click "Save" > and then "Save Arrangements".
Edit the desired links and text to your preference. Basic HTML editing is required.
Install View Cart Page
- Go to Pages > click "New Page" tab.
- In "Page Title" type "View Cart" (without quotes).
- Click the "HTML" button and copy paste below codes:-
<h3 style="margin: 0;"> #1 Currently in your Cart</h3> Review your selected item(s) in your Cart.<br /> <br /> <span class="simpleCart_items"></span> <br /> <br /> <h3 style="margin: 0;"> #2 Your order summary</h3> Review your order summary.<br /> <br /> <table border="1" class="summary"> <tbody> <tr> <td>Items in cart:</td> <td><strong><span class="simpleCart_quantity"> </span> item(s)</strong></td> </tr> <tr> <td>Total Amount in Cart:</td> <td><strong><span class="simpleCart_total"> </span></strong></td> </tr> <tr> <td>Shipping/Delivery Charges: </td> <td><strong><span class="simpleCart_shipping"> </span></strong></td> </tr> <tr> <td>Tax:</td> <td><strong><span class="simpleCart_tax"> </span></strong></td> </tr> <tr> <td><strong>Grand Total:</strong></td> <td><strong><span class="simpleCart_grandTotal"> </span></strong></td> </tr> </tbody> </table> <br /> <br /> <h3 style="margin: 0;"> #3 Checkout Options</h3> Please select your preferred checkout.<br /> <br /> <table class="checkingOut"> <tbody> <tr> <td><strong><a class="button checkout-links" href="http://tudung-natasha-store.blogspot.com/p/instant-checkout.html" rel="nofollow">Instant Checkout to Paypal</a></strong><br /> World's most secured and loved way to pay online. </td> <td><strong><a class="button checkout-links" href="http://tudung-natasha-store.blogspot.com/p/send-orders.html" rel="nofollow">Send in your Orders</a></strong><br /> No personal data required. 5 easy steps. Quick delivery. </td> </tr> </tbody> </table>
After pasting > Find below:-
<a class="button checkout-links" href="http://YOUR-BLOG-NAME.blogspot.com/p/instant-checkout.html" rel="nofollow">Instant Checkout to Paypal</a>
and edit the URL to your Instant Checkout page (Ref 4 - refer below)
Now, find these codes:-
<a class="button checkout-links" href="http://YOUR-BLOG-NAME.blogspot.com/p/send-orders.html" rel="nofollow">Send in your Orders</a>
and edit the URL to your Send Orders page (Ref 5 - refer below)
Click the "Compose" button > Click "Save" > and click "Publish".
View this page and grab it's URL from your browser URL bar and save in your favourite editor (Ref 1).
Example URL will look like so:
http://your-blog-name.blogspot.com/p/view-cart.html
Install Success Page
- Go to Pages > Click "New Page" tab.
- In "Page Title" type "Success" (without quotes).
- Click the "HTML" button and copy/paste below codes:-
Thank you. We have received your order details.<br /> <br /> All payment details can be viewed in your email. Please check your email inbox for further instructions.<br /> <br /> Kindly contact us if you need assistance.
After pasting > click the "Compose" button > click "Save" > and click "Publish".
View this page and grab it's URL from your browser URL bar and save in your favourite editor (Ref 2).
Example URL will look like so:
http://your-blog-name.blogspot.com/p/success.html
Install Error Page
- Go to Pages > Click "New Page" tab.
- In "Page Title" type "Error" (without quotes).
- Click the "HTML"button and copy/paste below codes:-
We're sorry. We could not process your orders.<br /> <br /> Possible cause:-<br /> <br /> <ul> <li>Invalid e-mail address.</li> <li>Busy internet traffic.</li> <li>Slow/bad internet line.</li> <li>One or more data is incomplete.</li> </ul> <br /> <br /> You can resubmit your orders <a href="http://YOUR-BLOG-NAME.blogspot.com/p/view-cart.html">here</a> and continue. Your order items is still available in your cart
After pasting > Click the "Compose" button > Click "Save" > and click "Publish".
View this page and grab it's URL from your browser URL bar and save in your favourite editor (Ref 3).
Example URL will look like so:
http://YOUR-BLOG-NAME.blogspot.com/p/error.html
Install Instant Checkout Page
- Go to Pages > Click "New Page" tab.
- In "Page Title" type "Instant Checkout" (without quotes).
- Click the "HTML"button and copy paste below codes:-
<h3 style="margin: 0;"> Thank you for selecting instant checkout with Paypal. </h3> The world's most secured, safe and loved way to pay on-line. A secured Paypal link is provided below.<br /> <br /> <br /> <h3 style="margin: 0;"> Paypal Order Summary</h3> Your selected item(s) details included with Paypal secured checkout. <br /> Always make sure an <i>https://</i> (secured browser protocol) is displayed at your browser URL bar during transactions.<br /> <br /> <table class="summary" rules="all"> <tbody> <tr style="background: #f0f0f0;"> <td>Descriptions</td> <td>Amount</td> </tr> <tr> <td>Item Total:</td> <td><strong><span class="simpleCart_total"> </span></strong></td> </tr> <tr> <td>Tax:</td> <td><span class="simpleCart_tax"> </span></td> </tr> <tr> <td>Shipping and Handling: </td> <td><span class="simpleCart_shipping"> </span></td> </tr> <tr> <td></td> <td><strong>Total <span class="simpleCart_grandTotal"> </span></strong></td> </tr> </tbody> </table> <br /> <br /> <a class="simpleCart_checkout button" href="javascript:;" rel="nofollow">Pay With Paypal</a> <!--Edit your VIEW CART page URL here --><a class="checkout-links button" href="http://tudung-natasha-store.blogspot.com/p/view-cart.html" rel="nofollow">< Return to View Cart</a><br /> <br />
After pasting > Find these pieces of codes below:-
<a class="checkout-links button" href="http://YOUR-BLOG-NAME.blogspot.com/p/view-cart.html" rel="nofollow">< Return to View Cart</a>
and edit the URL to your View Cart page (Ref 1 - refer above)
Click the "Compose" button > Click "Save" > and click "Publish".
View this page and grab it's URL from your browser URL bar and save in your favourite editor (Ref 4)
Update September 2014
We have received reports from users that using Blogger domain to country specific URL's will not work properly for the Send Order page. An example would be like so: http://YOUR-BLOG-NAME.blogspot.id (for Indian Blogger users etc).
Details provided at the respective section for you to update to blogspot.com domain.
Original Article
Install Send Orders Page (Email Invoice)
- Go to Pages > Click "New Page" tab.
- In "Page Title" type "Send Orders" (without quotes).
- Click the "HTML"button and copy paste below codes:-
<form action="" id="contact" method="post"> <fieldset> <h3 style="margin: 0;"> Your order summary</h3> Your order summary and totals.<br /> <br /> <table border="1" class="summary" rules="all"> <tbody> <tr> <td>Items in cart:</td> <td><strong><span class="simpleCart_quantity"> </span> item(s)</strong></td> </tr> <tr> <td>Total Amount in Cart:</td> <td><strong><span class="simpleCart_total"> </span></strong></td> </tr> <tr> <td>Shipping/Delivery Charges: </td> <td><strong><span class="simpleCart_shipping"> </span></strong></td> </tr> <tr> <td>Tax:</td> <td><strong><span class="simpleCart_tax"> </span></strong></td> </tr> <tr> <td><strong>Grand Total:</strong></td> <td><strong><span class="simpleCart_grandTotal"> </span></strong></td> </tr> </tbody> </table> <br /> <br /> <h3 style="margin: 0;"> Send in Orders</h3> Details submitted here will not be published.<br /> <br /> <br /> <div> <label for="firstname">First Name *</label> <input id="first_name" name="firstname" placeholder="First Name" title="Your First Name (Required)" type="text" /> </div> <div> <label for="lastname">Last Name *</label> <input id="last_name" name="lastname" placeholder="Last Name" type="text" /> </div> <div> <label for="email">Your E-mail *</label> <input id="email" name="email" placeholder="Valid E-mail" type="text" /> </div> <div> <label for="phone">Phone @ H/P *</label> <input id="phone" name="phone" placeholder="Preferred mobile number" type="text" /> </div> <div> <label for="address">Delivery Address *</label> <textarea id="address" name="address" placeholder="Full address for prompt delivery, include unit number, street, area, state and country."> </textarea> </div> <div> <label for="postcode">Postal Code *</label> <input id="postcode" name="postcode" placeholder="Address postal code." type="text" /> </div> <div class="clear" style="width: 100%;"> </div> <div> <label for="message">Your Message<br /><small><i>Please include additional messages to us here.</i></small></label> <textarea id="comments" name="message" placeholder="Optional" style="border: 1px solid #ccc;"> </textarea> </div> <div> Note: Labels marked (*) is required.<br /> A copy of your order details will be sent to you via e-mail. Please check your inbox upon success submissions. Thank You. </div> <div> <a class="simpleCart_checkout button" href="javascript:;" id="sent-order">Send Order</a> </div> </fieldset> </form>
After pasting > Click the "Compose" button > Click "Save" > and click "Publish".
View this page and grab it's URL from your browser URL bar and save in your favourite editor (Ref 5)
Too MUCH too handle? Need assistance? Get the entire codes and auto upload via your Blogger dashboard. Files include FULL template codes, pages and sample product posts with just ONE CLICK INSTALL. Tutorial included. Get one now >>
Update September 2014
We have received reports from users that using Blogger domain to country specific URL's will not work properly for the Send Order page. An example would be like so: http://YOUR-BLOG-NAME.blogspot.id (for Indian Blogger users etc).
Details provided at the respective section for you to update to blogspot.com domain.
Original Article
Editing BlogCart Plus Template. Basic HTML knowledge required. Go to Template > Edit HTML and find these lines of codes:-
Editing BlogCart Plus Template. Basic HTML knowledge required. Go to Template > Edit HTML and find these lines of codes:-
Line 497-499
Add Ref 1 at this line of code. An example would look like so:-
<b:if cond='data:blog.url == "http://YOUR-BLOG-NAME.blogspot.com/p/view-cart.html"'>
Line 544 - 564 - Top Navigational Links
Social Links
Edit the links to your social profile pages at below codes:-
<ul class='social'> <li class='iconGoogle'><a class='google' href='//plus.google.com/YOUR-NAME' rel='nofollow'/></li> <li class='iconFb'><a class='fb' href='//www.facebook.com/YOUR-NAMEs' rel='nofollow'/></li> <li class='iconTweet'><a class='twitter' href='//www.twitter.com/YOUR-NAME' rel='nofollow'/></li> <li class='iconLinkedIn'><a class='email' href='mailto:YOUR-EMAIL?subject=Information Enquiry' rel='nofollow'/></li> </ul>
Edit the links for the top right section of the navigational links to your preferred pages. (IF REQUIRED)
<ul class='links'> <li class='links1'><a href='/p/view-cart.html'>View Cart</a></li> <li class='links2'><a href='/p/instant-checkout.html'>Instant Checkout</a></li> <li class='links3'><a href='/p/send-orders.html'>Send Order</a></li> </ul>
Line 612 - 623 - Edit Responsive Image Slider
Insert your homepage images in this section. Images prefered at 480px in height and 1400px in width and all images in the same sizes. To prevent Blogger server Auto Pagination issue, please be advise to keep your slider images below 100kb/each in file size.
<div id='feature-wrapper'> <ul class='rslides'> <li><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKcrZsgIyuhVKCu89fNQGUMSsffrdw2Yw3f06J2634EDAfAupe9B95IZIol9dchWDq7etP0AyZyVO3GitInncKyoGsEvEMvCluEL13-aPNQuU-54Fm6Pa8bNbst4kVVp0yhghRCdIae8/s1600/2.jpg'/></li> <li><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibTrYZ44LLqkfKNfMCOJgU703I-8TsNCB0cAsMTyx1TGaSNjW9jbB2TsdaCp3ThjJCEb-UtgK76d40QxvSR-pYR167TiyxGZ4WPxuQil3RjUrADSgipkAQBMbXXy15vZX8Csdj3K51kS0/s1600/4.jpg'/></li> <li><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWbFQigsuGIgOvnSZzGIJfgUdWhyphenhyphen_EfgWmakJ8jgYQAHPfyxTWBjm_hqaSoAN-fzLynYojm_xglP9tRG80dWIbU54X9msgc1FvtIdUdzIdnnD9UOIzGdI_9bhEkNboLVMcyRQmjkeFUw/s1600/5.jpg'/></li> <li><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKcrZsgIyuhVKCu89fNQGUMSsffrdw2Yw3f06J2634EDAfAupe9B95IZIol9dchWDq7etP0AyZyVO3GitInncKyoGsEvEMvCluEL13-aPNQuU-54Fm6Pa8bNbst4kVVp0yhghRCdIae8/s1600/2.jpg'/></li> </ul> </div><div class='clear'/>
Line 622 - 632 - Click to Action Text
Edit the text and Url to the click to action link to your preferred page.
<div id='search-wrapper'> <div class='inner-wrapper'> <a class='action' href='/'>NEW! March 2014 discounts and Offers. Get it NOW!!>>></a> ... more codes ....
Line 634 - 672 - Click To Action Sections
Edit the text and links(url) to your preferred pages in this section. Basic HTML knowledge is required. An example text and Url included for reference.
<div id='cta-wrapper'> <div class='inner-wrapper'> <h2 class='cta-title'>Discover</h2><hr/><br/><br/> <div class='cta'> <a class='img-wrap' href='/index.jtml'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcLcDdPYCRSkQO8nSdlHWmzYxyzPHMFkFym4qozvexNuBZk-xbz-cVjz0TrlVPCXRuesiFnzdg7p3hXJAEtZFNE33J5l09xOX-cKvcczFW_CpBzLcQ8IjJrrVRIfSRzrXzOyPOmwKFck/s1600/Highlighted-256.png'/> </a> <h3>Edited</h3> <p>The best of NEW. Current items on sale, for work or play.</p> <a href='/'>View Current Release</a> </div> <div class='cta'> <a class='img-wrap' href='/'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGzkDMNN-Wq0KPK6_htKystFUydAZK9QW1aJADDuEeVCtFifP-hz1IflouGZeU2aKSWIaa5r3HSSDYF0fG2Fbq4EUJZ9tE7OUb5N9QRCNhyphenhyphenfr8Ge2EZqmBfhF8LkpYjrt925v57xOYeo/s1600/marketplace+blogger+template.png'/> </a> <h3>Marketplace </h3> <p>Largest on-line gallery and designs to suit any occassion.</p> <a href='/'>View Marketplace ></a> </div> <div class='cta'> <a class='img-wrap' href='/'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYs9bx_0r33GdOkAJxVbz0pNVujE1d9OuRDQCe0MxQuyS56pc9O8GXkBvLR0xAJloDFv68XWMOCJGHlWS_20_6dHWUdwrXgGhjD2XBk1Rah39SyXQ0sM04WSIyoxVSaVfn9hdTB0l6to/s1600/Discounts+Blogger+Shopping+cart+template.png'/> </a> <h3>Discounts</h3> <p>Get rock bottom prices on selected items everyday.</p> <a href='/'>View Discounts ></a> </div> <div class='cta'> <a class='img-wrap' href='/'> <img alt='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0hVGScOJWMqUiP4_nktc5sJudVlJkrzn6Q4OycW_jy3lXAI9um8ljnyEI5YkgONAx2eG9AwFnqEL2b5TgVOX_6ETmRqrbxv2TMXQ7xhDVi2bIXK2MVjwN8gq5u7MDUqs_0sVDdaU5fuA/s1600/Men-Shirt-03-256.png'/> </a> <h3>Trends</h3> <p>Current styles and trends for both men, women and kids.</p> <a href='/'>View Trends ></a> </div> <div class='clear'/> </div> </div>
Line 676 - 680 - Text to Display on top of Product Gallery
Edit the text here (if required).
<h2 class='cta-title'>What's New</h2><hr/><br/><br/>
Line 1541 - 1558 - Click to Action Section below Product Gallery
Edit the text and Url to your preferred pages. Basic HTML knowledge required.
<div class='shop-wrapper' id='cta-wrapper'> <div class='inner-wrapper'> <div class='shop'> SHOP <br/><br/> <h3><data:blog.title/><br/> Brand </h3> <p>Checkout our NEW stuffs right NOW!</p> <a class='button' href='/'><data:blog.title/> HOT items</a> </div> <div class='shop'>SHOP <br/><br/> <h3><data:blog.title/> <br/>Collection </h3> <p>Browse our current Gallery. </p> <a class='button' href='/'><data:blog.title/> New Designs</a> </div> <div class='clear'/> </div></div>
Line 1550 - 1570 - Social Bookmark Links
Edit the text and Url to your preferred social website. Basic HTML knowledge required.
<div id='cta-wrapper'> <div class='inner-wrapper'> <h2 class='cta-title'>Join Us </h2><hr/><br/><br/> <a class='social sGoogle' href='/'>Google+</a> <a class='social sFb' href='/'>Facebook</a> <a class='social sTwitter' href='/'>Twitter</a> <a class='social sLinkedIn' href='/'>LinkedIn</a> <a class='social sStumbleUpon' href='/'>StumbleUpon</a> <div class='clear'/> </div> </div>
Line 1572 - 1580 - About Us Section
Edit the text your preferred preference. Basic HTML knowledge required.
<div id='cta-wrapper'>
<div class='inner-wrapper'>
<h2 class='cta-title'>About Us</h2><hr/><br/><br/>
<p class='center' style='width: 80%;'>
<b><data:blog.title/></b> ~
is a responsive lightweight Blogger Blogspot template with shopping cart dual checkout options. Easy customize this e-commerce packed template and start selling on-line like profesionals.
</p>
<div class='clear'/>
</div>
</div>
Line 1583 - 1625 - Footer Links
Edit the text and Url to your preferred social website/business profile pages.
Each footer links are grouped within a "footer-div" tag. Basic HTML knowledge required.
<div class='footer-div'> <h3>Support</h3> <ul> <li><a href='#'>How To Shop</a></li> <li><a href='#'>How To Order </a></li> <li><a href='#'>Instant Payment Method</a></li> <li><a href='#'>Delivery Status</a></li> <li><a href='#'>Frequently Ask Questions</a></li> </ul> </div> <div class='footer-div'> <h3>About</h3> <ul> <li><a href='#'>Our Company</a></li> <li><a href='#'>Our Story</a></li> <li><a href='#'>Our Brands</a></li> <li><a href='#'>Members</a></li> <li><a href='#'>Terms & Conditions</a></li> <li><a href='#'>Privacy Policy</a></li> </ul> </div> <div class='footer-div'> <h3>Follow Us</h3> <ul> <li><a href='#'>Fb Fan Page</a></li> <li><a href='#'>Tweet Stream</a></li> <li><a href='#'>LinkedIn Profesional</a></li> <li><a href='#'>StumbleUpon</a></li> <li><a href='#'>Email Us</a></li> </ul> </div> <div class='footer-div'> <h3>Connect</h3> <ul> <li><a href='#'>Fb Fan Page</a></li> <li><a href='#'>Tweet Stream</a></li> <li><a href='#'>LinkedIn Profesional</a></li> <li><a href='#'>StumbleUpon</a></li> <li><a href='#'>Email Us</a></li> </ul> </div>
Line 1652 - 1660 - Currency Settings
Customize the shopping cart currency here. Codes provided are self explanatory. For Paypal users, please refer paypal.com page to look for available currencies used for on-line transactions. Short codes and more tutorials available in this blog.
Activate your delivery charges for your shopping cart. Un-comment only one (1) line of code depending on your preference. An example code will look like so:-
simpleCart({
//shippingFlatRate: 10
shippingQuantityRate: 5
//shippingTotalRate: 0.1
});
Currently the above shipping/delivery charge settings is MYR 5 per item in cart.
Line 1667 - 1668 - Tax Charges Setting
Set your web shop tax charges here. Activate your tax charges by un-commenting this line of code and including a percentage integer. An example code will look like so:-
simpleCart({ taxRate: 0.05
Currently the above tax charges setting is 5% (5 divide by 100%) from the aount of the total item in cart.
1681 - 1683 URL To Email Invoice Page
Edit the URL to your send order page here.
<b:if cond='data:blog.url == "http://YOUR-BLOG-NAME.blogspot.com/p/send-orders.html"'>
Line 1687 - Email invoice currency codes
Add your email invoice currency here. International currency codes only.
currency:"MYR",
IMPORTANT UPDATE 01/04/2014 - New template e-mail invoice code structure was updated at this below field:-
data.shop_url = "//your-blogshop-NAME.blogspot.com/"; data.shop_thankyou = "//your-blogshop-NAME.blogspot.com/p/sucess.html"; data.shop_sendFail = "//your-blogshop-NAME.blogspot.com/p/error.html";
Current users can remove the "http:" from your leading url in order to pass through the e-mail validations. The example is as shown above and should reflect your Blogger template customizations.
Line 1690 - Line 1722 - Email Invoice Preferences
Edit your E-mail invoice preferences here. Comments left as reference and no the e-mail invoice has a new look, responsive, simple but bold which utilizes more or less BlogCart Plus natural color schemes.
Line 1724 - Add Instant Checkout URL (Paypal)
Add Ref 3 at this line of code. An example would look like so:-
<b:if cond='data:blog.url == "http://YOUR-BLOG-NAME.blogspot.com/p/instant-checkout.html"'>
Line 1726 - 1737 - Paypal Checkout Preference
- Edit/insert your Paypal e-mail preferences at Line 1731
- Edit your Success page Url (Ref 2) Url at Line 1733
- Edit your Error page Url (Ref 3) Url at Line 1734
Wan't sample pages to quick start customizing? Get the entire codes and auto upload via your Blogger dashboard. Files include FULL template codes, pages and sample product posts with just ONE CLICK INSTALL. Tutorial included. Get one now >>
Congratulations. You have completed installing BlogrCart Plus Blogger Blogspot E-commerce template.
You can conduct your shopping cart test now by posting an example post > Publish it > Go to the published page > click add to cart > and use the shopping cart functionalities.
Detail tutorial and tips will be provided soon! Stay tune.
Got It!
Data submitted via comments collected & stored by the respective providers.
Read our Privacy Policy to learn more on data management & protection.