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.

Custom Widget Personalization & How To's

Full documentation how to install & customize this BlogrCart Blogger e-commerce store template with shopping cart using pre-installed Config widgets. Expand the panels to view the topic details, guides & instructions. This tutorial comes with videos to help guide users for further understanding & speed up installation process.

Previous
Theme Personalization & Settings


5.0 Custom Widgets Personalization

5.1 LinkList Widget Used for Social Icons

LocationCustom LinkList Widget
Parameter
(Name Field)
Values to Set
(Links Field)
Description

Display Social Icons & Adding Links

This custom widget is using Font Awesome stylesheets to display the available icons.

In any widget displaying a title Social Icons * , to display the related social icons is by entering below values:-
variesurl to your social network pageTo display an icon use, Font Awesome's mark-up to render desired icon to display at your store pages.

For example if you want to display a Facebook icon, add in facebook at the Site Name field & add in the url to your social network page.

You can enlarge the icon size by adding keyword names fa-lg (2x font size), fa-3x (3x to font size) & fa-4x (4x to font-size). Below is an example:-

Adding an enlarged Twitter icon 2x of font size at Site Name field:-

twitter fa-lg

Adding an enlarged Instagram icon 4x of font size at Site Name field:-

instagram fa-4x

The keyword(s) used to display the icons is case sensitive & references can be viewed at the tutorial video & Font Awesome's web pages.

No errors will occur when wrongly typed keyword values. However, the icons will not display if keyword entered occurred.

Default: null

5.2 LinkList widget settings for Dropdown Menu Navigation


Drop Down Navigation

The widgets assigned will automatically build navigational links & drop down links for your store. Located at Dropdown Menu Section.

Tutorial video is provided to show how to build links & drop down links, re-shuffling the links & which positions the widget is dedicated for.

If a text is entered under the Site Name field, will display as the link text at the navigation section.

However by including a _ (underscore) following the link text, will create a drop down link automatically. With condition that this specified link name (with underscore), is situated under a link name (without an underscore) & depends on the positioning.

The underscore text will not display at the drop down navigation.

If a  url is entered at Site Url field, the text will create a link to your Site Name. If none entered the link will not display.

Rearrange the links anytime using the arrows. The link name with the _ (underscore) if stacked/grouped together will output as a grouped drop down links.

Example how aparent link and drop link is made:-


Video tutorial is provided.

5.3 HTML Widget for Info Section

Located below Blog1 widget at Dashboard > Layout text entered here will only display at product post footer section.

5.4 HTML Widget for Delivery Info

Located below Blog1 widget at Dashboard > Layout text entered here will only display at product post footer section.

6.0 How To's

6.1 How to include default image (if none is found)?


The meta tags which comes with BlogrCart themes are very powerful, especially in helping to expose your product & pages in search engine results. These tags are used by social media services to retrieve the necessary information.

By default we have included fallback image, if however an image could not be found from your page when sharing to social networks etc. You can customize or add in your own image to use as fallback image if an image could not be retrieved.

Go to Template Editor > backup if necessary > Now find below codes (highlighted yellow) & replace it to your uploaded image. Use Ctrl+F & type the keyword at the search bar (inside code editor) > press enter. It will lead you to the specific code

keyword: rel='image_src'

<meta content='http://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg' property='og:image' rel='image_src'/>

keyword: placeholder-image.jpg

<b:else/><img class='item_thumb' src='http://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg'/></b:if>

keyword: placeholder-image.jpg

<img class='img-responsive' src='http://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg'/>

6.2 How to include Mobile apps web icons?


BlogrCart themes also comes with mobile apps icons which will display on mobile devices if a user bookmark your Blogger store. The icons will display at user's smart phone Home Screen if saved or bookmarked weather on IOS or Android powered phones.

In download files, we have included sample icons which you can use to find out the sizes required. To include your own Apps icons, here are the sizes required:-

For Android phones (sizes in pixels):-

  • sizes='128x128' - for older Android phones 
  • sizes='192x192' - for newer Android phones


For IOS ( sizes in pixels):-

  • sizes='76x76'
  • sizes='120x120'
  • sizes='152x152'
  • sizes='215x215' - for Retina display


To replace to your own icon, go to Template Editor > backup if necessary > <!-- IOS and ANDROID APPS ICON IMAGES --> replace the href link to your uploaded icon. Make sure the correct size is included as indicated at the mark-up codes.

Below is an example to replace an IOS icon (highlighted yellow) with 76x76 pixels in image size:-

<!-- IOS and ANDROID APPS ICON IMAGES -->

<link href='//1.bp.blogspot.com/-0AqoP5diSmQ/VbjWsceKalI/AAAAAAAASBY/5BSPP6tryBc/s1600/apple-touch-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'/>

6.3 How to change fonts & background colors?


Customize this BlogrCart theme is made easy by using Blogger Template Designer. Go to Template > click the Customize button > at Template Designer UI > click the Advance link.

There is more than 20 custom changes for this BlogrCart theme which you can choose to customize accordingly. Live changes can be viewed at Blogger Template Designer itself.

To revert back to theme default state, for each changes done, click the Clear advanced changes to body background color .

Click the Apply to Blog to save your edits. Preview the changes.


6.4 How to activate Adsense for Blogger?


This BlogrCart theme comes with Adsense ads placement for blog posts which can be activated from your Blogger dashboard Blog widget.

Due to un-popular response from users for native Blogger ads placement (of course as a shop you'll probably like to put up your own ads right?) as part of our theme integration, we have included the functionality with BlogrCart themes.

If users require (or want) to use Blogger native Adsense placements in posts, you can activate by omitting / deleting a few lines (which is marked) in your template.

Go to Template > Edit HTML > Backup if necessary > click Jump to widget > select Blog1. At Blog1 widget codes > expand <b:includable id="main"> to view codes as below:-

<!-- // remove this line to use Adsense
      <data:defaultAdStart/>
remove this line to use Adsense -->

Remove/delete each line as indicated as highlighted above. There should be 8 lines to be deleted.

After doing so, click Save Template and view the changes.

6.5 How to de-activate Paypal checkout?


De-activating Paypal checkout is made easy by removing your paypal_email parameter at Store Config.

At Dashboard > Layout > find Store Config widget> click Edit.

Upon pop up overlay > find paypal_email (your parameter) located above the Save button & click Delete link.

Click Save > once widget is saved > click Save Arrangements & Preview your theme checkout page changes.

Note: All other settings related with Paypal checkout will be ignored.

6.6 How to de-activate send email notification checkout?


De-activating send email notification checkout is made easy by removing your my_store_email , my_ store_name & my_sbusiness_name parameter from/at Theme Config widget.

At Dashboard > Layout > find Theme Config widget> click Edit.

Upon pop up overlay > find my_store_email , my_store_name & my_business_name (your parameters) located above the Save button & click Delete link.

Click Save > once widget is saved > click Save Arrangements & Preview your theme checkout page changes.

Note: All other settings related with send email checkout will be ignored.

6.7 How to temporary de-activate both my send order notification & Paypal checkout?


This BlogrCart theme allows you to set a maintenance mode which when activated, you can update your Blogger store settings live without disturbing visitors browsing your blogger store.

Go to Dashboard > find Store Config widget > click the Edit link.

Upon pop up widget overlay > add parameter store_maintenance at Link name field & set the value to true.

A maintenance text alert notification will display on every pages to notify your users that your store s currently under maintenance work. You can customize the text displayed by adding parameter store_maintenance_text ( at Link Name field) & at LinkUrl field, add the text you required. Click Save  to save your settings & click Save Arrangements to update your theme.

This will disable/or put the Add to cart button will become more transparent and the dropdown view shopping cart with checkout buttons will be hidden.

If you require to update or test your send order page, you can access your Dashboard > Pages > find your Send Order page > click View to view the page or click Edit

6.8 How to empty or clear the shopping cart after users submitted orders?


This BlogrCart theme comes with the shopping cart empty helper which helps to clear the cart once successfully sending orders via Paypal or the email notification form.

Since that after a successful submission, users are returned to your success page, adding a pre-defined tag will help you clear the shopping cart automatically once users visits this page.

Go to your Dashboard > Pages > find your Success page > once opened click the HTML button.

Add this tag to notify the theme to clear or empty the shopping cart

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

After doing so, click Compose and click Update to save your Page changes.

This BlogrCart theme also comes with troubleshooting helpers. If you feel that the configurations set is not functioning as expected, press F12 on your computer keyboard and view your browser Console Log.

Have a question or having some trouble?

Send it to us using this theme support page here. Our team members would gladly assist you.
[*] Unless otherwise stated in theme/template listings.