Build Your Own Online Store In Blogger Blogs

As everyone knows that the Blogger is an online service provided by Google to publish the web-pages free of any cost. Blogger blogs are used to provide online journals, Web Portals, Web Gallery and online magazine.etc. These blogs are not only used for these tasks but also to make money online using different programs like

  • Google Adsense
  • Chitika
  • Kontera
  • Commission Junction
  • Click Bank
  • Affiliates Program
  • Private Ads

So making money  online had a wide space in the blogosphere nowadays. So apart from these task another best feature which the blogs has are the ability to sell your own goods online using some javascripts and paypal intergrated in your blog. Till last week there was a tought time to sell the online goods at blogger.com because the lack of proper shopping cart etc.. But today we had come up with an solution for selling your own goods online using blogger blogs.

I believe Blogspot is a easy and powerful platform . It can do whatever other platform can do . In WordPress ,with plugins ,you can make a shop online . And now ,in Blogspot ,you can do the same . You can make a small online shop for selling good . It’s not a perfect solution ,in fact, it’s not good at processing and security .But anyway ,it’s still the solution you should consider if you want to stick with Blogspot .

Build Your Own Online Store In Blogger Blogs

Live Demo

Yesterday ,I found the script called SimpleCart . This script is based on Ajax for making a complete shopping cart ,using two payment method Google checkout and Paypal for check out .
You can find out more information on SimpleCart at This page

To make a shop like this ,you can follow some step bellow :
1, Login to your blogger account ,go to Layout tab ,continue to Page elements . Create a HTML/Javascript widget .
2,Download this file and paste it content to HTML/Javascript widget content .
Download file here
3,Save template . And see the widget in action .

How to customize this code

1,Take a look on this code :

<script type=”text/javascript”>
simpleCart.email = “brett@wojodesign.com”;
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = [ "name", "thumb_image" , "Quantity_input" , "increment", "decrement", "Total" ];
</script>

simpleCart.checkoutTo = PayPal; mean the payment method is paypal
simpleCart.email = “brett@wojodesign.com”; is the Paypal email for making payment to .Change it to your own .

2,Here is the code of one item in my live demo shop :

<div>
<!–Notice the class names of each tag begin with item_ –>
<img src=”http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.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 class=”item_thumb”>http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png</span>
</div>

To create a shelf item, you create a div with a class of “simpleCart_shelfItem” ,like this <div>
…………………
</div>

this structure : <img src=”item_image” alt=”product 1″ title=”product 1″/>
is for image of item . Image of item must contain class=”item_image” attribute .

This structure <h5>your_item_name</h5> is name of item . It must included class=”item_name” .

Description of item must included like this
<p>
your description
</p>

To set the price ,use this structure :
<span>$00.00</span>

To make ” add to cart link” ,add this line
<a href=”javascript:;”>Add to Cart</a>

To add thumbnail image for item ( thumbnail image will be showed in shopping cart ) ,use this structure :
<span>your_thumbnail</span>

Here is the code of cart :

<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>

In this post ,I explained some important points of using Simplecart and make it a widget to add to Blogspot . If you want to customize the appearance of the shop ,you can modify the CSS section of widget .
If you want to know more about Simple Cart script and its other options such as tax rate ,shipping fee … or option for showing the quantity ,the final cost …
You can go to SimpleCart Documentation page




- has written 1 posts on Techie Blogger

Hai I Am Robin..I am a web enthusiast and a freelance graphic designer

If you like this article , then please help us by bookmarking

30 Responses to “Build Your Own Online Store In Blogger Blogs”

  1. WOW…its a great featured
    i will try it later
    thanks a lot Mr.Raes…god luck always to you

  2. thanks for the post.will try it

  3. This is great! These online carts are a simple and easy way to open a store for even the most novice eCommerce web retailer.

    I work for a company called ShopTab that you might want to check out (http://www.facebook.com/shoptabapp) as this application helps businesses build customer loyalty. We saw a huge opportunity for eCommerce business owners who wanted to leverage and monetize their Facebook presence. Facebook ShopTab App allows these business owners the ability to create a shop tab directly on their Facebook fan page.

    Our application partners with online shopping cart companies by linking customers back to the company website and eCart to benefit business owners to expand their business and help build valuable customer relations through use of social media.

    We feel with the use of personalization through social media sites like Facebook companies can continue to build valuable relations through various media vehicles and keep their customers involved and happy.

    Thanks,
    –Kevin (http://www.twitter.com/shoptab)

  4. hi thanks for information……

  5. Can i become a guest blogger here? Do email me if it is possible!

    FYI: I own about 10+ relevant blogs, so i thought it may be a good move to do some guest blogging & syndicating content as well.

  6. You might also evaluate our solution from vendder.com:
    http://www.wikihow.com/Add-a-Shop-to-a-Blog

    It’s easier and faster to add your store, just copy&paste.

    Let me know what you guys think.

  7. I am getting this error, any idea?

    Im sure the email address is correct!

    http://afnerhernandez.com/wp-content/uploads/2010/05/1212.png

    Thanks!

  8. thanks for the list of online advertising programs. i tried simplecart before didn’t like it. right now i’m using paypal’s standard buy button on my online store (www.sendregalo.com). You can also try FatFreeCart as an alternative to simplecart or Payvment for facebook.

  9. Great! I will try it soon, thanks.

  10. Nice must try this. Thanks for share

  11. Thank you for giving us an awesome idea…It’s a big help especially for those who are new…

  12. Thank you for all these tips that you have been sharing. I really love this website because it helped me achieve a lot in the blogging world and due to this, I succeeded in learning HTML Codes. Thank You Once again and keep going!:)

  13. bagus akan saya coba mas, kita punya lapak juga

  14. Thanks for this one. I’ll definitely try this one.

  15. Thank you for the informative blog

  16. well i already have my virtual shop but im kind of havving problems in thinking of good material ideas of how to pack the clothes before sending them by dhl any good idea i want cool presetnation

  17. Thanks, It’s great idea for me..

  18. I replaced the email address like what was said in the posting, right now I am in the start up and design stage, I was testing the buttons and then clicked on check out ; a page opened up and this was a message I got:

    The seller accepts encrypted website payments only. You cannot pay the seller through un-encrypted buttons. Please contact your seller for more details.

    What does this mean, how do I correct this problem? How Do i get the redirect happening so pay pal box opens.

    also on the blog at the top there is the word demo there, now This is on the image within the template any suggestions for getting that replaced

  19. Thanks for this good information. I’ll follow your blog longer. Because your data it great.

  20. it doesn’t seem to work?

  21. Hi,
    Nice and informative post. I appreciate it. Thanks and sharing this informative post. Keep posting updates.

  22. well it works for me, can u add another templates :)

  23. waohh! now i have ecommerce on blogspot platform

  24. Thanks for the new knowledge. I was taught in a written report on this post just to send this project next month. Thanks again.

  25. Can this be put on a static page in blogger- if so- how???

  26. owsm article…..i dont want to create post in my blog.i just want to sell in that scrpt.have you any idea to hide posting and just showing my store?. one more thing have you any store templete(xml) file to sell my books.please upload templete(xml)

  27. Thanks for nice and informative post. I found that setting an online store is easy but to maintain is tough, with the information you have shared will be really helpful in maintaining an online store will become easy.

Leave a Reply

You must be logged in to post a comment.