Last Blogger Store You Need

Easy to use e-commerce inspired Blogger theme.

Theme Features

Responsive & Mobile Friendly

Bootstrap 3.++ mobile first framework for Blogger.

What Is It?

Enhanced Product Image Display

Responsive image slider & carousel by slick.js.

Carousel Options

Quick Start On-Line Store Set-ups

Easy install, documented, customize & start selling.

Tutorials

Welcome to May in dong phuc 247 Theme.

We make Optimised Conversion Blogger Store Themes & Templates.

Xmas Specials

Sale

Up to 20% Discounts

Holiday Delights

Offers

200+ Items Up for Grabs

Free Gifts

Free

Limited time only.

Shop by Latest

With the flexibility of BlogrCart Closet responsive mobile 1st Blogger store theme, blogger store owners can easily include an original (or alternative) price at product post or display it on the product gallery pages. Using this feature, blogger store owners can enhance their products offered to their users & hopefully (but surely) build more sales lead.

Find below the necessary addition(s) to allow to display an "Original Price" (the alternative price) text/tag which Blogger store owners can edit for each products at their Blogger store.

A working example page using an "Original Price" tag/text is located here at http://blogrcart-closet.blogspot.com/2014/12/adding-highlighted-paragraphs-using.html

Note: In order to display the alternative price tag for previous Product Post pages, blogger owners are required to edit each post manually. Use guideline below as reference.


Here is the step-by-step guide to easily install an alternative price aka "Original Price" at BlogrCart Closet responsive Blogger store theme.

Insert the Alternative "Original Price" Editing Box

Go to Settings > Post and Comments > and at Post Template find below codes:-

<tr> 
  <td class="item_price">$ 45.00</td>
</tr>

Now edit the above codes so it should look like below:-

<tr class="custom_price">
  <td class="item_price">$ 25.00</td> 
</tr> 
<tr class="custom_price">
  <td class="label_original_price">
    <span class="label_original">Original Price</span> $ 145.00
  </td>
</tr>

And click Save Settings to save your changes. The highlighted in yellow are the additional codes which was added.

To view the changes, Click the Pencil button to start a New Post and you can view another price below the product price box is included. Edit the required text/integer after "Original Price".

You can edit the "Original Price" text to whatever text you want to display. But always make sure that the "Original Price" text is surrounded within a <span class="label_original">... </span> tag.

Adding the CSS specific Styles

In order to let the "Original Price" to display accordingly to your new setup, add below codes BEFORE/ABOVE </head> in your Template Editor:-

<!-- custom index post styles -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static&quot;'>
<style>
.gallery-product { min-height:400px; }
.product-description { bottom:-20px; }
.label_original_wrapper { width:100%; }
.custom_price { padding-right:20px; display:inline-block!important; *display:inline!important; width:auto!important; }
.label_original_price { display:inline-block; *display:inline; text-decoration: line-through; color:red; }
span.label_original { display:inline-block!important; border:0 none!important; height:1px!important; display:none!important; }
</style>
</b:if>
</b:if>

<!-- custom product post styles -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.label_original_price, span.label_original { text-decoration: line-through; color:red; }
.custom_price { padding-right:20px; display:inline-block!important; *display:inline!important; width:auto!important; }
</style>
</b:if>
</head> <!-- YOUR REFERENCE -->

Click Save Template and view your changes. Of course, there will be none, but once you have start editing the new Auto Post Template with the Added codes above, then the "Original Price" will display in both Product Gallery & Product Post.

Some Quick Explanations

The first part (highlighted orange) are conditional codes for adding styles to the "Original Price" tag at gallery pages & the later (in highlighted cyan) are conditional codes to add styles only at product post pages.

Show Original (Alternative) Price Tutorial E-commence Blogger Store

Đọc thêm »
The send order e-mail & Paypal checkout comes pre-installed with BlogrCart template. The customisation functions have been grouped together at bottom of theme/template codes to optimise page display &  current webpage best practices (loading JavaScript/jQuery after all HTML mark-ups where possible).

Below is the full tutorial to edit & customize the checkout features for BlogrCart Closet Blogger theme. This step-by-step guide will show the IMPORTANT parts to edit according to blogger store owners personal preferences.




1.0 Download &Install Template

Download FREE Version here Download FREEMIUM VERSION

Download PRO version here Download PRO VERSION [FULL]

UNZIP & upload using Blogger dashboard > Template > Backup/Restore > at Upload a template from a file on your hard drive. > click the Choose File button. Once success, preview your new template.

To allow this theme display correctly in mobile screens, turn off Blogger default mobile theme by going to Settings, Mobile section, click the Gear button & select No. Show desktop template on mobile devices. , Then click Save.

More options (PRO Themes) to allow responsive image gallery pop over toggling turn off Blogger default zoom at Settings > Basic > Turn Off/Don't Show image zoom.

2.0 Install Pre-made Pages

For BlogrCart Closet PRO users, the template files comes with license, template file & theme Pages. PRO users can build quickly sample Product Pages including the Send Order page, Success page & Error handling Page. In addition this tutorial is also included for references & future usages.

Upload the file title BlogrCart-Closet-PAGES-MASTER-V-1-0.xml at Settings, Other & Import Blog link, find the file in your computer & upload accordingly making sure the Automatically publish all imported posts and pages is ticked/selected.

3.0 Install Pages

3.1 Send Order Page

PRO users can skip this section.

Go to Pages > Add a Page and at the Title field type in Send Order & click Save. Then click the HTML tab (far left at editor) and copy paste below codes to the editor body.

<div class="row">
  <div class="col-sm-4 col-md-push-8">
    <div class="panel panel-default" id="summary">
      <div class="panel-heading">
        <h4>Order Summary</h4>
      </div>
      <div class="panel-body">
        <small>Below is your order summary &amp; totals.</small>
      </div>
      <div class="table-responsive">
        <table class="table">
        <tbody>
          <tr><th>Description</th><th>Amount</th></tr>
          <tr><td>Quantity in Cart</td><td><span class="simpleCart_quantity"></span></td></tr>
          <tr><td>Amount</td><td><span class="simpleCart_total"></span></td></tr>
          <tr><td>Tax</td><td><span class="simpleCart_tax"></span></td></tr>
          <tr><td>Shipping/Delivery</td><td><span class="simpleCart_shipping"></span></td></tr>
          </tbody>
       </table>
    </div>
    <div class="panel-footer">
    Total Orders for Today: <strong><span class="simpleCart_grandTotal"></span></strong>
    </div>
  </div>
</div> <!-- //end col-sm-4 -->
<div class="col-sm-8 col-md-pull-4">
  <form action="" id="contact" method="post" name="contact" role="form">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="btn btn-default pull-right" data-target="#blogrcart-view-modal" data-toggle="modal" href="javascript:;"><i class="fa fa-shopping-cart"></i> View Shopping Cart</a>
          <h3 style="margin: 0;">Send in Orders</h3>
          <small>Details submitted here will not be published.</small>
      </div>
      <div class="panel-body">
        <div class="form-group ">
           <label for="first_name">First Name</label>
           <input class="form-control" id="first_name" name="first_name" placeholder="Required" type="text" />        </div>
        <div class="form-group">
          <label for="last_name">Last Name</label>
          <input class="form-control" id="last_name" name="last_name" placeholder="Required" type="text" />
        </div>
        <div class="form-group">
          <label for="email">Your E-mail</label>
          <input class="form-control" id="email" name="email" placeholder="Required" type="email" />
        </div>
        <div class="form-group">
          <label for="phone">Phone @ H/P</label>
          <input class="form-control" id="phone" name="phone" placeholder="Required" type="tel" />        </div>
        <div class="form-group">
          <label for="address">Delivery Address</label>
          <textarea class="form-control" id="address" name="address" placeholder="Required" rows="5"></textarea>
        </div>
        <div class="form-group">
          <label for="postcode">Postal Code</label>
          <input class="form-control" id="postcode" name="postcode" type="text" />
        </div>
        <div class="form-group">
          <label for="message">Your Message</label>
          <textarea class="form-control" id="message" name="message" placeholder="Optional" rows="5"></textarea>
          <span class="helper-block text-info small">Please include additional messages to us here.</span>
        </div>
        <div class="well well-sm">
          A copy of your order details will be sent to you via e-mail. Please check your email inbox upon success submissions. Thank You.
        </div>
      </div>
      <div class="panel-footer text-center">
        <button class="btn btn-default" id="send-order" type="submit">Send Order</button>
      </div>
    </div>
  </form> <!-- //end form -->
</div> <!-- //end col-sm-8 -->
<div class="clearfix"></div>
</div> <!-- //end row -->

Click the Compose tab and click Save. At the Compose page editor this page will display awkwardly, but since it is using Bootstrap classes & styles, automatically the form fields & texts will align accordingly like at the demo page.

Once satisfied, click the Publish Page button. View this page by clicking the View link underneath this Page link. Grab the full URL of this page at your browser bar. An example would look like so:-

http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html

Save this URL at your favourite text editor for template settings further below.

3.1 Install Success Page

PRO users can skip this section

Go to Pages > Add a Page and at the Title field type in Success & click Save. Edit the page body as this page will be the return page from success orders using the send order form functionality checkout. Click Publish Page & view this page full URL at your browser bar by clicking the View link. An example URL will look like so:-

http://YOUR-BLOG-NAME.blogspot.com/p/success.html

Save this URL at your favourite text editor.

3.2 Install Error Page

PRO users can skip this section

Go to Pages > click Add a Page & at the Title field type in Error & click Save. Edit the page body as this page will be the error handling page upon users non delivered orders using the send order form functionality checkout. Click Publish Page & view this page full URL at your browser bar by clicking the View link. An example URL will look like so:-

http://YOUR-BLOG-NAME.blogspot.com/p/success.html

Save this URL at your favourite text editor.

4.0 Install Auto Post Template

PRO users can skip this section. Advance Auto Product Post Template included in theme download. Use & install.

A fully customised auto post template comes pre-included with BlogrCart template. This is important as most of the shopping cart functionalities & also how the product displays depends on this template.

At Blogger Dashboard > Settings > Post & Comments > Post Template > click the Add link to insert the codes below:-

<table border="1" cellpadding="5" class="product-description" rules="all"><tbody>
<tr class="label-description">
    <td class="item_description">This is the short description for any product post. Write a short description for the product here in not less than 300 words. This will create a unique content for your product hence giving the extra boost from search engine results. Edit this table for short description section only. Use Blogger "Remove Formatting" functions to remove copied &amp; paste texts alignment, fonts, text colours &amp; text styles.<br />
<br />
Use table #1 for product Main Image.<br />
Use table #2 for product Thumbnail Images.<br />
Use table #3 for product details &amp; other specifications.<br />
Use "Jump Break" AFTER table #1 to prevent Auto Pagination. By default the "Jump Break has been assigned.<br />
<br />
Edit &amp; remove sample texts if not in use.<br />
Option size &amp; colour only available on PRO versions. Get 1 now!</td>
</tr>
<tr>
    <td class="item_price">$ 45.00</td>
</tr>
<tr>
    <td class="label-quantity"><input class="form-control item_quantity" size="2" type="text" value="1" />&nbsp;&nbsp;
<a class="btn btn-default item_add btn-lg" href="javascript:;">Add to Cart</a></td>
</tr>
</tbody></table>
<table border="1" cellpadding="5" class="product-image" rules="all">  <tbody>
<tr>
    <td class="thumb_image"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yt6X8Y2YDShx4Z4aTsDslQicCWCvY7cR5fyXKyXusxnRYoL6MGp3IGuY7Tor_ZuEobeH-ajzVXmI5c24iVXPasj090jHNUNF-xxbMH39zIdqhrdHwJmVYedwlxr4FpdGCiPm9wxmfWc/s1600/GrassGreen_W_F.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yt6X8Y2YDShx4Z4aTsDslQicCWCvY7cR5fyXKyXusxnRYoL6MGp3IGuY7Tor_ZuEobeH-ajzVXmI5c24iVXPasj090jHNUNF-xxbMH39zIdqhrdHwJmVYedwlxr4FpdGCiPm9wxmfWc/s1600/GrassGreen_W_F.jpg" height="320" width="197" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</td></tr>
</tbody></table>
<!--more--><div class="product-detail product-tabs">
<ul class="nav nav-tabs text-center">
<li class="active" role="presentation"><a href="javascript:;" role="tab">
    Product Details</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<table border="1" cellpadding="5" class="product-thumbnail" rules="all"><tbody>
<tr><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUh9P_iJz99aaZ4q4ZaJAfP2np2zeH01io0H8jn9W_nqzDpgGvaCDHv4OP34fZF45FJkWmSuYgYLQ-aIYyhEpwfmOiqnVVUf1Z-1ad5-BRHSYF-N3UIGKDPJPyd1S6s-ibF9siPQBH7E/s1600/GrassGreen_W_B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUh9P_iJz99aaZ4q4ZaJAfP2np2zeH01io0H8jn9W_nqzDpgGvaCDHv4OP34fZF45FJkWmSuYgYLQ-aIYyhEpwfmOiqnVVUf1Z-1ad5-BRHSYF-N3UIGKDPJPyd1S6s-ibF9siPQBH7E/s1600/GrassGreen_W_B.jpg" height="200" width="112" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
</td></tr>
</tbody></table>
<table border="1" cellpadding="5" class="product-detail-section" rules="all"><tbody>
<tr>
<td>This is a&nbsp;<code>tab-section</code>&nbsp;Edit the text within this box/table in Blogger editor easily &amp; this panel automatically displays &amp; styled automatically. Use Blogger "Remove Formatting" functions to remove copied &amp; paste texts alignment, fonts, text colours &amp; text styles.<br />
<br />
This section is very useful in providing informational details for a particular product. Use this as your standard/repeated product size &amp; dimensions section. Adding a table within this section is not semantic &amp; will break the product display layout styles.</td>
</tr>
</tbody></table>
</div>
</div>
</div>

The auto template comes with a price field, a product thumbnail field, supporting product image field, a description section & a detail section to insert relevant contents for your Product Post. Edit the contents during posting your product. Example product images & thumbnail images are included for reference. Please use as your guide.

Note: The tab functionalities, select by colour, select by size is included in PRO template file download.  PRO users have the full codes with custom functions used with the advance auto post template.

Click Save Settings. Preview the example Auto Post Template by clicking the Pancil icon to start a Post.

5.0 Customising Shopping Cart Functions

Plug-in Location

All shopping cart functionalities is located at HTML99 widget unless otherwise stated. Expand by clicking the small black triangle arrow next to the relevant codes required to view the detail settings.

5.1 Shopping Cart Currency

Expand <b:includable id='cart-currency-settings'> & view the detail settings. Information has been included in template for reference.

Use short codes (highlighted) for available pre-set currencies provided with shopping cart plug-in. Below are the example codes:-

<script>
//<![CDATA[
simpleCart.currency('USD');
/*
* Available pre-set currencies
* Currencies supported by Paypal 
* Ref: https://developer.paypal.com/docs/classic/api/currency_codes/
code: "USD" "US Dollar",
code: "AUD", "Australian Dollar",
code: "BRL", "Brazilian Real",
code: "CAD", "Canadian Dollar",
code: "CZK", "Czech Koruna",
code: "DKK", "Danish Krone",
code: "EUR", "Euro",
code: "HKD", "Hong Kong Dollar",
code: "HUF", "Hungarian Forint",
code: "ILS", "Israeli New Sheqel",
code: "JPY", "Japanese Yen",
code: "MYR", "Ringgit Malaysia",
code: "MXN", "Mexican Peso",
code: "NOK", "Norwegian Krone",
code: "NZD", "New Zealand Dollar",
code: "PHP", "Philipine Peso",
code: "PLN", "Polish Zloty",
code: "GBP", "Pound Sterling",
code: "RUB", "Russian Ruble",
code: "SGD", "Singapore Dollar",
code: "SEK", "Swedish Krona",
code: "CHF", "Swiss Franc",
code: "TWD", "Taiwan New Dolar",
code: "THB", "Thai Baht",
code: "TUR", "Turkish Lira",
*
* Currencies not supported by Paypal but included as pre-sets
*
code: "BTC", "Bitcoin",
code: "INR", "India Rupee",
code: "IDR", "Indonesia Rupiah",
code: "NGN", "Nigeria Naira",
code: "VND", "Vietnam Dong",
code: "PKR", "Pakistan Rupee",
********************************
//]]>
</script>

If the currency of choice is not listed as pre-sets, or blogger store owners require currency customizations, replace the short codes above and use the built-in currency customisations as follows.:-

<script>
//<![CDATA[
simpleCart.currency({
  code: "USD",
  name: "US Dollar",
  symbol: "$ ",
  delimiter: ",",
  decimal: ".",
  after: false,
  accuracy: 2
});
//]]>
</script>

The example above is to set USD as currency code along with the currency detail preferences.

5.2 Shopping Cart Email Settings

Important: The saved URL from Section 3.2, Section 3.3 is required here. Insert the URL's based on the default settings provided. Leave/remove the http:// pattern when editing.

Expand <b:includable id='cart-email-settings'> & view the detail settings.

Information & guides has been included for your customization. Follow the exact default "pattern" in order to make the send order functions work properly.

5.3 Shopping Cart Paypal Settings

Expand <b:includable id='cart-paypal-settings'> & view the detail settings.

Information & guides has been included for references. Follow the exact default patterns for customizations.

5.4 Shopping Cart Shipping Settings

Expand <b:includable id='cart-shipping-settings'> & view the detail settings.

Information & guides has been included for references. In addition, users can set the shipping settings chich will be calculated by:-

  1. Shipping/delivery based on percentage of items in cart
  2. Shipping/delivery based on quantity of items in cart
  3. A fixed shipping/delivery per item in cart.

By default, a fixed shipping/delivery price is activated at USD5/item

5.5 Shopping Cart Tax Settings

Expand <b:includable id='cart-tax-settings'> & view the detail settings.

Information & guides has been included for references. The tax rate is calculated based on the items & delivery charges applies.

Set the percentage of the tax here. By default the template is using 5% or 0.05 percent from shopping cart totals.

6.0 Additional Set Up

This template comes with responsive modal pop-up to view the cart summary. The shopping cart can be viewed & accessed in any page using the link located at the floating/fixed main navigation bar.

To edit the Send Order button to your Send Order page at HTML99 widget find <b:includable id='modal-cart'> & expand the code to view the mark-up.

Find below codes to edit to your Send Order page

<a class='btn btn-danger small text-center' href='http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html'>
   <i class='fa fa-envelope'/>  Send Order
</a>

Change http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html to the Send Order page URL you have saved in Section 3.1. Click Save Template & test your changes.

End of Tutorial

Find all about theme customisations, code snippets here at demo pages. 

Tutorial & Guide Install BlogrCart Closet Theme

Đọc thêm »
You do not have too! The image pop over zoom effect actually does it by itself. The built-in functions installed with BlogrCart Closet theme replaces the "tired" image zoom effect brought in by Blogger (as default) since that it breaks your product images upon using on smaller screen sizes.

So make sure the default zoom functions is de-activated in your Blogger dashboard Settings.

Basically the add on functions introduced for this theme  is generated by Bootstrap 3 core plug-ins. The designers added additional custom functions in making sure the theme product images are loading correctly while using the pop over image zoom effect & some toggling functionalities.

Find what images the built-in responsive zoom functions compiles for the pop over image zoom effect for a product post at below section.


Offer
The responsive image zoom functions gathers images from your main product image (table #2) and images you have inserted in the add-in product thumbnail images (table #3). All images inserted in this table will output with the zoom initialization.

Test it here, the main product image (our t-shirt model facing front) & the supporting thumbnail images (the no image available & t-shirt model facing back) will be shown when togling the images using the responsive zoom functions.

Users do not have to require to arrange the images as by default the theme will automatically re-arrange the images accordingly for best product presentation.

How to Edit the Pop Over Image Toggle Zoom Effect

Đọc thêm »
BlogrCart Closet PRO Blogger store theme comes with an advance auto post template to ease editing before publishing a product listing. It also comes with the select options by size and color for users to use with the product selection.

By defaul 2 type of options is pre-included with the auto post template & theme owners can customize on which one to use or omit for a product.

Find below the details on how to customise the select options pre-built for blogrCart Closet PRO Blogger store theme.


Sold Out
The advance auto post template comes with a select by size & color options for a dedicated product post. Below is an example:-

For a select by colour options:-

<select class="some_class">
  <option value="n/a">- Select Colour -</option>
  <option value="Blue">Blue</option>
  <option value="White">White</option>
  <option value="Black">Black</option>
</select>

For a select by size

<select class="some_class">
  <option value="n/a">- Select Size-</option>
  <option value="Size S">Size S</option>
  <option value="Size M">Size M</option>
  <option value="Size L">Size L</option>
</select>

Editing Select Options

To edit the select option, edit the value you want to display in cart at highlighted in cyan & the same value to display in select box drop down edit in yellow.

The values highlighted in red is reserved & serves as helpers for users select option during product display.

Adding More Select Options

To add in more select options, add the values & texts pairs within the <option>..</option> mark-up. An example would look like so:-

<select class="some_class">
  <option value="n/a">- Select Size-</option>
  <option value="Size S">Size S</option>
  <option value="Size M">Size M</option>
  <option value="Size L">Size L</option>
  <option value="Size XL">Size XL</option>
  <option value="Size XXL">Size XXL</option>
</select>

In the example above the ones in bold is the added option values & the text to display in our new & edited select box. The new text will display in this select drop down & the values will be sent to cart accordingly upon users selection.

Removing a Select Option

If a select option is not required, you can delete/remove the entire codes within the <select>...</select> mark-ups.

Or a much simpler method, at your Blogger editor Compose screen, click at an empty space on the right side of the select box you require to remove. Then press Backspace at your keyboard & the select box will be deleted/removed.

Use back again the mark-up if you require to add in options for later product updates,

Examples can be seen throughout this demo site whereas we removed the select options, the quantity field & also the price (if not required), and it does not break your theme layout.

Product Posting Edit Drop Down Select Options

Đọc thêm »
Blogrcart is a brilliantly crafted theme for Blogger using shopping cart & e-commerce functionalities. Designed with current web page best practices in mind, responsive & professionally built to capture an on-line store right from your Blogger blog.

This Blogger e-commerce inspired theme comes with a responsive full image touch/swipe enabled product slider, responsive product carousel, fixed main navigation, search engine optimised & loads of surprises.

This theme would probably be the last Blogger store theme you download! Packed with e-commerce features & extensive documentations, easily set up your Blogger store in minutes with awesome personal support from theme designers.



Easy Customise

Easily customise Blogger theme, extensive documentations provided.

Fix Main Navigations

Drop down menu navigations & works in any screen sizes.

Intuative Designs

Focused on products displays & presentation.

Video & Image Support

Easily embed videos & create pop over image galleries

Support & Help

Dedicated instant & full support from theme designers.

Customisable Checkouts

Edit, set & maintain checkout options to personal preferences.

Sample Pages Ready

Jump start Blogger store set ups with 1 file upload.

Easy Edit & Publish

No complicated settings, click, edit & publish product listings.

Clean Codes

No hidden codes & complicated HTML, indicators included.

Conversions Ready

Improves conversions, always ahead from your competitors.

Web Fonts/Icons Ready

More than 140 webfonts/icons by Font Awesome & Bootstrap 3.

Positive Feedback

Numerous phrases from users to support theme designers.

BlogrCart Closet Blogger Store Theme Features

Đọc thêm »
Some of the search engine optimisation equipped for BlogrCart Closet Blogger store/shop theme is using the Open Graph meta's or more commonly known as "og". These meta tags, apart from the more common tags used, like meta title & meta description comes pre-installed with this awesome theme.

Open Graph meta tags are most commonly used by social media search robots such as Facebook, other than popular search engines like Yahoo etc. These tags explains to search robots, what the pages is about & let them understand each & every product post more clearly, upon their first visit.

For BlogrCart Closet Blogger store theme, the additional meta tags has already been included in templates codes where the contents are dynamically inserted. It also comes with a fallback, if store owners have forgotten to write down the meta description or even if the page could not find any image.

Find below some of the customisations required to customise to a Blogger store preference.


Offer
There are not much of customisations required for the Open Graph meta tags pre-installed with BlogrCart Closet Blogger store theme because the contents here is dynamically inserted by Blogger.

In template editor, at the very beginning of template codes within the <head...</head> tag find codes as follows:-

  <meta content='*' property='og:description'/>
  <meta content='*' property='og:title'/>
  <meta content='*' property='og:url'/>
  <meta content='*' property='og:site_name'/>
  <meta content='*' property='og:type'/>
  <meta content='*' property='og:image'/>

Where * is the dynamic inserts for any page in a Blogger store.

To include a default image, if an image can not be found at your Blogger store, find below codes to edit:-

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxlWz69sPITlRJ56oqIOo8YUYz-acqPK7IRjFvihyphenhyphenjKmwcQil19tAZWVoYu6ZXcVKPFbxZ2T_F1MLPHU5FZGiJDYVJC69G2iP-mB5HQR4C0I1Pcdx8S2oDWiA6T3AR0P6XXKuk-nYpBs/s1600/BlogrCart+Closet.jpeg' property='og:image'/>

Edit/change the URL highlighted above to the URL of your uploaded image as fallback if an image can not be found.

Editing Open Graph Meta Tags for Search Engine Robot

Đọc thêm »
Only a few hours after we have released this Blogger theme for download, we had a question on how in the demo the 1st paragraphs has a slightly bigger font size. Can one install or use it with BlogrCart Closet Blogger store theme?

Yes on can! The technique used is by using Bootstrap 3 pre-built styling class to enhance user readability for text or a paragraph. Find below how easy to install/use the styling class either automatically when posting a product or editing a particular post.
$ 25.00
Original Price $ 145.00
   Add to Cart
The technique used to highlight the first paragraph is by using the "lead" classname which comes with Bootstrap 3.++ mobile 1st template framework. Since that Blogger editor will strip the <p>..</p> tags, users are required to use the <span>...</span> tags instead. Below is an example:-

<span class="lead:>Example text for the first paragraphs.</span>

The text containing in between the <span> tag will inherit the extra styles hence adding the extra height (and weight) for the fonts proportionately at any screen sizes.

You can add it anywhere in your Blogger theme using this technique, for semantic mark-up, the "lead" class is an indicator of a leading text which would be most appropriate for the 1st paragraph of any page.

Adding Highlighted Paragraphs Using Bootstrap 3 Pre-assigned Class-name

Đọc thêm »

Shop by Favourites

Subscribe Our Newsletter

Get the latest OFFERS right to your mail.