The send order e-mail & Paypal checkout comes pre-installed with BlogrCart template. The customization functions have been grouped together at bottom of theme/template codes to optimize page display & follows current webpage best practices (loading JavaScript/jQuery HTML mark-ups where possible).
Below is the full tutorial to install, edit & customize BlogrCart MNMLIS Blogger theme. This step-by-step guide will show the IMPORTANT parts to edit accordingly to Blogger store owners personal preferences.
Use the quick links below to navigate instantly to the required settings. Use the arrow button to guide you back here.
Important Blogger Theme Update - April 14 2016!To allow the
Theme Plug-ins gadget to register itself with your new theme setup, users are required to activate the
HTML/Javascript gadget with the title
Plugin or
DoNotRemove Cart Plugins or
Plug-ins Cart located at the bottom of theme Layout. Click Edit the said gadget & add some content to save it. View screenshot below for reference.
1.0 Download &Install Template
Download FREE Version here
Download FREEMIUM VERSIONIn this download, you will get below files:-
- Full blogger theme/template codes.
- Auto Post Templates codes
- License & general instructions in readme.txt file
Download PRO version here
Download PRO VERSION [FULL]In this download, you will get below files:-
- Full blogger theme/template codes.
- Pre-made product posts & handler pages.
- Auto Post Templates codes
- License & general instructions in readme.txt file
- Theme icons.
UNZIP & upload the template file using Blogger dashboard >
Template >
Backup/Restore > at
Upload a template from a file on your hard drive. > click the
Choose File button.
Once done, preview your new template.
To allow this theme to display correctly in mobile screens, turn off Blogger default mobile theme by going to Settings, Mobile section, click the Gear button & select No. Show desktop template on mobile devices. , Then click Save.
Turn off Blogger image pop over for best performance by going to Settings > Basic > Turn Off/Don't Show image zoom.
General clean-up
Locked widgets/gadgets may occur when installing new Blogger templates. It is best to replace/remove the "locked" widgets for trouble free installations. Known widgets/gadgets are:-
- Navbar
- Attribution
To remove a "locked" widget/gadget, before installing any new template/theme, at template/theme codes, find the above widget/gadget by using the
Jump to Widget button.
Select the the entire codes that is used for the widgets. An example mark-up codes is as follows:-
<b:widget id='WIDGET_NAME' locked='true' title='WIDGET_TITLE' type='WIDGET_TYPE'>
... Lots of codes ...
</b:widget>
Delete all the codes starting from
<b:widget> and ending with the first trailing occurrence of
</b:widget> . Click
Save Template once done.
2.0 Install Pre-made Pages [PRO Theme]
For BlogrCart MNMLIS PRO users, the template files comes with
license, template file & theme Pages. PRO users can build quickly sample Product Pages including the Send Order page, Success page & Error handling Page. In addition this tutorial is also included for references & future usages.
Upload the file title
BlogrCart-*-PAGES-MASTER-V-1-0.xml at
Settings,
Other &
Import Blog link, find the file in your computer & upload accordingly making sure the
Automatically publish all imported posts and pages is
ticked/selected.
3.0 Install Pages
3.1 Install Success Page
[PRO users can skip this section]This page is used to re-direct users once successful sending in their orders via send order e-mail or after successful transactions at Paypal.
Go to
Pages >
Add a Page and at the
Title field type in
Success & click
Save.
Edit the page body as this page will be the
return page from success orders using the send order form functionality checkout. Click
Publish Page & view this page full URL at your browser bar by clicking the
View link.
An example URL will look like so:-
http://YOUR-BLOG-NAME.blogspot.com/p/success.html
Save this URL using your favorite text editor in your PC.
3.2 Install Error Page
[PRO users can skip this section]This page is used to re-direct users once successful sending in their orders via send order e-mail or after successful transactions at Paypal.
Go to
Pages > click
Add a Page & at the
Title field type in
Error & click
Save.
Edit the page body as this page will be the
error handling page upon users non delivered orders using the send order form functionality checkout. Click
Publish Page & view this page full URL at your browser bar by clicking the
View link. An example URL will look like so:-
http://YOUR-BLOG-NAME.blogspot.com/p/error.html
Save this URL using your favorite text editor in your PC.
4.0 Install Auto Post Template
[PRO users can skip this section.]
[Update: FREEMIUM users has been included the codes below at download files.]
An Advance Auto Product Post Template included in theme download. Use & install.A fully customized auto post template comes pre-included with BlogrCart templates. This is important as most of the shopping cart functionalities & also how the product displays depends on this template.
At
Blogger Dashboard >
Settings >
Post & Comments >
Post Template > click the
Add link to insert the codes below:-
<table border="1" cellpadding="5" class="product-image" rules="all">
<tbody>
<tr>
<td class="thumb_image">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYEWwpjg0mPuf72fyFpP8r15ae23Tk7W-k5GJHfaPQo6ouotKSPJ05_o4zy5ThSLg-G7eQxEasYr-PjghEVK-cL3g7ncpxbIyEhYW2lytFIiuoblWHelQ00BkRE3RpxZ8iFg66Tpf3_4/s1600/GrassGreen_W_B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYEWwpjg0mPuf72fyFpP8r15ae23Tk7W-k5GJHfaPQo6ouotKSPJ05_o4zy5ThSLg-G7eQxEasYr-PjghEVK-cL3g7ncpxbIyEhYW2lytFIiuoblWHelQ00BkRE3RpxZ8iFg66Tpf3_4/s1600/GrassGreen_W_B.jpg" /></a>
</div>
</td>
</tr>
</tbody>
</table>
<table border="1" cellpadding="5" class="product-description" rules="all">
<tbody>
<tr class="label-description">
<td class="item_description">
This is the short description for any product post. Write a short description for the product here in not less than 350 words.
This will create a unique content for your product hence giving the extra boost from search engine results.
Use Blogger "Remove Formatting" functions to remove copied & paste texts alignment, fonts, text colour & text styles.
<br />
<br />
Use table #1 (above) for product Main Image. Insert Image & removing using Blogger editor features.
<br />
Use table #2 (current) for product descriptions & texts.
<br />
Use table #3 (below) to add in supporting images. Please insure that the thumbnail images is set to small.<br />
Use "Jump Break" AFTER table #2 (current) or BEFORE table #3 to prevent Auto Pagination. By default the "Jump Break has been assigned.<br />
<br />
<b>Edit & remove sample texts if not in use.</b><br />
Option size & colour only available on PRO versions. Get 1 now!
</td>
</tr>
</tbody>
</table>
<table border="1" cellpadding="5" class="product-price" rules="all">
<tbody>
<tr><td class="item_price h4">$ 32.00</td></tr>
<tr class="label-add"><td><label>Qty:</label>
<input class="item_quantity form-control" size="1" type="text" value="1" />
<a class="item_add btn btn-default btn-custom" href="javascript:;">Add to Cart</a>
</td>
</tr>
</tbody>
</table>
<!--more--><!-- start tab panel --><br />
<div class="product-detail product-tabs" role="tabpanel">
<ul class="nav nav-tabs text-center" role="tablist">
<li class="active" role="presentation"><a aria-controls="tab-section-0" data-target="#tab-section-0" data-toggle="tab" href="javascript:;" role="tab"><i class="fa fa-image fa-lg fa-fw"></i> <span class="hidden-xs">Image</span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-section-0" role="tabpanel">
<table border="1" cellpadding="5" class="product-thumbnail" rules="all">
<tbody>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiop3kW6SkSGAaE8raZOvqL_2_KvQ8lssn9504U3dPs_e8ILctIFm5CTMqfw16wPSOYG28ApOCFrq7H6lDJc_oT7aWsGQbvZm13sSKdPWzxvJoshC8EpSwVVy4Q4aNKyPh3sZN8ZR9WMQCr/s1600/GrassGreen_M_B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiop3kW6SkSGAaE8raZOvqL_2_KvQ8lssn9504U3dPs_e8ILctIFm5CTMqfw16wPSOYG28ApOCFrq7H6lDJc_oT7aWsGQbvZm13sSKdPWzxvJoshC8EpSwVVy4Q4aNKyPh3sZN8ZR9WMQCr/s200/GrassGreen_M_B.jpg" width="128" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRjI61HEgV75jKdqNl99WSLHbAOnlxqZ-jaCzVZMRWsxY4h_5L6nUeBP26VuMKntPpZbsYgq_zC4RtNdH3GRaZFVQE84szI1dYHTfaLUOS_NyX0xoEHEnuUaA6Gys_cDX3XqZAg46hCYC/s1600/GrassGreen_M_S.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRjI61HEgV75jKdqNl99WSLHbAOnlxqZ-jaCzVZMRWsxY4h_5L6nUeBP26VuMKntPpZbsYgq_zC4RtNdH3GRaZFVQE84szI1dYHTfaLUOS_NyX0xoEHEnuUaA6Gys_cDX3XqZAg46hCYC/s200/GrassGreen_M_S.jpg" width="88" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqWovNvlqIVO-VNSVMkHuWdLAA7DuqKJddlvQ8M6h4ubovhyy9lPkmc3w2Ofw592dCcLP8y2axUuwBtgcHtnoYzANImaFoDa_prAckALVytMyxNRDZ3N4fjUJbE5-LInAieD4QsPc1fJV/s1600/_DarkChocolate__________________M_F.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqWovNvlqIVO-VNSVMkHuWdLAA7DuqKJddlvQ8M6h4ubovhyy9lPkmc3w2Ofw592dCcLP8y2axUuwBtgcHtnoYzANImaFoDa_prAckALVytMyxNRDZ3N4fjUJbE5-LInAieD4QsPc1fJV/s200/_DarkChocolate__________________M_F.jpg" width="139" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJymDpAMGXguzyIP7Mmuk3p31Qt1ue2qw2lYwsDQ9VIGfVSZnD1summ-_5D3CpYKC1_s4QIWvDKYE2fVAiU2oEmSpLeBjEbqsS2hkn_MUOIZj-pGA6bcxkVFYTbuGZeaK2qyiJscCDxQ1/s1600/DarkChocolate_M_B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJymDpAMGXguzyIP7Mmuk3p31Qt1ue2qw2lYwsDQ9VIGfVSZnD1summ-_5D3CpYKC1_s4QIWvDKYE2fVAiU2oEmSpLeBjEbqsS2hkn_MUOIZj-pGA6bcxkVFYTbuGZeaK2qyiJscCDxQ1/s200/DarkChocolate_M_B.jpg" width="124" /></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- end tab panel -->
The auto template comes with a
price field, a
product thumbnail field,
supporting product image field, a
description section to insert relevant contents for your Product Post. Edit the contents before posting your product. Example product images & thumbnail images are included for reference. Please use as your guide.
Note: The tab functionalities, select by colour, select by size is included in PRO template file download. PRO users have the full codes with custom functions used with the advance auto post template.Click
Save Settings.
Preview the example Auto Post Template by clicking the
Pencil icon to start a Post.
5.0 Customizing Shopping Cart Functions
Plug-in Location
All shopping cart detail functions & customization is included in template. Each functions is tagged & detailed out with examples for future editing purposes.
All add on functions & plug-in libraries is located at
HTML99 widget unless otherwise stated. Pre-compressed for optimization & human readable[*].
Below are the general guidelines to customize this theme. Follow these simple editing steps to get your Blogger store running in minutes!
5.2 #2 Currency Settings
This section is to customize your Blogger store shopping cart currency. More than 30 short codes (or pre-sets) have been allocated to customize. The currency pre-sets is as follows:-
* Available pre-set currencies
* Currencies supported by Paypal
* Ref: https://developer.paypal.com/docs/classic/api/currency_codes/
code: "USD" "US Dollar",
code: "AUD", "Australian Dollar",
code: "BRL", "Brazilian Real",
code: "CAD", "Canadian Dollar",
code: "CZK", "Czech Koruna",
code: "DKK", "Danish Krone",
code: "EUR", "Euro",
code: "HKD", "Hong Kong Dollar",
code: "HUF", "Hungarian Forint",
code: "ILS", "Israeli New Sheqel",
code: "JPY", "Japanese Yen",
code: "MYR", "Ringgit Malaysia",
code: "MXN", "Mexican Peso",
code: "NOK", "Norwegian Krone",
code: "NZD", "New Zealand Dollar",
code: "PHP", "Philipine Peso",
code: "PLN", "Polish Zloty",
code: "GBP", "Pound Sterling",
code: "RUB", "Russian Ruble",
code: "SGD", "Singapore Dollar",
code: "SEK", "Swedish Krona",
code: "CHF", "Swiss Franc",
code: "TWD", "Taiwan New Dolar",
code: "THB", "Thai Baht",
code: "TUR", "Turkish Lira",
*
* Currencies not supported by Paypal but included as pre-sets
*
code: "BTC", "Bitcoin",
code: "INR", "India Rupee",
code: "IDR", "Indonesia Rupiah",
code: "NGN", "Nigeria Naira",
code: "VND", "Vietnam Dong",
code: "PKR", "Pakistan Rupee",
Insert a
value='USD' and at
data-code='USD' (example for US Dollar) using the currency pre-sets codes given above. An example for a preset currency settings is as follows:-
<input class='cartCurrency' data-accuracy='' data-after='' data-code='USD' data-decimal='' data-delimiter='' data-name='' data-symbol='' type='hidden' value='USD'/>
Currency not listed?
If however the currency of choice is not listed as pre-sets, or blogger store owners require to activate a custom currency at this section.
Activate the custom currency by replacing
value='USD' to
value='custom' & edit the related
data-* values required. Example for custom currency settings as follows (for Ringgit Malaysia)
<input class='cartCurrency' data-accuracy='2' data-after='false' data-code='MYR' data-decimal='.' data-delimiter=',' data-name='Ringgit Malaysia' data-symbol='RM ' type='hidden' value='custom'/>
A
value='custom' is required to activate the custom currency settings. Edit the
data-* attributes values (
highlighted in cyan) accordingly. The above custom settings is to activate a Ringgit Malaysia currency for this theme.
5.3 #3 Shipping & Tax Rate Settings
This section is used to customize shopping cart
shipping/delivery methods/rates & the tax rate to apply. This section also allows store owners to activate a custom shipping/delivery just like the example used at this demo.
Shipping can be used in
4 different methods for calculation:-
shippingFlatRate - A flat rate shipping, when activated, the integers at data-shippingrate is used as the shipping rate value.shippingQuantityRate - A quantity based shipping for items in cart, when activated data-shippingrate value is used. shippingTotalRate - A fixed total rate in percentage based of the total amount in cart, when activated data-shippingrate will be used as value. shippingCustom - A custom rule based on average weight of items in cart, when activated the data-value* from the select options at checkout summary is used. [PRO]
Read the required settings to customize your
shipping rate &
tax rate values.
Detail explanation for
shippingCustom is covered in theme codes & also at this demo site.
Example setting up a shipping by
total rate settings. Say you require 5% of the total amount in cart to add in as shipping charges. So the value to insert here would be 5/100 =
0.05.
<input class='shippingMethod' data-shippingrate='0.05' data-taxrate='0.06' data-taxshipping='false' type='hidden' value='shippingTotalRate'/>
By keying the
value='shippingTotalRate' activates this shipping method & uses
0.05 (or 5%) from cart totals as the shipping charge.
Same value calculations used for the
tax rate highlighted cyan.
0.06 equals 6% of the totals in cart as the tax charges.
5.4 #4 Paypal Settings
This section is used to checkout at
Paypal. A registered e-mail address at Paypal is required. Users can also use Paypal
sandbox mode to simulate transactions at
Paypal. In addition, the
return Url's at
section 5.5 is used to handle transactions at Paypal.
<input class='paypalSettings' data-email='your_email@some_mail.com' data-sandbox='false' type='hidden' value='true'/>
Highlighted yellow is the
email used at Paypal.
Set the
data-sandbox to
true if you require to make some tests using Paypal's
sandbox feature.
Set the
value='false' to deactivate/remove the Paypal checkout button at checkout section.
5.5 #5 Page Handlers
This section covers the page handlers for
send order email [#6] &
Paypal [#4]. The settings here are self explanatory.
URL's from Section 3.1 & 3.2 is required here.
An example mark-up for editing is as follows:-
<input class='returnUrl' data-error='http://blogstore-name.blogspot.com/p/error.html' data-success='http://blogstore-name.blogspot.com/p/success.html' type='hidden' value='true'/>
Insert the URL's from
Section 3.1 at
highlighted yellow.
Insert the URL from
Section 3.2 at
highlighted cyan.
5.6 #6 Send Order Email Settings
This section covers the send order email settings. The values for editing is self explanatory. Edit to store preferences.
An example settings for send order email is as follows:-
<input class='eStore' data-email='you@yours.com' data-name='MNMLIS Store' type='hidden' value='true'/>
<input class='eStoreBiz' data-address='123, Some Street, Some Town 123456 Some State, SOME COUNTRY.' data-contact1='0123-12345678' data-contact2='0123-12345678' data-contact3='0123-12345678' data-name='MNMLIS Ltd. (MY)' type='hidden' value='true'/>
<input class='eStoreNotes' data-note1='Note in Line 1.' data-note2='More notes in Line 2.' data-note3='Some more notes in Line 3.' data-note4='Last line for notes.' type='hidden' value='true'/>
<input class='eStorePay' data-pay1='Banking Name 1' data-pay1name='Name at Account 1' data-pay1number='1234567890' data-pay2='Banking Name 2' data-pay2name='Name at Account 1' data-pay2number='1234567890' data-pay3='Banking Name 3' data-pay3name='Name at Account 3' data-pay3number='1234567890' type='hidden' value='true'/>
Store name & email to receive the sent orders edit at
highlighted yellow.
Edit blogger store preferences at
highlighted cyan.To add in additional notes per line basis at email body, edit the text
highlighted green.
To add in banking instructions edit at
highlighted orange. Note that
data-pay1='*' data-pay1name='' and
data-pay1number='*' acts in a single line when rendered at email body.
5.7 #14 Custom Shipping Selection [PRO]
This section is covered separately. Detail explanation & tutorial to use the custom shipping can be found here
http://blogrcart-mnmlis.blogspot.com/2015/07/tutorial-custom-shipping-charges-by.html.
Wait! There's More!
Find how to customize the many features pre-installed for BlogrCart MNMLIS theme here:
http://blogrcart-mnmlis.blogspot.com/2015/07/tutorial-customize-blogrcart-mnmlis.htmlLess code editing & publish your products in minutes!
Have a question or having some trouble?
Send it to us using this
theme support page. Our team members would gladly assist you out.
*** Unless otherwise stated in theme/template listings.
