BlogrShop Quick Installation Guide

Updated March 2015

Updated direct download links to BlogrShop Blogger theme/template file repository hosted at Mediafire.

Update September 2014

We have received reports from users that using Blogger domain to country specific URL's will not work properly for the Send Order/Checkout page. An example would be like so: http://YOUR-BLOG-NAME.blogspot.in (for Indian Blogger users etc).

Details provided at the respective section for you to update to blogspot.com domain.

Original Article

UPDATE 01/04/2014 - New updates on e-mail invoice short codes. The " http:// " protocol is NOT required. Please refer http://blog.irsah.com/2014/04/send-e-mail-order-update-for-blogger.html on the updates for the specific customization section.
Update Aug 2013 - New BlogrShop update included with more customization for your checkout auto email invoice. Codes included below which makes your on-line email invoicing painless with FREE blogshop / store blocgspot templates. See below.

Original Article

We made it super easy to install BlogrShop responsive template and Blogger new template features makes your job much ore easier for customization purposes. Here are the guide and how to's to install BlogrShop Blogger responsive template, with code snippet and tutorial.

Download Template

Demo Preview

BlogrShop a free responsive Blogger Store Template

Install BlogrShop Template

• Download this theme here via Mediafire (113kb).
• At your Blogger Template > Back-Up/Restore > click upload file.
• Select the .xml file from your local PC.
• Click upload and template will install automatically.
• Please browse through addition steps to fully utilize the theme functions.

Alternatively

You can also copy and paste the theme code by opening the .xml file with your favorite editor.

• In your editor, press Ctrl A and when code is highlighted > then press Ctrl C.
• Head over to your Blogger Dashboard.
• Go to Templates > Edit HTML > inside the template editor body > click in empty area > press Ctrl A.
• When the existing codes is highlighted > press CTRL P > Click Save Template and your done!

Note that the shortcut keys provided is for Windows OS only.

Click Save Template and view your new installed responsive blogshop.

Below is a rough idea/image on how your Blogger widgets would be displayed in your Dashboard > Layout section right after installation.

Install Product Page Features.

Go to Setting > Post and Comments > Post > click edit Post Template > copy the following code below and paste in the available box:-

<table border="1" class="store_item">
<tbody>
<tr>
<th class="thumb_image" id="thumb" width="40%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIO6tgpSJq0pABHsUP6uOdd1SDu5xxqjaGT5dhIJkUvX78bDFdRLsSXw-HVcMpQcs4p7uqXOSC6-rdywTMspyPK3g2RtZboIMjAL2nxP_5QuwMHt38x0dCMJCAF4A1W6kOckLYYhquzDI/s320/_notavailable.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="thumb" class="item_image" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIO6tgpSJq0pABHsUP6uOdd1SDu5xxqjaGT5dhIJkUvX78bDFdRLsSXw-HVcMpQcs4p7uqXOSC6-rdywTMspyPK3g2RtZboIMjAL2nxP_5QuwMHt38x0dCMJCAF4A1W6kOckLYYhquzDI/s320/_notavailable.jpg" style="cursor: hand; cursor: pointer; display: block; height: 200px; margin: 0 auto; width: 200px;" thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIO6tgpSJq0pABHsUP6uOdd1SDu5xxqjaGT5dhIJkUvX78bDFdRLsSXw-HVcMpQcs4p7uqXOSC6-rdywTMspyPK3g2RtZboIMjAL2nxP_5QuwMHt38x0dCMJCAF4A1W6kOckLYYhquzDI/s320/_notavailable.jpg" /></a></th>
<td><a class="item_add button" href="javascript:;">Add to Cart</a ></td>
</tr>
<tr>
<th><strong>Item Name</strong></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><strong>Price</strong></th>
<td class="item_price">RM50.00</td>
</tr>
<tr>
<th><strong>Description</strong></th>
<td class="item_description"> Insert product item description here! </td>
</tr>
<tr>
<th><strong>More Details</strong></th>
<td>Insert product item details here!</td>
</tr>
</tbody>
</table>

Press Save Settings > Your Done! You can check the automated product page tables in your blog post Blogger editor UI pre installed everytime you create a new blog page.

Product page with Add to Cart and details

Editing your Product thumbnail Images

Editing your Blogger post/product pages by uploading your product image is made much more easier. Here are the simple steps to upload your product image.

• Make sure your image is squared with a minimum size of 200px x 200px.
• In editing mode, hover your mouse to the empty space on the left side of the default product image.
• Click at it and making sure the cursor blinks besides the default image.
• Now Click on the upload image icon > select your new product image > upload > add selected image.
• The image will resize accordingly in the table.
• Now select the default image and click the " remove " link.
• You can also upload supporting images to the body of your product page. You can upload any image sizes to the post product body but the system will select "medium" size for default.
• Sizes larger than this will distort your product tables. This is why we opt for the FancyZoom feature provided by Blogger.

You can also turn on FanzyZoom setting Dashboard > Settings > Lighbox feature > Turn On > Save Current Settings.

You can include more images and with various sizes in the details table section (if required) but make sure the image setting is set to "medium".

En: Due to e-mail system security measures, the below automated e-mail invoice and checkout tutorial with detailed template code snippets will be opened with a secured password.
Please include your e-mail address to receive the exclusive password in your inbox. By activating the mail sent to your inbox, you can continue to preview / copy and paste / the tutorial code snippets with the given password.

My: Oleh kerana kehendak fungsi e-mail, tutorial inbois e-maul secara automatik bersama kod-kod bagi keperluan template ini boleh dibuka dengan meletakkan kata-laluan.
Sila masukkan alamat e-mail anda di ruang dibawah dan kata laluan eksklusif akan dihantar ke inbox anda. Dengan mengaktifkan e-mail tersebut, anda boleh prebiu / salin dan tampal / tutorial penuh jaringan kod snippet dengan menggunakan kata laluan anda tadi.


IMPORTANT UPDATE 01/04/2014 - New template e-mail invoice code structure was updated at this below field:-

  data.shop_url = "your-blogshop-NAME.blogspot.com/"; 
  data.shop_thankyou = "your-blogshop-NAME.blogspot.com/p/sucess.html";
  data.shop_sendFail = "your-blogshop-NAME.blogspot.com/p/error.html";

Current users can remove the "http//:" from your leading url in order to pass through the e-mail validations. The example is as shown above and should reflect your customizations at the e-mail invoice section..

Please insert your email address. Your password will be sent to your email once verified.

> Insert Your Password Here <

Detailed Blogger template auto e-mail invoice customization available

End of BlogrShop responsive Blogger store general installation guide. Feel free to ask for any questions.

Wait there's more. Edit the built in responsive social bookmark links for BlogerShop Blogger template. Here's the link to the tutorial to easily edit your social media profile pages http://blog.irsah.com/2013/05/blogrshop-template-custom-social.html

AUGUST 2013 UPDATE

At the bottom of BlogrShop Responsive free e-commerce template codes, find these line of code like below:-

<script type='text/javascript'>
//<![CDATA[
simpleCart({
    checkout: {
      type: 'SendForm',
      //url: 'http://blogshop-cart.net76.net/sendcart.php',
      method: 'POST',
      currency: 'MYR',
      extra_data: {
        first_name: document.getElementById('first_name').value,
        last_name: document.getElementById('last_name').value,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value,
        deliveryLocation: document.getElementById('deliveryLocation').value,
        address: document.getElementById('address').value,
        postcode: document.getElementById('postcode').value,
        comments: document.getElementById('comments').value
        }
     }
});
//]]>
</script> 

Now change to the UPDATED CODES as below:-

<script type='text/javascript'>
//<![CDATA[
simpleCart({
    checkout: {
// Simplecart checkout type
      type: 'SendForm',
// Shopping cart plug-in e-mail invoice validation / sending processor
     url: 'http://www.irsah.com/phpmail/checkout.php',
// Shopping cart plug-in data transfer method
      method: 'POST',
// Shopping cart currency checkout setting
      currency: 'MYR',
      extra_data: {
        first_name: document.getElementById('first_name').value,
        last_name: document.getElementById('last_name').value,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value,
        deliveryLocation: document.getElementById('deliveryLocation').value,
        address: document.getElementById('address').value,
        postcode: document.getElementById('postcode').value,
        comments: document.getElementById('comments').value
        }
     }
});
//]]>
</script> 

Update September 2014

We have received reports from users that using Blogger domain to country specific URL's will not work properly for the Send Order/Checkout page. An example would be like so: http://YOUR-BLOG-NAME.blogspot.id (for Indian Blogger users etc).

Details provided at the respective section for you to update to blogspot.com domain.