MNMLIS 2.0: Tutorial (MNMLIS Ver. 1.0): Customize BlogrCart MNMLIS Blogger Theme

This is the tutorial & guide to customize BlogrCart MNMLIS add on features. This page covers many of the functionalities offered & pre-installed for both freemium and PRO versions.

This tutorial & guide included customizing the image slider settings, related image slider settings, Instagram feed settings, Form Alerts handlers [PRO], Product Page tabs text [PRO], quick shop popovers [PRO] and more.



Use quick links below to guide you instantly to relevant tutorial required. Use the arrow buttons at any section to return to this quick links section.

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.

Quick Links

Add-on Functions Location Related Product Slider Display Settings Homepage Image Slider Related Products Slider Settings Instagram Feed Form Alert Settings [PRO] Quick Shop Settings [PRO] Cart Text Helpers [PRO] Product Page Info Section [PRO]

1.0 Download &Install Template

If you do not have a copy of BlogrCart MNMLIS Blogger theme, download a copy right here for free.

Download FREE Version here

Download FREEMIUM VERSION

Download PRO version here

Download PRO VERSION [FULL]


UNZIP & upload using Blogger dashboard > Template > Backup/Restore > at Upload a template from a file on your hard drive. > click the Choose File button. Once success, 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.


The shopping cart general settings is covered at this page: http://blogrcart-mnmlis.blogspot.com/2015/07/tutorial-guide-how-to-install-mnmlis.html

2.0 Customizing Theme Add-on Functions

Plug-in Location

All add on library functions is located at HTML99 widget unless otherwise stated. the libraries has been pre-compressed for optimization purposes. All codes are human readable[*] unless otherwise stated.

[*] For PRO theme theme downloads codes are human readable. Any ENCODED or NO-HUMAN READABLE CODES received will be reimbursed immeadiately GUARANTEED!

Detail add-on function & customization is located below.

2.1 #1 Related Product Slider Settings

The settings here is used at your product page, located below your product listings. This section will display the related products that have been published based on the Labels (tagged) that a post was set or assigned for, in Blogger editor.

View the detail data values required to customize your related product touch slider in the template codes where this section is applied to.

<input data-buttontext="&lt;i class=&quot;fa fa-info-circle fa-2x&quot;&gt;&lt;/i&gt;" data-currency="RM" data-currencyafter="false" data-defaultimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUL3mIJ6cSfYd9XnkaXE5zKn8mAxBGJ03Lf5SOf2OhbOKpgMKBHcTOyw6V5WEhG-2GY4_tb4EDUmj-78HJOIcglOF7NhMaBhHc7ew54rgsCil7q1Nax7yJRKQg3Rd_6D83fUKJW52DjiM/s1600/default_image.png" data-imagesize="240" data-maxresults="8" data-productstatus="true" data-relatedtitle="Recommended For You" data-showbutton="true" data-titlelength="40" id="related-product-settings" type="hidden" value="true" />

Replace/edit the data-* values (highlighted yellow) accordingly. Editing details for each data values is well documented in theme codes.

In order for the Related Product Slider to work properly, your Blogger settings must be made Public & your Blog Feed must be set to Full. Find the settings at Blogger Dashboard Settings section.

2.2 #7 Form Alert Settings [PRO]

This section covers the texts displayed when handling the send order submission. Edit the data-* values to store preference.

An example where the editable areas is as follows:-

<input class='sendOrderAlertTxt' data-alerttext='Please check your order form. One or more errors occured.' type='hidden' value=''/>

Edit the values/texts at highlighted yellow.

2.3 #8 Quick Shop Settings [PRO]

A special feature to gain more leads when shopping on line at your Blogger store. The values are self explanatory. Edit to store preferences.

<input class='quickShop' data-buttonarrow='&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;' data-buttontext='View Details' data-charsamount='300' data-errortext='Quick shop is not functioning for this product.' type='hidden' value='custom'/>

Replace/edit the data-* values highlighted yellow to your custom settings.

2.4 #9 Cart Text Helpers [PRO]

Alert text displayed to enhance users shopping experience. The values are self explanatory. Edit to store preferences.

<input class='cartHelperTxt' data-cartaddedtxt='Success. Your selected product has been added to cart.' data-cartemptytxt='Currently your cart is empty.' data-cartshippinglimittxt='Weight exceeds shipping limit. Please continue sending your orders. We will contact you for alternative shipping assistance.' data-cartshippingtxt='Please choose a shipping destination.' data-cartshippingtxtother='Other shipping destination has been selected. We will contact you &amp; for the delivery rate based on your preferences. Please continue sending your orders.' type='hidden' value='custom'/>

Replace/edit the data-* values highlighted yellow to your custom settings.

Editing here uses text only. Line breaks

2.5 #10 Product Page Info Section [PRO]

A universal info section located below product listing pages (excluding Blog typed pages). Works great to included additional universal data & information for products. This section is used to edit the tab text displayed. The values are self explanatory. Edit to store preferences.

<input class='tabSectionSettings' data-tabsectioncomments='Reviews' data-tabsectioninfo='Informations' type='hidden' value='custom'/>

Replace/edit the text to display at tab for Informations at highlighted cyan & text to display at tab Reviews at highlighted yellow.

2.6 #11 Homepage Image Touch/Swipe Slider

Adding or uploading an image is easy using the default Blogger Image widget/gadget. Include image, caption & button text using the Image widget/gadget at Blogger Layout. Click edit to insert your images or to edit text to display.

This section is to customize the responsive image slider available settings. The values are self explanatory. Edit to store preferences. Example for the image slider transition settings is as follows.

<input class='imgSlider' data-autoplayspeed='4000' data-speed='400' type='hidden' value=''/>

Set the image slider transition speed in milliseconds at the highlighted areas.

2.6.1 Customizing & Adding More Slider Images, Titles & Call to Action Button

To include an image for the homepage slider, go to Blogger Layout & find Slider-Section and click Edit at the Image Gadget required for the slider image customization (highlighted in box cyan below). The details editing for an Image Gadget would be as follows:-

1. Title - The text to display as the slider image title.
2. Caption - The text displayed as a Call to Action button for this image slider.
3. Link - the URL to link your Caption (button) at image slider.
4. Image - Upload an image using the functions provided by the image gadget. Leave the checkbox empty. Best image size 1200px v 900px at 4:3 image aspect ratio below 150kb in image files size.
5. If you require to remove an image here, click the Remove link and upload another image of choice.
6. Click Save.

Continue editing the pre-installed Image Widget/Gadget (5 nos). When done, click Save Arrangements & view your Blogger theme slider section changes.

Users could also add in more slider images just by clicking Add a Gadget link. Then select another Image Gadget & rearrange the images accordingly by drag & drop the Image Gadget within the Slider-Section.

More images means more bytes to render your homepage. Customize accordingly.

2.7 #12 Related Product Touch/Swipe Slider

Automated on every product page (including blog article pages). This section in template is to customize the slider available settings. The values are self explanatory. Edit to store preferences.

<input class='imgRelated' data-autoplayspeed='4000' data-slidestoscroll='1' data-slidestoshow='4' data-speed='400' type='hidden'/>

Set the image slider transition speed in milliseconds at highlighted yellow value. Set the amount of image to display at highlighted cyan value. Set the amount of image to scroll at highlighted green.

In order for the Related Product Slider to work properly, your Blog settings must be set to Public & your Blog Feed must be set to Full. Find it at your Blogger Dashboard Settings section.

2.8 #13 Instagram Feed Settings

Display store current Instagram hashtag of choice based on various arrangements. For instance, most-popular, recent, most-liked etc. This section in template is to customize the Instagram Feed available settings. The values are self explanatory. Edit to store preferences.

Here is an example Instagram Feed preset settings at template.

<input class='igSettings' data-clientid='dd406b0991a94edb98ed8a795676532e' data-get='tagged' data-limit='21' data-resolution='thumbnail' data-sortby='random' data-tagname='blogshop' type='hidden'/>

For this above, the tagname (or hashtag name) blogshop , render 21 images from Instagram at random display.

Wait! There's More!

Find more easy customization features using Blogger Advance Template to change Logo text, background colors, font styles, border colors available for this theme. Also add in more widgets where the template section can be applied. Less code editing & publish your products in no time.

Find how to customize theme background, fonts, texts easily at this tutorial page: http://blogrcart-mnmlis.blogspot.com/2015/07/customize-bacgrounds-fonts-using.html

Have a question or having some trouble?

Send it to us using this theme support page here. Our team members would gladly assist you out.