How to Create an Online Store with Blogger

It looks as though you’re wondering exactly how to create an online store with Blogger, huh? Well, you’ve come to the right place! Blogger does, in fact, offer a straightforward, yet very useful method for setting up a simple online store solution. And, just about anyone can easily take advantage of the features Blogger offers in order to quickly get up and running with their own on-line store. In this article I’ll walk you through all the basics you’ll need to know regarding how to create an online store with Blogger so you can be up and running in close to no time flat.

How to Create an Online Store with Blogger

The Blogger service has become a very popular free, online blog publishing service which offers its users the ability to create and maintain multiple blogs. (up to a whopping 100 separate blogs per free user account — more if you’re willing to upgrade to their paid service!) Blogger was developed by Pyra Labs and first launched in the late 1990’s, but was purchased by Google in 2003. By signing up for a free account with the Blogger service, a user is then able to create their very own blog, or blogs, which will reside on the Google owned and maintained domain Blogspot.Com. The user of the new blog simply chooses a unique sub-domain for their blog — so, let’s say your name is Harry, you might choose something like “HarrysBlog” as your unique blogger sub-domain. And, if that unique sub-domain is not already taken, the Blogger system will then set up your own, unique blog for you which can be reached by anyone with an internet connection simply by visiting the address: Http://harrysblog.blogspot.com

So, as you can likely see, getting set-up with your own, free Blogger blog is a quick, easy and painless process. But what about using this powerful tool in order to create your own online store?

How to Create an Online Store with Blogger

After you sign up and create your own Blogger site, you’ll need to log-in to the administrator area and go through a few simple procedures in order to customize the look of your own personal Blogspot blog. The Blogger system provides you with a number of ready-made templates that you can use that will control the look and functionality of your Blogspot online store. At the time of this writing, these default templates are titled:

  • Awesome Inc.
  • Dynamic Views
  • Ethereal
  • Picture Windows
  • Simple

The first thing you’ll need to do in how to create an online store with Blogger is to log-in to your Blogger account and choose one of those provided templates. Then, you’ll need to use the Blogger provided tools to create three different pages on your Blogger site. You’ll want to create an order form page, a contact page, and a “how-to” page that will provide your customers with specific instructions on how to place orders for the items you have for sale on your Blogger online store. This last page is important because it is currently not easily possible to integrate automated shopping cart or payment processing functionality into the Blogger system. So, any orders placed by customers will be placed via e-mail, by phone, or by using SMS. And, payments for items ordered will need to be done, at your discretion, by bank transfer, PayPal via e-mail, or through having your customer mail-in payment either via check or money-order.

Creating your Blogger Order Form Page

So, one of those three pages I mentioned above will be your actual order-form page on your Blogger online store. This is the page that your customers will use in order to place orders for the merchandise you’re offering. There are two ways you can use to do this: The simplest method is to use the Blogger provided “123ContactForm” contact form on a page on your Blogger site, which you might call “orderform.html” — so, your order-form page would be located, using that example, at: Http://yourblog.blogspot.com/orderform.html

Best WordPress theme for online storeHowever, while using the Blogger provided contact form is the simplest method, there is a drawback. For free Blogger accounts you will be limited to a maximum of 100 contacts per month. Since you’re using this contact form in order to receive orders for your items, this means that you will be limited to no more than 100 sales per month at the most. If your Blogger online store is doing more business than that then you’ll need to pay to upgrade your Blogger account beyond the free service, to either a Blogger Silver, or Gold membership.

The second method is to use the services of FoxyForm.com to create the contact form that will go on your Blogger order-form page. FoxyForm currently offers unlimited contacts through your FoxyForm, and it also incorporates anti-spam protection. And, using FoxyForm for your order page really isn’t very much more complicated than using the 123ContactForm mentioned above — there’s just a couple of extra steps you’ll need to go through — which, of course, I’ll walk you through, below.

Simply go to the FoxyForm website  (click on the link in the paragraph above — it will open in a new window) and create a contact form by following their online instructions. The FoxyForm site will then provide you with a few lines of computer code that you’ll simply copy from their site and paste into your Blogger order-form page using Blogger’s administrative page-creation tools. It’s recommended here that when setting up your contact form on the FoxyForm site that you use a unique e-mail address that will only be used to take orders from your Blogger online store.

So, once you have your FoxyForm code, you’re going to want to log in to your Blogger account and go to your Blogger dashboard. Once you’re there click on the “posting” tab at the top of your screen. Then, click on the “Edit” tab in the sub-menu and create a new “static page”. In the “Page Title” box you’re going to want to put something like “Order Form”, and in the “Edit HTML” window, you’re going to paste in the code you received from FoxyForm. Once you’re done all of that, click on the “Publish Page” button and your new order-form page will go live on your Blogger site and you’ll be ready to start taking orders from customers.

Making Blogger Look and Act Like an Online Store

Now that you’ve got your order-form page set-up and your Blogger online store is ready to start receiving orders from your customers, the next step is to actually make your Blogger page look and act like an on-line store and not just another Blogspot blog. In order to achieve this, you’re going to need to manipulate the Blogger system to make your latest post to your Blogger blog display as a thumbnail image accompanied by a brief summary. The thumbnail image, of course, will be a thumbnail of your item image, and the summary a brief description of the item, pictured in the image, that you have for sale. When a visitor to your Blogger online store clicks on the thumbnail, or summary, they’ll be taken to the main page for that item where they’ll view the post in detail, and be provided with a link to your order-form page so they can purchase the item.

In order to get your main page to display thumbnails and summaries in the manner required you’ll need to log-in to your Blogger account and go back to your Blogger Dashboard. Once you’re at the Dashboard go to “Design”, then “Edit HTML” and put a check mark in the “expand widgets template.”

Once this is done, look through the code and find </head> — it should be somewhere fairly close to the top. Directly before the </head> tag, paste in the following code:

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>
<!-- Scripts and Styles End -->

Once you’re done with that, next look for the following line in your page’s code: <div class=’post-footer-line post-footer-line-1′>

If you can’t find that line anywhere, then try looking for following instead: <p class=’post-footer-line post-footer-line-1′>

Whichever one of those two you find (at least one of them should be in there) copy and paste in the following code directly after that line:

<!-- Related Posts Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<!-- Code End-->

Now, simply save this template and point it to your homepage. And, the final step you’ll need to take in how to create an online store with Blogger is to create a template for entering items you have for sale. You want this to look like an on-line store and not your average, every-day type of straight-forward blog. So, you’ll need a post template that will format your entries in such a way that they’re presented with an online store sort of look.

To achieve this, log back in to your Blogger Dashboard and go to “Settings”, then “Post and Comment”, then “Post Template.” Once there, simply cut and paste in the code below:

<table border="1" style="width: 500px;"><tbody>
 <tr><th class="item_thumb" id="thumb" width="40%"><a href="URL-of-your-item-image" rel="nofollow">
 <img alt="Image-ALT-Text" border="0" src="URL-of-your-item-image"
 style="display: block; height: 164px; margin: 0px auto 10px; text-align: center;
 width: 148px;" /></a></th><td><span class="item_add">
 <a href="http://Yourblog.blogspot.com/p/order-form.html" target="_blank">
 Order Now</a></span></td></tr>
 <tr><th>Product Name</th><td class="item_name">Your-Product-Name</td></tr>
 <tr><th>Price</th><td class="item_price">$Price-of-your-Product</td></tr>
 <tr><th>Description</th><td class="item_Description">Description-of-your-product</td></tr>
 <tr><th>Related Product</th><td>The-URL-for-the-specific-product-post/page</td></tr>
 </tbody></table>

Passive income online storeNow, when you post a new item to your Blogger online store, you can simply use that post template and change the parts that appear in purple in the above code snippet with the information for your blog and item prices and descriptions.

I hope that helps you in answering your how to create an online store with Blogger question! And, good luck to you and your new online store! If you have any questions, please feel free to enter them in the comment box provided below. I can’t guarantee that I’ll definitely be able to answer them, but I’ll certainly do my best to help in answering any questions you might have, or help with any problems you may be experiencing, as my time and schedule permits. And, if I’m unable to, then another reader may very well be able to help you out as well. Also, if you have any of your own tips, tricks or techniques on how to create an online store with Blogger, please also feel free to leave a comment and let everybody know about them!

Have a great day!

Leave a Reply