In today post, I share with you eStore Free Blogger Template For Online Store. You can now easily create you online store and sell your products using Blogger.com. This template is very easy to setup. You just want a paypal account for selling your products online. I use SimpleCart script for selling products. You can use this eStore Free Blogger eCommerce Template for your online store.

Look at picture below this is sample online store,

Live Demo | Download

Customize this template follow these steps.

1.  First Download this file

2. Upload this XML file in Blogger

3. After Uploading the file Click On Page Elements

4. Click On Edit HTML/JAVASCRIPT Widget

5. Change the Paypal Email Address With Your own Email so that transaction will be gone to your account.

6. Look the code below,

<script type=”text/javascript” src=”https://sites.google.com/site/realmoneymakingideas/5444/simpleCart.txt”></script>

<script type=”text/javascript”>

simpleCart.email = “albranco@yahoo.co.jp“;

simpleCart.checkoutTo = PayPal;

simpleCart.cartHeaders = [ "name", "thumb_image" , "Quantity_input" ,  "increment",  "decrement", "Total" ];

</script>

This email address albranco@yahoo.co.jp I used for paypal transaction. So you can change with your own address.

7. Change these sample products with your own products and description which you want to sell online.

Look below the code,

<!–Create a div with the class simpleCart_shelfItem–>

<div>

<!–Notice the class names of each tag begin with item_ –>

<img src=”http://img2.pict.com/ef/83/27/3197156/0/product1.png” alt=”product 1″ title=”product 1″ />

<h5>Sample DVD</h5>

<p>

To create a shelf item, you create a div with a class of “simpleCart_shelfItem”.

</p>

<span>$14.99</span>

<a id=”s1″ href=”javascript:;”>Add to Cart</a>

<span>http://img2.pict.com/ef/83/27/3197156/0/product1.png</span>

</div>

In this green line code,

<img src=”http://img2.pict.com/ef/83/27/3197156/0/product1.png” alt=”product 1″ title=”product 1″ />

This is the image use for your product which you show in the online store. You can replace this image with your own product image

This blue line code shows you about product title. You can change it with your own product title for example Nokia 2700 Classic

<h5>your_item_name</h5>

This red line code shows Description of item. You can replace description with your own.

<p>

To create a shelf item, you create a div with a class of “simpleCart_shelfItem”.

</p>

This code is to set the price of a product

<span>$00.00</span>

This is add to cart

<a href=”javascript:;”>Add to Cart</a>

To add thumbnail image for item ( thumbnail image will be showed in shopping cart )

<span>http://img2.pict.com/ef/83/27/3197156/0/product1.png</span>

So changes all 6 products with your own products and sell these products online.

This is cart code look below,

<div id=”cartTotal”>

<strong>Total: </strong><span></span>

</div>

<!–Add a div with the class of simpleCart_items to display what is in the user’s cart–>

<div></div>

<!–use a class of simpleCart_empty to empty the cart and simpleCart_checkout to checkout –>

<a href=”javascript:;”>Empty Cart</a>

<a href=”javascript:;”>Checkout</a>

to show the total ,use this statement :

<span></span>

to show shopping cart ,use this statement

<div></div>

To show “empty cart” and “checkout” button ,use this statement :

<a href=”javascript:;”>Empty Cart</a>

<a href=”javascript:;”>Checkout</a>

You can customize this template with your own css and make it much beautiful for using as a online store.

Please feel free to ask any question about this template.

Related posts:

1. How to Use Meta Tags In Blogger Blog
2. Vacational Free Blogger Template

Vacational is a two column blogger template with sidebar to its right and post section to left.The design is simple and looks very nice.Top menu links are ready for you. Rss button is also ready in the blog.Search bar also ready at top of blog. Seo for title has been done in template.I hope you will like the template for sure.Template support full blogger features.For any support you can comment on this post.

Live Demo |  Download

Installation Instructions

1.  Download your Blogger XML template from Bloggz.net.

The template is contained in a zip file (winrar), so First you have extracted the XML template.

2.  Log in to your Blogger dashboard and go to Layout > Edit HTML

3. Ensure you back up your old template. Click on the “download full template” link and save the file to your hard drive.

4. Look for the section near the top where you can browse for your XML template:

5.  Enter the location of your template and press “upload”.

6. The HTML of your new template will now appear in the box below. Now Save the template.

How to Use Introduction Gadget

Log in to Layout and click the Page Elements tab, then click the Edit of the Introduction and paste any text you like into the Introduction gadget.

Save to complete the Introduction gadget’s settings.

How to Use Recent Posts Gadget

Log in to Layout and click the Page Elements tab, then click on the ‘Edit’ of the Recent Posts in the footer and paste codes below into the Recent Posts gadget near footer:

<script style=”text/javascript” src=”http://sites.google.com/site/realmoneymakingideas/5444/recent-post.txt”></script><script style=”text/javascript”>var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 30;var standardstyling = false;</script><script src=”/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script>

Save  Recent Posts gadget’s settings.

How to Use  Recent Comments Gadget

Log in to ‘Layout’ and click the ‘Page Element’ tab, then click on the ‘Edit’ of the ‘Recent Comments’ and paste codes below into the ‘Recent Comments’ gadget:

<script style=”text/javascript” src=”http://sites.google.com/site/realmoneymakingideas/5444/recent-comment.txt”></script><script style=”text/javascript”>var numcomments = 4;var showcommentdate = false;var showposttitle = false;var numchars = 15;</script><script src=”/feeds/comments/default?alt=json-in-script&callback=showrecentcomments”></script>

Save to complete the Recent Comments settings.

How to change Top Navbar Links

First Step:

1) Go to Posting > Edit Pages

2) Click On New Page Button

3) Give Title For Example Contact Us and give a detail page description in it.

4) All Done Save and View your changes.

Related posts:

1. Pro Magazine World’s First Premium Blogger Template With Lot Of Features

After a long time hard work, I make a premium magazine blogger template which has a lot of features already enabled in it. I think this is first blogger template which has so much features like social bookmarking widgets, related post under every post, feedburner email subscriber, translate webpage into many languages widget, tweetme button on every post, page navigation with page numbers, 4 ads right side and a banner at the top, WordPress type comment box already enabled in it, check on many borwser. I think this is awesome template that I make for my blogger community. It is free to use for all but not change credits at the bottom. This is perfect business template for your blog. You never see this kind of premium blogger template as free of cost.
Features:

• Ads Supported
• Tweetme Button
• Social Bookmarking
• Compatible with All Browser
• Premium Blogger Template
• WordPress Like Commenting Box
• Email Subscriber
• Language Translator
• Page Navigation With Numbers
• Related Post Under Every Post

Demo | Download

Please Give Some Comments here about this template. Thanks

No related posts.