Recent Items in Store → All Items in Store

Blogshop Guide Step 1 Install Template
Item Name Step 1 Install My BlogShop Tool E-Commerce Theme.
Price RM15.90
Description Download and upload the template files and installing pre-assigned product pages to blog post/pages.
Stock/Size Available Version 1.0
More Details

Downloads and Files


  1. Download the XML file here and extract the downloaded .zip file in your PC.
  2. While logged-in in your Blogger account, go to Templates > Back-up and Restore > Select theme file and press upload.
  3. When done, click Save.


Installing Product Post/Page

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="cart_product">
<tbody>
<tr>
  <th class="thumb_image" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTh8TnqfYfCYQQNkVs4aPmFhY2WpIr-KhO-_zGCpdJiE1N0RAMZBPhXgYZrCDoGcOgqEuzWXJwRg1hvZq4aLtsEJyZBvymNiU9vGXihvwwApDmLi8lQaBYp4aPbbfC3IBwKa-vjD2Eig/s1600/11.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img class="item_thumb" alt="thumb" border="0" thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTh8TnqfYfCYQQNkVs4aPmFhY2WpIr-KhO-_zGCpdJiE1N0RAMZBPhXgYZrCDoGcOgqEuzWXJwRg1hvZq4aLtsEJyZBvymNiU9vGXihvwwApDmLi8lQaBYp4aPbbfC3IBwKa-vjD2Eig/s1600/11.jpg" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTh8TnqfYfCYQQNkVs4aPmFhY2WpIr-KhO-_zGCpdJiE1N0RAMZBPhXgYZrCDoGcOgqEuzWXJwRg1hvZq4aLtsEJyZBvymNiU9vGXihvwwApDmLi8lQaBYp4aPbbfC3IBwKa-vjD2Eig/s1600/11.jpg" style="cursor: hand; cursor: pointer; display: block; height: 200px; margin: 0 auto; width: 200px;" /></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">rm99.99</td>
 </tr>
<tr>
  <th><b>Description</b></th>
  <td class="item_Description">Your product description here!</td>
 </tr>
<tr>
  <th><b>Stock/Size Available</b></th>
  <td>Stock count here!</td>
</tr>
<tr>
  <th><b>More Details</b></th>
  <td>Place extra thumbs/images of product here</td>
</tr>
</tbody>
</table>

Press Save Settings > your done!

Click Newer Items button below for the next installation steps.

Category ,

Send Form Checkout/Thank You Page - Step 2

product
Item Name Installation Step 2 Checkout Form andThank You Page
Price RM59.95
Description Tutorial add code snippets to install custom checkout with automated e-mail invoicing and notifications. Add custom Thank You auto re-deirect page for personal touch.
Stock/Size Available Location Blogger Dashboard > Add Pages section
More Details Go to Pages > Add Page > Blank Page > write the page title like so " Checkout " (without quotes).

Click HTML > copy below code to the Blogger editor body:-


<center>
<h2>
Currently in your Cart</h2>
</center>
<div class="simpleCart_items">
</div>
<div id="cartTotal">
<div class="total_quantity">
You have  <strong><span class="simpleCart_quantity"></span></strong> items in cart.</div>
<div class="total_amount">
Total Amount Due:  <strong><span class="simpleCart_total"></span></strong></div>
</div>
<div class="clear">
</div>
<br />
<div id="orderScroller">
<div id="contact-form">
<form action="" id="contact" method="post">
<fieldset>
<label for="firstname">First Name</label>
<input id="first_name" name="firstname" placeholder="First Name" title="Enter
your First Name" type="text" />
<br />
<label for="lastname">Last Name</label>
<input id="last_name" name="lastname" placeholder="Last Name" title="Enter
your Last Name" type="text" />
<br />
<label for="email">Your E-mail</label>
<input id="email" name="email" placeholder="yourname@domain.com" title="Your e-mail address" type="text" />
<br />
<label for="phone">Phone @ H/P</label>
<input id="phone" name="phone" placeholder="Preferred mobile number" type="text" />
<br />
<label for="address">Delivery Address</label>
<textarea id="address" name="address" placeholder="Full address please for prompt delivery, include unit number, street, area, state and country."></textarea>
<br />
<label for="postcode">Postal Code</label>
<input id="postcode" name="postcde" placeholder="Address postal code" type="text" />
<br />
<label for="message">Your Message</label>
<textarea id="comments" name="message" placeholder="Optional"></textarea>
 </fieldset>
<br />
Further details will be sent to you automatically via e-mail. We hope you had a great experience here at our store. We look forward for your next visit. Thank You.
</form>
<br />
<span style="float: right; font-size: 85%; margin-left: 2%; width: 48%;">
Please read through on our <a alt="terms and policy" href="http://goirsah.blogspot.com/p/policy.html"><strong>Terms and Policy</strong></a> for purchase orders submission. All details submitted are kept confidential and will not be published.
</span>
<!-- /end #contact-form -->
<a class="simpleCart_checkout" href="javascript:;"><span class="checkout_btn">Send Order</span></a>
</div>
<script type="text/javascript">
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,
           address: document.getElementById('address').value,
           postcode: document.getElementById('postcode').value,
           message: document.getElementById('comments').value,
           }
     }
});
</script>
</div>

To change your checkout currency find this code:-


currency: "MYR",


Currently it is set to Malaysian Ringgit. You can enter "USD" for US Dollar, "GBR" for Great Britain Pound Sterling etc. Find more pre-assigned currency code at http://simplecartjs.org.

You can also include your custom currency code through this template tutorial here.

After finished, click Publish Page. Double check that your page has a " Checkout " title before saving!

After your customer filled their details and cliked the send form button, the automated e-mail will re-direct to your own custom " Thank You " page.


Custom Thank You Page


You can create a personal thank you page by going to Pages > Add Page > Blank Page.

At the title area write " Thank You " (withput quotes).

On the body of the page you can customised a special thank you page for your customer when they have successfully submitted the checkout form.

A sample of the thank you page you can find here at http://my-blogshop-tool.blogspot.com

Feel free to copy the codes by right clicking and select View Page Source > copy the HTML codes form this line:-


<!-- Thank you page body starts -->


To this line of code snippet


<!-- Thank you page body ends -->


After you're done, click Publish Page and view the page that you have built.

Please cjeck that the URL of the bar will look like so:-


http://your_blog_name.blogspot.com/p/thank-you.html



If you do not have the above URL, create a new page a use the same steps stated.

You will have a quick start in building your own " thank you " page and starting your on-line business.


Category ,

Custom Currency Editing Blogshop Tool Step 3
Item Name Step 3 Custom Shopping Cart Currency.
Price RM85.50
Description Steps and tutorial on how to change current blogger theme shopping cart currency with simplecart v3.0 integration
Stock/Size Available Location > Edit Template
More Details Simplecart version 3.0 makes it possible and easy to implement your custom currency of choice.

While in Template Edit HTML > press simultaneously Ctrl + F4 > and type in the search keyword:-


simpleCart.currency


You will be forwarded to the below code snippets.

<script type='text/javascript'>
//<![CDATA[
simpleCart.currency({
    code: "MYR" ,
    name: "Malaysia Ringgit" ,
    symbol: "RM" ,
    delimiter: " " ,
    decimal: "." ,
    after: false ,
    accuracy: 2
});
//]]>
</script>

You can change simplecart checkout options/settings for currency here, and it will display through the price indicators through out your blog store.

More info and implementation, you can find through simplecart.js documentation page by wojodesign group.

Do take note that Simplecart.js has already pre-installed several country currencies of choices. Please browse through the documentation for installation codes..

Click Newer Item for next installation guide.

Category ,

SimpleCart E-Mail Notifier/Invoicing Step 4 Guide

product item
Item Name Step 4 Installation Guide Custom Auto/Send E-mail
Price RM62.30
Description Tutorial and code snippets for customizing automated e-mail notification/invoicing.
Stock/Size Available Location Template > Edit HTML
More Details
Go to Template > Edit HTML > scroll down to bottom of template code > you will find this pieces of code snippets:-

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
simpleCart.bind( 'beforeCheckout' , function( data ){
     data.first_name = document.getElementById("first_name").value;
     data.last_name = document.getElementById("last_name").value;
     data.email = document.getElementById("email").value;
     data.phone = document.getElementById("phone").value;
     data.address = document.getElementById("address").value;
     data.postcode = document.getElementById("postcode").value;
     data.comments = document.getElementById("comments").value;

// Your custom e-mail data starts here
data.shop_name = "My Online Shop";
data.shop_url = "http://your_blog.blogspot.com";
data.shop_email = "your_email@gmail.com";
data.shop_currency = "MYR";

data.shop_bizname = "Irsah Indesign Cart Theme";
data.shop_bizaddress = "P15, Cahaya, 68000 KL Malaysia";
data.shop_bizphone1 = "017-361 8321";
data.shop_bizphone2 = " 016-361 8321";
data.shop_bizphone3 = " 019-361 8321" ;

data.bank1 = "MAYBANK";
data.bank1_acc_no = "1234 1234 1234 12";
data.bank1_acc_name = "Ahmad bin Abu";
data.bank2 = "CIMB";
data.bank2_acc_no = "4567 9876 1234 89";
data.bank2_acc_name = "Ali bin Bapoo";
data.bank3 = "BANK ISLAM";
data.bank3_acc_no = "4321 1234 4321 1234";
data.bank3_acc_name = "Siti Nurhaliza";
});
//]]>
</script>
</b:if>

The codes above are self explanatory. These code snippets will provide data to your e-mail notifier/responder. Data compiled here includes your blog store URL, store name, your business name, business address, your banking particulars, contact etc.

Fill in the appropriate fields indicated in between the quotes.

A sample e-mail notifier to your customer will look like this.

Notifier to Customer Mail


A sample a-mail notifier to the blog store owner will look like so:-

Notifier mail to Blogshop Owner


Click Save Template and test your check out page using an extra e-mail address (which you have access)  as your customer's e-mail and fill in the particulars > click Send Order > and check your "test" customer e-mail and also your e-mail inbox.

If you have a problem, please contact us using the comment form below. We do provide general support, but for advance options a small donation fee would be required.

Click Newer Item for the next installation guide.

Category , , ,

Add Lightweight Jquery Featured Slider Step 5
Item Name Step 5 Install Lightweight Featured Slider with Caption
Price RM9.90
Description Tutorial and code snippet installing custom featured slider with ediable captions.
Stock/Size Available Location Theme Layout
More Details
We already included the necessary lightweight Jquery scripts and CSS styling for this theme. You can go to Layout > Find Slide widget > click Edit > copy and paste below code in the HTML body:-

<div id="my-slideshow">
<ul class="bjqs">

<li><img title="This is slider caption 1." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfo-ZmtUO4pu-vyhmANkYGX5P5ZY3aT5is8jtMkjGDsFKrPphEJot7Upjzlq_ZK-Gw_03jutHU1PTZ63LL8zUl_heZD3xDmOGC5QSQRUo3T-o8o04lR9mskGE6QZBtRW_f6sNMVN4RBM/s1600/IMG_0186.JPG"/>
</li>

<li><img title="This is slider caption 2." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTE6Djna2bAW4nPUODpZ6FwCbO-N83ii7tQ7f_driWa1VprpnjG76LZBpfbmZ1GWmsSgZA34yxoYmKJS_c2SsJOyqA4qujvQwjB0KNEkpxEd4UKSTSjz9ppq3HsldLxTZ5kdeJOn_rmZc/s1600/fesyen2.jpg"/>
</li>

<li><img title="This is slider caption 4." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGiy8TD2G-1HiHRXAq2vmN8HOptNyI9xz6A0JK2THYYCvryLahnj6dr6DTk-AGW2W_8Kaif7sLcuttgXgOSO1GxoSIdZQ4hRFLBJF760bk5jZWi6m7yEFMtsaovss7HGmGb57pivvQeU8/s1600/leighton-meester-mtv-movie-awards-2012-06.jpg"/>
</li>

<li><img title="This is slider caption 5." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPEdopR0DYInKG6dHWVOrMkVHZ151YxLW3BQtNQMDC7ObAS505qUTP4ofzVzJmMtb32FKDURiFhNyS0iPCw-60MEm1AwtIiEnY65F_ZvHH0PIAEYRBqzvzTKk600EXUKVPTh-uOZDjL8/s1600/iStyle-Kids-Fesyen-3.jpg"/>
</li>

</ul>
</div>

For each <li> .... </li> tags above indicates an image slide.

To change and image, find the code like so:-

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPEdopR0DYInKG6dHWVOrMkVHZ151YxLW3BQtNQMDC7ObAS505qUTP4ofzVzJmMtb32FKDURiFhNyS0iPCw-60MEm1AwtIiEnY65F_ZvHH0PIAEYRBqzvzTKk600EXUKVPTh-uOZDjL8/s1600/iStyle-Kids-Fesyen-3.jpg"

and change to your desired image URL.

For best image display results, an image size of 700px wide and 240px high is required.

To change the caption sentences, edit at this snippet of code:-

title="This is slider caption 5."

Sentences or wordings in the title tags are rendered as captions for each of the image slider.

Click Newer Items for the next installation guide.

Category ,

Tab Menu Wordpress Style Sidebar Widget Step 6 Guide
Item Name Add WP Style Tab Menu Sidebar Widget - Step 6.
Price RM42.90
Description Code snippet and tutorial for installing widget and edit links.
Stock/Size Available Location Theme > Layout and Theme > Edit Template section.
More Details
In Layout find the top 3 Add Widgets for the theme sidebar. Include the desired widget accordingly.

To change the tabbed link, go to Template > Edit HTML > click expand widgets > press Ctrl + F4 > enter " tabs widget " (without quote) for keyword search  You will find a piece of code snippet like so:-

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Category</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>
</ul>

Starting from top of this code snippet, change the desired word link before the " </a></li> " tags above. Starting from first link assigned for the top most sidebar widget you've installed. Name the links accordingly.

Please look through all of the customized feature/options within the Layout sections. You can include banners, HTML codes images to customized the content/s of your blog store pages.

You can also add main Navigation Links using the Link List Widget and also edit the Labels Widget to display your product/item category search.

If you have a problem or question, please do not hesitate to contact us using the comment form below. We will find time to support you the best way we can.

Or, you can also find us in concrete5 CMS forum, helping and supporting users like you, with "roadblocks" while using the powerful (and FREE) content management system for an e-commerce, business or even a personal website, using, of course concrete5.

Lots of luck and best wishes for your future on-line business.

End of installation Guide for My Blogshop Tool Blogger Online Theme.

Category ,

Responsive Blogger Store Theme Features

product
Item Name Blogshop Store Design Theme Features
Price RM18.50
Description Brief explanation and details for My Blogshop Tool, a lightweight responsive premium filled e-comerce theme for Blogger.
Stock/Size Available Download and tutorial included here.
More Details A powerful responsive Blogger Store theme with loads of premium online store features.

Inspired by bloggermint.com, toko kedai on-line and the powerful simplecart js, this theme will let you build your online blogger store in minutes!

Theme design feature includes:-

  1. CSS/Media Queries responsive Blogger theme.
  2. Minimal styling approach with standard and advance widget integration.
  3. Uses the current SimpleCart js shopping cart script (simplecart v3.0 released mid 2012) with user end customization features.
  4. Configure your blog store auto e-mail notifications/invoice with simple editing required.
  5. Included code snippets to easily install blogshop custom checkout form.  
  6. Minimalistic styled checkout and auto e-mail responder/invoicing, for quick client response.
  7. Search engine friendly with pre-installed meta tags scripts/codes ie custom 404 page not found code etc.
  8. Quick browser response with fast page rendering and lightweight.
  9. Pre-installed Google fonts included.
  10. Tab Wordpress inspired sidebar widgets minimalist web page approach.
  11. Configure gallery style Home product page to desire amount of post/pages..
  12. Pre-installed and tested breadcrumbs navigation with recognisable with major search engines..
  13. Internal Google style product/item search.
  14. Minimalist lightweight jquery slider with captions and easy editing.
  15. Move widgets effortly with existing Blogger widgets.
  16. Conditional CSS styles included for webpage to enhance/optimize webpage rendering.
  17. Uses standard Link-List widget for main navigation link and standard Labels widget for categories which incorporates pre-installed responsive stylesheets.
  18. Responsive image and video class included.
  19. Clean and readable XML codes and scripts with reference statements for ease of modification.
  20. An plenty more...
Stay tune to more freebies and tutorials including current updates and upgrade with existing theme release.

Main Navigartion Drop Down Mobile Screens


Please browse to theme as we filled with lots of information to use for your Blogger on-line store.

We use most of these features and contents in this blog for our clients and basically we're sharing with you, our readers.

It's our way in showing a BIG thank you!

Category , , , ,
Subscribe to: Posts (Atom)
 

2012 My BlogShop Tool | Designed by: Irsah inDesigns | More Template at Blogger Template Collection