Previous
Theme Personalization & Settings
5.0 Custom Widgets Personalization
5.1 LinkList Widget Used for Social Icons
| Location | Custom LinkList Widget | |
| Parameter (Name Field) | Values to Set (Links Field) | Description |
|---|---|---|
| Display Social Icons & Adding Links This custom widget is using Font Awesome stylesheets to display the available icons. In any widget displaying a title Social Icons * , to display the related social icons is by entering below values:- | ||
| varies | url to your social network page | To display an icon use, Font Awesome's mark-up to render desired icon to display at your store pages. For example if you want to display a Facebook icon, add in facebook at the Site Name field & add in the url to your social network page.You can enlarge the icon size by adding keyword names fa-lg (2x font size), fa-3x (3x to font size) & fa-4x (4x to font-size). Below is an example:-Adding an enlarged Twitter icon 2x of font size at Site Name field:- twitter fa-lgAdding an enlarged Instagram icon 4x of font size at Site Name field:- instagram fa-4xThe keyword(s) used to display the icons is case sensitive & references can be viewed at the tutorial video & Font Awesome's web pages. No errors will occur when wrongly typed keyword values. However, the icons will not display if keyword entered occurred. Default: null |
5.2 LinkList widget settings for Dropdown Menu Navigation
Drop Down Navigation
The widgets assigned will automatically build navigational links & drop down links for your store. Located at
Dropdown Menu Section.Tutorial video is provided to show how to build links & drop down links, re-shuffling the links & which positions the widget is dedicated for.
If a text is entered under the
Site Name field, will display as the link text at the navigation section.However by including a
_ (underscore) following the link text, will create a drop down link automatically. With condition that this specified link name (with underscore), is situated under a link name (without an underscore) & depends on the positioning.The
underscore text will not display at the drop down navigation.If a
url is entered at Site Url field, the text will create a link to your Site Name. If none entered the link will not display.Rearrange the links anytime using the
arrows. The link name with the _ (underscore) if stacked/grouped together will output as a grouped drop down links.Example how aparent link and drop link is made:-
Video tutorial is provided.
5.3 HTML Widget for Info Section
Located belowBlog1 widget at Dashboard > Layout text entered here will only display at product post footer section.
5.4 HTML Widget for Delivery Info
Located belowBlog1 widget at Dashboard > Layout text entered here will only display at product post footer section.
6.0 How To's
How to include default image (if none is found)?
Add fallback image if product or blog page image is not found.
Add fallback image if product or blog page image is not found.
6.1 How to include default image (if none is found)?
The meta tags which comes with BlogrCart themes are very powerful, especially in helping to expose your product & pages in search engine results. These tags are used by social media services to retrieve the necessary information.
By default we have included
fallback image, if however an image could not be found from your page when sharing to social networks etc. You can customize or add in your own image to use as fallback image if an image could not be retrieved.Go to
Template Editor > backup if necessary > Now find below codes (highlighted yellow) & replace it to your uploaded image. Use Ctrl+F & type the keyword at the search bar (inside code editor) > press enter. It will lead you to the specific codekeyword:
rel='image_src'<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwqOHG0FNN3vwW_MVXFBy1Ig6Z2KNUunrsQAr1hVgGknbpHtomLY4gNP6Lo4MTlFMBrjfIA44e3lQ9X22i1oiYI7xyxm5huKBWx2Vo1RjiNmwplQ-LenG5CrtYf4jqY8kB2AOAdk4NlM/s1600/placeholder-image.jpg' property='og:image' rel='image_src'/>
keyword:
placeholder-image.jpg<b:else/><img class='item_thumb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwqOHG0FNN3vwW_MVXFBy1Ig6Z2KNUunrsQAr1hVgGknbpHtomLY4gNP6Lo4MTlFMBrjfIA44e3lQ9X22i1oiYI7xyxm5huKBWx2Vo1RjiNmwplQ-LenG5CrtYf4jqY8kB2AOAdk4NlM/s1600/placeholder-image.jpg'/></b:if>
keyword:
placeholder-image.jpg<img class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwqOHG0FNN3vwW_MVXFBy1Ig6Z2KNUunrsQAr1hVgGknbpHtomLY4gNP6Lo4MTlFMBrjfIA44e3lQ9X22i1oiYI7xyxm5huKBWx2Vo1RjiNmwplQ-LenG5CrtYf4jqY8kB2AOAdk4NlM/s1600/placeholder-image.jpg'/>
How to include mobile Apps icons for Android & IOS devices?
Add a custom mobile Apps icon for popular mobile devices.
Add a custom mobile Apps icon for popular mobile devices.
6.2 How to include Mobile apps web icons?
BlogrCart themes also comes with mobile apps icons which will display on mobile devices if a user bookmark your Blogger store. The icons will display at user's smart phone Home Screen if saved or bookmarked weather on IOS or Android powered phones.
In download files, we have included sample icons which you can use to find out the sizes required. To include your own Apps icons, here are the sizes required:-
For Android phones (sizes in pixels):-
sizes='128x128'- for older Android phonessizes='192x192'- for newer Android phones
For IOS ( sizes in pixels):-
sizes='76x76'sizes='120x120'sizes='152x152'sizes='215x215'- for Retina display
To replace to your own icon, go to
Template Editor > backup if necessary > <!-- IOS and ANDROID APPS ICON IMAGES --> replace the href link to your uploaded icon. Make sure the correct size is included as indicated at the mark-up codes.Below is an example to replace an IOS icon (highlighted yellow) with
76x76 pixels in image size:-<!-- IOS and ANDROID APPS ICON IMAGES -->
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCZVcsjBJMwGDu7y40DViHxPKBLEs1spZn0cmR6Jg11dhJ-aKsLIJh5ajrFZiRG3YfjAop0gSxdtIi9oUaaceQYQ55nYtrlcDx7adPrjDZ3GU2BWmxPUYy_wjQiBeZLVvlr2B63F1_R-W/s1600/apple-touch-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'/>
How to change fonts & background colors?
Use Template Designer to pick & select your preferred fonts, color & background colors.
Use Template Designer to pick & select your preferred fonts, color & background colors.
6.3 How to change fonts & background colors?
Customize this BlogrCart theme is made easy by using
Blogger Template Designer. Go to Template > click the Customize button > at Template Designer UI > click the Advance link.There is more than 20 custom changes for this BlogrCart theme which you can choose to customize accordingly. Live changes can be viewed at Blogger Template Designer itself.
To revert back to theme default state, for each changes done, click the
Clear advanced changes to body background color .Click the
Apply to Blog to save your edits. Preview the changes.
How activate Blogger Adsense Ads Placement?
Activate Adsense ads placement in posts & using Blogger native ads activation.
Activate Adsense ads placement in posts & using Blogger native ads activation.
6.4 How to activate Adsense for Blogger?
This BlogrCart theme comes with Adsense ads placement for blog posts which can be activated from your Blogger dashboard Blog widget.
Due to un-popular response from users for native Blogger ads placement (of course as a shop you'll probably like to put up your own ads right?) as part of our theme integration, we have included the functionality with BlogrCart themes.
If users require (or want) to use Blogger native Adsense placements in posts, you can activate by
omitting / deleting a few lines (which is marked) in your template.Go to
Template > Edit HTML > Backup if necessary > click Jump to widget > select Blog1. At Blog1 widget codes > expand <b:includable id="main"> to view codes as below:-<!-- // remove this line to use Adsense <data:defaultAdStart/> remove this line to use Adsense -->
Remove/delete each line as indicated as highlighted above. There should be 8 lines to be deleted.After doing so, click
Save Template and view the changes.6.5 How to de-activate Paypal checkout?
De-activating Paypal checkout is made easy by removing your
paypal_email parameter at Store Config.At
Dashboard > Layout > find Store Config widget> click Edit.Upon pop up overlay > find
paypal_email (your parameter) located above the Save button & click Delete link.Click
Save > once widget is saved > click Save Arrangements & Preview your theme checkout page changes.Note: All other settings related with Paypal checkout will be ignored.
How to deactivate send email chekout?
Not using send order email notification at checkout? Easily deactivate it!
Not using send order email notification at checkout? Easily deactivate it!
6.6 How to de-activate send email notification checkout?
De-activating send email notification checkout is made easy by removing your
my_store_email , my_ store_name & my_sbusiness_name parameter from/at Theme Config widget.At
Dashboard > Layout > find Theme Config widget> click Edit.Upon pop up overlay > find
my_store_email , my_store_name & my_business_name (your parameters) located above the Save button & click Delete link.Click
Save > once widget is saved > click Save Arrangements & Preview your theme checkout page changes.Note: All other settings related with send email checkout will be ignored.
How to deactivate both checout options?
Need to update your store live? Changing some store settings while users still browsing your site?
Need to update your store live? Changing some store settings while users still browsing your site?
6.7 How to temporary de-activate both my send order notification & Paypal checkout?
This BlogrCart theme allows you to set a maintenance mode which when activated, you can update your Blogger store settings live without disturbing visitors browsing your blogger store.
Go to
Dashboard > find Store Config widget > click the Edit link.Upon pop up widget overlay > add parameter
store_maintenance at Link name field & set the value to true. A maintenance text alert notification will display on every pages to notify your users that your store s currently under maintenance work. You can customize the text displayed by adding parameter
store_maintenance_text ( at Link Name field) & at LinkUrl field, add the text you required. Click Save to save your settings & click Save Arrangements to update your theme.This will disable/or put the Add to cart button will become more transparent and the dropdown view shopping cart with checkout buttons will be hidden.
If you require to update or test your send order page, you can access your
Dashboard > Pages > find your Send Order page > click View to view the page or click Edit
How to empty cart after successful order submission?
Need to empty/clear the shopping cart after users orders? Find out how...
Need to empty/clear the shopping cart after users orders? Find out how...
6.8 How to empty or clear the shopping cart after users submitted orders?
This BlogrCart theme comes with the shopping cart empty helper which helps to clear the cart once successfully sending orders via Paypal or the email notification form.
Since that after a successful submission, users are returned to your success page, adding a pre-defined tag will help you clear the shopping cart automatically once users visits this page.
Go to your
Dashboard > Pages > find your Success page > once opened click the HTML button.Add this tag to notify the theme to clear or empty the shopping cart
<div class="empty-shopping-cart"></div>
After doing so, click
Compose and click Update to save your Page changes.
This BlogrCart theme also comes with troubleshooting helpers. If you feel that the configurations set is not functioning as expected, press F12 on your computer keyboard and view your browser
Console Log. Have a question or having some trouble?
Send it to us using this theme support page here. Our team members would gladly assist you.[*] Unless otherwise stated in theme/template listings.