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 Image

In 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 Text

To edit the page title & paragraphs, find below codes slightly at the bottom of template codes.

<!-- 404 page not found starts -->

  <div class='inset-shadow tint' id='error_page'>
    <div class='container'>
      <div class='row'>
        <div class='col-sm-12 text-center inverse'>
          <h1 class='inverse'>Ooops... We&#39;re Sorry</h1>
          <p>The page you&#39;re looking for must have been moved.</p>
          <p>Use our internal navigation links to assist your findings.</p><br/>
        </div>
      </div>
      <div class='row text-center'>
<form action='/search' id='blogrcart-search' method='get' role='search'>
          <div class='input-group input-group-lg col-sm-6 col-sm-offset-3'>
            <input class='form-control' name='q' placeholder='Search' type='search'/>
            <span class='input-group-btn'>
            <button class='btn btn-default' type='submit'><i class='fa fa-search fa-lg'/></button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>

<!-- 404 page not found ends -->

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.


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({
    checkout:{ type:"SendForm", method:"POST", extra_data: {
      firstname:document.getElementById("first_name").value,
      lastname:document.getElementById("last_name").value,
      email:document.getElementById("email").value,
      phone:document.getElementById("phone").value,
      address:document.getElementById("address").value,
      postcode:document.getElementById("postcode").value,
      comments:document.getElementById("message").value,
      }
    }
  });

Now, to use your own send order script with BlogrCart Closet Blogger store theme, change the codes as follows:-

  simpleCart({
    checkout:{
      type:"SendForm",
      method:"POST",
      myCheckout: true,
      url: "http://YOUR-URL-TO-SELF-HOSTED-SEND-ORDER-SCRIPT.php",
      extra_data: {
      firstname:document.getElementById("first_name").value,
      lastname:document.getElementById("last_name").value,
      email:document.getElementById("email").value,
      phone:document.getElementById("phone").value,
      address:document.getElementById("address").value,
      postcode:document.getElementById("postcode").value,
      comments:document.getElementById("message").value,
      }
    }
  });

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.
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 -->
<nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
  <div class='container'>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class='navbar-header'>
      <button class='navbar-toggle collapsed' data-target='#blogrcart-navbar' data-toggle='collapse' type='button'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'/>
        <span class='icon-bar'/>
        <span class='icon-bar'/>
      </button>
      <a class='navbar-brand' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
    </div>
  <div class='collapse navbar-collapse' id='blogrcart-navbar'>
      <ul class='nav navbar-nav'>
        <li class='active'><a href='#'>About Us <span class='sr-only'>(current)</span></a></li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Collection <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
     <li class='category-drop'>
              <b:section class='category1' id='category1' showaddelement='no'>
                <b:widget id='Label4' locked='false' title='Labels' type='Label'>
                  <b:includable id='main'>
          <b:if cond='data:display == &quot;list&quot;'>
            <b:loop values='data:labels' var='label'>
              <b:if cond='data:blog.url == data:label.url'>
                <a class='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
              </b:if>
            </b:loop>
            <b:else/>
            <b:loop values='data:labels' var='label'>
              <b:if cond='data:blog.url == data:label.url'>
                <a class='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
              </b:if>
             </b:loop>
          </b:if>
          <b:include name='quickedit'/>
      </b:includable>
                </b:widget>
              </b:section>
            </li>
            <li class='divider'/>
            <li><a href='/search/Label'>Show All Collection</a></li>
          </ul>
        </li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Category <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
     <li class='category-drop'>
              <b:section class='category2' id='category2' showaddelement='no'>
                <b:widget id='Label3' locked='false' title='Labels' type='Label'>
                  <b:includable id='main'>
          <b:if cond='data:display == &quot;list&quot;'>
            <b:loop values='data:labels' var='label'>
              <b:if cond='data:blog.url == data:label.url'>
                <a class='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
              </b:if>
            </b:loop>
            <b:else/>
            <b:loop values='data:labels' var='label'>
              <b:if cond='data:blog.url == data:label.url'>
                <a class='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
   </a>
              </b:if>
             </b:loop>
          </b:if>
          <b:include name='quickedit'/>
      </b:includable>
                </b:widget>
              </b:section>
            </li>
            <li class='divider'/>
            <li><a href='/search/Label'>Show All Categories</a></li>
          </ul>
        </li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Support <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
            <li><a href='#'>FAQ&#39;s</a></li>
            <li><a href='#'>Feedback</a></li>
            <li><a href='#'>Reviews</a></li>
            <li><a href='#'>Privacy Policy</a></li>
            <li><a href='#'>Terms &amp; Conditions</a></li>
            <li><a href='#'>Returns &amp; Refunds</a></li>
            <li><a href='#'>Delivery Status</a></li>
            <li class='divider'/>
            <li><a href='#'>Sitemap</a></li>
          </ul>
        </li>
        <li><a href='#'>Look Book</a></li>
        <li><a href='#'>Contact Us</a></li>
      </ul>
      <ul class='nav navbar-nav navbar-right'>
        <li><a data-target='#blogrcart-view' data-toggle='modal' href='#'><i class='fa fa-shopping-cart fa-lg'/>  <span class='simpleCart_quantity'/> in Cart</a></li>
        <li><a data-target='#blogrcart-search' data-toggle='modal' href='#'><i class='fa fa-search fa-lg'/></a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 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'>
  <img src='URL-TO-YOUR-UPLOADED-IMAGE' alt='' />
</a>

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'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Support <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
            <li><a href='#'>FAQ&#39;s</a></li>
            <li><a href='#'>Feedback</a></li>
            <li><a href='#'>Reviews</a></li>
            <li><a href='#'>Privacy Policy</a></li>
            <li><a href='#'>Terms &amp; Conditions</a></li>
            <li><a href='#'>Returns &amp; Refunds</a></li>
            <li><a href='#'>Delivery Status</a></li>
            <li class='divider'/>
            <li><a href='#'>Sitemap</a></li>
          </ul>
        </li>

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, 
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>
  //<![CDATA[
  var numProducts = 8; // nos of product image to render
  var showProductTitle = true; // set to true to display product title
  var productTitleLength = 35; // if showProductTitle, set the product title length
  var showProductImage = true; // set to true to display product images
  var image_size = 240; // if showProductImage, set the max product image size in pixels
  var display_button = true; // set to true to display button
  var button_text = 'View Now'; // if Display_button, set text to display for product button
  var showProductSummary = false; // set to true to display product summary
  var numProductSummaryChars = 120; // if showpostummary true, set nos of chars to display
  var showProductPrice = true;   // set to true to show product price
  var currency_after = false; // if showProductPrice, set to true to place currency after price
  var currency = "RM"; // if showProductPrice, set the currency
  var default_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg'; // default image if no image displayed
  //]]>
</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='&quot;/feeds/posts/default/-/Features?published&amp;alt=json-in-script&amp;callback=productDisplay&quot;' 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>
  //<![CDATA[
  var numProducts = 8; // nos of product image to render
  var showProductSummary = true; // set to true to display product summary
  var numProductSummaryChars = 120; // if showpostummary true, set nos of chars to display
  var default_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg'; // default image if no image displayed
  //]]>
</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>
//<![CDATA[
$(function(){
  $('.related-products').slick({
    dots: true,
    infinite: true, // Image transition in milliseconds
    speed: 300,
    slidesToShow: 6,   // Nos of products to show
    slidesToScroll: 2, // Nos of product to cycle
    autoplay: true,
    autoplaySpeed: 3000, // autoplay speed transition in milliseconds
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});
//]]>
</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.
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'>
  <div class='container'>

    ... lots of codes ...

  </div>
</nav>

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'>
  <div class='container'>

    ... lots of codes ...

  </div>
</div>

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>
//<![CDATA[
// Helper to switch <nav> tags due to Blogger Layout conflicts
$(document).ready(function(){
  var blogrCartDiv = $('div.navbar');
  var blogrCartNav = $('<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"></nav>');
  blogrCartDiv.before(blogrCartNav);
  blogrCartNav.append(blogrCartDiv.contents());
  blogrCartDiv.remove();
});
//]]>
</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.
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.
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
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
Remove to display comments // -->

Click Save Template and Preview the changes. 

Shop by Favourites

Subscribe Our Newsletter

Get the latest OFFERS right to your mail.