Online Store Blogger Blogspot with SimpleCart + PayPal


Valid until 31 January 2015 (unless noted)
Build an Online store blogger / blogspot is not impossible now. Yeah, as we know, many blogger trying to make money online by selling their product via blog. Blogs can be used to create an online store for free. In this article we will discuss and try to learn how to create a simple online store using free blogspot domain. Online store Blogspot using SimpleCart.js as cart function and PayPal as a payment tool. Although online store blogspot with SimpleCart.js + PayPal has many weaknesses, but interesting enough to be implemented and developed further. With a little customization we can make our simple blogspot online store alive, all you need is an ability to copy-paste the code and basic HTML knowledge.

SimpleCart.js was developed by The Wojo Group. The cart (SimpleCart.js) is a tiny size javascript (10,5kb), very simple and usefull to handle blogger cart function. I have downloaded the javascript file and made an experiment with it for my Online Store Blogspot DEMO.

Online Store with Blogger or Blogspot


Online Store with free blogspot + SimpleCart + PayPal EXAMPLE :

These are steps, BEGINNER GUIDE to make a Simple Online Store Blogspot With SimpleCart DEMO

1. Download and Install the SimpleCart.js
You can download SimpleCart.js and save it into free file hosting (you can use Ripway.com or Google Sites).
If you want to skip (don't want to download) you can use my SimpleCart.js in my google site.
Simply go to your blogger account - Go to layout - edit HTML
Copy the code below and paste it precisely before <b:skin><![CDATA[
<!--Include the SimpleCart(js) script-->
<script charset='utf-8' src='http://sites.google.com/site/angga123site/simpleCart.txt' type='text/javascript'/>


<!--Make a new cart instance with your paypal login email-->
<script type='text/javascript'>
simpleCart = new cart(&quot;yourpaypalemail@yahoo.com&quot;);
</script>

Change yourpaypalemail@yahoo.com with your PayPal email address!

Save your template!

2. Install Your Cart CSS
Copy the CSS code, and paste it precisely before ]]></b:skin>

/* Your Cart */
.cartHeaders,.totalRow{display:none;}
.simpleCart_items{
overflow-y:auto;
overflow-x:hidden;
height:324px;
width:243px;
margin-bottom:20px;
}
.itemContainer{
clear:both;
width:229px;
padding:11px 0;
font-size:11px;
}
.itemImage{
float:left;
width:60px;
}
.itemName{
float:left;
width:85px;
}
.itemPrice{
float:left;
width:85px;
color:#418932;
}
.itemQuantity{
float:left;
width:33px;
margin-top:-12px;
vertical-align:middle;
}
.itemQuantity input{
width:20px;
border:1px solid #ccc;
padding:3px 2px;
}


.itemTotal{
float:left;
color:#c23f26;
margin-top:-6px
}


Save your template !

3. Create Product Page on Blogger Post
Create a new post, give the title and copy - paste the code below (in HTML mode)

<center>
<img src="http://sites.google.com/site/angga123site/redShoe.jpg" alt="Red Shoe" />
Price : $50
Name : Red Shoe
Details : Bla.. bla.. bla
<a href="#" onclick="simpleCart.add('name=Red Shoe','price=50','image=http://sites.google.com/site/angga123site/redShoethumb.jpg');return false;"> add to cart</a>


<hr>
<img src="http://sites.google.com/site/angga123site/goldShoe.jpg" alt="Gold Shoe" />
Price : $70
Name : Gold Shoe
<a href="#" onclick="simpleCart.add('name=Gold Shoe','price=70','image=http://sites.google.com/site/angga123site/goldShoethumb.jpg');return false;"> add to cart</a>


<hr>
<img src="http://sites.google.com/site/angga123site/blackGold.jpg" alt="Black Gold Shoe" />
Price : $58
Name : Black Gold
<a href="#" onclick="simpleCart.add('name=Black Gold','price=58','image=http://sites.google.com/site/angga123site/blackGoldthumb.jpg');return false;"> add to cart</a>


</center>


Publish Post !

4. Create "Your Cart Widget"
Go to Layout - Page Element - Add A Gadget - Choose HTML / Javascript
Copy and paste this code into your widget

<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items">
</div>




TOTAL : <div class="simpleCart_total"></div>
<span class="simpleCart_quantity"></span> items
<br/>
<br/>
<!--Here's the Links to Checkout and Empty Cart-->
<center>
<a href="#" class="simpleCart_empty">Empty cart </a> |
<a href="#" class="simpleCart_checkout">Checkout</a></center>

Done ! Click Save and see the result.

Note : This article and Blogspot Online Store DEMO are for learning purposes only, not for commercial.

READ ALSO : Blogger Online Store Using FatFreeCart

65 comments:

Aksesoris Wanita said...

Saya sempet coba2 pakai plugin wp-ecommerce. menurut orang2 sih gampang. mungkin saya yg agak bloon, tapi jujur saya agak kesulitan pakainya. jadi ya balik ke manual aj deh....dengan cara posting biasa.hehehh

Lala said...

Makasih tutorialnya, tapi blom bisa dipraktekin karena ga punya barang dagangan :D

adrin said...

Nice post.

Work from home

UPrinting said...

This will definitely be useful for bloggers who want to sell some stuff but don't really want to build a whole online store. An excellent way to earn more income with one's site. Thanks for posting this, very useful!

web designer said...

Wah klo yang ini terlalu banyak scriptnya..!
Artinnya hanya untuk kalangan yang mengerti web design..!

stop dreaming start action said...

Thanks postingannya, semoga bermanfaat juga bagi yang lain

mancing gembira said...

hmm aman gak nih shopping chardnya?
salam mancing

Netflix Trials said...

Great ideal to monetize a blogger site.

NURA said...

salam sobat..
info mantap dan bikin orang selalu ingin nyoba,tips sobat ini.
saya ikutan boleh Ngga?

Mencari Blogpreneur Sejati said...

wah berguna sekali, kira kira bisa di taukan dengan chart nya amazon ga yaaa. xi xi xi xi

RiP666 said...

wahh aku cm pk PP doank nih,, blh jg sob infonya ^^

uky said...

thanks banget bro..keren nichh...tapi dah terlanjur..

New Trendy said...

thanks for this. i will try and error for my self

Ayi Furqon said...

Dear angga,
I've tried the scripts, but I want to ask you how if the products list on page want to be in table view?

Thanks for your tutorial,

oes tsetnoc said...

Whuah.. complete! I think you shuld make a video step by step. It must be cool :)

eleanor said...

visit me everybody at www.eharterpage.blogspot.com

rikixy said...

thank's bro. bingung juga nyari kemana2 akhirnya ketemu juga ama angga-weblog.. oh iya tp aku mau tanya nih gimana ya cara bikin agar YOUR CART-nya mirip ama punya kamu cuba deh lihat punyaku http://tokoonline-rikixy.blogspot.com trus untuk yang no.2 copy CSS-nya itu fungsinya apa bro gua bingung dah dicoba bongkar pasang tapi kayaknya ga ada yang berubah. balas ke Email ku aja rikixy@gmail.com

OO5GOO said...

Hey, Bro this post is really good but its showing some error on the page so it does not work for me.....

naura said...

thanks bro,.. i'm tryin to try make some web/blog to sell or as online shop.. your post are helpfully. thanks

Kenali dan Kunjungi Objek Wisata di Pandeglang said...

mantab kang tutorialnya,,:)
Business Blog SEO | Kenali dan Kunjungi Objek Wisata di Pandeglang

www.FashionTrigger.info said...

Very nice Templates bro, but I am looking for something new and more exciting..
I need do online business but only on blogger so am looking for a blogger template which should be very clean and my visitors can buy products useing credit card or through pay pal shopinf chart, if you can suggest me something I will be very happy..

Thanks bro

rosy said...

Thank you . To all participant, please have a look at our updated contest post.
Web development

www.page3fashion.org™ said...

Very Nice and usefull..

Anonymous said...

Bundle of thanks for sharing these precious Stuff!
Online Store Templates

Anonymous said...

When you pay with PayPal, you don't expose your credit card number to merchants.
By signing up for a PayPal account, though, you have more options when you pay. You’ll be able to pay with your PayPal balance or — if that isn’t enough to cover a payment — you can pay directly from your bank account or use your debit or credit card. 
Whatever payment method you choose, your financial information is secure. Merchants get paid but never see your bank account details or debit/credit card numbers.
There's no charge to open a PayPal account and to transfer money from your bank account to your PayPal account.
Best of all, it's completely free to sign up!
To sign up or learn more, click here: https://www.paypal.com/cy/mrb/pal=TWMNSR5A26VU

warung online said...

wah keren, bs jadi masukan buat pengusaha online

Kim said...

Can anyone help me add this to my blogger.com blog? i'm not java/html inclined and i'm having a spot of trouble pasting things in the proper place.

Ildefonso said...

Hi, it is possible to use SimpleCart in google sites??

Thanks

Mary said...

Need help getting smaller pictures into the shopping cart. Please help.
http://rosebudcraftstore.blogspot.com/

Mary

elsuny.com said...

bagaimanapun juga yang seperti ini banyak kelemahannya karena tidak komplit, aku sih mending pake wp-ecommerce, lebih praktis, ringan dan siap pakai, apalagi sekarang didukung dengan banyaknya plugin, mau lihat nih, www.elsuny.com

Atif Sharif said...

wow amazing Online store you make with simple cart. Thanks for sharing. I also make a this kind of shopping cart in blogger please visit it http://www.bloggz.net/2010/05/13/estore-free-blogger-template-for-online-store/

Tiago Matos said...

@kim and others: I have just submitted an article on how to embed an online shop to blogger.com with 2 lines of code:
http://vendder.com/online-store-inside-your-blog/

I think it's worthwhile to check as it as full featured online shop working within your blog or website.

Check the demo here: http://vendder.blogspot.com/

GABRIEL said...

I'm from Romania. I don't know english very well !
One week this code work on my blog www.comenziforevr.com , but now dosn't work, end I don't know why.

faqila said...

berhasil bro....
makasih yah !!!!!

Mr. O said...

Hi there

I've got a problem with the code on my practice blog where i practice using stuff before implementing it on my main blog


http://practiseblogging.blogspot.com/

the price keeps showing on the top right when I click addto cart it shows top right and it doesnt show the items in the cart at the bottom like it does on the demo so please could you help if you can get back to me i can send u an email where i can send you the code im using in the widget and u can tell me whats wrong with it.

Please get back to me asap

Regards

Annie's Online Store said...

i think its a very good idea, a nice way to earn some money if one has time to manage the blog and good sense to sell things - i liked the post

கை.க.சோழன் said...

How to create the best blog for shopping cart? How can I get the best affiliate programs for shoppping cart?

Which is the best one to promote it through blog?

I need to know the answer from you.


Shopping Cart

Online Shop said...

Blog is the third party of spreading info and promotion over the internet. It can really help your online business

selling online said...

Very well said, newbies will benefit in this. Good choice of words and informative. Thanks to the author.

google said...

Great,perfect description, but a little hard I must admit ;)

Juragan gitar said...

Mo tanya kalo sistim pembayaran tidak memakai paypal tp pake transfer melalui bank, cara mengganti script paypal nya bagaimana ya.

tks pencerahannya

fajreen said...

trimakasih banyak ilmunya....

m@z said...

Is it possible to change the "$" to "€" (EURO)? Thank you very much

m@z said...

There is nobody to help me??? I want to sell a single item !, is it possible?… Thank you again for this good work.

Mudhut said...

If you embed the Paypal online store code on your everyday blogspot.com site which was not intended to be an online store, will the Paypal icon be visible on every page even where there are no items for sale, or must I make a new blogspot.com site just for my online store?
Please advise.
Kind regards
Mudhut

favoriflame said...

Hi Angga, I would like to know how to configure so that CHECKOUT goes to email instead to Paypal?

terima kasih

C&V Importações said...

This is the best e-store for blogger I've EVER seen.

Do you know how can I configure so that the paypal checkout page goes in brazilian portuguese and the currency in brazilian real?

Thanks a lot!

store builder said...

for starting online store, blogspot or wordpress are good platform.

Best Online shop said...

Wow! Great idea to monetize the blog and is it possible to change the $ to other currency?

Script blend said...

These are very cute Templates. I am looking for some totally different designs, is there any free ecommerce store builder software??? Do you have any ideas?

Khass said...

Great site for people who want to generate money on their own. The thing is it helps me generate ideas by becoming more competent in such a way by making it a passion.

Anonymous said...

Can anyone point me to examples of this idea being implemented on Blogger or WordPress?

Anonymous said...

This is so wonderful!! However, I really need some help.

How do I change the pictures and the price and add descriptions? How do I add more products? I was able to make the changes and add this to the pages. I even found a code to have the checkout widget appear only on the page for this store, but I don't know anything else!! Help!!

johnotto said...

Great modification of the SimpleCart script.

It is very useful for me but I would like to know if it's possible to change the currency to Euro. I have tried to change the code of the .txt but I got nothing. Thanks in advance for your help.

all best buys said...

wow!!!!! thanks very much , perfect

Annie said...

Hi,

I love this version you have, however how do you customize the code for just services being sold with no images? I don't have products for sale, just administrative services,etc. Can you help me with this? I would greatly appreciate it.

Great post by the way!

BUY ONLINE said...

interested...but i already with amazone associated just copy html and get product to sell... more visit my site how become associated with amazone

BUY ONLINE said...

great info please review my blog

Shopping Cart Software said...

That seems to be so simple and interesting thru ur blog.Great explanation dude !

create an Online Shop said...

I really appreciate for your brilliant Efforts on spending time to post this information in a simple and systematic manner.

genial said...

mas... saya ada pertanyaan, itu kan untuk paypal mas.. kalau untuk rupiah gmn?!?!? mohon bimbingannya.. terimakasih :)

moving estimates said...

Yes It is really nice blog post to add shopping cart to blog thanks for information.

Hyun Shoppa said...

wow keren infonya, tapi agak susah ya penerapannya.
manual aja deh, sekalian ya kunjungi blogku :)
http://hyunshoppa.blogspot.com/

Gorgeous Nails said...

I've been trying to add a store and a paypal link for check out on my site, but I am unsuccessful.

SuperArtikelKauf said...

-------------------------------
Hi thank you first for the work

finally one has explained it properly,
but unfortunately does not work the online demo spot
http://exotic-handicraft.blogspot.com/
and was the second script is in the text Bloggspot.com against what should be as well not even "< before [CDATA [" is inserted before.
Can you make this post with the Blogspot Store resist alive?

regards
Martin
------------------------------------------------------------------
Hi danke erstmal für die Arbeit,

endlich einmal einer der es vernünftig erklärt hat,
doch leider Funktioniert die OnlineSpot Demo nicht
http://exotic-handicraft.blogspot.com/
und das zweite Script gibt in Bloggspot.com den Text wider was wohl nicht so sein sollte obwohl vor "before <![CDATA[" eingefügt worden ist.
Kann man diesem Post mit dem Blogspotshop wider lebendig machen ?

Grüße
Martin

Post a Comment

Rules:
Comment must be in English, otherwise will be not listed.
Spam comment will be deleted, so don't waste your time for it.
Respect yourself, respect others.