Shopping Cart Free Blogger Theme

Finally a shopping cart e-commerce theme for blogger. Designed by BloggerMint, its a 4 column free template that comes with 'Add to Cart' and 'PayPal Checkout' function for Blogger.

Live Demo

Download Now

Once the template is uploaded, go to Settings--Formatting, set the desired number of posts to be shown on the blog, and then insert this code in Post Template and save the changes -

<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody>
</table>

This code will add the table in each 'New Post', now you have to fill in other information in the table like Item Name, Price and Description, which will be used as values during Paypal checkout. Also remove the default image from the code and add you own (keep the image sizes medium for it to fit properly).

Please not that you would have to remove the 'div class' and 'a href' from the image code, which should look something like this -

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxaQNt1kOGRE8L4cjrFCpCmfsKmpONq8XsPUhdTJgDoOit0JpzCJ5Gi2qxnyO4A3qVXjL0uVXKcZs6yDZTHlM-1HnVhSOKpRPaXFHmEkZ-CFPJ7tvKKmcRldNy0JlluvochafCWDsJndoL/s1600/P1020156.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="240" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxaQNt1kOGRE8L4cjrFCpCmfsKmpONq8XsPUhdTJgDoOit0JpzCJ5Gi2qxnyO4A3qVXjL0uVXKcZs6yDZTHlM-1HnVhSOKpRPaXFHmEkZ-CFPJ7tvKKmcRldNy0JlluvochafCWDsJndoL/s320/P1020156.jpg" /></a></div>

And keep only this code in the table, those are the only changes you need to make and publish your post -

<img border="0" height="240" width="320" src="YOUR_IMAGE.jpg" />

Now moving on to Paypal Email set-up, go to Design--Edit Html and search for this code -

<script type='text/javascript'>
simpleCart.email = &quot;bloggermint@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;

Replace the text in bold, which is the Paypal email id, with your own and save the changes.

For those who don't have a Paypal account or credit card, can still purchase the product by filling the contact form. In order to integrate the form, you need to follow the steps below -

1) Sign up for Kontactr, once that is done scroll down the page until you find “Ajax Embed Widget” or “Buttons Code” and get your Kontactr ID, it will look something like this - id=39662, copy it.

2) Access Design--Edit HTML and insert this code right before the closing </head> tag.

<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>

3)Now replace this code in Edit Html, it will appear in the top part of the CSS -

input.item_add{

with the one below -

span.item_add{

4) Similarly, search for this code -

input.item_add {

and change it to one below -

span.item_add {

The next step will be to go to Settings--Formatting, scroll down to the end of the page, you will find 'Post Template' where you have to insert the following code, change the Kontactr id=39662 with yours -

<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUp-ipzD_U5xIQmcVjjNYMmIDobTsfowppasw8XGzS7UbJ-VwCXQtaNjyqu8H3Pe2cTP152YM_B4IIe3t4a_V3V1F5ifFBqD5QM6IGGxFCPRrCWMOpU2N_sJQZIREzF9UBfErEnPG_nXs/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><span class="item_add"><script type="text/javascript"> id=39662; t=1; ctxt="Order Now"; </script>
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script></span></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody></table>

Shopping Cart template also has a 4 column footer and a single sidebar on the right to display other blogger widgets like Archive, Categories, etc.