Banner Ads
(728px X 90px)

  1. Home
  2. Theme How To's

Check Order

Shipping Details

Send & Checkout

Sub-total

Shipping

Taxes

Total
Please include messages to us here.


Documentation how to install & customise 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 Personalisation & Settings Back
Install Theme

5.0 Theme How To's

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. Here's the full list of available icons http://fortawesome.github.io/Font-Awesome/icons/

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 Setup for Mega Dropdown Menu Navigation


Drop Down Navigation

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

In general, if a text is entered in the Site Name field, a top link will display. The url to assign to link to is entered under the Link Url field.

However by including a single _ (underscore) or a dual __ (underscores) following the link text, will automatically create a drop down link ( for top navigation ) & a group of  dropdown links automatically.

Here are the conditions.

Link name with no underscore(s)

  • Create a top level link and will display at top level main navigation.
  • If this type of link name is located after a single or double underscore link name, stops the drop down and create a top level link automatically

Link name with single underscore

  • To create a drop down link if located after a link name with no underscore.
  • Creates a drop down link header if located after a dual underscore link name.
  • Automatically stops a group of links (with dual underscores) if inserted after a dual underscore link name

Link name with dual underscores

  • To create a group of links (mega link) below a single underscore link name.
  • The single underscore link name will automatically becomes the drop down link headers for this group of links.
  • Automatically stops grouping links (with dual underscores) if a single underscore link name or a link name is located after the sequence.

The underscore(d) text will not display at the drop down navigation links. 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.

We highly recommend for top navigation links & header links ( for a group of links ) uses the hashtag "#" for the Site Url field, if no linking is required. By default Bootstrap3 navigation links on top level is using default non-linking behavior.

Rearrange the links anytime using the up & down arrows. Below is an example how a group of links built for the demo theme:-

Quick tip! You may experience it would be hard to arrange your links especially when you have built dozens or more. To help out, while clicking the up & down arrow to arrange the links, press the <Alt> key on your keyboard when doing so.  This prevents your browser default behavior for jumping (but opens up a pop up - then click Close after) when clicking on hashtag (#) links used on Blogger widgets. :)




Video tutorial is provided.

5.3 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 customise 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEI2y2KCxvFv1jDlqOVCL9GeJg2PEWf4TI5C75OdN4TpYY8kRF3D6yu_K1XVeCSZn3d6dlm-NFve1bdozLZ-BfQmxLv5ToTbIT9g7AcqfZaTJzdPtfeRqE2ouIVX-_V80oOSVTLf_KoLk/s1600/placeholder-image.jpg' property='og:image' rel='image_src'/>

keyword: placeholder-image.jpg

<b:else/><img class='item_thumb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEI2y2KCxvFv1jDlqOVCL9GeJg2PEWf4TI5C75OdN4TpYY8kRF3D6yu_K1XVeCSZn3d6dlm-NFve1bdozLZ-BfQmxLv5ToTbIT9g7AcqfZaTJzdPtfeRqE2ouIVX-_V80oOSVTLf_KoLk/s1600/placeholder-image.jpg'/></b:if>

keyword: placeholder-image.jpg

<img class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEI2y2KCxvFv1jDlqOVCL9GeJg2PEWf4TI5C75OdN4TpYY8kRF3D6yu_K1XVeCSZn3d6dlm-NFve1bdozLZ-BfQmxLv5ToTbIT9g7AcqfZaTJzdPtfeRqE2ouIVX-_V80oOSVTLf_KoLk/s1600/placeholder-image.jpg'/>

5.4 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jqXTQ1ZznrK_h_9-qsPEt0AfjWUZ63b4wkuvAqc83OYKh0T5zXpBNd_oAdEJbgavAgnKqsGKfOysLrsjws8-RCNWTXhg3LAVb985BtsyhyztiIe1SRmzOT1Fe2VqkDopedyaOMMFfadv/s1600/apple-touch-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'/>

5.5 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.


5.6 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 this functionality with BlogrCart themes.

If users require (or want) to use Blogger native Adsense placements in posts, you can activate by omitting / deleting the "comments" 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 shown in screenshot:-


Scroll further below...


Remove/delete the comment out code at each line as indicated at highlighted above. There should be 3 lines (pait) to be deleted.

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

5.7 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.

5.8 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 Email 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.

5.9 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

5.10 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.

5.11 How to find the checkout form?


This BlogrCart theme come pre-installed with a checkout send order form. The form is automatically displayed if a pre-defined tag is included on a page.

Below is the checkout form tag already pre-included in theme instal at checkout page.

<div class="cart-order-form"></div>

Find below the location in theme Template HTML if you require to customize the form texts. Follow the green arrow guide to click & expand the form codes for your editing purposes.



You could also edit the text at the checkout page to your own. This custom text will be displayed after the checkout form.

5.12 How to Add Live Twitter Tweet Stream?


This BlogrCart theme comes pre-installed with Twitter plug-in from twitter.com. By adding predefined tags derived from twitter.com developers website, users can display their live tweet stream with personalized settings.



Visit https://dev.twitter.com/ to register a developers account at twitter. This will create a unique` ID to include in your twitter tag below.

Below is an example twitter tag provided by twitter.com developers plug-in.

<a class="twitter-timeline" href="https://twitter.com/hashtag/YOUR_HASHTAG" data-widget-id="YOUR-WIDGET-ID" data-chrome="noheader nofooter noborders transparent" data-tweet-limit="">Tweets</a>

Copy the above tag & paste this tag using a HTML/Javascript gadget/widget anywhere where appropriate in this theme (preferably at sidebar or footer) at your dashbaoard Layout..

Replace YOUR_HASHTAG with a hashtag of yours you want to display ay your live tweet stream.

Replace YOUR-WIDGET-ID to the id you have registered at Twitter.com. Customize data-chrome and data-tweet-limit values according to twitter.com dev site.

5.13 How to Publish a Blog Post?


Publishing a blog post is made easy without touching the template codes! Once you have installed the auto post template editor, when clicking the "Pencil" button to start your new post, the sample product template is displayed at your editor.

To publish a blog post, remove all auto post template mark-ups by selecting it at your blog editor > press delete just like when you start up fresh posts on a blog.

The only catch is, for blog post to display accordingly, these posts must me tagged with a Label of " Blog " ( without quotes & case sensitive ). Each posts with this label will be searched under it's own category & helps organize how your users will browse your site.

You can even add more Labels (either than the Blog label required ) to allow for your post articles to be related with your products. This works great for cross selling since that it helps create more information & content to your product & blogger store - build more leverage in search engines.

Example pages have been provided for you at your sample pages upload. Please check each page on the many possibilities your blogger posts could offer.
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.
Subscribe to: Posts (Atom)
Powered by Blogger.
Banner Ads
(728px X 90px)