BlogrCart White Shopping Cart Blogger Template - Free Download

Update 9th July 2016 - BlogrCart WHITE is now at version 2.0

Quicker, faster, more customization features & NO PROGRAMMING REQUIRED to run your ecommerce online store on a Blogger blog! That's right, a Blogspot blog template that do not need to edit codes to install one & customize - shopping cart ready.

Here is the live template preview http://blogrcart-white.blogspot.com/ . To find out more on this amazing Blogger theme features, you can view here http://blogrcart-white.blogspot.com/p/features-white-20.html . It's been more than 2 years this Blogger template was initially released and now beefier than ever!

You can also download this Blogspot store template at the links below. Thanks all for the amazing support for the past 3 years!

BlogrCart WHITE Version 2.0 - 2016 release.

Important Blogger Theme Update - 14th April 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

This issue have been solved with BlogrCart Version 2.0

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

Update July 2014

By request from BlogrCart White & Plus blogger template with shopping cart users, the send order email from your blogger page has been updated to accommodate HTML5 forms & input fields. Get the new updated source codes right here and apply to your blogger store checkout page without comprimising your existing send order form.

This article & tutorial was previously published on April 2014 but recently updated to accommodate the additional updates (optional) for BlogrCart White & Plus e-commerce template for Blogger send order e-mail forms.

Original Article & Tutorial for BlogrCart WHITE Version 1.6 & Below

Install an e-commerce and responsive featured Blogger template has never been easy since that Blogspot template designers are sharing free downloads, complete with tutorial guide. Now, BlogrCart White responsive Blogger template is available, minimalist in styling, initially designed to help out the blog community in starting their business professionally on-line while using Blogger.

You can view BlogrCart White e-commerce Blogger template demo here and the FREE download is also included. Simplified and made minimal, pretty much easy to install. This Blogger template also include a shopping cart with e-commerce functionalities like ie slide down view cart, Paypal checkout and the UNLIMITED send order e-mail add-on.


Install and give it a try! It's FREE anyway. Unlike other FREE Blogger templates for downloads, this e-commerce packed template is kept "dry". clean and absolutely No hidden codes & No complicated HTML!. Go ahead view the source codes via button below.

Live theme working preview: http://blogrcart-white.blogspot.com/

Theme Features: http://blogrcart-white.blogspot.my/p/features-white-20.html

Download this Theme for free: http://blog.irsah.gallery

Tutorial for BlogrCart WHITE Version 1.6 & Below

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 Custom 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-descriptions">
<tbody>
<tr>
    <td class="item_description">This is the product description section. Start edit here. 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.</td>
</tr>
</tbody>
</table>
<table border="1" class="product-details">
<tbody>
<tr>
    <td class="item_price">RM 69.00</td> 
    <td class="label-add_cart"><a class="item_add button" href="javascript:;">Add to Cart</a></td>
</tr>
<tr>
    <td class="label-quantity">Quantity:&nbsp;<input class="item_quantity" size="10" type="text" value="1" /></td><td class="label-stock">AVAILABLE</td>
  </tr>
</tbody>
</table>
<!-- more -->
<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" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" height="125" 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" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" height="125" 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" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" height="125" 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" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Vu608O7iSYAnpi71HwB_-ghnwHA-cJECUpYDxFXO0JUgbVWT9V2RK97frfkwiqRqjJnPPSn4RXP_rty1hMT2g6FMuOibyHTk0KeaasB5MfQVdDX9TpfZsBz-7vX-CtPNvQz4h5WuE3F/s200/product_placeholder.jpg" height="125" 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.

IMPORTANT : If you are copying and pasting the Auto Product Post template codes above, please ensure that there are NO trailing texts/elements/tags BEFORE or AFTER the example codes above. If there's one, your product display in Gallery Pages will not display correctly.

Parse the HTML codes before pasting the codes to the required area or you can DELETE the trailing additional text/element/tag at your product post HTML codes. This issue is caused by Blogger dashboard settings editor and how it automatically ADDS text/elements/tags to copied & pasted codes with EMPTY SPACES etc.

Install Custom Blogger Pages

Install Send Orders Page (Email Invoice - Unlimited Send Orders)

This page contains the send order via e-mail form for users to submit orders and blogshop/store owners to receive a copy via e-mail.

• Go to Pages > Click "New Page" tab. 
• In "Page Title" type "Send Orders" (without quotes). 
• Click the "HTML"button and copy paste below codes:- 

Update July 2014

New send order to email form fields & source codes included right here. Copy & paste the new codes to your checkout page without comprising your existing shopping cart plug-in & set-up. Still as promised, no hidden codes & no complicated HTML! for your blogger powered e-commerce web shop.

<form action="" id="contact" method="post">
<fieldset>
<h3 style="margin: 0;">
Send in Orders</h3>
Details submitted here will not  be published.<br />
You can always view your cart summary here. <a class="cart" href="https://www.blogger.com/javascriptvoid(0)">Review Cart &gt;</a><br />
<br />
<br />
<div>
<label for="first_name">First Name *</label>
   <input id="first_name" name="first_name" placeholder="First Name" title="Your First Name (Required)" type="text" />
</div>
<div>
<label for="last_name">Last Name *</label>
    <input id="last_name" name="last_name" 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="tel" /></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. <br />
<br />
</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: Send Order Url)

For form styling purposes you can also add the new styles for the telephone input fields BEFORE your <form> tag like so:-

<style>
.main input[type="tel"] {
border:1px solid #f0f0f0;
padding:.75em 0;
outline:0;
color:#333;
margin-bottom:1em;
display:block;
position:relative;
background:#f0f0f0;
}
</style>
<form action="" id="contact" method="post"> <!-- YOUR REFERENCE -->

Install Success Page

This page is to redirect users after successfully submit their orders via the Send Order Page.

• Go to Pages > Click "New Page" tab. 
• In "Page Title" type "Success" (without quotes). 
• Edit this page accordingly ie  a thank you message etc.
• Click "Save" and then "Publish".
• View this page and grab the URL from your browser URL bar and save in your favourite editor (Ref: Success Page URL). 
• Example URL will look like so:

http://YOUR-BLOG-NAME.blogspot.com/p/success.html

Install Error Page

This page is to redirect users if there are errors while submitting the send order form ie invalid e-mail, internet congestion, invalid inputs etc.

• Go to Pages > Click "New Page" tab. 
• In "Page Title" type "Error" (without quotes). 
• Edit this page accordingly ie  a "sorry, we could not retrieve your order... blablabla" etc.
• Click "Save" and then "Publish".
• View this page and grab the URL from your browser URL bar and save in your favourite editor (Ref: Error Page URL). 
• Example URL will look like so:

http://YOUR-BLOG-NAME.blogspot.com/p/error.html

Install Automated Image Slider by Product Post

In Layout > find Image Slider widget > click edit > copy/paste below codes in the widget body:-

<script src='http://YOUR-BLOG-NAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999'></script>

Edit your blog name at "YOUR-BLOG-NAME" if you are using Blogger domain.

For self hosted domain, replace "YOUR-BLOG-NAME.blogspot.com" with your domain name.

Click "Save" > click "Save Arrenagements" in Blogger Layout.

Editing BlogrCart White Blogger Template Editor

Basic HTML knowledge required. Go to Template > Edit HTML and find these lines of codes:-

Line 569 - 576

Edit below line of codes to reflect your Ref: Send Order Url above:-

... codes...
<a class='button cart-button' href='/p/send-orders.html'>Send Order</a>
... codes...
<a class='cart' href='/p/send-orders.html'>
... codes...

Line 662 - 711 (Drop Down Navigation Settings)

Edit the codes below to reflect your drop down main navigations. Basic HTML knowledge is required for adding links to page and text editing

        <nav class='menu' id='menu'>
        <ul>
        <li><a href='/'>HomePage</a></li>
        <li class='has-submenu'><a href='#'>Drop Down 1</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 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='#'>Drop Down 2</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='#'>Drop Down 3</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>
          </ul>
        </li>
        <li><a href='#'>Our Blog</a></li>
        </ul>
        </nav>

Line 717 (Image Slider widget)

At this line of code <b:includable id='main'> > click the left triangle to "open up" the image slider plug-in. You can customize how many images from your posts to display on your homepage image slider at teh line of code below:-

var numposts_gal   = 5  ;

Currently the setting above shows 5 most recent posts published.

You can customize by including and integer of how long your post snippets will display in your image slider at this line below:-.

var numchars_gal = 180 ;

Currently the setting above shows 180 chars from any recent posts published.

Line 1633 - 1855 (Shopping Cart Plug-in Settings)

At this line of code <b:includable id='main'> > click the left triangle to "open up" the shopping cart plug-in. At Line 1699 edit the code below to reflect your blogspot name/url to your send order page (REF:Send Order Url):-

<b:if cond='data:blog.url == &quot;http://YOUR-BLOG-NAME.blogspot.com/2p/send-orders.html&quot;'>

Shopping Cart Currency Settings

At this line of code <b:includable id='cart-currency-settings'>  > click the left triangle to "open up" the shopping cart plug-in.

Now edit the currency settings for your shopping cart:-

simpleCart.currency({ 
code: "MYR" , 
name: "Malaysia Ringgit" , 
symbol: "RM " ,
delimiter: " " , 
decimal: "." , 
after: false , 
accuracy: 2
});

Currently the setting above will display Malaysian Ringgit (MYR). Here is a complete tutorial on the 21 pre-built currencies available for the shopping cart : http://blog.irsah.com/2014/04/blogrcart-plus-shopping-cart-available.html

E-mail Invoice Send Order Settings

At this line of code <b:includable id='cart-email'>  > click the left triangle to "open up" the shopping cart e-mail invoice send order plug-in.

Edit your e-mail invoice preference here. The format and codes are self explanatory.

Take note that the format must follow the example codes provided. Ref: Success Page Url and Ref: Error Page Url is located here in your invoice e-mail settings.

Paypal Shopping Cart Settings

At this line of code <b:includable id='cart-paypal'>  > click the left triangle to "open up" the shopping cart plug-in.

Edit your Paypal preference here. An active Free paypal account (with e-mail address) is required to fully utilize Paypal + shopping cart functionalities. The format and codes are self explanatory. Details and how-to's can be referred at paypal.com website to create/open a FREE merchant account and register your e-mail.

Ref: Success Page Url and Ref: Error Page Url is also located here for the return and error page options for Paypal secured checkout.

Shipping and Delivery Charges Settings

At this line of code  <b:includable id='cart-shipping-settings'>  > click the left triangle to "open up" the shopping cart shipping setting plug-in.

Edit your shopping cart shipping/delivery charges here. Options included is based on delivery/shipping charges in shopping cart, percentage of items in shopping cart and shipping charges per item in shopping cart.

The delivery charges is self calculated and will reflect in your checkout pages automatically. The format and codes are self explanatory with indicators and comments included.

Upon install, the shipping/delivery charges is at MYR 5 for the shopping cart. Change to your preference.

Tax Charges Settings

At this line of code  <b:includable id='cart-tax-settings'>  > click the left triangle to "open up" the shopping cart tax setting plug-in.

Edit your shopping cart tax charges here. The tax charges is based on the percentage of the total amount in your cart.

Upon template install the tax charges is at 5% (5/100 or 0.05) of the total amount in cart. The tax charges is self calculated and will reflect in your checkout page automatically. The format and codes are self explanatory with indicators and comments included.

In addition, here are the settings configuration for a blog post in Layout > Blog Post gadget > click edit:-

Congratulations! You have customized your blog store in no time. You can start and test your BlogrCart White shopping cart featured template by publishing example product posts. All necessary plug-in was pre-installed in template to minimize installation.