Start A Online Shop Via Blogger

First of all You convey to download a blogger templates By Click Here

 Now install it inwards your blogspot . Don't know how No Problem  Just Click hither in addition to larn to install the templates

Now Do the next steps

We are proud to release Shopping Cart, the start ever free e-commerce/ online store template with
“Add to Cart” and PayPal Checkout function for Blogger. Many had a sentiment that Blogger cannot live on transformed into an online store because people idea it is merely aplatform for beginners and does non convey features similar a CMS. But, nosotros made it possible inwards this template.

Thanks to the creators of Simple Cart script which powers entire cart functions inwards this template. Here is a screenshot of the spider web log which nosotros laid for demo purpose only.

Other blogging platforms similar WordPress has “Custom Fields” selection which lets us to add together extra description such every bit cost in addition to thumbnails without having to add together the HTML codes inwards post editor. But, Blogger doesn’t convey that feature. So, nosotros at Bloggermint.com tried our best to brand the especial posting every bit tardily every bit possible past times using tables method. Here is how the tabular array looks inwards post editor.

Template Usage Instructions

Using Blogger’s “Post Template” feature, nosotros are able to pre-format the post editor alongside text or code that volition appear each fourth dimension nosotros practise a novel post. So, nosotros volition brand exercise of that characteristic inwards this template. First, download Shopping Cart Blogger template in addition to upload it to your blog. Now, become to Settings > Formatting. Set the desired number of posts to live on shown inwards the blog.

Then, scroll downwardly the page until y'all run across “Post Template” option. Paste the next code into the text area. And click “Save“.

<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/AVvXsEgulXn85cw52KYgmgNf8j3v-q-qaDDpuLz-7b1-KfLMm98_bAveLNiB4K9LS3uj5GzT13sBOwp3bvHDaU5BnwaD_c8A0xiaETEBdjrT0k8pRoebLW0DCKKawaslsmTjNCJMpczWp0wUQHQV/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/AVvXsEgulXn85cw52KYgmgNf8j3v-q-qaDDpuLz-7b1-KfLMm98_bAveLNiB4K9LS3uj5GzT13sBOwp3bvHDaU5BnwaD_c8A0xiaETEBdjrT0k8pRoebLW0DCKKawaslsmTjNCJMpczWp0wUQHQV/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 production 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 production here</td> </tr> </tbody> </table>

Here is the screenshot of post template which has been added alongside the code.

Now become to Posting | New Post and you’ll run across the tabular array in that location inwards your post editor. You tin take away the default picture that nosotros convey added inwards the code past times clicking on it in addition to pick out “Remove“. Then, upload your especial picture within that tabular array cell. We propose y'all to exercise images of medium sizes.

Fill inwards other options such as Item Name, Price and Description by replacing the default texts. They volition live on used every bit values past times the SimpleCart script during the PayPal Checkout. And delight recollect that your Item Name must be unique. Now, click on the HTML Mode in post editor in addition to take away the unnecessary <div>.... </div> in the code for especial image. We postulate solely the <img ... /> which has been highlighted inwards the picture below.

So, this is how it volition expect i time nosotros take away the <div>.... and <a href.... which wraps <img ... code.

You tin modify it dorsum to “Compose” mode, add/edit whatever information virtually the production in addition to hitting the “Publish” button. That’s all.

PayPal Email Setup Instructions

Go to Design > HTML. Search for simpleCart.email using CTRL + F. You volition uncovering this slice of code.

<script type='text/javascript'> simpleCart.email = &quot;exampleemail@gmail.com&quot;; simpleCart.checkoutTo = PayPal;  simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ]; </script>

Replace the default PayPal email that nosotros laid (exampleemail@gmail.com) to yours. And Savethe template. You’re done! Here is a sample screenshot of PayPal popular upward window during checkout.

We convey planned for a paid PRO version of this Shopping Cart alongside to a greater extent than advanced features in addition to professional person look. Please drib dead along the footer credit links intact. If y'all wishing to take away the link y'all convey to pay a piddling fee. And, if y'all wishing to acquire the template customized , contact us. Also depository fiscal establishment fit our Blogger Template site Blogger Templates Hub Blog for latest blogger templates.

Update 08/06/2011 :

For those who don’t have PayPal/credit card, y'all mightiness wishing to exercise e-mail contact form. You tin supervene upon “Add to Cart” push alongside a e-mail contact/feedback shape link past times next the steps below. Heartfelt cheers to i of our spider web log reader, Vivija(Ble) from Skopje, Macedonia, who spent her fourth dimension to uncovering this method.

First, become to Kontacr.com and register for a novel account. Once y'all logged into Kontacr, scroll downwardly the page until y'all run across the “Ajax Embed Widget” or “Buttons Code” in addition to acquire yourKontacr ID which volition expect similar this :- id=39662;. Copy it in addition to drib dead along it for the usage inwards the coming steps.

Now, become to Design > Edit HTML . Add the code shown below merely before the closing </head>tag.

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

Then, search for the slice of code shown below using CTRL + F.

input.item_add{     bottom: 9px;     font-size: 11px;     position: absolute;     right: 15px;     width: 90px; }

There are two input.item_add{ codes inwards this template. But, y'all tin differentiate them past times looking at the CSS declarations inside { .... }. Search for the input.item_add{ code which comes before inwards CSS part. Then, supervene upon it alongside this code.

span.item_add{     bottom: 9px;     font-size: 11px;     position: absolute;     right: 15px;     width: 90px; }

So now, search for the second input.item_add { code at the bottom of the CSS Part.

input.item_add {     font-size: 17px;     height: 40px;     margin: 5px 0 0 140px;     position: relative;     width: 120px; }

And supervene upon it with

span.item_add {     font-size: 17px;     height: 40px;     margin: 5px 0 0 140px;     position: relative;     width: 120px; }

And straightaway click “Save Template”. Once saved, become to Settings > Formatting and search for the “Post Template” selection which is located at the bottom of that page.

Add the next code into the text surface area in that location in addition to click “Save Settings“. But before that, recollect to modify the id=39662; with your ID inwards Kontacr which y'all acquire earlier.

<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/AVvXsEgulXn85cw52KYgmgNf8j3v-q-qaDDpuLz-7b1-KfLMm98_bAveLNiB4K9LS3uj5GzT13sBOwp3bvHDaU5BnwaD_c8A0xiaETEBdjrT0k8pRoebLW0DCKKawaslsmTjNCJMpczWp0wUQHQV/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/AVvXsEgulXn85cw52KYgmgNf8j3v-q-qaDDpuLz-7b1-KfLMm98_bAveLNiB4K9LS3uj5GzT13sBOwp3bvHDaU5BnwaD_c8A0xiaETEBdjrT0k8pRoebLW0DCKKawaslsmTjNCJMpczWp0wUQHQV/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 production 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 production here</td>  </tr> </tbody></table>

And you’re done. I convey updated the demo blog with e-mail feedback links inwards several items. Thanks i time again to Vivija.

Update 25/07/2011 :

Due to roughly suspicious changes inwards our Google code, where nosotros hosted our script, the Cart Javascript was non working. We convey reuploaded the js file. We are are sorry for the inconvenience caused.

Search for the next code inwards your template HTML editor.

<script src='http://introbloggerscripts.googlecode.com/files/cart.js' type='text/javascript'/>

And supervene upon it alongside the newer origin URL.

<script src='http://shopppingcart.googlecode.com/files/simplecart.js' type='text/javascript'/>

Update: I am trying to acquire the demo URL dorsum to the form. For roughly unknown argue the Demo spider web log wasn’t working. So I convey contacted Blogger, promise they ready it soon.

Update 2: We convey fixed the demo spider web log issue. Thanks for your patience.