| BlogrCart Closet Blogger store theme comes with a 404 Page Not Found page pre-installed. It is a simple page complete with Page Not Found meta tags to help users when error in not finding a specific product (or page) at a Blogger store. Find below the customisations offered for the 404 Page Not Found pre-built with BlogrCart Closet theme. |
Customising Background ImageIn template editor find/* 404 Page Not Found */ inside the CSS stylesheets. Below is the example code used:-background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBBPe4uBytkb9G5SfQ-O9gOjbTk5_QjZjLkgGs47P3TzpJIub6domDl7wuoTvjDyMAj5AelTN6xSpeJspbwKVRjYqpBPHPjJER_qHiQ2bi213fJWld_ChFJkCygX4Z3NcSdoLFF34u_Y/s1600/blogr+template+free+theme+download-compressed.jpg); To customise, change the URL highlighted above to an uploaded image. Best image size would be 1600px X 1200 px at 4:3 image ratio. Best rendered for images below 100kb in file size. Editing Page TextTo edit the page title & paragraphs, find below codes slightly at the bottom of template codes.<!-- 404 page not found starts --> To edit the page titles edit at the cyan highlighted texts. To edit the page paragraphs. edit at the green highlighted texts. Click Save Template & preview your changes.![]() |
Customising 404 Page Not Found Pre-Installed Page
| By default BlogrCart Closet Blogger store theme comes with a built-in send order e-mail checkout & this service is made available for free, UNLIMITED sends e-mail orders & can be accessed 24/7. This service is maintained & updated to allow sending of emails on the "fly" without using any database or keeping any data. This will allow almost to instant sending of orders from any BlogrCart powered theme checkout form. Later, Blogger store owners can follow up with the sent orders via e-mail to their users or customers. In addition, various customization can be included for blog store owner e-mail settings to enhance user's checkout experience. The plug-in installed with BlogrCart Closet can also allow Blogger store users to use alternate send order scripts, pointing to where the scripts are hosted to. Find below, the easy set-ups to include a plug-in scipt to host your own send order mail functions for BlogrCart Closet Blogger theme:- |
Back-up your Blogger template (if required), at template editor, Jump to Widget HTML99 & find <b:includable id='cart-email-settings'> expand the code to view the details. Below is an example:- simpleCart({Now, to use your own send order script with BlogrCart Closet Blogger store theme, change the codes as follows:- simpleCart({The highlighted codes above are the additional functions to tell the plug-in that you want to send the checkout data to your own self hosted send order script. At myCheckout: true will tell the shopping cart plug-in to activate a custom checkout to point to a custom URL.At url: "http://YOUR-URL-TO-SELF-HOSTED-SEND-ORDER-SCRIPT.php" is telling the shopping cart plug-in to point to the new hosted script for further processing. |
How To Add Self Hosted Send Order Email Scipts
| BlogrCart Closet Blogger theme comes equipped with fixed (or floating) main navigation menu bar with drop links, un-obstructive pop-up modal search field, a pop-up modal view shopping cart & social icon links. In addition drop down Labels widget comes pre-installed to help up organise your store products categorisations. Below are indicators & tutorial on how to customise BlogCart Closet theme fixed/floating main navigation link bar with example codes & detail instructions for customisations. |
| $ 45.00 |
| Add to Cart |
In your template editor below are the codes for the floating/fixed main navigation bar powered by Bootstrap 3.0++ responsive framework.<!-- Start navigation --> <!-- End navigation --> |
To edit your main navigation brand text find below codes:-<a class='navbar-brand' expr:href='data:blog.homepageUrl'>Brand</a> Edit the brand text to your Blogger store name.To add an image logo that will display for any screen sizes at your main navigation edit above codes to look like so:- <a class ='navbar-brand' expr:href='data:blog.homepageUrl'> Using the default template navigation settings, to edit a single link (without drop downs) on the main navigation, find code below:- <li><a href='#'>Look Book</a></li><li><a href='#'>Contact Us</a></li> Replace the # (hash) to your internal page url & edit the text before or in between <a href='...'>Edit Text to Display</a>.To edit a drop down menu, below is the example codes:- <li class='dropdown'> Every <li> with a class of dropdown will automatically display the children links as a drop down menu. Refer the code structure above to apply the pre-installed styles by Bootstrap 3.0++ responsive framework that comes with the template.In addition adding a <li class='divider'/> will add a line in between your drop down links. |
The Labels widget is located within the main navigation for this template. To edit the links, go to any page and click the "Category" or "Collection" link to view the drop down links.To edit, click the "pencil" icon and select the Labels you want to display as a link, for a drop down menu. Make sure you have created the related Labels at your Blogger post editor to make it available here & displayed by the widget, |
Edit Bootstrap Navigation Links Drop Downs How To's
| BlogrCart Closet Blogger theme comes with 2 sets of responsive touch/mouse enabled image carousel powered by slick.js. The first set will be located on Product Pages, and the other on Gallery & Static Pages. This tutorial & code snippet explains the settings for the image carousel used in a blogger pages either than the Product Post pages. Both of the image carousel settings are using Google + Blogger API, a request callback to grab a blog content feed & display at a page. In order to minimize load & best optimisation practices, BlogrCart Closet theme only fetches the product image, price tag & product title.The image fetched are also scalable & very useful to set the width & height of displayed images within the carousel image container. Find below the location & settings built for the related image carousel in pages other than the Product Post pages below. |
| $ 25.00 |
| Add to Cart |
| PRO Version In Blogger template editor, find <div id='footer-top'> which is located half way to the bottom of template codes.Above this code is the settings for the image carousel. This functions is requesting Google+Blogger API blog feed. <script> The snippet above are self explanatory. Edit to your requirement. In addition, the images (& products) is displayed according to the respective Labels set for easy categorisation. Edit the Label tag at the highlighted code snippet below:-<script expr:src='"/feeds/posts/default/-/Features?published&alt=json-in-script&callback=productDisplay"' type='text/javascript'/>The text is case sensitive & spaces are replaced with %20. Edit to your preferred Label of choice. Example product post must be published with assigned Label in order to initiate the image carousel.Freemium Version Freemium theme has a much simplified code settings to see how this plug-in works & for test purposes. Below are the example settings codes:- <script> Edit to personal requirement. Editing the required product post to display by Labels is using the same features as above. |
| Due to the touch/swipe enabled image carousel responsive behaviour, users can set the image transition duration, auto pagination timing & the amount of products to display & cycle through. At template editor, use Jump To Widget, select HTML99 & find this code <b:includable id='carousel-settings'>, expand the code to view the detail settings.An example would look like so:- <script> Comments & indicators included. Edit to your requirement. The settings above shares the same settings for the related product image carousel located in Product Post pages. |
Edit & Customize Image Carousel in Gallery Pages
| When developing & designing Blogger themes, various issues will occur as most of the layout & widget functionalities has been customise to meet the new functionalities introduced for a Blogger theme. One of the most common issues would be at Blogger Layout upon arranging & saving widgets. This issue are commonly faced when downloading/installing free Blogger template due to poor coding practices. A common warning will appear - "An error occurred. Please refresh page and save again." when attempting to save.When integrating Bootstrap responsive mobile first framework with Blogger, certain tags & name classes will cause the above error to show up. A common tag & name class would be the <nav> & .navbar class name used by Bootstrap which is actually reserved for Blogger default Navbar widget.Find below some tricks users can use while integrating & using Bootstrap tags & class names to prevent thrown errors by Blogger dashboard Layout. |
| $ 45.00 |
| Add to Cart |
To prevent errors during saving widgets in Blogger Layout, the Bootstrap <nav> & navbar classname conflicts with Blogger's reserved navbar widget. When using this tag on a Blogger theme, an error will occur hence when rearranging widgets in Layout would not be saved.Here's a typical <nav> code structure used by Bootstrap 3.++ mobile first framework.<nav class='navbar navbar-inverse navbar- fixed -top' role='navigation'> To avoid errors by Blogger in Layout, change the <nav>...</nav> tags to <div>...</div>. Now the mark-up codes will look like so:-<div class='navbar navbar-inverse navbar-fixed-top' role='navigation'> Although this mark-up codes is not proper or semantic to indicate a navigation, at least now users can use the Layout & save their changes. You can change back using the <nav>...</nav> tags later, when all customisations have been completed since that you will not be arranging your widgets in Layout.If you are worried about semantic mark-up, then jump to the next section for a quick snippet adding JavaScript/jQuery to dynamically change your <div> to <nav> when you're page is loaded/displayed. |
This is a small snippet using JavaScript (jQuery) to dynamically change your <div> to using <nav> for a more semantic mark-up due to Blogger Layout thrown errors.This code should be used after/below the jQuery library Or even better at the bottom of your theme before/above the </body> tag.Note: This helper has already pre-installed in BlogrCart Closet Blogger theme, <script> Explainations First we are creating a variable for our target <div> & our new <nav> tag. Next we insert our new saved variables (<nav>) before the existing <div> at our page.Then we grab all the HTML contents (while preserving the mark-up) from our <div> & insert into our new <nav> variable. This will allow all mark-up usable from our previous <div>.Last, we delete/remove our previous <div> & leaving the new semantic mark-up (<nav>) since that we have already copied the entire contents in previous steps.The changes happens so quickly upon page display & right after the loaded javascript library. Now you can use & save in Layout without hard-coding the navigation everytime using Blogger Layout for editing. |
Error Saving Blogger Widget in Layout Using Bootstrap
| Definitely BlogrCart Closet Blogger theme is responsive. Powered by Bootstrap 3.++ responsive mobile first framework, image slider & carousel by slick.js, makes this e-commerce inspired Blogger template a one of its kind. To add, the shopping cart just works, either in personal computers or on mobile devices. Tested theme functionalities & display on major modern web browsers, this Blogger template is not a copy or an upgrade from an existing available Blogger template. Making you the exclusive users & owner of this unique Blogger template with shopping cart functions pre-installed. Find all what have in stored by BlogrCart Closet Blogger theme right here in demo pages, This demo page also acts as references & contents, since that it is also a Blog (per say). |
| $ 18.00 |
| Add to Cart |
This is tab-section-1 and uses the data-target="#tab-section-1" link labelled Tab Nav 2 to open/expand/view. Edit the text within this box/table in Blogger editor easily & this panel automatically displays as a hidden tabbed & open/displays once the link is clicked.This section is very useful in providing informational details for a particular product. Use this as your standard/repeated product size & dimensions section. Adding a table within this section is not schematic & will break the product display. |
This is tab-section-2 and uses the data-target="#tab-section-2" link labelled Tab Nav 2 to open/expand/view. Edit the text within this box/table in Blogger editor easily & this panel automatically displays as a hidden tabbed & open/displays once the link is clicked.This section is very useful in providing special features for a particular product & adding more information to users . Use this as your standard/repeated information section. Adding a table within this section is not schematic & will break the product display. |
This is tab-section-3 and uses the data-target="#tab-section-3" link labelled Tab Nav 3 to open/expand/view. Edit the text within this box/table in Blogger editor easily & this panel automatically displays as a hidden tabbed & open/displays once the link is clicked.This section is very useful in providing special features for a particular product & adding more information to users . Use this as your standard/repeated information section. Adding a table within this section is not schematic & will break the product display. |
Is BlogrCart E-commerce Blogger Template Resonsive?
| Upon initial BlogrCart Closet Blogger theme install, Blogger comments system was deliberately hidden/not displayed from the product post pages. This was based on request by our BlogrCart users to remove the comments section on upcoming template installs. Users can easily display the default Blogger comments system since that the designers had only commented out the Blogger comments codes. BlogrCart Closet Blogger theme comes pre-installed with default comments, equipped with the threaded comments layout. Below is the tutorial to display the default Blogger comment system on product posts. For Freemium theme users, the Blogger comments system is installed by default. |
| $ 45.00 |
| Add to Cart |
Before activating the default Comments system in template editor, Blogger dashboard, Settings, Post and Comments, at Comments Display, select either than Hide as the comment setting.To activate/display the default threaded comments, go to template editor, jump to Blog1 widget and find <b:includable id='main' var='top'> , expand the code to view the function details.Slightly below, remove the highlighted codes (shown below) to re-install/display the threaded comments at product posts pages. Below are the example code in BlogrCart template.<!-- // Remove to display comments Click Save Template and Preview the changes. |







