Documentation

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 to setup Blogger template 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 Theme
• click Edit 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.

All available settings is made available with the theme codes. Sample slider images, texts and contents is pre-installed for further editing. You can further customize accordingly with detail instructions in Section 2.

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.

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



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.

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, accessing 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.

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. Set the first image with the "Original Size" or "X-Large" 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.

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.

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 Theme HTML code!

This BlogrCart theme Header holds 3 sections which are:-

• Blogger's Header widget to upload image or edit text as theme logo
• Buttons to toggle search bar & shopping cart. 
• Ads Header section to display notifications or messages.

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

Add text at Header widget to display as store description. Update text color and customization using Blogger Theme Designer.

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.

Please consider to upload image at below 100kb in file size for best page rendering/display.

Theme Search Bar

The search bar is embed in theme using a responsive pop over modal integrated with the theme Bootstrap3 responsive framework.

Button Link to Checkout Page

This theme already has pre-built checkout page by using this URL structure:-

http://<your-blog-name>.blogspot.com/page=checkout

No changes required.

Ads Header Section

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

Add in text/HTML inside this HTML/Javascript widget body to include text or uploaded images. Use line breaks (<br />) to increase the section gasp/paddings.

In narrow screen sizes, this section will display a horizontal scroll bar to allow overflowed elements for example images to display accordingly.

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.

On mobile devices, these main navigation links will be grouped with a menu button for toggling display.

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

This section is dedicated to use Blogger Image widget which users can add, remove, re-arrange upload images. Images used/uploaded preferably at min 1200px in width and/or  a consistent height min 480px.

Adding Image in 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 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 - Image Slider Sequence.

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.

Customize Image Slider.

At Layout, find Theme Plugins + Settings > Image Slider & Featured Settings widget and Edit below variables:-

var MY_SLIDER = {
  infinite: true,
  dots: true,
  autoplay: true,
  autoplaySpeed: 3000,
  pauseOnHover: true
};

Variable description:-

infinite: true,
Display slider in a infinitive loop.

dots: true,
Displays the image slider dots navigation

autoplay: true,
Allows the image slider to autoplay.

autoplaySpeed: 3000,
The image slider transition speed.

pauseOnHover: true
Allows image slider to pause transitions if hovered.

Adjusting Image Slider Height

By default the image slider displays full width to its parent container width. The image slider height depends on the uploaded image height -- where the largest image height will be considered as the maximum height for slider.

Upload a consistent image size for the slider at not lower than 1200px in width at 150Kb in image file size.

Use Blogger Theme > Customize > Advanced > Add CSS to add your custom CSS.

.slider-wrapper .slick-slider { overflow:hidden; }
@media (min-width: 768px){
    .slider-wrapper .slick-slider {
    max-height: 480px;
  }
}

Click Apply To Blog and preview your changes.

Update at highlighted yellow to your preferred height.

A section to display post by recent (default), by a certain Label, in random order. Uses Blogger's HTML/Javascript gadget to assign a Featured title and Label to extract specific product posts.

Add Featured HTML/Javascript Widget

At the assigned HTML/Javascript widget:-

• Click Edit 
• At widget title add text to display as featured title.
• At widget body add a specific Label (capital case sensitve)
• Click Save to save widget settings.

Create More Featured Sections.

Adding Blogger HTML/Javascript widgets will allow users to create more featured sections at homepage.

• Click the Add Gadget link
• Select HTML/Javascript widget
• At widget body add a specific Label (capital case sensitve)
• Click Save to save widget settings.
• Drag & drop your new HTML/Javascript widget anywhere withing the Featured sections.

Customize Featured Section Display

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

At Layout, find Theme Plugins + Settings > Image SLider & Featured Settings and click Edit to view below variables:-

var MY_FEEDS = {
  price: true,
  max_results : 4,
  max_feed: 20,
  random : true,
  title_chars : 35,
  image_width: 420,
  image_height: 320,
  image_default : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZzFo6TvmAeKTGYOzbVPkr1Iwh2wsX4nXXJBUCoMGHwjcDuEokjTzJFD_TlcDFdYl689IupuTxV1U3CoVtthvceR4aH-D6_PQL6jr74Jyn7GNeekPeiT-FNvCu2eJCgZ3nqtkZc4YGDg/s72-c/placeholder-image.jpg'
};

Variable description:-

price: true,
Displays the product price (if available). Add false to disable price display.

max_results : 4,
The maximum results of products/posts to display

max_feed: 20,
The maximum amount of products/posts feed to retrieve.

random : true,
Displays products/posts in random order. Add false to retrieve posts in published order

title_chars : 35,
The amount of characters for product/post titles.

image_width: 420,
The image width in pixels

image_height: 320,
The image height in pixels

image_default : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZzFo6TvmAeKTGYOzbVPkr1Iwh2wsX4nXXJBUCoMGHwjcDuEokjTzJFD_TlcDFdYl689IupuTxV1U3CoVtthvceR4aH-D6_PQL6jr74Jyn7GNeekPeiT-FNvCu2eJCgZ3nqtkZc4YGDg/s72-c/placeholder-image.jpg'
The default image displayed if no image is found. A URL to an uploaded image.

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.

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.
• Enable or disable sharing icons.
• Enable or disable post author
• Enable or disable post comments

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

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

Enabling Quick Access Tool

Quick access tool have been pre-installed with this theme. This will allow you to:-

1. Edit current post instantly
2. Access dashboard Layout instantly
3. Access Theme Edit HTML instantly
4. Access comments panel instantly
5. Access Bootstrap3 webpage & tools
6. Access Font Awesome webpage references
7. Quick help & support

To enable this functionality, go to Blog1 widget > under Post Page Options > tick at "Show Quick Edit" > then click Save to save this widget.

Product Sorting & Label Display (Index Pages)

This is a custom Blogger Label widget & located/assigned above Blog1 widget. This widget is ony displayed at index pages. This widget will allow 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
• click Save to save your widget.

Product Info (Product Posts)

Displays a global text section at product pages underneath product attributes/data. This tab/drawer like display will group all HTML/Javascript widget & display as a tabbed drawer feature for product posts.

.

Sidebar

Displayed on the left/right side on index pages & static page. Add/ remove/ arrange any Blogger widgets accordingly. Some default Blogger widgets custom styles have already been pre-assigned.


Two sidebar section available to display on separate pages.

• Sidebar (Index Page) indicates widget included here will display at indexed pages. 
• Sidebar (Static Page) indicates widget included here will display at static pages. 

Examples Display Icons Using LinkList Widget.

Display a social media icon: Facebook

• At New Site Name field add <i class="fa fa-facebook fa-lg"></i>
• At New Site 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 <i class="fa fa-facebook-square fa-lg"></i>
• 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 <i class="fa fa-facebook fa-3x"></i>
• 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 <i class="fa fa-facebook-squared fa-3x"></i>
• 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/

This widget is dedicated to display at this URL http://<your-blog-name>.blogspot.com/search/label/All .

Select the Label of choice to display posts by categories automatically at this page. To select a particular Label to display:-

• Click Edit
• At "Show" select "Selected Labels"
• Tick on preferred Label to show posts
• Click Done
• Click Save to save widget

At the assigned page view, automatically posts under the selected Labels will be shown.

Customizing Displayed posts by Categories.

At Layout, find Theme Plugins + Settings > Image Slider & Featured Settings and click Edit to view below variables:-

var MY_CATEGORY_PAGE = {
  max_results : 6,
  max_feed: 20,
  random : true,
  title_chars : 35,
  image_width: 420,
  image_height: 320,
  image_default : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZzFo6TvmAeKTGYOzbVPkr1Iwh2wsX4nXXJBUCoMGHwjcDuEokjTzJFD_TlcDFdYl689IupuTxV1U3CoVtthvceR4aH-D6_PQL6jr74Jyn7GNeekPeiT-FNvCu2eJCgZ3nqtkZc4YGDg/s72-c/placeholder-image.jpg'
};

Variable Description

max_results : 4,
The maximum results of products/posts to display

max_feed: 20,
The maximum amount of products/posts feed to retrieve.

random : true,
Displays products/posts in random order. Add false to retrieve posts in published order

title_chars : 35,
The amount of characters for product/post titles.

image_width: 420,
The image width in pixels

image_height: 320,
The image height in pixels

image_default : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZzFo6TvmAeKTGYOzbVPkr1Iwh2wsX4nXXJBUCoMGHwjcDuEokjTzJFD_TlcDFdYl689IupuTxV1U3CoVtthvceR4aH-D6_PQL6jr74Jyn7GNeekPeiT-FNvCu2eJCgZ3nqtkZc4YGDg/s72-c/placeholder-image.jpg'
The default image displayed if no image is found. A URL to an uploaded image

This widget is dedicated to display at this URL http://<your-blog-name>.blogspot.com/page=checkout.

Add text to display at checkout page at the assigned HTML/Javascript gadget

Edit text inside this markup to display when shopping cart is empty.

<div class='cart-empty' style='display:none'>
  <p class='lead'>
    Currently shopping cart is empty.
  </p>
  <a class='btn btn-primary btn-custom' href='/search/label'>Continue Shopping</a>
  <br />
  <br />
  <br />
</div>

Discounts Alert Texts

If Discounts is enabled, text inside this widget is used. Edit the highlighted text accordingly.

<div class="alert alert-success disc success" style="display:none;">
Discount applied!. Your discount code have been accepted &amp; cart have been updated.
</div>

<div class="alert alert-warning disc invalid-quantity" style="display:none;">
Cart items exceeds max quantity for discounts. Please reduce cart items to continue.
</div>

<div class="alert alert-danger disc invalid-code" style="display:none;">
Invalid or expired discount code.
</div>

<div class="alert alert-warning disc invalid-totals" style="display:none;">
Cart totals have not reached minimum amount for discounts.
</div>

<div class="alert alert-warning disc invalid-max-totals" style="display:none;">
Cart totals have reached maximum amount for discounts. Please reduce items to continue.
</div>

This widget is dedicated to display at this URL http://<your-blog-name>.blogspot.com/page=contact.

Add text to display at contact page at the assigned HTML/Javascript gadget

Enabling Contact Form Widget

Find the Contact Form gadget to click Edit and then Save this widget. This will allow this widget to register with your blog settings.

This widget is also used with checkout form and required.

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

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

Users can add in more widgets by clicking the Add a Gadget link & select your required widget.

Examples Display Icons Using LinkList Widget.

Display a social media icon: Facebook

• At New Site Name field add <i class="fa fa-facebook fa-lg"></i>
• At New Site 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 <i class="fa fa-facebook-square fa-lg"></i>
• 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 <i class="fa fa-facebook fa-3x"></i>
• 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 <i class="fa fa-facebook-squared fa-3x"></i>
• 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.

currency: 'USD',
Whereas USD is referred to your store currency. Below are preset currencies pre-installed with this BlogrCart theme.

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 enable Paypal checkout to non supported currency -- 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

Alternative Currencies Format

This theme fully supports alternative currency format to display decimals, delimiter & calculate accordingly. For example when IDR (Indonesia Rupiah) currency is in use.

alt_currency: false,
Set above variable to true to allow display of alternate currecy format display.

Non Preset Currency (Custom Currency)

Setting up currencies not listed above can be done by tapping in the currency function. Add below functions inside any HTML/javascript widget at the very bottom of theme:-

<script>
$(function(){
  simpleCart.currency ({
    code: 'AAA',
    symbol: '$',
    name: 'Currency Name',
    decimal: '.',
    delimiter: ',',
    after: false
  });
});
</script>

The variables above is self-explanatory. Edit accordingly to override any default currency set earlier.

This BlogrCart theme supports 3 type of shipping calculations & they are:-

• Flat Rate shipping - shippingFlatRate
• Calculate shipping by quantity of items - shippingQuantityRate
• A percentage based shipping - shippingTotalRate

When above variables is assigned in MY_STORE setup, the values will be passed to shopping cart & calculated accordingly.

To add a specific shipping methods, add the shipping variables inside MY_STORE setup:-

var MY_STORE = {

  ... {{ initial setup variables }}..

  shippingFlatRate: 10,
};

Note: when shippingTotalRate is applied, the value is percentage based, which means the value 0.1 equals to 10/100 percent.

Custom Shipping Options

More shipping options can be applied to BlogrCart themes, for example, shipping by weight, shipping by zoning etc. Additional plugins can be developed & designed according to user preferred shipping results.

Please contact theme developer for further instructions.

taxRate: 0.06,
The tax rate to be applied at checkout. The value is percentage where ie. 0.05 equals to 5/100 percent.
Add 0 to disable tax at checkout.

taxShipping: false,
To allow tax to be calculated with shipping. Set to true to enable tax with shipping.

checkout: {
  type: 'PayPal',
  email: 'you@yours.com',
  success: 'http://your-blog-name.blogspot.com/p/success.html',
  cancel: 'http://your-blog-name.blogspot.com/p/cancel.html'
},

email: 'you@yours.com',
The email used to receive transactions at Paypal. Use this default email address for testing purposes.

success: 'http://your-blog-name.blogspot.com/p/success.html',
The return URL after a successful transaction at Paypal.

cancel: 'http://your-blog-name.blogspot.com/p/cancel.html'
The return URL if transaction at Paypal is unsuccessful. This URL will automatically applied at Paypal checkout page Return to <store> link.

Non Supported Paypal Currencies

For non supported store currencies who wish to auto convert to USD at Paypal, add below variables inside MY_STORE setup:-

var MY_STORE = {

  ... {{ initial setup variables }}..

  paypal: {
    alt_currency: true,
    alt_currency_code: 'USD',
    alt_currency_rate: 3.35,
    cc_mail: false
  }
};

Variable Description

alt_currency_rate: 3.35,
The currency rate to USD from current store currency.

cc_mail: false
Allows to "quietly" send a copy to store email if value is true when users checks out to Paypal. This helps in attending abandon checkout at your store.

Disabling Paypal Checkout.

Add below CSS at Theme > Customize > Advanced > Add CSS

[data-checkout=paypal] { display:none!important; }

Then click Apply to Blog.

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.

The send email success page shares the same URL as Paypal checkout variables after form submissions.

debug: false,
To allow display of contents entered in from fields. Useful to check if data from form fields will be passed to email when Send Order button is clicked.

reload: 4000,
The timing in milliseconds the checkout page will redirect upon successful sent order mail.

Disabling Send Email Order Checkout.

Add below CSS at Theme > Customize > Advanced > Add CSS

[data-checkout=email] { display:none!important; }

Then click Apply to Blog.

At Layout, find Theme Plugins + Settings > Store + Discounts Settings and click Edit to view below variables:-

var MY_DISCOUNTS = {
  code : true,
  debug : false,
  key : 1234,
  duration : 1,
  limit : 5,
  min_totals: 10,
  max_totals: 1000,
  discount : 10
};

Variable Description

code : true,
Enable discount code session at checkout. Add false to disable.

debug : false,
Set to true allows to view current discount session settings at checkout page.

key : 1234,
The discount code to use.

duration : 1,
The duration in days the discount code will be expired.

limit : 5,
The max amount of item in cart to enable discount.

min_totals: 10,
The min totoals in cart to enable discounts.

max_totals: 1000,
The max totals in cart to allow for discounts

discount : 10
The amount in percent to allow discount. 10 = 10%.

Important:

This discount plugin is not a full proof way to provide a secured discount session at checkout at your store -- but it gets the job done by engaging repeating customers effectively.

Please provide clear information to your users on the conditions that may be applied when using discount codes. Be stern to your users if any suspicious or unusual actions had been taken.

Obfuscate your discount code variables above by using this tool so it will make it harder for the naked eye.

To edit alert text warnings please refer Checkout & Discount widget at Section 2.0

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 functions. Editing the input labels and/or placeholders will not.

Locating Theme Plug-in Libraries

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

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 after a successful checkout form submission.

To empty the shopping cart automatically, at any static/post 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.

Customizing Shopping Cart Text

Go to Layout > find Shopping Cart widget click Edit

Edit or add any text inside this widget will display at shopping cart pop over modal.

At Layout, find Theme Plugins + Settings > Image Slider & Featured Settings and click Edit to view below variables:-

var MY_PRODUCT_PAGE = {
  save_text : 'Save ',
  scale : 1.8,
  limit: 5,
  empty: 'fa fa-star-o',
  active: 'fa fa-star',
  heading: 'Related Products',
};

Related Posts

Displays a collection of published posts related to the posts displayed using the last Label the post is assigned to. To custom set the related post title:-

heading: 'Related Products',
The text displayed as headers for related posts.

Product Save Text

save_text : 'Save ',
Text displayed at saved indicator

Product Image Zoom

scale : 1.8,
The image zooming size/ratio when hovered upon.

Product Ratings

limit: 5,
The max rating for a product

empty: 'fa fa-star-o',
The Font Awesome icon class name for empty stars

active: 'fa fa-star',
The Font Awesome icon class name for filled stars.

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

404 Page Not Found

Error page has been assigned with this theme using Blogger's existing functions. To add text/HTML to error page go to Settings > Search Preference > under Errors and redirection section > click the Custom Page Not Found link > enter the text or HTML required.

Use Bootstrap3 class naming convention to 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 texts 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 custom meta tags, go to Theme > Edit HTML > find <head> & locate below mark-up:-

Twitter site and creator meta tags

<b:comment>Meta Types</b:comment>
<meta content='@irsahindesigns' name='twitter:site'/>
<meta content='@irsahindesigns' name='twitter:creator'/>

Replace highlighted orange to your Twitter handle.

Meta Product/Page Image Fallback

<b:comment>Meta Images: Add image URL at var=&quot;defaultimage&quot;...</b:comment>
value='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZzFo6TvmAeKTGYOzbVPkr1Iwh2wsX4nXXJBUCoMGHwjcDuEokjTzJFD_TlcDFdYl689IupuTxV1U3CoVtthvceR4aH-D6_PQL6jr74Jyn7GNeekPeiT-FNvCu2eJCgZ3nqtkZc4YGDg/s1600/placeholder-image.jpg&quot;'

Replace highlighted orange to your upload image. Preferred images uploaded via blogger post editor. Best image size 1200px in width & 900px in height at 4:3 image ratio.

Mobile Apps Icon

<b:comment>Icons: Add URL to image/icons at var=&quot;icon&quot;...</b:comment>
value='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRTyOHYkbli7j0Wms-WMxt5Zw2OhEbAiWhWeDxpRQkRxf8WoQTPq81qPCHzeHlTyItUO3RSqwmqt_KOcdcoATT8j37MsS6XA8gq3GjzAMrSJi-tedDLGJrmfrO2ZjpbbFI8aVtWy9NlY/s1600/blogr-amp-215.png&quot;'

Replace highlighted orange to your upload image. Preferred images uploaded via blogger post editor. Best icon size 215px in width & 215px in height at 1:1 image ratio.

Mobile Browser Bar Color

<b:comment>Mobile Browser: Add color in Hex at var=&quot;themecolor&quot;...</b:comment>
value='&quot;#FF5722&quot;'

Replace highlighted orange to your preferred HEX color code.

Search Engine Meta Data

<b:comment>Search Engine Meta Data: Add Store Contact Number...</b:comment>
<script type='application/ld+json'>
{
  ... {{ codes }} ...
  &quot;contactPoint&quot;: {
    &quot;@type&quot;: &quot;ContactPoint&quot;,
    &quot;telephone&quot;: &quot;+1-401-555-1212&quot;,
    &quot;contactType&quot;: &quot;customer service&quot;
  }
}
</script>

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.