Help/Support
Like
Contact
Migrating to BlogrCart Mukabuku Elite Version 2.0 Successful!

Quicker, more customizations included, NO PROGRAMMING REQUIRED FOR SETUP!
Follow us for more new theme releases

Buy now
Instant free download!

Buy now
Download with a cause!

Buy now
Secured & Safe

Blogger Blogspot Template Downloads
Ads Placement

Free template blogger make online shop download blog theme for online store.
Template online shop blogspot gratis setup free ecommerce blogger templates.
Shopping cart template for blogspot install shopping online store blogger template easy!
On-line shopping fashion blog & Blogger store download in 1 template.
Blogger shopping cart template shopping online makes a Blogger shop template free blogger templates & so cute.

Theme Documentation Version 2.0

Thank you for choosing BlogrCart MUKABUKU ELITE Ver.2.0 responsive Blogger / Blogspot e-commerce shopping cart theme. Find all about this theme, customization & tips to enhance your business or personal web/blog store.

If you are using BlogrCart PLUS Version 1.4 or below, please use the Version 1 theme tutorial for installation available at main navigation.

NEW! Provided with this theme download, your blog store will have sample contents to work with. Most of template details ie. slider/featured product images, header images, sectional texts, sectional titles is not available since that these contents are linked to your Blog widgets used. You can easily add in using the assigned widgets provided - no programming knowledge required!

Find below all the necessary details to add & customize your BlogrCart theme. Click panel title to expand & view its contents.

Update: If however you could not find Store Configuration & Theme Configuration helper widget pre-installed with theme at your dashboard, it is most likely hidden away due to Blogger layout styles conflict. To display these widget:-

  • Go to Template HTML
  • Scroll to bottom & you will reach below:-

<b:section class='plug-ins sr-only hidden' id='plug-ins' name='Settings &amp; Config (Activate Plug-ins Widget Below)' showaddelement='no'>

  • Remove class by name "hidden" and Save Template.
  • Now at dashboard layout the widget helpers will display for you to custom set your settings.

Doc Ver: 2.1 - Last Updated 19th July 2016

1.0 Theme Installation


Walk through & detail instructions how to upload & install a Blogger template & uploading sample contents.

Important! Upgrading from Version 1.++ to Version 2.++ theme will override your current theme setup (include widgets). We highly recommend you create a development blog & install the new version there.

Theme compatibility means, how the product pages & shopping cart plugin are compatible with one version to the other. Blogger platform does not store or keep your current template setups. Download your current template to your PC before customizing your theme.

Find template files in your computer & extract the files to view the template folders.

Copy & Paste Method (Preferred)

The most easiest ( & preferred ) way is to open the extracted downloaded template file > find .../Upload/Template folder > find template file & Open its content using a basic text editor > Select All (keyboard Ctrl+A for Windows) the file contents > Copy (mouse right click + Copy) the file contents.

Go to your Blogger Dashboard > Template > click Template HTML > Select All the existing template codes > now PASTE the COPIED template contents.

Click Save Template & preview.

Uploading Template Files (Not recommended)

UNZIP/EXTRACT & upload using Blogger dashboard > Template > Backup/Restore > at Upload a template from a file on your hard drive. > click Choose File button. Preview your new template.



Upload Sample Pages (IMPORTANT)

Upload using Blogger dashboard > Settings > Others > at Import and Backup > click the Upload Content button > tick the Captcha box > tick the Automatically publish all imported posts and pages options & click the Upload from Computer button.

A window pop over will appear to search for template file. Locate your extracted download template file inside the Upload folder with the ...PAGES.xml file name title. Choose this file to begin your sample pages upload.

You can remove/delete the sample pages later once you are 100% sure the template is working as you require too. This really helps you speed up you product listing!



Below are example pages pre-built upon this Pages install. You can remove the example product posts when you have tested out all the functionalities or custom setups.


Example pages pre-built for checkout page, seuccess page anr error handling page.


Other important Blogger theme settings you might/have to consider.


Allow Blog Feed to Full

Make sure to your blog settings is set to Allow Blog Feed to Full in order to retrieve your blog posts RSS feed. This feed is required to allow this theme to retrieve your blog data for its enhancements.

Make Blog Public

Making the Blog public assures your blog can access its data feed at Google/Blogger servers which is used by theme plug-ins. If setting to Private, access to your blog feed will be disabled & certain theme plug-in will not be running as expected.



Turn off Blogger Mobile 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.

This theme already comes equipped with mobile view styling which also allows the template enhanced functions to work properly.


Turn Off Blogger Image Pop Up

Turn off Blogger image pop over for best performance by going to Settings > Basic > Turn Off/Don't Show image zoom.


Add a Meta Description

In Settings > Search Preferences > Meta Tags > write a short description describing your blogger store in not more than 160 word counts.


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. The known widgets/gadgets are:-

  • Navbar
  • Attribution

These default widgets can be removed from Dashboard > Layout > find the named widgets > click Edit > click Remove button.

or

To remove a "locked" widget/gadget, before installing any new template/theme, at Template HTML, 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 by selecting it from the start of <b:widget> & ending with the first trailing occurrence of </b:widget> . Click Save Template once done.



Note: By default, BlogrCart themes already assigned a display:none styling to these widgets to make sure it does not display (or used) at your blog pages.
To help speed up your product listings, when editing your product posts, an Auto Template Helper is required to retrieve data used for the shopping cart.

Copy the mark-up in your download template files inside the .../Helper folder. Then go to your Blogger Dashboard > click Settings > go to Post & Comments > & at Post Template click Add link.

Paste the copied auto post template helper mark-up inside the textarea field provided, then click Save Settings

.

Creating a Product Post Page


Once completed, each time you create a product post, this helper will automatically load to your blog editor. Edit/change the images, texts & data to personalize each product post listing. If the data is not used keep the field empty. More information is found at the automated auto post template body for your reference.

IMPORTANT!

  • Use line breaks to separate your post data from images to allow maximum posts to display on index/gallery pages.
  • Upload all images larger than 600px in width to allow a crisp & clear image display at your page. Always set the first image with the "Original Size" option.


Users can also attached multiple Labels to a posts for categorization purposes.

To allow Theme Plug-ins gadget to register itself with your new Blogger template install, 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 Dashboard > Layout.

Click Edit the assigned gadget & add some content to save it. This content will not display & only required for this widget to register with your Blog. View screenshot below for reference.



2.0 Theme Layout


Edit text or upload images to personalize your Blogger store theme using Blogger default widgets pre-installed with theme - add, remove, re-arrange Blogger widgets here to your own preferences.

To use the Facebook integrations with this themes requires users to create a Facebook App ID at Facebook Developer web page. Use this tutorial to easily create your unique Facebook App ID to use with this theme http://blog.irsah.com/2014/09/create-new-facebook-app-id-get-fb-apps.html .


This Blogrcart theme comes with a custom dashboard with loads of indicators to help you to customize your Blogger store. Pre-assigned widgets has been included in order to speed up your blog store display & customization without editing a single code!


Adding text and key-specific text to display a navigation link or create a dropdown link automatically using Blogger LinkList gadget. Below are the conditions:-

  • Adding a text in New Site Name field will display as top level navigation link.
  • Add a text before or after a text link displays as a top level navigational link
  • Add an underscore "_" (with no spaces) following text to start create a dropdown link.
  • An underscored "_" (with no spaces) following text before/after an underscored link text will continue to group & display as a dropdown link.
  • Add a text without underscore after an underscored text link will stop grouping dropdown links & displays as a top level navigational link.

Supports unlimited links. Usage of the up & down arrows to re-arrange/organize links.

Displayed collapsed on smaller screen sizes with button navigation for optimal user experience on mobile / smaller screen sizes.

Heads Up!: A common default browser behavior will occur when updating link placement during clicking the arrow link. To prevent this behavior press F12 & add in javascript handlers at browser console log to stop this "jumping" browser behavior.

Or while clicking the up or down arrow, press Alt at your keyboard (Windows) simultaneously. This will trigger a Save to PC pop over & continue to click the Cancel button.


Easy News One magazine new Blogger template style

The end results will look like so:-


Edit/update theme text or upload an image as store logo to display at template headers.

Blog Store Name

Select preferred fonts & colors using Blogger Template Designer features to change your template logo. This store name can also be updated using the Blogger Header widget located at your dashboard > Layout.

Below is an example how to use  Blogger Template Designer features from your dashbaord.


Blog Store Description

Add text at description field to display below the Blog store title.

Upload Image as Header Logo

To upload an image click Upload Image link > find your image & select image to upload from your PC > choose Instead of Title & Description > click Save to save your custom setup. Click Preview Template or refresh your browser window to view your changes.

Upload image best size is at 4:3 (1200px x 900px) or 16:9 (1200px x 575px) image ratio to allow the image to expand the width of the header container. The uploaded image will also be set as the Blog store logo which is cropped & centered to fit the squared container. Please consider to upload image at below 100kb in file size for best page rendering/display.

Easy News One magazine new 2016 Blogger template
4 Blogger Labels widget have been assigned to display a collection of Labels attached to your blog/product posts.


Use diagram/screenshot below to customize each Blogger Labels widget to display/group the links required for your theme.


Pre installed section to easily include custom text, advertisement banners, promotion updates using Blogger HTML/Javascript gadget.

Text entered here will display throughout the entire blog. If no text or leaving it empty will not allow the gadget to be saved - a default Blogger gadget behavior. To save an empty ads section HTML/Javascript gadget remove gadget title & add <!-- --> inside the gadget body > click Save. This section will not display at your blog.

To create a link able banner add, add a link with an uploaded image URL to display an image or insert your ads HTML markup to display as your ads. Below is an example:-

<a href="http://url-to-link-to.com">
 <img src="http://url-to-an-uploaded-image.jpg" alt="Some image title" />
</a>

Click Save to save or update you custom edits.

Heads Up!: This section is scroll able on smaller screen sizes to accommodate banners wide appearance.


Use Blogger Blog gadget settings to customize various Blogger post functionalities which includes:-

  • The amount of posts to show at home page or index pages.
  • The post page link text aka "Read More..."

Most of Blogger Blog1 widget functions are use able, as activated on any default Blogger Template made available from the dashboard.

News One easy magazine style new 2016 Blogger template

Sidebar is displayed on the right side of static page. By default the sidebar is hidden to allow a larger content display but users can display and arrange the sidebar location by using the parameter provided.

Add/ remove/ arrange any Blogger default widgets accordingly. Some default Blogger widgets custom styles already have been pre assigned. Update the sidebar stylings provided at Blogger Template Designer.


Display Sidebar on Index and Product Pages

To easily display sidebar on all pages, go to Theme Configuration widget and add below:-

  • At New Site Name field add parameter  display_sidebar .
  • At New Site URL field add value true .
  • Click Save Link.
  • Click Save to save your setup.

By doing so, this theme will attempt to display the sidebar on your theme.


Display Sidebar on the Left of Page

To easily display sidebar on all pages at the left of theme layout, go to Theme Configuration widget & add below:-

  • At New Site Name field add parameter  display_sidebar .
  • At New Site URL field add value sidebar_left .
  • Click Save Link.
  • Click Save to save your setup.

Some Examples to display icons using LinkList widget at sidebar.


Display a social media icon: Facebook

  • At New Site Name field add <i class="fa fa-facebook fa-lg"></i>
  • At New Site Name field add the full URL to your profile page.
  • Click Save Link.


Display a social media icon: Facebook (squared)

  • At New Site Name field add <i class="fa fa-facebook-square fa-lg"></i>
  • At New Site Name field add the full URL to your profile page.
  • Click Save Link.

Display a social media icon: Facebook (3x larger than the font size)


  • At New Site Name field add <i class="fa fa-facebook fa-3x"></i>
  • At New Site Name field add the full URL to your profile page.
  • Click Save Link.

Display a social media icon: Facebook (squared & 3x larger than the font size)


  • At New Site Name field add <i class="fa fa-facebook-squared fa-3x"></i>
  • At New Site Name field add the full URL to your profile page.
  • Click Save Link.

Select or choose over 500+ icons by using the icons "tag" names & mark-up provided above provide by  the great people from Font Awesome http://fontawesome.io/icons/

Text to display at blog/product posts at Tabs section. Any text or HTML chars entered here will be displayed at this section.

To insert text/HTML find the assigned widget and click Edit > enter your text or HTML.



The result when added text at this widget will display as below at blog/product pages:-


Text to display at blog/product posts at Tabs section. Any text or HTML chars entered here will be displayed at this section.

To insert text/HTML find the assigned widget and click Edit > enter your text or HTML.



The results when added text at this widget will display as below at blog/product pages:-


This section only displays at homepage. Using HTML/Javascript widget add text or HTML inside the widget body to display at this section. Customize background & text colors using Blogger Template Designer feature.


This section displays at the top of footer with ContactForm and LinkList widget (for Instagram feed) have been assigned to its respective section.

Footer Top Left

This section is automated & pre-built for you by the assigned ContactForm widget.

Footer Top Right

This section uses LinkList widget to assign & activate Instagram feed display.

To activate this section, at the assign widget:-

  • At New Site Name field add parameter  instagram .
  • At New Site URL field add value true .
  • Click Save Link.
  • Click Save to save your setup.

By doing so the theme activate the location for the Instagram display. Now user have to enter all the Instagram required credentials in order to retrieve the posts from Instagram.

Adding Instagram credentials.


If you have not created an Instagram Developer account, please do so. Here is the full tutorial link to retrieve the required Instagram credentials to allow to retrieve your Instagram post images http://blogrcart-mukabuku-elite.blogspot.my/p/register-and-create-instagram-client.html .

After having all the required credentials from the tutorial above, now you can retrieve & display your Instagram posts. To do that is made easy. Go to Theme Configuration widget and click Edit.

  • At New Site Name field add parameter insta_user_id
  • At New Site URL field add value [your_instagram_user_id]
  • Click Save Link.
  • At New Site Name field add parameter insta_client_id .
  • At New Site URL field add value [your_instagram_client_id]
  • Click Save Link.
  • At New Site Name field add parameter insta_access_token .
  • At New Site URL field add value [your_instagram_access_token]
  • Click Save Link.
  • Click Save to save your setup.


After doing so, automatically this theme will attempt to retrieve the Instagram posts using the credentials set.

To further customize this plugin, use below parameters at Theme Configuration widget, to override this theme plugin settings.

Custom Gadget LocationTheme Configuration Gadget
Reference in Template HTML<b:includable id='js-instagram'> ... </b:includable>
Parameter
insta_*
Values or
Type of Value
DescriptionDefault
insta_access_tokentext/ stringThe access token retreived at Instafeed(js) after successful authetication by Instagram.

View tutorial to get your unique accessToken.

insta_user_idnumber/integerA unique user id retrieved at Instafeed(js) after successful authentication by Instagram.

View tutorial to get your unique userId.

insta_client_idstringA registered client Id provided by Instagram using a registered Instagram Developer API ID.

Register, create & get your Instagram API ID at Instagram's website.
Blogrcart Public Instagram Id
insta_getpre-definedThe parameter used to retrieve images from Instagram.

tagged
Images with a specific tag. Use insta_tagName to specify the tag - not available in Sandbox mode.

locationId
Images from a location. Use insta_locationId to specify the location - not available in Sandbox mode.

popular
Images from a popular page - not available in Sandbox mode.

user
Images with a user. Use userId parameter to include user's Instagrmam unique user ID

[no changes required]
user
insta_tag_nametext/
string/
number/
integer
The tag (or hashtag) used to retrieve images at Instagram.

Heads Up!: Leave "#" when inserting the tag value.

[not available on sandbox mode]
blogshop
insta_sort_bynumber/ integerHow images displayed from Instagram.

none
As they come from Instagram.

most-recent (default)
Newest to oldest.

least-recent
Oldest to newest.

most-liked
Highest # of likes to lowest.

least-liked
Lowest # likes to highest.

most-commented
Highest # of comments to lowest.

least-commented
Lowest # of comments to highest.

random
Random order.
most-recent
insta_displaynumber/ integerThe amount of images to display.8
insta_resolution thumbnail
low_resolution
standard_resolution
thumbnail
Displays images at 128px X 128px images size.

low_resolution
Displays images at 256px X 256px images size.

standard_resolution
Displays images at 512px X 512px images size.
standard_resoluton
insta_templateHTMLA custom templating in HTML to display Instagram images retrieved.

Important! All text entered here when using a single or double quotes must be escaped using backslash ( \ ).

[Changes not required]

    insta_image_widthstringThe image size in percentage of its parent container width.25%
    4 columns have been assigned to display at theme footer with similar column sizes. For optimal footer gadget content display, the columns spreads in multiple widths on smaller screen sizes.

    Add/ remove/ arrange any Blogger default widgets here accordingly. Some default Blogger widgets custom styles already has been pre assigned.

    Upon initial theme install, some sample Blogger widgets have been assigned. You can activate these widgets by clicking the Edit link & Save it. You can add in your own widgets by clicking the Add a Gadget link & select your required widget.


    Some Examples to display icons using LinkList widget.


    Display a social media icon: Facebook

    • At New Site Name field add <i class="fa fa-facebook fa-lg"></i>
    • At New Site Name field add the full URL to your profile page.
    • Click Save Link.


    Display a social media icon: Facebook (squared)

    • At New Site Name field add <i class="fa fa-facebook-square fa-lg"></i>
    • At New Site Name field add the full URL to your profile page.
    • Click Save Link.

    Display a social media icon: Facebook (3x larger than the font size)


    • At New Site Name field add <i class="fa fa-facebook fa-3x"></i>
    • At New Site Name field add the full URL to your profile page.
    • Click Save Link.

    Display a social media icon: Facebook (squared & 3x larger than the font size)


    • At New Site Name field add <i class="fa fa-facebook-squared fa-3x"></i>
    • At New Site Name field add the full URL to your profile page.
    • Click Save Link.

    Select or choose over 500+ icons by using the icons "tag" names & mark-up provided above provide by  the great people from Font Awesome http://fontawesome.io/icons/



    More theme Features

    This theme also comes with some useful helpers to use. Use parameters below at its designated configuration widget to override theme settings.

    ParameterValues or
    Type of Value
    DescriptionDefault

    Customizing product display on index/gallery pages.
    Used at Theme Configuration widget.

    index_display_column

    number/ integerThe amount of columns to display at store index/gallery pages.

    Avail setting 1, 2, , 3, 4, 6
    4
    index_display_cart_buttontrueEnables or disables the add to cart button on index/gallery pages.true

    Customizing subscribe by email form.
    Used at Theme Configuration widget.

    sub_button_texttextText displayed at subscribe by email form button.I want it!
    sub_placeholder_texttextText displayed at subscribe by email input field placeholder.Your email here...

    Customizing contact form.
    Used at Theme Configuration widget.

    contact_form_buttontextText displayed at contact form button.Send Message

    Enabling theme maintenance mode.
    Used at Store Configuration widget.

    store_maintenance

    true or falseEnables or disables the maintenance mode. If activated , send order button & Paypal button is hidden & and maintenance alert is displayed.false
    store_maintenance_texttextText displayed when store_maintenance is enabled.Currently Under Maintenance.

    Updating send order page URL.
    Used at Theme Configuration widget.

    send_order_urlURLUpdates the URL of the send order button at navigation dropdown.false

    Updating product tabs at product page.
    Used at Theme Configuration widget.

    tab_delivery_contentstringThe target DOM selector for delivery info.

    [no changes required]
    #HTML89
    tab_order_contentstringThe target DOM selector for order info.

    [no changes required]
    #HTML88
    tab_fb_texttextUpdates the tab title for FacebookFacebook
    tab_order_texttextUpdates the tab title for Order InfoOrder Info
    tab_delivery_texttextUpdates the tab title for Delivery InfoDelivery Info
    tab_comments_texttextUpdates the tab title for Comments/ReviewsComments

    3.0 Store Setup


    Setting up your Blogger store preferences & use the many e-commerce features that comes pre-installed with BlogrCart themes.

    Setting up currency & custom currency for your store.

    Example to use preset currency

    Go to Store Configuration widget, at New Site Name field add parameter currency_code & at New Site URL field add value of IDR > click Save Link > click Save widget. This will override shopping cart presets to use IDR - Indonesia Rupiah for its currencies (a working example).

    Refresh you store page & by now the shopping cart view will display the Rupiah symbol. There are 25+ preset currency have been installed. View table below to grab your currency code.

    Example to use custom currency or to customize a preset currency.

    Go to Store Configuration widget, at New Site Name field add parameter currency_method & at New Site URL field add value of custom > click Save Link. By doing this, you are notifying the plug-in to use a custom currency setup.

    Then add in the required custom currency parameters & accompanied with your values as per table below (under Custom currency section). Save all your parameters & values and preview your changes.

    If no currency is set, the shopping cart will be using USD (US Dollar) as currency by default.

    Custom Gadget LocationStore Configuration Gadget
    Reference in Template HTML<b:includable id='js-cart-setup'> ... </b:includable>
    Parameter
    currency_*
    Values or
    Type of value to Use
    DescriptionDefault
    currency_codeinternational currency codeInternational currency codeUSD
    Here are the full list of currency_code that has been set as pre-sets with shopping cart

    Paypal Supported currencies

    USD  - US Dollar (default)
    AUD - Australian Dollar
    BRL - Brazilian Real
    CAD - Canadian Dollar
    CZK - Czech Koruna
    DKK - Danish Krone
    EUR - Euro
    HKD - Hong Kong Dollar
    HUF - Hungarian Forint
    ILS - Israeli New Sheqel
    JPY - Japanese Yen
    MXN - Mexican Peso
    NOK - Norwegian Krone
    NZD - New Zealand Dollar
    PLN - Polish Zloty
    GBP - Pound Sterling
    SGD - Singapore Dollar
    SEK - Swedish Krona
    CHF - Swiss Franc
    BTC - Bitcoin
    MYR - Ringgit Malaysia
    PHP - Philipines Peso
    TWD - Taiwan New Dolar

    Paypal Unsupported Currencies
    Strongly recommend to activate paypal_currency_to_convert to checkout at Paypal using auto calcultaion to your set currency rate to Paypal's supported currencies. Refer Paypal Setup section below.

    INR - India Rupee
    VND - Vietnam Dong
    BND - Brunei Dollar
    IDR - Indonesia Rupiah
    NGN - Nigeria Naira
    THB - Thai Baht
    RUB - Russia Ruble
    PKR - Pakistani Rupee
    BDT - Bangladesi Taka
    CNY - Chinese Yuan

    Example Inserting A Currency Code



    Apply below parameters with the predefined values to customise or add your custom currency if no pre-sets currency is available. 

    currency_methodcustomActivates custom currency for store by adding value true.

    If this is activated all parameters below is required.

    currency_codeinternational currency codeInternational currency codeUSD
    currency_nametext/ stringA currency name
    currency_symboltext/ string/ HTML supportedA currency symbol. HTML supported.$
    currency_aftertrue or falseDisplays the currency symbol after pricefalse
    currency_delimitertext/ stringCurrency delimiter.,
    currency_decimaltext/ stringCurrency decimal..
    currency_accuracynumber/ integerAccuracy for the custom currency.2

    Example for Custom Currency Setup


    Customize store shipping & checkout. By default BlogrCart themes shopping cart plugin uses 4 shipping methods which users can easily activate  which are:-

    • shipping flat rate
    • shipping quantity rate
    • shipping total rate.
    • shipping options rate (optional)

    Heads Up! If shipping totals is 0, the shipping container will not display.

    Custom Gadget LocationStore Configuration Gadget
    Reference in Template HTML<b:includable id='js-cart-setup'> ... </b:includable>
    Parameter
    shipping_*
    Values or
    Type of value to Use
    DescriptionDefault
    shipping_method [choose one]

    shippingFlatRate

    shippingQuantityRate

    shipingTotalRate

    shippingFlatRate
    A flat rate based shipping rate regardless of quantity or totals in cart.

    shippingQuantity
    A shipping rate multiplies the total quantity in shopping cart

    shippingTotalRate
    A percentage shipping rate based on shopping cart totals.

    View details setup below under enhanced store setup.
    0
    shipping_rate number/ integer A shipping rate.

    If shippingTotalRate used, amount entered here is percentage based.

    Example: 10% = 10/100 = 0.1

    Example Shipping Setup

    Store tax setup & assign parameters.

    Heads Up! If tax total is set to 0, the tax container will not display.

    Custom Gadget LocationStore Configuration Gadget
    Reference in Template HTML<b:includable id='js-cart-setup'> ... </b:includable>
    Parameter
    tax_*
    Values or Type of value to UseDescriptionDefault
    tax_ratenumber/ integerThe tax rate to apply in percentage based.

    Say you require 5% as tax rate, equals to 5/100 (five divide by one hundred) & the value to enter would be 0.05

    tax_shippingtrue or falseIf set to true calculates tax totals includes cart & shipping totals.false
    Example Store Tax Setup


    Checkout settings for Paypal. Take note that, the form fields entered at checkout form will also be passed through to Paypal checkout page for a seamless checkout experience.

    The minimum setup to activate or set your checkout at Paypal is only to set your Paypal email address. Go to Store Configuration widget and enter as follows:-

    1. At New Link Name filed add parameter paypal_email
    2. At New Link URL field add value [your_paypal_email_address]
    3. Click Save Link

    Click Save to save your settings. Preview your Paypal checkout. Use below parameters to custom set other Paypal related function made available with theme.

    Due to Paypal strict form submissions, some form fields, which has input char errors, will not show up at Paypal checkout form. But overall the sender's name, email, telephone, address is tested to work & pass through Paypal checkout form page.

    Use paypal_currency_convert & set the currency paypal_currency_to_convert if you want to use supported Paypal currencies at checkout. The shopping cart will attempt to auto calculate & convert your cart totals to the paypal_currency_to_rate that you have entered.

    Custom Gadget LocationStore Configuration Gadget
    Reference in Template HTML<b:includable id='js-cart-paypal'> ... </b:includable>
    Parameter
    paypal_*
    Values or
    Type of value
    to Use
    DescriptionDefault & Examples
    paypal_checkoutfalseUse this to disable Paypal checkout functions.true (default)
    paypal_emailemail addressThe email address used to checkout at Paypal & receive payments. Required to activate this plug-in.

    [Required]
    you@yours.com
    paypal_sandboxtrue or falseSet to true to use Paypal sandbox checkout for testing purposesfalse

    true - uses Paypal sandbox environment for tests
    paypal_success_urlURLFull URL which includes http:// to the return page after successful checkout at Paypalblog url
    paypal_cancel_urlURLFull URL which includes http:// to the error page after un-successful checkout at Paypalblog url
    paypal_debugtrue or falseFor debugging purposes.

    Displays paypal_ parameters at browser console log.

    Paypal button still made visible but checkout to Paypal is disabled.
    false
    paypal_currency_converttrue or falseActivates alternative currency to checkout to Paypal.

    Requires Paypal supported currency listed with simplecart(js) - refer currency section.
    false
    paypal_currency_to_convertA Paypal currency codeInternational Paypal supported currency code.

    Conditions

    The value entered here will be used as the currency rate updater.

    Requires Paypal supported currency listed with simplecart(js) - refer currency section.
    USD
    paypal_currency_to_ratenumber/ integerThe currency exchange rate from store current currency to the updated currency at Paypal.1
    paypal_wait_texttext/ stringThe text displayed when Paypal button is clicked.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Obtaining secured connection...

    Example Paypal Setup


    The send email notifier is sending shopping cart & checkout form data to Blogger store set email & also a copy to the senders email.

    It comes with a basic form validation helper which helps Blog store owners in making sure orders sent are filled accordingly.

    Note: This plugin does not save or keep data as all emails sent here is "on-the-fly" to the receiver end. There is no data kept or saved to make sure all emails sent successfully even on heavy traffic or loads.

    To automatically receive the submitted form to your email, go to Email Configuration > click Edit and add below:-

    • At New Site Name field add parameter my_store_email
    • At New Site URL field add your [A Valid Email Address]
    • Click Save link to save your parameter.

    Click Save to save your setup. By now, at checkout form, the send order will attempt to send the filled order form & cart data to this email you have entered.


    There is loads of text/edits you can automatically include at the send order notifier body, for example:-

    • Payment instructions.
    • General notes.
    • Your business contact details etc.

    Use parameters below to the assigned widget to add in your custom text at the email notifier.

    There might be some display issues for non roman text characters which depends on the character/lettering/language support at the receiving email provider end or the PC the viewer is viewing the email - please use wisely.

    If you want to include apostrophe or double quotes, add a backslash (\) before it to allow Blogger to render your text correctly - if not errors will occur.

    Custom Gadget LocationEmail Configuration Gadget
    Reference in Template HTML<b:includable id='js-cart-email'> ... </b:includable>
    Parameter
    my_*
    Values or
    Type of value to Use
    DescriptionDefault
    my_store_emailemail addressThe email to receive the send order from checkout form.
    my_store_nametextYour blog store name.[your blog_name]
    my_success_urlURLThe URL to redirect to after email successfully sent with http://[your blog_url]+/p/success.html
    my_error_urlURLThe URL to redirect to after email NOT successfully sent with http://[your blog_url]+/p/error.html
    my_store_urlURLYour store full URL with http://[your blog_url]
    my_business_nametextYour business name[your blog_name]
    my_addressURLYour business address displayed at email notifier footer.
    my_phone_1text/ HTMLYour business contact number displayed at email notifier footer.
    my_phone_2number/ integerYour business contact number displayed at email notifier footer.
    my_phone_3number/ integerYour business contact number displayed at email notifier footer.
    my_pay_1textText displayed at payments reference section Line 1.
    my_pay_2textText displayed at payments reference section Line 2
    my_pay_3textText displayed at payments reference section Line 3.
    my_note_1textText displayed at email notifier general note section Line 1.
    my_note_2textText displayed at email notifier general note section Line 2.
    my_note_3textText displayed at email notifier general note section Line 3.
    my_note_4text/ HTMLText displayed at email notifier general note section Line 4.
    my_new_decimal  textUpdates the decimal format at email notifier.
    my_new_delimiter
          
    textUpdates the delimiter format at email notifier,
    my_new_accuracynumber/ integerUpdates the totals accuracy format at email notifier.2
    my_currency_symboltrue or falseEnables or disables to update the currency code to use currency symbol (vice versa) at email notifier.false
    my_store_debugtrue or falseFor debugging & testing purposes.

    Disables/ hides the send order form button & displays the test buttons options with example form submitter details in a sliding panel.
    false
    my_submit errortext/ stringText displayed when form submission has errors.Please check form for errors
    my_wait_texttext/ stringText displayed when send order button is clicked.Obtaining secured connection. Please hold.

    Enhanced Store Features (Pre-installed)

    By default the currency changer options is disabled. To activate, go to Store Configuration widget > click Edit and add parameter/values as follows:-

    • At New Site Name field add parameter currency_rates
    • At New Site URL field add a value of true 
    • Click Save to save your parameter.

    Click Save to update your theme configurations. Now continue to add your custom currency & currency rate values at Currency Options widget using the format below.

    Format to Insert as a Currency Option

    Below is the format to enter at Currency Options helper at your store dashboard. At New Site Name field enter the text format like so to include your currency code and text option displayed:-

    USD_Text to display at currency option

    ^^^Capital case currency code

          ^Separator [REQUIRED]

            ^^^^^Text to display at currency rate drop down option
    • REQUIRED 1st option is store default currency with a value of 1.
    • Currency code for 1st option MATCH currency code set in Store Configuration[currency_code]
    • Currency code/options must be available as shopping cart currency pre-sets. If not add in the required currency of choice with shopping cart plug-in.

    At New Site URL field add in the currency exchange rate to your store currency settings. This field only accepts integers / numbers.

    Click Save link to save your settings.

    Adding more Currency Options
    Add in more currency options using the method above. Re-arrange your currency options using the up & down arrow. Always make sure that the first option in your widget is your current currency used at your store with the rate at 1.


    Understanding Plug-in Concept

    Using Blogger widgets to map out your shipping weight to your shipping price, this add on will find the weight in cart & extracts the price in user's selected option & update the cart totals automatically.

    It comes with various default values if, somehow store owners forgets to enter a weight for an item or even alert users if their cart items has reached a maximum weight, a default value has been assigned.

    All of this settings can be customized accordingly using BlogrCart Blogger store template helper (Store Configuration) widget located at Blogger dashboard Layout & makes it easy for non techy users to update accordingly without knowing any coding.


    Setup Shipping Select

    Go to Store Configuration widget > click edit > add as follows:-


    • At New Site Name field add parameter shipping_method
    • At New Site URL field add value of shippingCustom 
    • Click Save to save your parameter.


    Click Save to update your configurations settings.

    Doing this alone will not show your shipping options at checkout page. This is because you have not yet entered your options at the Shipping Options widget.

    Setup Shipping Options

    Setting up is made easy when you have understand the basics on the format pairing values that has been assigned with this add on plugin. But before that, find Shipping Options helper widget & click edit to enter your options.

    There will be 2 fields assigned for this widget for an option:-

    • Text entered at New Site Name field will display as the text for option at checkout.
    • Inside Link URL field is where you enter the weight to price format values for this option.

    Weight to Price Format (at Shipping Option Values)

    An example weight to price format for a shipping option will look like so:-

    500:6.00 , 1000:12.00 , 1500:18.00 , 2000:36.00, 2500:42.00 , 3000:58.00 , 3500:69.00 , 4000:80.00

    By default the weight is using grams as weight unit. But users can change to a different weight metric & will be detailed out later in this page. Looking at the example, the weight to price format is like so:

    • Highlighted yellow is a weight unit (decimal points not allowed)
    • Highlight cyan is a price in (required 2 decimal points) when this weight unit is reached.
    • A ":" is the separator between weight to price pairings
    • A comma " , " is the separator between each weight to price pairs.
    • No ending comma is required for the last value pairs.

    Explanation for the above, if the cart items reached 500(weight unit) then the shipping price will be 6.00(currency unit). And so goes if the cart weight reached 3500(weight unit), then the shipping price 69.00(currency unit)

    Highlighted in yellow is the unit that the plug-in will search for. This weight unit increment must be consistent throughout the weight value entered. From the example above the increment is in 500 (weight unit).

    Weight increment & its consistencies for an option is very important. This consistent increment value must be updated at shipping_weight_increment parameter if changed. If not shipping is set to 0.

    Continue to add your options using the method above. Click Save & preview your checkout page.

    You can also use Shipping Option Tool to help you print out the format & to allow you to copy & paste your weight price values directly to your shipping options quickly. :) http://blogrcart-mukabuku-elite.blogspot.com/p/shipping-option-tool.html



    Updating Weight Increments

    If however your weight needs a different weight increments, for example 250:[some_price] , 500:[some_price], 750:[some_price] and so on, then you can update the shipping plug-in to use your new increment units.

    Go to Store Configuration > add parameter shipping_weight_increment (in New Site Name field) > add value 250 (at New Site URL field) and click Save Link & Save your widget. This will override the add on to use a new incremental weight you have entered which is 250 (weight units).

    Important if this weight increments is changed, then you are required to edit/update other saved options using the same weight increment values. Multiple weight increment for an option will set the shipping value to 0.

    Updating Weight Units

    By default the weight is using units equivalent to grams. This is reflected at shipping_weight_metric parameter assigned. This would be the ideal basis to convert the shipping weight to lb (pounds) or kg (kilograms) & reflect at checkout page & cart views.

    Currently supported 3 units which are:-

    • gram(default)
    • pounds (lb) 
    • kilograms(kg).

    Using Pounds(lb) as Weight Metric

    To update cart, to use pounds (lb) & display at checkout. Go to Store Configuration widget > click Edit > add parameter shipping_weight_metric (in New Site Name field) > add value lb (at New Site URL field) > click Save Link & Save your widget. New weight metric of pounds pre-calculated & displayed at checkout page & view cart.

    Since that the weight is based on units (grams) the pounds weight values must be converted to use grams. For example:

    1/4 lb = 113.398 gram => Enter 100 as weight value as it is the closest rounded weight

    or

    1 1/8 lb = 623.69 gram => Enter 600 as weight value as it is the closest.

    Prices for weight

    Add any price value with no particular value increment. For the price units, 2 decimals places is required.

    Using Kilograms(kg) as Weight Metric

    Kilograms is very straight forward. The item weight values is divided to 1000 to display in kilograms since that the plug-in weight unit used is based on gram weight value.


    Updating Maximum Weight in Cart

    By default, the shipping has a 5000 (weight unit) for a maximum weight the cart could reach before displaying the alerts to users & disables the checkout form button.

    Required to add a consistent max weight value pairing for ALL the shipping options saved,

    Based on the example above, the maximum weight is 4000(weight unit). Which means all other options are required with a maximum weight value pairing of 4000(weight unit) too.

    To update the cart for this setting, Go to Store Configurations widget > click edit > add parameter shipping_weight_max (at New Site Name field) > add value 4000 (at Link URL field) > click Save Link & Save your widget.

    This will update the cart to not use 5000 (default max weight unit) but to use your updated values which is 4000(weight unit) instead.

    If a shipping_max_weight value is not available in a shipping option, shipping will return 0.



    A Working Example

    Here we are displaying 3 location shipping options based on a carrier provider in Malaysia. Below example we are providing 3 options for users to select during checkout:-

    • Delivery Within P. Malaysia
    • Delivery P. Malaysia to Sarawak
    • Delivery P. Malaysia to Sabah

    To key in the option weight to price values for the above, below would be the working example:-

    Option #1 New Site Name field: Delivery Within P. Malaysia
    Option #1 New Site URL field:


    500:7.00 , 1000:9.00 , 1500:11.00 , 2000:16.00 , 2500:18.00 , 3000:20.00 , 3500:22.00 , 4000:24.00 , 4500:26.00 , 5000:28.00 , 5500:30.00 , 6000:32.00; 6500:34.00 , 7000:36.00 , 7500:38.00 , 8000:40.00 , 8500:42.00 , 9000:44.00 , 9500:46.00 , 10000:48.00

    Option #2New Site Name field: Delivery P. Malaysia to Sarawak
    Option #2New Site URL field:

    500:9.00 , 1000:10.00 , 1500:14.00 , 2000:26.00 , 2500:30.00 , 3000:34.00 , 3500:37.00 , 4000:41.00 , 4500:44.00 , 5000:48.00 , 5500:51.00 , 6000:55.00; 6500:58.00 , 7000:62.00 , 7500=65.00 , 8000:69.00 , 8500:72.00 , 9000:76.00 , 9500:79.00 , 10000:83.00

    Option #3New Site Name filed: Delivery P. Malaysia to Sabah
    Option #3New Site URL field:


    500:10.00 , 1000:11.00 , 1500:15.00 , 2000:31.00 , 2500:35.00 , 3000:39.00 , 3500:43.00 , 4000:47.00; 4500:51.00 , 5000:55.00 , 5500:59.00 , 6000:63.00 , 6500:67.00 , 7000:71.00 , 7500:75.00 , 8000:79.00 , 8500:83.00 , 9000:87.00 , 9500:91.00 , 10000:95.00

    Good news, if you are a store owner in Malaysia & using Post Laju services as your currier service, you can just copy the values here to your shipping options ;) .

    From the above example we would set:

    Store Configuration widget add parameter shipping_weight_increment (at New Site Name field) & the value of 500 (at New Site URL field) - whereas 500 is the increments between the weight values (or easily explained the consistent differences of the entered value weight)

    And also..

    Add parameter shipping_weight_max (at New Site Name field) & the value of 10000 (at New Site URL field) to set the maximum weight entered for all the options above.

    To enable the shipping options & display it at checkout, add parameter shipping_options (at New Site Name field) & the value of true (at New Site URL field).

    Quick Notes

    • If a shipping option is not formatted as per required, shipping rate will return NaN (Not A Number).
    • If shipping_method not set to shippingCustom, shipping select will not display.
    • If a weight is not found in an option, the shipping total will return 0.

    You can also use the Shipping Option Tool to help you to create the option weight to price here at http://blogrcart-mukabuku-elite.blogspot.com/p/shipping-option-tool.html. All you have to do is add the values required & this tool will automatically create your options values. Cut & paste the results to your option - its's easy!

    You're all set!

    Custom Gadget LocationStore Configuration Gadget
    Reference in Template HTML<b:includable id='js-cart-shipping'> ... </b:includable>


    Parameter
    shipping_*
    Values or
    Type of value to Use
    DescriptionDefault
    shipping_methodshippingCustomEnables the shipping options at checkoutfalse
    shipping_weight_metrictext / string
    [predefined]
    Pre-defined weight units to use.

    gram - to display weight units in grams (default)

    lb - to display weight units in pounds.

    kg - to display weight units in kilograms.
    gram
    shipping_weight_texttext/HTMLThe alert text displayed when an option is not selected.Please choose a destination.
    shipping_weight_texttext/HTMLThe element id or classname to place updated shipping weight texts & display the select options.

    [Changes not required]
    Est. weight:
    shipping_weight_incrementnumber / integerThe consistent wight increment used in mapping the shipping option values.500
    shipping_weight_defaultnumber / integerThe default weight used if items weight unit is not available.500
    shipping_weight_maxnumber / integerThe maximum weight reached items in cart before alerting users.5000
    shipping_alert_limittextThe text displayed when cart items has reached the maximum weight.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Items exceeds weight limit. Please reduce items selection
    shipping_options_idtext/stringThe shipping <select> id.

    [Changes not required]
    #shipping-select
    shipping_select_texttextText displayed when shipping select options is not selected.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Choose a shipping option.
    shipping_alert_selecttextText alert displayed when shipping select options is not selected.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Please select a shipping option.
    shipping_alert_othertextText displayed when an option value is set to "Other".

    Used when not specifying a value for a shipping options to let users continue to send orders.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Other shipping selected. You may continue to send your orders.

    Store Related Setup

    This section covers this BlogrCart theme helpers which includes:-

    • Customize cart view text & labeling.
    • Customize add to cart buttons, on click text display.
    • Customize alert texts.

    Custom Gadget LocationStore Configuration Gadget
    Reference in Template HTML<b:includable id='js-cart-setup'> ... </b:includable>
    ParameterValues or
    Type of Value to Use
    DescriptionDefault

    Shopping Cart Views

    cart_itemtextText displayed for items table heading.Item
    cart_totaltextText displayed for totals table heading.Totals
    cart_sizetextText displayed if a product size selection is selected (if available)Size
    cart_colortextText displayed if a product color selection is selected (if available)Color
    cart_weight_metricpre-definedPre-defined theme weight metrics.

    Available gram, lb, kg
    gram

    Shopping Cart Alerts

    alert_cart_emptytextText displayed when item has been added to cart.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    No item selected.
    alert_cart_addedtextText displayed when shopping cart is emptyYour item have been added
    alert_targetstringA DOM element classname or ID to target the alert placeholders.

    [no changes required]
    .content-wrapper > div
    alert_placeholderHTMLHTML mark-up to use as the alert placeholder.

    [no changes required]
    <div class=\"alert alert-warning text-center\" id=\"alert-div\"><a class=\"close\" data-dismiss=\"alert\"><i class=\"fa fa-close\"/></a></div>

    Form Validation Alerts

    form_first_nametextText displayed when first name not filled.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    First name required.
    form_last_nametextText displayed when last name not filled.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Last name required.
    form_emailtextText displayed when email not filled.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Email address required
    form_phonetextText displayed when phone not filled.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Phone required.
    form_postcodetextText displayed when postcode not filled.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Postcode required
    form_addresstextText displayed when address not filled.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Address required.

    Locating Checkout Form

    To edit the cart form label text go to Template HTML > find Blog1 > and expand <b:includable id="post-checkout-form"> . Find order-form .

    Important: Removing send order form input elements may cause shopping cart & checkout errors but editing the input labels will not.


    Locating Cart Summary Placeholders

    To edit the cart summary label text go to Template HTML > find Blog1 > and expand <b:includable id="post-checkout-form">. & find checkout-summary .

    Important: Removing or customizing cart summary elements or its classes may cause shopping cart display errors. Editing its labels or text will not.


    Locating Theme Built-In Documentation

    To view the built in theme cart documentation go to Template HTML > find HTML99 > and expand <b:includable id="theme-docs"> .


    Automatically Empties Cart After Success Form Submission

    Applies if you have setup a different success page URL after the template Pages install.

    This theme comes with theme utility helper to empty shopping cart automatically afetr a successful checkout form submission.

    To empty the shopping cart automatically, at any static page in your blog, add the theme utility helper below inside the blog page editor body in the HTML view.

    <div id="empty-shopping-cart"></div>

    Click Update to Save your static page & preview your changes.


    Display Checkout Form on Other Static Page

    Applies if you have setup a different Send Order page after the template Pages install.

    This theme comes with several theme utility helper to display the checkout form & the shopping cart summary automatically on Blogger static pages.

    If you require to change your send order page, to add in the checkout form & the shopping cart summary automatically by theme, add the theme utility helper below at any Blogger static page inside the blog editor body in HTML view.

    <div id="theme-order-form"></div>

    Click Update to Save your static page & preview your changes.


    Locating Theme Plug-in Libraries

    Go to Template HTML > click Jump to Widget tab > select HTML99 > expand <b:includable id='js-library'>...</b:includable>

    Removing/Hiding Paypal Checkout/Button

    Use CSS & add below at template HTML inside the <b:skin> tag preferably at the end:-

    .send-paypal { display:none!important; visibility:hidden!important; }

    Removing/Hiding Send Order Checkout/Button

    Use CSS & add below at template HTML inside the <b:skin> tag preferably at the end:-

    .send-email { display:none!important; visibility:hidden!important; }


    Theme Personalization & Configurations


    Tapping in & override BlogrCart configurations using parameters without any programming! List of assigned parameters & available values to include with details description.

    This section uses the Blog feed to retrieve data & displaya as an image slider at homepage. Your blog feed must be set to Full and your Blog must be made Public in order for the plugin to work.

    To customize how the image slider display use below parameters to override theme default settings. Below is an example.

    Example Display a Certain Amount of Posts


    To show 6 posts for the image slider sequence, at Featured Configuration widget add below:-

    • At New Site Name field add parameter  featured_slides_to_show .
    • At New Site URL field add value 6 .
    • Click Save Link.
    • Click Save to save your setup.

    Refresh your blog store homepage to view the changes.

    Example Display Posts by a Specific Label


    Another example, to display posts for a certain Label attached to, try below:-

    • At New Site Name field add parameter  featured_label .
    • At New Site URL field add value [your_label] .
    • Click Save Link.
    • Click Save to save your setup.

    Important: The label value entered here is case sensitive & depedns on the amount of posts with the label it is attached to. If it is less than the amount of posts you require to show, no posts will display.

    Use below parameters to custom set your responsive featured image slider default settings at Theme Configuration widget.

    Custom Gadget LocationFeatured Configuration Gadget
    Reference in Template HTML<b:includable id='js-featured'> ... </b:includable>
    Parameter
    slider_*
    Values or Type of Value to UseDescriptionDefault
    featured_autoplaytrue or falseEnables or disables the slider autoplay.true
    featured_autoplay_speednumber/ integerThe autoplay sequence speed in milliseconds.1500
    featured_infinitetrue or falseEnables or disables slider inifinite scroll of images.true
    featured_speednumber/ integerThe slider sequence speed in milliseconds.1500
    featured_slides_to_shownumber/ integerThe amount of post to display.3
    featured_slides_to_scrollnumber/ integerThe amount of post to scroll in between sequences.1
    featured_breakpoint_mobilenumber/ integerThe width of browser screen before its break point.

    [No changes required]
    768
    featured_delaynumber/ integerThe timing in milliseconds the delay transition of each slider.400
    featured_fadeInnumber/ integerThe timing in milliseconds the slider fadeIn transition.1500
    featured_labeltext/ stringThe assign the Label attached to posts.recent
    featured_max_results : 10,number/ integerThe of posts to retrieve from blog feed.10
    featured_pricetrue or falseEnables or disables the display of price (if available)true
    featured_statustrue or falseEnables or disables the display of product status (if available)true
    featured_currencytext/ HTMlThe currency symbol to display$
    featured_currency_aftertrue or falseEnables or disables the display of currency symbol after the pricefalse
    featured_titletrue or falseEnables or disables the display of post titles.true
    featured_summarytrue or falseEnables or disables the display of post summary.true
    featured_summary_charsnumber/ integerThe amount of chars to display at summary.160
    featured_imagetrue or falseEnables or disables the display of post image.true
    featured_image_height number/ integerThe image/slider height in pixels.390
    featured_default_imageURLThe default image used if no post image is found.https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjp7Pj1TPieGO4aOQRxNn6chz0dDAxIYeIn3YvZEccSOg-Xgx5ibIxjr10IeLG1CpEZhxKO6j40sW9L_KWibiUkmC7fALgKacKblacZzK0_T2fCZryzuh-1EFzdq1R9N1OvSzJNPKNsUk/s1600/_notavailable.jpg
    featured_buttontrue or falseEnables or disables the display of click to action buttontrue
    featured_button_texttext/ stringThe text displayed at featured click to action buttonRead More
    featured_destroytrue or falseEnables or disables the image slider entirely.false

    Displays a collection of published posts related to the posts displayed using the last Label the post is assigned to.

    This plug-in was developed to maintain your blog performance while having the options to control how the related posts displayed. Providing the best solution when displaying content on various screens or platforms.

    By default a collection of related posts will display automatically if a post is assigned with a Label via blogger post editor. The related section also by default will display n amount of random posts. attached to the last label the post was assigned to.

    An example to display 8 posts at Related Section, go to Theme Configuration widget and enter as follows:-

    • At New Site Name filed add parameter related_max_results
    • At New Site URL field add value 8
    • Click Save Link

    Click Save to update theme. Preview your post page and by now, the related section will display 8 posts.

    Use the assigned parameter & add in your custom values at Theme Configuration widget shown at below schedule to customize how the related post will display.

    Custom Gadget LocationRelated Configuration Gadget
    Reference in Template HTML<b:includable id='js-related'> ... </b:includable>
    Parameter
    related_*
    Value or Type of value to UseDescriptionDefault
    related_max_resultsnumber/ integerThe amount of posts to retrieved at the Related Section,

    Conditions.

    • related_max_results must not be more than related_max_feed.
    • The amount of published post does not exceed related_max_results or related_max_feed
    • Use with care, more product to display, more bytes to download.
    6
    related_titletrue or falseDisplays the title.true
    related_title_lengthnumber/ integerAmount of characters for product title to display if related_title is set to true35
    related_imagetrue or falseDisplays the related posts imagetrue
    related_default_imageURLDefault image to display if a product image is not found or unavailable.//3.bp.blogspot.com/
    -O-ykRe1bMOc/UV-70Dzkh5I/
    AAAAAAAAFbg/mceiiMid-XE/s1600/
    _notavailable.jpg
    related_column_displaynumber/ integerThe amount of column to display posts.6
    related_image_heightnumber/ integerThe replated posts image height in pixels.220
    related_pricetrue or falseDisplays the price (if any)true
    related_statustrue or falseDisplays the status (if any)true
    related_currencystring/textDisplays price symbol.$
    related_currency_aftertrue or falseDisplays price symbol after the price.false
    related_headingtrue or falseEnables or disables the related section heading title.true
    related_heading_texttext/ stringText or HTML displayed as related product.

    [Use backslash to escape apostrophe or quotes chars. (\") or (\')]
    Recommended
    related_destroytrue or falseDisables the related display entirely.false

    Displays Facebook pop over & also integrates Facebook API credentials to use at theme.

    An example to retriebe your Facebook fanpage go to Theme Configuration widget and enter as follows:-

    • At New Site Name filed add parameter facebook_page_url
    • At New Site URL field add value [full_url_to_your_fanpage]
    • Click Save Link

    Click Save to update theme. Preview your post page and by now, the related section will display 8 posts.

    Use the assigned parameter & add in your custom values at Theme Configuration widget shown at below schedule to customize how the related post will display.

    Custom Gadget LocationTheme Configuration Gadget
    Reference in Template HTML<b:includable id='js-facebook'> ... </b:includable>
    Parameter
    fb_*
    Value or Type of value to UseDescriptionDefault
    fb_page_urlURLThe full URL to your Facebook fanpage.

    [REQUIRED]
    [URL]
    fb_page_nametextA Facebook fanpage name.facebook
    fb_app_idnumber/ integerSet a Facebook App ID. please register one.

    This Facebook App ID is used to integrate the integrated comments supplied at product pages.
    [theme_app_id]
    fb_localepre-definedAs per Facebook Apps integrations.en_US
    fb_adapt_container_widthpre-definedAs per Facebook Apps integrations.false
    fb_heightnumber/ integerFacebook fanpage iframe height in pixels270
    fb_widthnumber/ integerFacebook fanpage iframe width in pixels340
    fb_small_headertrue or falseAs per Facebook Apps integrations.false
    fb_hide_covertrue or falseAs per Facebook Apps integrations.false
    fb_show_facepiletrue or falseAs per Facebook Apps integrations.true
    fb_show_poststrue or falseAs per Facebook Apps integrations.false
    fb_hide_ctatrue or falseAs per Facebook Apps integrations.false
    fb_popuptrue or falseEnables or disables Facebook pop over theme intergrations.true
    fb_expiresnumber/ integerThe amount in days the Facebook re-initiates for a user.

    Set to 0 to test the facebook popover.
    1
    fb_popup_titletextText displayed as pop over titleShow Your Support
    fb_popup_contenttextText displayed below Facebook pop over title.Like our Facebook Fanpage


    fb_button
    true or falseEnables or disables the pop over click to action button.true
    fb_button_urlURLThe URl the pop over button to link to.[URL]
    fb_button_texttextText displayed at pop over buttonVisit our Fanpage
    fb_timer number/ integerThe timing in milliseconds the pop over will initiate.5000
    fb_target_product_pagestringThe HTML element by classname to target Facebook fanpage iframe at product page.

    [no changes required]
    .item-page

    Groups product images in a gallery like display pop over on product pages only.

    Use the assigned parameter & add in your custom values at Theme Configuration widget shown at below schedule to customize how the related post will display.

    Custom Gadget LocationTheme Configuration Gadget
    Reference in Template HTML<b:includable id='js-product-page'> ... </b:includable>
    Parameter
    image_*
    Value or Type of value to UseDescriptionDefault
    image_modal_sizenumber/ integerThe height of the image pop over.
    580
    image_modal_prevtext/ HTMLText or HTML displayed as the pop over navigation.<i class=\"fa fa-angle-left fa-4x\"></i>
    image_modal_nexttext/ HTMlText or HTML displayed at the pop over navigation.<i class=\"fa fa-angle-right fa-4x\"></i>
    image_modal_destroy true or falseDisables the image pop over.false


    Other Related Personalization

    This theme offers loads of search engine friendly options to give that extra boost for your Blog powered store.

    404 Page Not Found

    Customize 404 page not found error handling page which comes with search engine handlers for optimal user/search engine experience when a page is missing or does not exists at your blog.

    Using Blogger default alert messages with custom styles, add below code to customize how your 404 page not found page would display. At Dashboard > Settings > Search Preference > under Errors and redirections section > click the Custom Page Not Found link > enter below mark-ups:-

    <div class="text-center">
      <h1>
        <i class="fa fa-warning"></i>
          Ooops... <span class="small">We have a problem!</span>
      </h1>
      <p class="lead">
         The file could not be found! Let us guide you back <a href="/">[ Home ]</a>
      </p>
    </div>

    Edit the text in between element tags it is assigned to. Use Bootstrap3 class naming convention, assign how your text will display. Here are examples typography


    Common Meta Tags

    Common meta tags used by search engines robots have been pre-installed on all pages made at your blog store. The <title> and <description> tags rendered dynamically & unique for each blog pages.

    This theme also uses fallback if however users forgotten to write in their custom meta description which is available at Blogger Editor sidebar.

    Fallback includes a default image meta tag(s) in order for search engines to relate your blog pages with the image you have uploaded via Blog Editor for a specific page. This makes it easy for your to share your product posts to social media too!

    To customize the default image go to Template HTML > find <head> & locate below mark-up:-

    <b:else/> <!-- default image if no image found -->
      <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwqOHG0FNN3vwW_MVXFBy1Ig6Z2KNUunrsQAr1hVgGknbpHtomLY4gNP6Lo4MTlFMBrjfIA44e3lQ9X22i1oiYI7xyxm5huKBWx2Vo1RjiNmwplQ-LenG5CrtYf4jqY8kB2AOAdk4NlM/s1600/placeholder-image.jpg' property='og:image'/>
    </b:if>

    Edit the URL highlighted yellow to an uploaded image you require.

    In addition, for gallery pages, if however Blogger servers could not reach your post images, a fallback image is displayed. To customize go to Template HTML > Jump to Widget > select Blog1 > expand <b:includable id='post' var='post'> to view the post template mark-up and fund below:-

    <b:else/>
      <img class='img-responsive' expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwqOHG0FNN3vwW_MVXFBy1Ig6Z2KNUunrsQAr1hVgGknbpHtomLY4gNP6Lo4MTlFMBrjfIA44e3lQ9X22i1oiYI7xyxm5huKBWx2Vo1RjiNmwplQ-LenG5CrtYf4jqY8kB2AOAdk4NlM/s1600/placeholder-image.jpg'/>
    </b:if>

    Again, edit the URL highlighted yellow to an uploaded image you require.


    Optimize Uploaded Post Images

    Images play an important role to bring your blog content more closely to users/readers at your blog, either in PC or even mobile. Crisp, clear & large images will attract more than text only content, which also supports the topic you are addressing.

    To optimize any images uploaded, reduce the image file size to below 150kb in making sure the images will load smoothly on slower internet connections. especially on mobile devices.

    Before uploading to your blog use free services like https://tinypng.com/ to automatically compress you large images file size without deprecating the original image output.

    This helps to reduce bandwith usages on Blogger servers & also reduce the amount of image space usages on your Google image online storage.

    Mobile Apps Icons

    This theme also comes equipped with mobile apps icons which users can save your blog directly to from a mobile browser directly to their mobile homescreen while displaying a custom icon.

    To include your custom App icon, go to Template HTML > find <head> > find below mark-up:-

    <!-- IOS and ANDROID APPS ICON IMAGES -->
    <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCZVcsjBJMwGDu7y40DViHxPKBLEs1spZn0cmR6Jg11dhJ-aKsLIJh5ajrFZiRG3YfjAop0gSxdtIi9oUaaceQYQ55nYtrlcDx7adPrjDZ3GU2BWmxPUYy_wjQiBeZLVvlr2B63F1_R-W/s1600/apple-touch-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'/>

    The above mark-up shows and example app icon image used for iOS devices at 76px X 76px image size. There will be more than one mark-up of the same sort to include different icons sizes to accommodate various mobile platforms used, included icon for iOS retina display.

    Replace the highlighted URL in yellow to your uploaded blog icon/image. Example icon sizes is included in template download inside the icon folder.


    Changing/Updating Send Order page URL

    When uploading your sample pages via Blogger dashboard, Blogger servers might change the URL structure of your Send Order page. You can update your Send Email button link/URL by locating below in your Template HTML > find LinkList89 & expand this Blogger widget.

    Edit the href attribute to insert your new URL to the send order page as shown in screenshot below.