BlogrStore Responsive Template Tutorial Installation - Official
By
Irsah inDesigns
.18/06/2013
Update Dec 2013
For best results in installation, install BlogrStore Responsive V 1.0 template from a NEW SETUP BLOG with "Simple Blogger Template" selected as default template installed.
Update 2013
New update available for shopping cart auto e-mail invoice Blogger e-commerce template. Find details and additional codes below. More customization and making email invoice painless with shopping cart auto sent invoice and purchase order checkout plugin.
Published BlogrStore Responsive Template
Welcome to BlogrStore Responsive Blogger template installation and guide page. This page is dedicated to help you install this e-commecre featured blog template with detail tutorial and code snippet on various custom plug-ins and widgets that comes with the responsive blog store template.
We recently updated this tutorial page to include more tips and guides to install this blogger template which also includes a step-by-step setting up your Blog Shop in 9 minutes! We added more installation images to help users out and preparing their blog store template customization accordingly.
BlogrStore Responsive E-commerce Shopping Cart Template
View DEMO Here
Additional Blogger Store Informations:-
Template Name : BlogrStore Responsive
Version: 1.0
Released: June 2013
Author / Designer: Copyright 2013 Irsah Imihar (http://www.irsah.com/about#contact)
Publisher: Copyight 2013 Irsah inDesigns (http://www.irsah.com/about#contact)
License: Creative Commons 3.0 - Free for personal and commercial use.
Updates / Change Log: Available in template
NEW! BlogrStore Responsive Installation Video - July 2013
Installation, Tutorial and Guide Install BlogrStore Responsive Template
Download BlogrStore Responsive template here hosted on Mediafire (111Kb)
While signed in your Blogger account > go to Template > Backup/Restore > (Download current template if required) > Choose File > Select the template file in your PC. > Upload the file.
Now go to Layout and inspect your widget. A sample widget layout for this theme will look like so:-
Example BlogrStore Responsive Automated Product Post
Setting up Automated Product Page Tables
Setting > Post and Comments > Post Template and copy / paste codes below in the form body:-
Add Your Product Name Goes Here 1
|
| RM200.50 |
| Add to Cart
|
| Currently item(s) in cart. |
| Description |
| Insert your product description here. |
| Delivery |
| Insert delivery details here. |
More Images:-
Click Save Settings.
To check if proper installation > go to Posts > Add a new post > A sample product page will be displayed on your new blog post editor. Edit to desire.
product post display customization
Example BlogrStore Widgets Layout
Create Success Submission Send Order Page
In Blogger > Pages > Add Page > name your new page with " Success " (without quotes) > Click HTML button > now copy and paste below codes:-
Success Submission!
An automated e-mail notification is sent to you for your reference. Please check your e-mail inbox for purchase order details and banking transaction options.
Thank you again for your purchase and support!.
Our Malaysian banking and payment merchant partners:
Click Publish Page and Click View. Now copy the URL and save it in your favourite text editor. This URL is needed for your custom e-mail data.
Create Error Submission Sent Order Page
In Blogger > Pages > Add Page > name your new page with " Error " (without quotes) > Click HTML button > now copy and paste below codes:-
We're Sorry.
There was a slight problem sending your orders.
Possible Cause:
- Invalid e-mail address
- Invalid telephone number. (by telco provider)
- Invalid postcode by address.
- Did not specify your product size.
Solution
- You can click the checkout link to re-submit your orders.
- You do not have to re-select your product as we have kept your choices/selection in our system.
- Fill in the simple form with valid inputs and your order submission would be successful.
Click Publish Page and Click View. Now copy the URL and save it in your favourite text editor. This URL is needed for your custom e-mail data.
Install Custom Checkout Slider Display
In Layout > Find Checkout widget > edit > Add codes below in the HTML/Javascript widget body:-
Currently in your Cart
How To Checkout
- Review your selected product.
- Fill in the form with your particular(s) to send in orders and for quick delivery. All submission are kept confidential with accordance to our privacy policy.
- Send your orders.
- An automated e-mail will be sent to you for your reference.
- You can find your order details and payment method(s) which you can easily select according to your preference.
Our Merchant Payment Partners
- Maybank2u Pay (Malaysia - Online secured payment gateway)
- PAYPAL
- Google Wallet
- RHB Bank (Malaysia - Bank Transfers)
- AmBank (Malaysia - Bank Transfers)
- Bank Simpanan Nasional (Malaysia - Bank Transfers)
Our Delivery Partners
- PosLaju - Malaysia's most trusted National Currier Service.
Now click Save > Save Arrangements.
Click View Blog to review your changes. Customize to desire in between the
[codes]
Please do not alter the checkout form due to integration with simpleCart plug-in.
Checkout shopping cart displya add to cart
Example Sliding Checkout Display with Add to Cart
Adding Featured Product to Display at Homepage by Label
Go to Layout > find Featured Product widget > Edit > copy below codes to widget body:-
To customize label you want to display > Edit at Insert-Your-Label-Here. Please make sure of capitixzations.
To customize the amount of posts to be displayed > Edit at max-results=2. Change the integer to the amount of post you require.
Adding Offer Products to Display at Homepage by Label
Go to Layout > find Offer Product widget > Edit > copy below codes to widget body:-
To customize label you want to display > Edit at Insert-Your-Label-Here. Please make sure of capitixzation.
To customize the amount of posts to be displayed > Edit at max-results=2. Change the integer to the amount of post you require.
Custom Responsive Background Image for Homepage
In Template > Edit HTML > find these codes in between Line 1639:-
To customize your background image for Homepage > Edit / insert your image link at include-your-image-URL-here.
Custom Responsive Background Image for Other Pages
In Template > Edit HTML > find these codes in between Line 1645:-
To customize your background image for other pages > Edit / insert your image link at include-your-image-URL-here.
Editing Your Auto E-mail Invoice
We provided necessary area to customize your automated invoice e-mail body. To find and customize, go to Template > Backup if required > Edit HTML > scroll down below template and find this pieces of codes:-
// Edit your Blog Shop Preferences
data.shop_name = "Your Blog Store Name";
data.shop_url = "http://blog-store-url.blogspot.com/";
data.shop_thankyou = "http://blog-store-url.blogspot.com/p/success.html";
data.shop_sendFail = "http://blog-store-url.blogspot.com/p/error.html";
data.shop_email = "your-blog-store-email@gmail.com";
data.shop_currency = "RM";
// Edit your Business Preferences
data.shop_bizname = "Your Business name";
data.shop_bizaddress = "Your Business Address";
data.shop_bizphone1 = "017-361 8321";
data.shop_bizphone2 = "013-361 8321";
data.shop_bizphone3 = "016-361 8321";
// Edit your Banking Preferences
data.bank1 = "MYBANK";
data.bank1_acc_no = "1234 1234 1111 22";
data.bank1_acc_name = "John Jane";
data.bank2 = "Bank Commerce";
data.bank2_acc_no = "1234 1234 1111 22";
data.bank2_acc_name = "Jane Doe";
data.bank3 = "Central Bank";
data.bank3_acc_no = "1234 1234 1111 22";
data.bank3_acc_name = "John Doe";
// Additional notes to include in automated e-mail
data.note1 = "Our PAYPAL secured gateway at http://www.your_PAYPAL_secured_link.com";
data.note_detail1 = "Our Google Wallet secured payment gateway at http://www.your_GOOGLEWallet_secured_link.com";
data.note2 = "Altenative Our merchant MYBANK2PAY at:";
data.note_detail2 = "http://www.your_MYBANK2PAY_secured_payment_link.com";
});
We have included indicators for you to customize to your preferences. Please edit in between the " (quotes) section. Any changes in the "(quotes) section will be displayed in your custom automated e-mail invoice to your users.
Displaying Your Blogger Store Currency
In Template > Edit HTML > find these codes in between Line 1514 and 1529:-
By default, the plug-in uses USD as currency. Delete these codes for the default setting.
Find more setting at simpleCart documentation page here. To customize include relevant data in between "(quotes) as shown above.
Customize Featured Products Label / Title at Homepage
In Template > Edit HTML > find these codes in between Line 3263:-
$(".featured").append("
Featured of the Day →
While Stock Last");
Within the ...[codes]... tag change the wordings / sentence to your preferennce.
Customize Offer Products Label / Title at Homepage
In Template > Edit HTML > find these codes in between Line 3265:-
$(".offers").append("Discounts Up To 20% →
While Stock Last");
Within the ...[codes]... tag change the wordings / sentence to your preference.
In normal cases, with limited XML / HTML / CSS knowledge, installing this Blogger store template would take around 15 minutes. But recently we challenged our users and now installing this template with shopping cart can now be done in 9 minutes! Just like in our video full installation guide tutorial here at http://youtu.be/uZsjSlAvoRI .
If you have trouble and need more customizations including automated select by size options, automated delivery by area charge variants, integrate PAYPAL and auto e-mail invoice feature, more product image display, Blogger pagination issues, sell like nuts with more traffic/visits to your blog store, rank higher in search result pages, we're available for hire, contact us here for more info .
AUGUST 2013 UPDATE
At the bottom of BlogrStore Responsive free e-commerce template codes, find these line of code like below:-
Now change to the UPDATED CODES as below:-
0 comments:
Post a Comment