Shopping Cart Blogger Template
We are proud to release Shopping Cart, the first ever free e-commerce/ online store template with “Add to Cart” and PayPal Checkout function for Blogger. Many had a view that Blogger cannot be transformed into an online store because people thought it is just aplatform for beginners and does not have features like a CMS. But, we made it possible in this template.
Thanks to the creators of Simple Cart script which powers entire cart functions in this template. Here is a screenshot of the blog which we set for demo purpose only.
Other blogging platforms like WordPress has “Custom Fields” option which lets us to add extra description such as price and thumbnails without having to add the HTML codes in post editor. But, Blogger doesn’t have that feature. So, we at Bloggermint.com tried our best to make the item posting as easy as possible by using tables method. Here is how the table looks in post editor.
Template Usage Instructions
Using Blogger’s “Post Template” feature, we are able to pre-format the post editor with text or code that will appear each time we create a new post. So, we will make use of that feature in this template. First, download Shopping Cart Blogger template and upload it to your blog. Now, go to Settings > Formatting. Set the desired number of posts to be shown in the blog.
Then, scroll down the page until you see “Post Template” option. Paste the following code into the text area. And click “Save“.
<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 660px;"><tbody>
<tr> <th class="item_thumb" id="thumb" width="45%"><a href="http://t3.gstatic.com/images?q=tbn:ANd9GcQ7JIbBjIQXzuNtS1-F9v2lUU6lLKuYyqCWKG9dcsBYtjAw_gwRQHZueWg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQ7JIbBjIQXzuNtS1-F9v2lUU6lLKuYyqCWKG9dcsBYtjAw_gwRQHZueWg" 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 style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">MENU</b> </th> <td class="item_name">SATE KAMBING SPECIAL ALA MANCIS</td> </tr>
<tr> <th><b style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">HARGA</b> </th> <td class="item_price">Rp 15 000</td> </tr>
<tr> <th><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">TLP:/SMS</span> </th> <td class="item_Description"><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">+ 6738259159</span> </td> </tr>
<tr> <th><b style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">DELIVERY </b> </th> <td><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">+ 6738259159</span> </td> </tr>
<tr> <th><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">NAMA RESTORAN</span> </th> <td>WARUNG SEDERHANA</td> </tr>
</tbody> </table>
</div>
Now go to Posting | New Post and you’ll see the table there in your post editor. You can remove the default image that we have added in the code by clicking on it and select “Remove“. Then, upload your item image inside that table cell. We suggest you to use images of medium sizes.
Fill in other options such as Item Name, Price and Description by replacing the default texts. They will be used as values by the SimpleCart script during the PayPal Checkout. And please remember that your Item Name must be unique. Now, click on the HTML Mode in post editor and remove the unnecessary <div>.... </div> in the code for item image. We need only the <img ... /> which has been highlighted in the image below.
So, this is how it will look once we remove the <div>.... and <a href.... which wraps <img ... code.
You can change it back to “Compose” mode, add/edit any information about the product and hit the “Publish” button. That’s all.
PayPal Email Setup Instructions
Go to Design > HTML. Search for simpleCart.email using CTRL + F. You will find this piece of code.
simpleCart.email = "bloggermint@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ];
</script>
Replace the default PayPal email that we set (bloggermint@gmail.com) to yours. And Savethe template. You’re done! Here is a sample screenshot of PayPal pop up window during checkout.
We have planned for a paid PRO version of this Shopping Cart with more advanced features and professional look. Please keep the footer credit links intact. If you want to remove the link you have to pay a little fee. And, if you want to get the template customized , contact us. Also check 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, you might want to use email contact form. You can replace “Add to Cart” button with a email contact/feedback form link by following the steps below. Heartfelt thanks to one of our blog reader, Vivija(Ble) from Skopje, Macedonia, who spent her time to find this method.
First, go to Kontacr.com and register for a new account. Once you logged into Kontacr, scroll down the page until you see the “Ajax Embed Widget” or “Buttons Code” and get yourKontacr ID which will look like this :- id=39662;. Copy it and keep it for the usage in the coming steps.
Now, go to Design > Edit HTML . Add the code shown below just before the closing </head>tag.
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>
Then, search for the piece 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 in this template. But, you can differentiate them by looking at the CSS declarations inside { .... }.
Search for the input.item_add{ code which comes earlier in CSS part. Then, replace it with this code.
LANGSUNG SAJA MASUK DI LINK INI >>> KLICK
We are proud to release Shopping Cart, the first ever free e-commerce/ online store template with “Add to Cart” and PayPal Checkout function for Blogger. Many had a view that Blogger cannot be transformed into an online store because people thought it is just aplatform for beginners and does not have features like a CMS. But, we made it possible in this template.
Thanks to the creators of Simple Cart script which powers entire cart functions in this template. Here is a screenshot of the blog which we set for demo purpose only.
Other blogging platforms like WordPress has “Custom Fields” option which lets us to add extra description such as price and thumbnails without having to add the HTML codes in post editor. But, Blogger doesn’t have that feature. So, we at Bloggermint.com tried our best to make the item posting as easy as possible by using tables method. Here is how the table looks in post editor.
Template Usage Instructions
Using Blogger’s “Post Template” feature, we are able to pre-format the post editor with text or code that will appear each time we create a new post. So, we will make use of that feature in this template. First, download Shopping Cart Blogger template and upload it to your blog. Now, go to Settings > Formatting. Set the desired number of posts to be shown in the blog.
Then, scroll down the page until you see “Post Template” option. Paste the following code into the text area. And click “Save“.
<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 660px;"><tbody>
<tr> <th class="item_thumb" id="thumb" width="45%"><a href="http://t3.gstatic.com/images?q=tbn:ANd9GcQ7JIbBjIQXzuNtS1-F9v2lUU6lLKuYyqCWKG9dcsBYtjAw_gwRQHZueWg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQ7JIbBjIQXzuNtS1-F9v2lUU6lLKuYyqCWKG9dcsBYtjAw_gwRQHZueWg" 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 style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">MENU</b> </th> <td class="item_name">SATE KAMBING SPECIAL ALA MANCIS</td> </tr>
<tr> <th><b style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">HARGA</b> </th> <td class="item_price">Rp 15 000</td> </tr>
<tr> <th><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">TLP:/SMS</span> </th> <td class="item_Description"><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">+ 6738259159</span> </td> </tr>
<tr> <th><b style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">DELIVERY </b> </th> <td><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">+ 6738259159</span> </td> </tr>
<tr> <th><span style="color: red; font-family: Arial, Verdana, sans-serif; font-size: 14px; line-height: 22.366666793823242px;">NAMA RESTORAN</span> </th> <td>WARUNG SEDERHANA</td> </tr>
</tbody> </table>
</div>
Now go to Posting | New Post and you’ll see the table there in your post editor. You can remove the default image that we have added in the code by clicking on it and select “Remove“. Then, upload your item image inside that table cell. We suggest you to use images of medium sizes.
Fill in other options such as Item Name, Price and Description by replacing the default texts. They will be used as values by the SimpleCart script during the PayPal Checkout. And please remember that your Item Name must be unique. Now, click on the HTML Mode in post editor and remove the unnecessary <div>.... </div> in the code for item image. We need only the <img ... /> which has been highlighted in the image below.
So, this is how it will look once we remove the <div>.... and <a href.... which wraps <img ... code.
You can change it back to “Compose” mode, add/edit any information about the product and hit the “Publish” button. That’s all.
PayPal Email Setup Instructions
Go to Design > HTML. Search for simpleCart.email using CTRL + F. You will find this piece of code.
simpleCart.email = "bloggermint@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ];
</script>
Replace the default PayPal email that we set (bloggermint@gmail.com) to yours. And Savethe template. You’re done! Here is a sample screenshot of PayPal pop up window during checkout.
We have planned for a paid PRO version of this Shopping Cart with more advanced features and professional look. Please keep the footer credit links intact. If you want to remove the link you have to pay a little fee. And, if you want to get the template customized , contact us. Also check 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, you might want to use email contact form. You can replace “Add to Cart” button with a email contact/feedback form link by following the steps below. Heartfelt thanks to one of our blog reader, Vivija(Ble) from Skopje, Macedonia, who spent her time to find this method.
First, go to Kontacr.com and register for a new account. Once you logged into Kontacr, scroll down the page until you see the “Ajax Embed Widget” or “Buttons Code” and get yourKontacr ID which will look like this :- id=39662;. Copy it and keep it for the usage in the coming steps.
Now, go to Design > Edit HTML . Add the code shown below just before the closing </head>tag.
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>
Then, search for the piece 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 in this template. But, you can differentiate them by looking at the CSS declarations inside { .... }.
Search for the input.item_add{ code which comes earlier in CSS part. Then, replace it with this code.
LANGSUNG SAJA MASUK DI LINK INI >>> KLICK
Tuliskan Komentar facebook