Documentation

Thank you for choosing BlogrCart Deluxe One Cart.V.1.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.

With theme download, users will have sample contents to work with. Most of template details ie. slider images, navigation links, widget images, widget texts & titles is not available since that these contents is not yet registered to your Blog. Easily add in & set your custom text/settings accordingly - no programming needed!

This documentation will guide you with:-

Blogger blog theme/template installations.
Customizing theme layouts & widgets used.
Setting up store preferences.
Personalizing theme by overriding default configurations.
Optimizing theme for search engines.

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: 1.1 - Last Updated 23rd September 2016

1.0 Theme Installation

Walk through & detail instructions how to upload & install a Blogger template, uploading sample contents, interesting blog settings you might consider, automate post defaults with auto post template & more.

Install Template & Sample Pages

Find template files in your computer & extract theme zipped file to view template folders & inner files.

Copy & Paste Method (Preferred)

The most easiest ( & preferred ) way is setup Blogger template is by copy & paste method. Here's how...

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/Cmd+A for Mac) file contents
Copy (mouse right click + Copy) the file contents.

Once copied, head over to Blogger dashboard...

At Blogger Dashboard > click on Template
click Template HTML
Select All the existing template codes by clicking somewhere inside the template codes & right click choose Select All
Now PASTE the copied template contents.
Click Save Template & preview.

On first blog preview, your blog will have an empty canvas to work on. The empty sections is handled by your template Blogger widgets & customization is detailed out in Section 02.

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)

Use sample blog/store contents using the file provided in theme download. To upload theme sample contents:-

At Blogger dashboard go to Settings
Select Others and at Import and Backup click the Upload Content button
On window pop over, tick the Captcha box and tick the Automatically publish all imported posts and pages options.
Now click the Upload from Computer button.
Another window pop over will appear to search for the template file to upload. Locate the file inside the Upload folder with the ...PAGES.xml file name, as its title.
Choose file & begin file upload.

Side Note

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

Example pre-built checkout page, success page & error handling page.

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 your custom setups.

Blogger Theme Settings to Consider

Allow Blog Feed to Full

Set blog settings to Allow Blog Feed to Full in order to retrieve blog posts RSS feed from Blogger servers. Blog feed is required to allow theme functions to retrieve blog data.

Make Blog Public

Make Blog public assures a blog would have access to its data feed at Google/Blogger servers. If setting is set to Private, access to your blog feed will be disabled & some theme plug-ins will not be running as expected.

Turn off Blogger Mobile Template

This theme is designed with a responsive framework & do not require the usage of Blogger mobile template. Turn off Blogger mobile theme by:-

Go to Settings, Mobile section > click the Gear button.
Select No. Show desktop template on mobile devices.
Click Save.

Add Meta Description

Meta tags plays a vital role in giving your Blogger site (& pages) that extra boost in search engine result pages. To activate meta tags at blog & product pages meta descriptions:-

Go to Settings > Search Preferences > Meta Tags
Write a short description describing your blogger store in not more than 160 word counts.
Click Save

Adding meta tags here will activate Search Description feature located at Blog editor sidebar. This will allow blog users to insert custom products meta description before publishing a post.

Install Auto Post Template Helpers

An Auto Template Helper is used to help speed up product page editing & retrieve data from the assigned data table. To add auto post template:-

Go to your theme download file & open .../Helper folder.
Copy the file contents to your clipboard.
Navigate to your Blogger Dashboard > click Settings
Head towards Post & Comments > & at Post Template click Add link.
Paste the copied auto post template helper mark-up inside the textarea field, then click Save Settings

Publishing a Product Post Page

When creating a new post, the Auto Post Template will load automatically to blog editor. Edit/change texts & data to personalize product post listing. Upload image using blog editor image upload button. If a 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 post data from images to allow maximum posts display at index/gallery pages.
Upload images larger than 600px in width to allow appropriate image display. Always set the first image with the "Original Size" option.

Publishing Blog Specific Page

To start writing a blog post, click somewhere in blog editor & select all contents. Press the Delete button on your keyboard to remove all loaded contents. Start typing in blog posts content inside the empty blog editor in Compose mode.

Upload post images using the built-in image upload button. Remove copied & paste text formatting by selecting the pasted text & click the "Remove Formatting" button.

Each blog posts is required to Label its page with a label title "Blog" to group blog pages & helps Blogrcart theme to organize page display. Assign multiple Labels to a blog posts for categorization purposes.

For performance & best image display, upload posts images at min 600px in width and at image file size lower than 150kb. Use blog editor "Line Break" right after a few paragraphs of text or after the first image uploaded to your blog editor.

Activate BlogrCart Theme Plug-in

To allow Theme Plug-ins gadget to register itself with blog 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 Blogger store theme using Blogger widgets pre-installed with theme. Add, remove, re-arrange Blogger widgets to personalize layout.

Theme Custom Dashboard

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

Header - Logo, Offer Message, Checkout Buttons

This BlogrCart theme Headers holds 4 sections which are:-

Blogger's Header widget to upload image or edit text as theme logo
Slide down search bar
Buttons to toggle offcanvas, search bar & checkout page.
Offer message section.

Blog Header Widget - Store Name

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

Below is an example how to use Blogger Template Designer features from the dashboard.

Blog Store Description

The header description hidden from view.

Upload Image at Header

Image uploaded using the assigned Header widget will be displayed as the header logo. To upload an image:-

Click Upload Image link
Find the image & select image to upload
Choose Instead of Title & Description
Click Save to save widget settings.
Click Preview Template or refresh browser window to view changes.

Recommended uploaded image size at 280px in width & 60px in height. Please consider to upload image at below 100kb in file size for best page rendering/display.

Easy News One magazine new 2016 Blogger template

Theme Search Bar

The dropdown search bar can be accessed here for personalization, for example changing search bar placeholder texts.

Button Link to Checkout Page

If however upon uploading sample pages, Blogger changed the URL to your pre-installed checkout page, you can update the checkout page URL below at Template HTML.

Offer Message Section

A section specifically design to insert text or link text for promotional messages. Works great for new announcements or special offers.

By adding more height at this section will increase the floating headers height & might cause other page elements to overlap. Use line breaks ( ) at Offer Section2 to allow to increase the occurring page elements gap. Or add CSS style below at Template HTML inside template <b:skin> tag.

@media (min-width:768px){
  .spacer { height: 100px; } /* adjust to desired height */
}

Note: Not available on basic version.

Image Slider (Homepage)

This section is dedicated to use Blogger Image widget which users can add, remove, re-arrange upload site wide images. Images used/uploaded preferably min 1200px in width and 900px in height at 4:3 image ratio.

Adding An Image Slider

At the assigned Image widget click Edit.
Add text for title.This title will display as image slider title. (optional)
Add text for caption. This caption text will display as secondary heading text for image slider (optional).
Add a URL at link field. This will create a link using the text displayed at caption. (optional)

Remove Image From Image Slider

Click Edit link at Image widget located within the Image Slider section.
At widget pop over, click the Remove button.

Re-arrange/Re-order Image Sliders.

Click an image widget, drag & drop the widgets according to desired location. Top most image widget locate at Image Slider section will display as the 1st image in slider.

Override Theme Defaults.

Use Theme Configuration widget to override image slider theme default settings. Here is an example for slowing down the slider transition.

Go to Theme Configuration widget click Edit.
At New Site Name field add parameter slider_autoplay_speed
At New Site Name field add value 2000
Click Save Link
Click Save to update widget

After page refresh, the image slider will have a slower transition effect at 2s duration (2000 milliseconds)

Custom set the image slider parameters by using below table to override theme defaults.

Adjusting Image Slider Height

By default the image slider full width to screen on all devices at 4:3 image ratio. Which means the image slider height is 75% smaller (4/3*100) to the screen width.

To override or use your own image slider height, add CSS below at Template HTML inside the <b:skin> tag preferably at the end.

/*** Add Custom theme CSS to override theme defaults here ***/

.slider-wrapper:after,.slider-image:after  { padding-top: 56.25%; } // adjust the percentage to desired height

/*** End ***/

Click Save Template and preview your changes.

Parameter `slider_*`	Value or Type of value to Use	Description	Default
Custom Gadget Location		Theme Configuration Widget
Reference in Template HTML		`<b:includable id='js-image-slider'> ... </b:includable>`
slider	`true or false`	Enables or disables image slider functionality.	`true`
slider_infinite	`true or false`	Enables or disables display of posts infinitely.	`true`
slider_dots	`true or false`	Enables or disables display of slider pagination.	`true`
slider_speed	`integer`	Slider transition speed in milliseconds.	`1000`
slider_fade	`true or false`	Enables or disables slider fade effect when transitioning.	`true`
slider_autoplay	`true or false`	Enables or disables slider autoplay.	`false`
slider_autoplay_speed	`integer`	The slider autoplay speed in milliseconds.	`2000`
slider_pause_on_hover	`true or false`	Enables or disables image slider transitions to pause when mouse/touch/swipe hover.	`false`
slider_fade_timing	`integer`	The timing in milliseconds the fade effect uopn first view.	`1500`

Featured Section 1 & 2 (Homepage)

A section to display post by recent (default), by a certain Label, in random order with image carousel functionality. Uses Blogger's LinkList widget to assign custom parameters & override theme defaults for personalization.

Activate Featured LinkList Widget

At the assigned LinkList widget:-

Click Edit
At widget title add text to display as featured title.
At New Site Name field add parameter featured
At New Site URL field add value true
Click Save Link
Click Save to save widget settings.

Display Products/Posts by Label

Retrieves posts with a certain label published at your blog store. At the assigned LinkList widget:-

Click Edit
At New Site Name field add parameter featured_label
At New Site URL field add value your-label. Where as your-label is the label you have assigned at your posts. This label text is capital case sensitive.
Click Save Link
Click Save to save widget settings.

Retrieve More Featured Posts.

By default, this featured widget displays 4 posts in random order. Customize the amount of posts to retrieve by adding the custom parameter to override theme defaults:-

Click Edit
At New Site Name field add parameter featured_max_display
At New Site URL field add value your-amount. Where as your-amount is an integer the amount of posts to display.
Click Save Link
Click Save to save widget settings.

Display Certain Number of Featured Posts

When a featured number of posts set using featured_max_display is larger than the amount of post set by the carousel slider (4 - by default), this section will automatically display posts with the carousel slider feature, display pagination and display next & previous buttons.

To custom set the amount of featured post, at the assigned widget:-

At New Site Name field add parameter featured_slider_show
At New Site URL field add value your-amount. Where as your-amount is an integer & the same amount entered as featured_max_display.
Click Save Link
Click Save to save widget settings.

If do not require to use the carousel functionality, apply the same amount of posts at featured_max_display and featured_slider_show .

When the homepage is refreshed, the featured section will display the custom amount of posts that have been set. Important to take note that the total amount of posts to retrieve ( at featured_max_display) must be lower or equal the amount of posts/products that have been published.

Important: This BlogrCart theme have been designed to handle maximum 6 posts in a row for best & optimal display. Adding a larger amount of posts at featured_slider_show may look awkward & additional CSS styling could be required.

Autoplay Featured Slider

By default, the featured slider autoplay is disabled. Activate featured slider autoplay features at the assigned LinkList gadget:-

Click Edit
At New Site Name field add parameter featured_slider_autoplay
At New Site URL field add value true.
Click Save Link
Click Save to save widget settings.

Refresh homepage, the featured section that have been assigned with this parameter will autoplay & scroll automatically according to the plug-in timing set.

Create More Featured Sections.

Adding Blogger LinkList widget will allow to create more featured sections at homepage within the Featured Section.

Click the Add Gadget link
Select Link List widget
Add the required parameters.
Click Save to save you settings.
Drag & drop your new LinkList anywhere withing the Featured sections.

Customize Featured Section

Use table below to assign parameters to override featured posts display & featured slider effects & timings.

Note: Some limitations on basic theme versions.

Parameter `featured_* & feed_*`	Value or Type of value to Use	Description	Default
Custom Gadget Location		Assigned LinkList Widget
Reference in Template HTML		`<b:includable id='js-feed'> ... </b:includable>`
featured_label	`text / string`	The name/text of the Label to display posts.
featured_max_display	`integer`	The amount of posts to display.	`4`
featured_max_feed	`integer`	The amount of posts to retrieve from Blogger servers.	`20`
featured_layout_style	`custom set`	Assign a custom class to Featured Sections to customize individual posts display. Available preset layout class:- `featured-style-caption` Displays the caption 50% from the top of posts and overlap post image with white opac background.
featured_fade_timing	`integer`	The timing in milliseconds the fade effect when displaying the featured posts/products upon load.	`1500`
Featured Slider Displays Parameters to customize featured section when slider is activated.
featured_slider	`true or false`	Enables or disables image slider functionality.	`true`
featured_slider_infinite	`true or false`	Enables or disables display of posts infinitely.	`true`
featured_slider_dots	`true or false`	Enables or disables display of slider pagination.	`true`
featured_slider_speed	`integer`	Slider transition speed in milliseconds.	`1000`
featured_slider_fade	`true or false`	Enables or disables slider fade effect when transitioning.	`false`
featured_slider_autoplay	`true or false`	Enables or disables slider autoplay.	`true`
featured_slider_autoplay_speed	`integer`	The slider autoplay speed in milliseconds.	`2000`
featured_slider_pause_on_hover	`true or false`	Enables or disables image slider transitions to pause when mouse/touch/swipe hover.	`false`
featured_slider_arrows	`true or false`	Enables or disables display of next and previous buttons.	`true`
featured_slider_show	`integer`	The amount of posts to show on large screens sizes.	`4`
featured_slider_scroll	`integer`	The amount of posts to scroll on large screen sizes.	`1`
featured_slider_show_mobile	`integer`	The amount of posts to show on smaller screens sizes.	`2`
featured_slider_scroll_mobile	`integer`	The amount of posts to scroll on smaller screen sizes.	`2`
featured_heading_url	`URL`	A URL to a page to link to	`/search/label/`
featured_heading_bg	`true or false`	Enables or disables display the first post in featured section as background image for its section titles	`true`
Featured Feed Displays Parameters to handle posts retrieved from Blogger feed.
feed_random_order	`true or false`	Enables or disables display of posts in random order.	`true`
feed_class	`text / string`	Assign a custom class name to each post container.	`col-xs-12 col-sm-12 col-md-3`
feed_show_title	`true or false`	Displays the post title.	`true`
feed_title_chars	`string / text`	The amount of chars to display for post titles.	`45`
feed_show_image	`true or false`	Enables or disables display of posts image.	`true`
feed_image_thumbnail	`true or false`	Enable or disables display post images in a squared thumbnail format	`false`
feed_image_size	`number / integer`	Image size in pixels to retrieve from Blogger	`640`
feed_image_default	`url`	A url to an uploaded image to replace post images if not found/available	http://3.bp.blogspot.com/ `-O-ykRe1bMOc/UV-70Dzkh5I/` `AAAAAAAAFbg/mceiiMid-XE/s1600/` `_notavailable.jpg`
feed_show_summary	`true or false`	Enables or disables display of post summary.	`false`
feed_summary_chars	`number / integer`	The amount of chars for post summary.	`160`
feed_summary_more	`text / string`	Text to display when summary has been shortened.	`[...]`
feed_show_meta	`true or false`	Enables or disables display of post meta which includes:- post author post date post comments count	`false`
feed_show_date	`true or false`	Enables or disables display of post date.	`true`
feed_date_format	`pre-defined`	Date format:- `ddmmyy` Displays day, month, year `mmddyy` Displays month, day year	`ddmmyy`
feed_date_numeric	`true or false`	Enables or disables display of post date in numeric format.	`false`
feed_date_spacer	`text / HTML`	Character for date spacer	`/`
feed_show_author	`true or false`	Enables or disables display of post author.	`true`
feed_author_name	`text / HTML`	Text to replace default Author name.
feed_author_image	`url`	URL to author image if none is found.	`2000`
feed_show_comments	`true or false`	Enables or disables display of post comments.	`true`
feed_comments_text	`text / HTML`	Display of comment text.	`comment`
feed_comments_none_text	`number/integer`	Display of comments text if no comments	`No comments`
feed_show_price	`true or false`	Enables or disables display of price (if available).	`true`
feed_show_status	`true or false`	Enables or disables display of post status (if available).	`true`
feed_currency	`text / HTML`	Currency symbol to display.	`$`
feed_currency_after	`true or false`	Displays currency symbol after price.	`false`

Offer Section 2

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 this widget body empty will not allow the gadget to be saved - a default Blogger gadget behavior. To save an empty offer 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:-

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

Click Save to save or update your custom edits.

You can add any type of text or HTML markup using available Blogger widgets. There are no specific styling designated for this section, which allows you to include your own styling accordingly.

If however you require to display a larger width size banner, most likely on smaller screen sizes the entire theme would scroll left & right awkwardly since that the banner is overflowing. To fix that, add below CSS at Template HTML before the ending </b:skin>

.promo-section { overflow-y: auto; }

Save your template & now on smaller screen sizes, your banner will fit perfectly with a left & right scroll.

Dropdown Navigation

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.

The end results will look like so:-

Offcanvas Sidebar

Sidebar Header

Insert image by uploading an image from your PC using the assigned Image widget. Text entered using Image widget will not display at sidebar header.

To apply text for Offcanvas Sidebar header, replace the Image widget and use HTML/Javascript widget instead.

Sidebar

Displayed on the left side on all pages, hidden using within the offcanvas. Add/ remove/ arrange any Blogger widgets accordingly. Some default Blogger widgets custom styles have already been pre assigned.

Display Show & Hide Labels Widgets

Add in any Blogger Label widget & assign the Label widget title with an "underscore" ( _ ) will automatically create a show & hide labels/categories. You can stack up to any amount of Labels widget & this theme will style the show & hide Label widgets accordingly.

This default Blogger Label widget title will be displayed as the show & hide link, which allows you to make a group of labels using the widget itself.

Examples Display Icons Using LinkList Widget.

Display a social media icon: Facebook

At New Site Name field add 
At New Site URL 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 
At New Site URL 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 
At New Site URL 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 
At New Site URL 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/

Main - Content/Blog, Label Sort, Product Info Tab

Content/Blog

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.

On Blog post pages all available post footer is included. However on product pages, some default post footer functionalities have omitted out for performance reasons.

Activated post footer Blogger functions available from the dashboard at Blog1 widget.

News One easy magazine style new 2016 Blogger template

Homepage Recent/Latest Slider

On theme homepage, the blog posts is displayed as a slider carousel with mouse/touch/swipe functionalities. Override theme slider settings using below parameters at Theme Configuration widget.

The amount of posts displayed here is the amount set at your Blogger dashboard settings. Here is an example to update the "Most Recent" text displayed at homepage:-

Head over to Theme Configuration widget & click Edit link.
At New Site Name field add parameter latest_slider_heading
At New Site URL field add My Awesome Store
Click Save Link.
Click Save to save your settings.

Now refresh your homepage & the text "My Awesome Store" is displayed as the slider heading replacing theme defaults.

Override theme defaults by using parameters listed at table below. Most of the heavy lifting have been taken care of by Blogrcart themes :)

Parameter `latest_*`	Value or Type of value to Use	Description	Default
Custom Gadget Location		Theme Configuration Gadget
Reference in Template HTML		`<b:includable id='js-image-slider'> ... </b:includable>`
latest_slider	`true or false`	Enables or disables slider functions for homepage Blogger posts.
latest_slider_heading	`text`	Text displayed at latest slider headings.	`Most Recent`
latest_slider_infinite	`true or false`	Enables or disables display of posts infinitely.	`true`
latest_slider_dots	`true or false`	Enables or disables display of slider pagination.	`true`
latest_slider_speed	`integer`	Slider transition speed in milliseconds.	`1000`
latest_slider_fade	`true or false`	Enables or disables slider fade effect when transitioning.	`false`
latest_slider_autoplay	`true or false`	Enables or disables slider autoplay.	`true`
latest_slider_autoplay_speed	`integer`	The slider autoplay speed in milliseconds.	`2000`
latest_slider_pause_on_hover	`true or false`	Enables or disables image slider transitions to pause when mouse/touch/swipe hover.	`false`
latest_slider_arrows	`true or false`	Enables or disables display of next and previous buttons.	`true`
latest_slider_show	`integer`	The amount of posts to show on large screens sizes.	`4`
latest_slider_scroll	`integer`	The amount of posts to scroll on large screen sizes.	`1`
latest_slider_show_mobile	`integer`	The amount of posts to show on smaller screens sizes.	`2`
latest_slider_scroll_mobile	`integer`	The amount of posts to scroll on smaller screen sizes.	`2`

Quick Recap:

At homepage, blog posts are displayed as carousel slider. On blog index page blog posts displayed in grid layout.
Parameter latest_* is used to override theme defaults.
Amount of posts to display depends on the amount of posts set at Blogger dashboard.

Hiding Post Footers

Users can hide post footers by adding the assigned key characters at this widget. Click Edit Blog1 widget and navigate to Post Page Options.

Under Labels: field replace the text with hide-post-footer . Click Save to save your settings.

Product Sorting & Label Display (Index Pages)

This is a custom Blogger Label widget and assigned above Blog1 widget which allows you to:-

Display product sorting options
Assign & display Blogger Labels for categorization.

To assign a specific Label to display, at the assigned widget click Edit > select the Selected Labels > click the Edit link. At the Select Label to Show section > select your Labels to display. Click Done to save your Label selection and click Save to save your widget.

Quick Recap:

Select the required Label (categories ) to show by editing the assigned widget.
Product sorting displays at blogger index page and not at homepage, product/post pages or static pages.

Product Tabs (Product Posts)

Displays a global text section at product pages underneath product attributes/data. This tab display will group product details/description, tab info text, tab shipping text & the comments section.

Tabs Info

Click Edit the assigned HTML/Javascript to enter text to display at product tabs under the Info tab. Title entered here will replace the tab title displayed at product pages.

Tabs Shipping

Click Edit the assigned HTML/Javascript to enter text to display at product tabs under the Info tab. Title entered here will replace the tab title displayed at product pages.

Note: Tabs Info not available on basic version.

Quick Recap:

HTML/Javascript widget is used to insert text and displayed at product posts under the tabs section.
The assigned widget title is used as the tabs title replacing default theme setup.
By leaving the assigned widget title empty will not allow the widget to display at product pages under the tab section.

Offer Section 3

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.

If however you require to display a larger width size banner, most likely on smaller screen sizes the entire theme would scroll left & right awkwardly since that the banner is overflowing. To fix that, add below CSS at Template HTML before the ending </b:skin>

.promo-section { overflow-y: auto; }

Save your template & now on smaller screen sizes, your banner will fit perfectly with a left & right scroll.

Featured Section 3 (Featured Blog Posts - Homepage)

The technique used at Featured Section 1 & 2 can be implemented in this section. Uses Blogger's LinkList widget to assigned custom parameters to override theme defaults for personalization.

At this section, users are allowed to display Blog posts retrieved from their blog. The methods displayed here assumes that you have already activated & assigned a featured parameter at the LinkList widget.

Display featured posts with Label "Blog"

Click Edit the LinkList widget.
At New Site Name field add parameter featured_label
At New Site URL field add value Blog. Where as Blog is the label you have assigned at your published blog posts. This label text is capital case sensitive.
Click Save Link
Click Save to save widget settings.

Automatically the featured Blog section displays differently from other featured section you have assigned. It comes with a custom class to reference with, to further style the featured Blog posts display.

Take note that featured Blog sections does not include the image carousel slider functionalities.

Display More Featured Blog Posts.

By default, this featured widget displays 3 posts in random order. Customize the amount of posts to display by...

Click Edit the LinkList widget.
At New Site Name field add parameter featured_max_display
At New Site URL field add value your-amount. Where as your-amount is an integer the amount of posts to display.
Click Save to save widget settings.

By now when your homepage is refreshed, you can view that this featured section will display your custom amount of posts. Important to take note that the total amount of posts to display must be lower than the amount of posts/products that you have published at your blog store.

Customize Featured Blog Section

Use parameters in table at Featured Section 1 & 2 above to override featured posts display & featured slider effects.

Quick Recap:

Create more Featured Sections by adding LinkList widgets & assigning featured_* as the parameter values.
Featured sections with Label "Blog" will not group and create a slider effect.
Use assigned parameters to display more data info for a product post.

Footer

4 columns have been assigned to display at theme footer with different 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, 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.

Example HTML Markups

In download files, example mark-ups is also included to easily copy & paste and custom set social media icons display/links. Use the files located at .../widget_codes/ folder and add it at any HTML/Javascript widget (if available).

Display Show & Hide Labels Widgets

Add in any Blogger Label widget & assign the Label widget title with an "underscore" ( _ ) and it will automatically create a show & hide labels/categories. You can stack up to any amount of Labels widget & this theme will style the show & hide Label widgets accordingly.

This default Blogger Label widget title will be displayed as the show & hide link, which allows you to make a group of labels using the widget itself.

Note: Some limitations on basic theme version.

Examples Display Icons Using LinkList Widget.

Display a social media icon: Facebook

At New Site Name field add 
At New Site URL 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 
At New Site URL 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 
At New Site URL 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 
At New Site URL 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/

Quick Recap:

Add, re-arrange & remove any Blogger widgets.
Use Font Awesome markup to display icons and sizing it.
Add underscore before the text at Label widget title to display a show and hide group of links.
Select the required links to show by using Label widget Select Labels functionalities.

3.0 Store Setup

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

Currency Setup

Setting up currency & custom currency for your store.

Example Use Preset Currency

Here is an example to use Indonesia Rupiah as store 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.

Doing so will override shopping cart currency preset to use IDR - Indonesia Rupiah for its currencies.

Refresh your store page & the shopping cart view will display the Rupiah symbol. There are more than 25 preset currencies have been pre-installed. View table below to grab your currency code.

However, if your currency is not listed, you can set a custom currency by using methods below.

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

If your currency is not listed as shopping preset currencies, you can create a custom currency for your store.

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

Parameter `currency_*`	Values or Type of value to Use	Description	Default
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-cart-setup'> ... </b:includable>`
currency_code	`international currency code`	International currency code	`USD`
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
Apply below parameters with the predefined values to customise or add your custom currency if no pre-sets currency is available to use.
currency_method	`custom`	Activates custom currency for store by adding value `true`. `If this is activated all parameters below is required.`
currency_code	`international currency code`	International currency code	`USD`
currency_name	`text/string`	A currency name
currency_symbol	`text/string/HTML supported`	A currency symbol. HTML supported.	`$`
currency_after	`true or false`	Displays the currency symbol after price	`false`
currency_delimiter	`text/string`	Currency delimiter.	`,`
currency_decimal	`text/string`	Currency decimal.	.
currency_accuracy	`number/integer`	Accuracy for the custom currency.	`2`
Example for Custom Currency Setup Quick Recap: To add a preset shopping cart currency add parameter `currency_code` and add the 3 currency code ISO values at Store Configuration widget. To create a custom currency, which is not available or listed as shopping cart presets, add parameter `currency_method` and value `custom` to activate a custom currency. Then add in the required parameters to create a custom currency.

Shipping Setup

Add a store shipping at checkout. By default BlogrCart themes shopping cart plugin provides 4 shipping methods which users can easily activate which are:-

shipping flat rate
shipping quantity rate
shipping total rate.
shipping options rate (optional) - available on PRO

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

Parameter `shipping_*`	Values or Type of value to Use	Description	Default
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-cart-setup'> ... </b:includable>`
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.01
Example Shipping Setup

Tax Setup

Add a tax field at checkout. Setting up store tax & assigning a tax rate. Example to add 5% of tax for the totals amount in cart as follows:-

Go to Store Configuration widget and click Edit.
At New Site Name field add parameter tax_rate
At New Site URL field add 0.05 . Whereas 0.05 is 5 divides by 100 to percent.
Click Save Link.
Click Save to save widget settings.

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

Parameter `tax_*`	Values or Type of value to Use	Description	Default
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-cart-setup'> ... </b:includable>`
tax_rate	`number/integer`	The 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_shipping	`true or false`	If set to `true` calculates tax totals includes cart & shipping totals.	`false`
Example Store Tax Setup

Paypal Setup

Assigning Paypall checkout page, setting up checkout using a registered email with Paypal. Utilizes secured Paypal shopping cart payment page & transactions made directly to the Paypal's account holder set.

Take note that, the form fields entered at checkout form will also be passed through to Paypal's checkout page for a seamless checkout experience. However, due to Paypal strict regulations, some form fields, will not be delivered. Overall form sender's full name, email, telephone is tested to work.

Available on PRO, 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.

How to setup Paypal Checkout?

To activate or set your checkout at Paypal, the minimal requirement is to set your Paypal email address:-

Go to Store Configuration widget & enter as follows:-
At New Site Name filed add parameter paypal_email
At New Site URL field add value [your_paypal_email_address]
Click Save Link
Click Save to save widget settings.

Use you@yours.com at paypal_email parameter if you do not have a registered/active Paypal email address for test purposes. Values indicated at paypal checkout page is exactly how your customer would view if using registered email address.

Preview your checkout page. Use below parameters to custom set Paypal's related functions made available with theme.

Parameter `paypal_*`	Values or Type of value to Use	Description	Default & Examples
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-cart-paypal'> ... </b:includable>`
paypal_checkout	`true or false`	Use this to disable Paypal checkout functions.	`true (default)`
paypal_email	`email address`	The email address used to checkout at Paypal & receive payments. Required to activate this plug-in. `[Required]`	`you@yours.com`
paypal_sandbox	`true or false`	Enables or disables usage of Paypal sandbox checkout environment for testing purposes.	`false`
paypal_success_url	`URL`	Full URL which includes `http://` to the return page after successful checkout at Paypal	`blog url`
paypal_cancel_url	`URL`	Full URL which includes `http://` to the error page after un-successful checkout at Paypal	`blog url`
paypal_debug	`true or false`	For debugging purposes. Displays `paypal_` parameters at browser console log. Paypal button still made visible but checkout to Paypal is disabled.	`false`
paypal_currency_convert	`true or false`	Activates alternative currency to checkout to Paypal. Requires Paypal supported currency listed with simplecart(js) - refer currency section.	`false`
paypal_currency_to_convert	`A Paypal currency code`	International 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_rate	`number / integer`	The currency exchange rate from store current currency to the updated currency at Paypal. Requires Paypal supported currency listed with simplecart(js) - refer currency section.	`1`
Paypal Handlers
paypal_wait_text	`string`	The notification displayed when Paypal submit button is clicked.	`Obtaining secured connection...`
Example Paypal Setup

Send Order Email Setup

The send email notifier is sending shopping cart & checkout form data to the email addresses registered with the blog. No 3rd party application/script required.

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

Customize Order Form

Users can customize order form functionalities by using the assigned parameters listed below at Store Configuration widget. For example, to customize the form heading text:-

Go to Store Configuration widget & click Edit.
At New Site Name field add parameter form_heading
At New Site URL field add value Your-New-Form-Heading . Where as Your-New-Form-Heading is the text displayed at order form header.
Click Save Link.
Click Save to update widget.

Use below parameters at Store Configuration widget to override theme default settings. To further customize send order form fields, refer Other Store Related Setups section for details.

Important! There might be some display issues for non roman text characters which depends on the character/lettering/language supported at the receiving end - please use wisely.

To use apostrophe or double quotes for custom values, add a backslash (\) before it to allow Blogger to render your text/HTML correctly - if not errors will occur.

Note: Some limitations on basic theme versions.

Parameter `form_*`	Values or Type of value to Use	Description	Default
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-form'> ... </b:includable>`
form_debug	`true or false`	For debugging purposes. Allows you to view the exact data sent to email without clicking the Send Email button.	`false`
form_heading	`text`	Text displayed at order form heading	`Order Form`
form_success_url	`URL`	The URL to redirect to after order form have been successfully submitted.	`[your blog_url]+/p/success.html`
form_btn_text	`string`	The text displayed at order form button. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-send-o fa-fw\"/> Submit Orders`
form_btn_submit	`string`	Text displayed at button when order form button is clicked. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-refresh fa-spin\"/> Working...`
form_error	`string`	Text displayed at button when order form is incomplete. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-warning fa-fw\"/> Please check form.`
form_success	`string`	Text displayed at button when order form is successful before re-directing to the `form_success_url` `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-check fa-fw\"/> Success!`

Enhanced Store Features - Pre-Installed Add Ons

Currency Changer Setup (Pre-installed)

By default the currency changer options is disabled. To activate currency changer plug-in:-

Go to Store Configuration widget.
Click Edit
At New Site Name field add parameter currency_rates
At New Site URL field add a value of true
Click Save Link
Click Save to update widget.

Now find Currency Options widget & click Edit the assigned widget to insert the currency options and the assigned rates using below format.

Format to Insert as a Currency Option

Below is the format to enter at Currency Options widget 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. By default the first option will always be your store currency & the currency rate is set to 1.

Shipping Options Setup (Pre-installed)

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 without knowing any coding.

Enable Shipping Options

To activate shipping options, the custom shipping method must be enabled.

Go to Store Configuration widget
Click edit
At New Site Name field add parameter shipping_method
At New Site URL field add value of shippingCustom
Click Save Link
Click Save to update widget.

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 for the plugin to refer to.

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:-

New Site Name field - text entered here will display as the text for an option at checkout.
New Site URL field - the weight to price format values for this option.

Weight to Price Format

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. Based on the example:-

Highlighted yellow is a weight unit (no decimal points)
Highlight cyan is a price (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.

Laymen Terms: If the cart items weight reaches 500(weight unit) then the shipping price will be 6.00(currency unit). And so goes if the cart weight reaches 3500(weight unit), then the shipping price 69.00(currency unit)

Highlighted in yellow is the unit that the shipping option 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) in between weight increments.

Weight increment & its consistencies for an option is very important. This consistent increment value must be updated at shipping_weight_increment parameter if changed. By default 500 (weight unit) is used for weight incremental value.

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-six.blogspot.com/p/shipping-options-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
At New Site Name field add parameter shipping_weight_increment
At New Site URL field add value 250
Click Save Link
Click Save to update 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
At New Site Name field add parameter shipping_weight_metric
At New Site URL field add value lb
Click Save Link
Click Save to update 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

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. To update kilograms as weight unit:-

Go to Store Configuration widget
Click Edit
At New Site Name field add parameter shipping_weight_metric
At New Site URL field add value kg
Click Save Link
Click Save to update widget.

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
At New Site Name field add parameter shipping_weight_max
At New Link URL field add value 4000
Click Save Link
Click Save to update widget.

This will update the cart to 4000(weight unit) as the maximum weight for the cart. 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/zoning shipping options based on a carrier provider in Malaysia. We are about to provide 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

At New Site Name field:
Delivery Within P. Malaysia

At 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 #2

At New Site Name field:
Delivery P. Malaysia to Sarawak

At New 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 #3

At New Site Name filed:
Delivery P. Malaysia to Sabah

At New 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, at Store Configuration we would set below parameters to custom this new shipping options at checkout:-

At New Site Name field add parameter shipping_weight_increment
At New Site URL field add value 500
Click Save Link
At New Site Name field add parameter shipping_weight_max
At New Site URL field add value of 10000
Click Save Link
At New Site Name field add parameter shipping_options
At New Site URL field add value of true
Click Save Link
Click Save to update widget

Quick Notes

If a shipping option is not formatted as per required, shipping rate will return NaN (Not A Number or 0).
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-six.blogspot.com/p/shipping-options-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!

Use parameter in table below to override default theme settings.

Parameter `shipping_*`	Values or Type of value to Use	Description	Default
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-cart-checkout'> ... </b:includable>`

shipping_method	`shippingCustom`	Enables the shipping options at checkout
shipping_weight_metric	`text / string` `[predefined]`	Pre-defined weight units to use. `gram` Display weight units in grams (default) `lb` Display weight units in pounds. `kg` Display weight units in kilograms.	`gram`
shipping_weight_text	`text/HTML`	The element id or classname to place updated shipping weight texts & display the select options. `[Changes not required]`	`Est. weight:`
shipping_weight_increment	`number / integer`	The consistent weight increment used in mapping the shipping option values.	`500`
shipping_weight_default	`number / integer`	The default weight used if items weight unit is not available.	`500`
shipping_weight_max	`number / integer`	The maximum weight reached items in cart before alerting users.	`5000`
shipping_alert_limit	`text`	The 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_alert_select	`text`	Text alert displayed when shipping select options is not selected. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`Select a shipping option.`
shipping_target_buttons	`string`	Target a DOM element (buttons) to show or hide if shipping options selected.	`.send-email, .send-paypal, .btn-sendorder`

Store Related Setup

Cart Views, Buttons & Alerts

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.

Note: Some limitation on basic theme version.

Parameter	Values or Type of Value to Use	Description	Default
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-cart-setup'> ... </b:includable>`
Shopping Cart Views
cart_item	`text`	Text displayed for items table heading.	`Item`
cart_total	`string`	Text displayed for totals table heading.	`Totals`
cart_size	`text`	Text displayed if a product size selection is available.	`Size`
cart_color	`text`	Text displayed if a product colour is available)	`Color`
Shopping Cart Alerts
alert_cart_empty	`text`	Text displayed when there is no item in cart. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`No item selected.`
alert_cart_view	`text`	Text displayed if an item have been added to cart. `Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`View Cart`
alert_cart_continue	`string`	Text displayed at button after user clicked item to cart	`Continue Shopping`
alert_cart_checkout_url	`URL`	The URL to link to after item have been added to cart	`/p/checkout.html`
alert_cart_continue_url	`text / HTML`	The URL to link to at "Continue Shopping" button after item have been added to cart	`/search/label`
alert_cart_div	`HTML`	Alert DOM element to append to page when shopping cart is empty. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<div class=\"alert alert-info text-center alert-summary\"></div>`
alert_cart_spinner	`HTML`	The FontAwesome spinner markup to use to indicate page is in progress. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-refresh fa-spin fa-lg\"/>`
alert_cart_timing	`number / integer`	The timing in milliseconds the add to cart button to change.	`2000`

Other Store Related Setups

Locating Checkout Form

Important: Removing send order form input elements may cause shopping cart & checkout order form function failures as this is using Blogger widget default functionalities. Editing the input labels and placeholders will not.

Locating Cart Summary Placeholders

To edit the cart summary label text go to Template HTMLfind below indicator.

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

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; }

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.

Checkout Page Form Helpers

Applies if you have setup a different checkout page.

This theme comes with theme utility helper to display the checkout form & shopping cart views. If however you require to change to a different checkout page, add below helper at your new checkout page > HTML composition:-

<div id="theme-checkout-page"></div>

Click Update to Save your new checkout page.

You might consider to update your checkout page button URL on your theme pages. Details & instructions can be found at Section 2.0 under Header Top section.

Returns Page & Forms Helpers

Applies if you have setup a different return page.

This theme comes with theme utility helper to display the returns form. If however you require to change to a different returns page, add below helper at your new returns page > HTML composition:-

<div id="theme-returns-page"></div>

Click Update to Save your new returns page.

Contact Page Helpers

Applies if you have setup a different contact page.

This theme comes with theme utility helper to display the contact form on a Blogger static page. If however you require to change to a different contact page, add below helper at your new contact page > HTML composition:-

<div id="theme-contact-page"></div>

Click Update to Save your new contact page.

Theme Personalization & Configurations

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

Related Products/Posts

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.

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.

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_display
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 parameters below at the assigned widget to override theme default settings.

Note : Some limitation on basic theme version.

Parameter `related_*`	Value or Type of value to Use	Description	Default
Custom Gadget Location		Theme Configuration Gadget
Reference in Template HTML		`<b:includable id='js-related'> ... </b:includable>`
related_max_results	`number/integer`	The amount of posts to display 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.	`5`
related_max_feed	`number/integer`	The amount of posts to retrieve from Blogger servers, Conditions. `related_max_feed` must not be less than `related_max_results` The amount of published post does not exceed `related_max_feed` Use with care, more feed to display more bytes to download & display.	`20`
related_show_heading	`true or false`	Enables or disables display of related section heading.	`true`
related_heading_title	`text/string`	Text to display as Related Section heading.	`More Related`
related_show_image	`true or false`	Displays the image	`true`
related_show_thumbnail	`true or false`	Displays post images in cropped squared format.	`false`
related_image_size	`number /integer`	The image size in pixels to retrieve Blogger post images.	`480`
related_default_image	`URL`	Default image to display if a product image is not found or unavailable.	`http://3.bp.blogspot.com/` `-O-ykRe1bMOc/UV-70Dzkh5I/` `AAAAAAAAFbg/mceiiMid-XE/s1600/` `_notavailable.jpg`
related_show_caption	`true or false`	Enables or disables the display of post captions which includes post summary, post title etc.	`true`
related_show_title	`true or false`	Enables or disables product title display.	`true`
related_title_chars	`number/integer`	The amount of post title characters to display.	`45`
related_show_summary	`true or false`	Enables or disables display of post summary.	`false`
related_summary_chars	`integer`	The amount of posts summary characters to display.	`120`
related_summary_more	`string`	Enables or disables display of post summary.	`[...]`
related_show_price	`true or false`	Displays the price (if any)	`true`
related_show_status	`true or false`	Displays the status (if any)	`true`
related_currency	`string/`text	Displays price symbol.	`$`
related_currency_after	`true or false`	Displays symbol after price.	`false`
related_class	`string`	Custom classname reference. `[no changes required]`	`col-xs-12 col-sm-6 col-md-4`
related_parent_class	`string`	Custom class name reference. `[no changes required]`	`row`
related_destroy	`true or false`	Disables related plugin.	`false`
related_debug	`true or false`	For debugging. Displays `related_` parameters at browser console.	`false`

Infinite Page Scroll/Load More

Allows to display a collection of products/posts according to the n amount of posts set at your Blogger dashboard Blog widget. This plug-in will attempt to display posts when Load More button is clicked.

An example to customize load more button using method as follows at Theme Configuration widget:-

At New Site Name filed add parameter scroller_text_load
At New Site URL field add value Text-to-display . Where as Text-to-display is the text you want to display at the load more button.
Click Save Link
Click Save to update widget.

Preview blog index pages & the scroller button text will display the text you have assigned. Use parameters below at the assigned widget to override theme default settings.

Parameter `scroller_*`	Value or Type of value to Use	Description	Default
Custom Gadget Location		Theme Configuration Gadget
Reference in Template HTML		`<b:includable id='js-sort-scroller'> ... </b:includable>`
scroller_destroy	`true or false`	Destroys this plug-in	`false`
scroller_text_load	`text / string`	Text displayed at Load More button.	`Load More Products`
scroller_text_empty	`text / string`	Text to display when there are no more posts to display.	`End of product display`
scroller_indicator_class	`string`	Font Awesome markup to display a spinner icon.	`fa fa-2x fa-refresh`
scroller_button_class	`string`	Custom classname to assign to Load more button	`btn btn-default btn-lg`
scroller_post_container_parent	`string`	DOM reference to Blogger posts element wrapper. `[no changes required]`	`.blog-posts`
scroller_post_container	`string`	DOM reference to product posts. `[no changes required]`	`.simpleCart_shelfItem`
scroller_blog_pager_older_class	`string`	DOM reference to Blogger pagination older link. `[no changes required]`	`.blog-pager-older-link`
scroller_blog_pager_newer_class	`string`	DOM reference to Blogger pagination newer link. `[no changes required]`	`.blog-pager-newer-link`

Returns Form

A returns page with a customer return form is made available upon theme install. Uses Blogger default widget to send all form data to email addresses registered to the Blog.

To access & customize returns form fields, find below in Template HTML.

Customizing Returns Form Fields.

Returns form label & input fields placeholder texts can be customized according to users preference. The default attributes class, name and id's must be kept in-tact if used.

Removing Required Fields.

By default input fields with class required are the required fields before the form submit button is enabled. By removing the required class, automatically makes the input fields not required before form submissions.

Customizing Form Functionality

By default, the form submission functionality is handled by Blogger, which means, input field for name, email & message are the required fields. Use parameters below at Store Configuration widget to override theme defaults.

Note: Some customization limitation on basic theme version.

Parameter `returns_*`	Values or Type of value to Use	Description	Default
Custom Gadget Location		Store Configuration Gadget
Reference in Template HTML		`<b:includable id='js-form-returns'> ... </b:includable>`
returns_debug	`true or false`	For debugging purposes. Allows you to view the exact data sent to email without clicking the Send Email button.	`false`
returns_success_url	`URL`	The URL to redirect to after order form have been successfully submitted.	`[your blog_url]+/p/success.html`
returns_btn_text	`string`	The text displayed at order form button. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-send-o fa-fw\"/> Submit Returns Details`
returns_btn_submit	`string`	Text displayed at button when order form button is clicked.	`<i class=\"fa fa-refresh fa-spin\"/> Working...`
returns_error	`string`	Text displayed at button when order form is incomplete. `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-warning fa-fw\"/> Please check form.`
returns_success	`string`	Text displayed at button when order form is successful before re-directing to the `form_success_url` `[Use backslash to escape apostrophe or quotes chars. (\") or (\')]`	`<i class=\"fa fa-check fa-fw\"/> Success!`

Optimizing Theme

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

404 Page Not Found

Error page has already been assigned with this theme. To add text/HTML to error page go to Settings > Search Preference > under Errors and redirections section > click the Custom Page Not Found link > enter the text or HTML required.

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/AVvXsEgorvnlmdbiR-E0g2CAYJ_kzVSq-OIcN_R8LEtEBx6NnwgLq7sIwLR_C83C_8zbXbNkJMN1f2VBYfarb3DI8no0SDC4hgmVuK-7S6v5cPByjC1L6y7SJ4MOjz1_mzC4pLWpMEO4kOvy4IY/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/AVvXsEgorvnlmdbiR-E0g2CAYJ_kzVSq-OIcN_R8LEtEBx6NnwgLq7sIwLR_C83C_8zbXbNkJMN1f2VBYfarb3DI8no0SDC4hgmVuK-7S6v5cPByjC1L6y7SJ4MOjz1_mzC4pLWpMEO4kOvy4IY/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/AVvXsEgVaUrlmwagSwRDUSYUeWj1RM4tC6rgSeSEllRI5SoMX1Xp0uCk5Da75Dw-Fuuv6YuVJDNaDO2TYy9C_ON4xTtrSCwBBzEhK8nXklHU8Sf7EA_nxmOfdKv8W-X-gwgryMDgR6AfyaKKAyX8/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.

BlogrCart Blogger themes uses CSS3 animations for page effects. CSS3 is not supported on IE8 & IE9 web browsers.

Order Details	Totals []
Sub Total
Delivery/Shipping
Tax: ( %)
Amount Due:

Please choose a checkout option.
No personal data required.

Info

Product data - Edit currency symbol, price, product status inside the designated box. Edit the product options list to display as product select options, empty this field if not in use. Automate this page by editing the Auto Post Template details before starting to create your default custom product posts.

Product Images - Data table below the Jump Break line is for product images only & text. First image in image data table is the main product image or product thumbnail & set size to "Original". Upload image size @min width 600px. Add/upload images by clicking on a space inside image data table below & click upload image button above & start uploading your product images from PC.

More text & images can be added after "Jump Break". Images entered outside image data table (below) will not group.

Labels for product categorization - Before publishing, use Labels to categorize your product pages. For enhanced search results, add meta description at Search Description at the editor sidebar.

Comments/reviews - To remove/not display comments tick/select Don't Allow under the Options > Reader Comments link.

Shipping & Returns

Enjoy the flexibility of our 30-day free returns policy! Simply pack the item, with its original packaging and tags into our special delivery package and fill-out our Online Returns Form at http://www.your-store.com/customer/returns.
You can also check-out how to return an item in our new BLOG STORE Help Center here.
Should you have any questions regarding this product, feel free to get in touch with our friendly Customer Service Team at customer@your-store.com
Enjoy the flexibility of our 30-day free returns policy! Simply pack the item, with its original packaging and tags into our special delivery package and fill-out our Online Returns Form at http://www.your-store.com/customer/returns.
Greater NCR: 1-3 days, Major cities: 2-4 days, Provincial: 5-7 days. All in working/business days. You can enjoy free shipping on items sold by THIS STORE above USD 999.00.

Order Details	Totals []
Sub Total
Shipping:	Belum Termasuk Pengiriman
Delivery/Shipping
Tax: ( %)
Amount Due:

Dokumentasi

Translate

Documentation

1.0 Theme Installation

Copy & Paste Method (Preferred)

Uploading Template Files (Not recommended)

Upload Sample Pages (IMPORTANT)

Side Note

Allow Blog Feed to Full

Make Blog Public

Turn off Blogger Mobile Template

Add Meta Description

Publishing a Product Post Page

Publishing Blog Specific Page

2.0 Theme Layout

Blog Header Widget - Store Name

Blog Store Description

Upload Image at Header

Theme Search Bar

Button Link to Checkout Page

Offer Message Section

Adding An Image Slider

Remove Image From Image Slider

Re-arrange/Re-order Image Sliders.

Override Theme Defaults.

Adjusting Image Slider Height

Activate Featured LinkList Widget

Display Products/Posts by Label

Retrieve More Featured Posts.

Display Certain Number of Featured Posts

Autoplay Featured Slider

Create More Featured Sections.

Customize Featured Section

Sidebar Header

Sidebar

Display Show & Hide Labels Widgets

Examples Display Icons Using LinkList Widget.

Content/Blog

Homepage Recent/Latest Slider

Hiding Post Footers

Product Sorting & Label Display (Index Pages)

Product Tabs (Product Posts)

Tabs Info

Tabs Shipping

Display featured posts with Label "Blog"

Display More Featured Blog Posts.

Customize Featured Blog Section

Example HTML Markups

Display Show & Hide Labels Widgets

Examples Display Icons Using LinkList Widget.

3.0 Store Setup

Example Use Preset Currency

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

How to setup Paypal Checkout?

Customize Order Form

Enhanced Store Features - Pre-Installed Add Ons

Format to Insert as a Currency Option

Adding more Currency Options

Understanding Plug-in Concept

Enable Shipping Options

Setup Shipping Options

Weight to Price Format

Updating Weight Increments

Updating Weight Units

Using Pounds(lb) as Weight Metric

Prices for weight

Using Kilograms(kg) as Weight Metric

Updating Maximum Weight in Cart

A Working Example

Store Related Setup

Locating Checkout Form

Locating Cart Summary Placeholders

Locating Theme Built-In Documentation

Locating Theme Plug-in Libraries

Removing/Hiding Paypal Checkout/Button

Removing/Hiding Send Order Checkout/Button

Automatically Empties Cart after Success Form Submission

Checkout Page Form Helpers

Returns Page & Forms Helpers

Contact Page Helpers