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
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.
Quick Links
Download &Install Template Install Pre-Made Pages [PRO] Install Pages Install Auto Post TemplateCustomizing Shopping Cart/Theme Functions Currency Settings Shipping & Tax Rate Settings Paypal Settings Send Order Email Settings Custom Shipping Selection [PRO]
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 image pop over for best performance by going to
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 withlicense, 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.htmlSave 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/AVvXsEjmmAVoD5bYE2_LA-EK8BKBBqmWbXhHQH1S9eICT0yIPkjCeVWoceHL2M4CjBr7SiYiPO4GeyiT2FRD_BCy8pKaXIx3N6A4bdF8bRq-iluqvFB0zzppUXsi1XGqE_fNLEXsjNqtNQWbbrw/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/AVvXsEjmmAVoD5bYE2_LA-EK8BKBBqmWbXhHQH1S9eICT0yIPkjCeVWoceHL2M4CjBr7SiYiPO4GeyiT2FRD_BCy8pKaXIx3N6A4bdF8bRq-iluqvFB0zzppUXsi1XGqE_fNLEXsjNqtNQWbbrw/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/AVvXsEjQOLZNR_w-DZVyrBeGeEjO5j3LHJR2EmGkF2Jpo6-QHBZtiZL_D1u2GhQe2dlIWrPWjzdNTnw_j5XSjiAYtgLiLc_TU38FZqvxq7SfUVjtcvROfvFZdf-ioGJzEldwzINxeorc-Yac0asK/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/AVvXsEjQOLZNR_w-DZVyrBeGeEjO5j3LHJR2EmGkF2Jpo6-QHBZtiZL_D1u2GhQe2dlIWrPWjzdNTnw_j5XSjiAYtgLiLc_TU38FZqvxq7SfUVjtcvROfvFZdf-ioGJzEldwzINxeorc-Yac0asK/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/AVvXsEh2CupIz3Q3cY7FkPOSNPKrQABSGifwzerXkbHTd-ZQONo8SBYZVM7v2X98ddr12inGIU4nT2c8T3THorEFP_ye6HWWNdCQGM0-O2HglsfihEd8PWgnkfif5_St5HlO5xugCvcAaZRJSgK5/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/AVvXsEh2CupIz3Q3cY7FkPOSNPKrQABSGifwzerXkbHTd-ZQONo8SBYZVM7v2X98ddr12inGIU4nT2c8T3THorEFP_ye6HWWNdCQGM0-O2HglsfihEd8PWgnkfif5_St5HlO5xugCvcAaZRJSgK5/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/AVvXsEgL_eWsuZ9JmA98A53dx9eGClG9br9lSEapQ-TSLfbu3Vl350gQlQF3AofgfpCGNJI5tISXZhB1yBDh9sV9OsIZO1iP_8OhjoKW6UmjDKKwPj0s3j4sszsKECzzSbR3Z8uEa8zApnTVJzJ9/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/AVvXsEgL_eWsuZ9JmA98A53dx9eGClG9br9lSEapQ-TSLfbu3Vl350gQlQF3AofgfpCGNJI5tISXZhB1yBDh9sV9OsIZO1iP_8OhjoKW6UmjDKKwPj0s3j4sszsKECzzSbR3Z8uEa8zApnTVJzJ9/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/AVvXsEh48BnHN_ZrAD8PaCyESdM9rqJsk6xHOdGoSHEwz7VzOMZA096Rnk-0Hq-zo8592GxFWy4_-XkzmPC_9ARS41H0E63cDZl2nhY-GW-DyX2zOws4EeIqduKNKnX81guOZMSghW7Pfsb2z0Hb/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/AVvXsEh48BnHN_ZrAD8PaCyESdM9rqJsk6xHOdGoSHEwz7VzOMZA096Rnk-0Hq-zo8592GxFWy4_-XkzmPC_9ARS41H0E63cDZl2nhY-GW-DyX2zOws4EeIqduKNKnX81guOZMSghW7Pfsb2z0Hb/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 cartshipping/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 atdata-shippingrateis used as the shipping rate value.shippingQuantityRate- A quantity based shipping for items in cart, when activateddata-shippingratevalue is used.shippingTotalRate- A fixed total rate in percentage based of the total amount in cart, when activateddata-shippingratewill be used as value.shippingCustom- A custom rule based on average weight of items in cart, when activated thedata-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 atPaypal. 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 forsend 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.
Currently this demo is using Intense Debate commenting system. By default Blogger comment system is activated.