Install Template width blogrcart closet

TUTORIAL & GUIDE INSTALL BLOGRCART CLOSET THEM
 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 theChoose 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 Gearbutton & 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 theView 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/AVvXsEgJUO9jEFHETAouyJedsvlsfSypZ3-OFFHOY5StWInv-q8SLSlAt5fj2fJInm9tiLTRKiToB-m62C-4SD1fmgyWBXPYHC7D_l6ZoWbwyN9xNQGnbydKymet_amOc8MKVBuLPUTQ1SM4a7c/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/AVvXsEgJUO9jEFHETAouyJedsvlsfSypZ3-OFFHOY5StWInv-q8SLSlAt5fj2fJInm9tiLTRKiToB-m62C-4SD1fmgyWBXPYHC7D_l6ZoWbwyN9xNQGnbydKymet_amOc8MKVBuLPUTQ1SM4a7c/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/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/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/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/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/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/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/AVvXsEhpDI3OGucCdpUBcXSi_zk0E8hV_5FmA_diG66T13VoQ0dkDqu2GcYsz5dyuDrVG2BwBh6Lp_ng58FK1KJ1XkFwS43OAP8Fqf4QU0QWa51JOBBiBhI_Ohg396wvQPCOsvErWJCezA6bO8U/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/AVvXsEhpDI3OGucCdpUBcXSi_zk0E8hV_5FmA_diG66T13VoQ0dkDqu2GcYsz5dyuDrVG2BwBh6Lp_ng58FK1KJ1XkFwS43OAP8Fqf4QU0QWa51JOBBiBhI_Ohg396wvQPCOsvErWJCezA6bO8U/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/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/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. 

SHOW ORIGINAL (ALTERNATIVE) PRICE TUTORIAL E-COMMENCE BLOGGER STORE 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. ======= HOW TO EDIT THE POP OVER IMAGE TOGGLE ZOOM EFFECT 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. ========== PRODUCT POSTING EDIT DROP DOWN SELECT OPTIONS 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. ================== EDITING OPEN GRAPH META TAGS FOR SEARCH ENGINE ROBOT 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/AVvXsEgKExctbzM7qri9h7MinovcuM70zLaaaBkKNwCxn8RHrmx6z3mSzgeXMLmD7FR-4jFndHZbz0C3Yso93rGNT_en9H261QfUrKHbJ7btil8KZHbXC0W4vRLm_3fzzC-DTE9_BYbnlX2rUDc/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. ADDING HIGHLIGHTED PARAGRAPHS USING BOOTSTRAP 3 PRE-ASSIGNED CLASS-NAME 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. =========== CUSTOMISING 404 PAGE NOT FOUND PRE-INSTALLED PAGE 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/AVvXsEjyWIwO9UKagW0P1SlBv_27X2CetbrgXB0Q-YbIKPa8qRa55VJ4ywzzckvNCIYt9mqFDkXKdlZdOupfc3UqI6uPklTdZUC3144fGuGivxxdHvf0Fgba73HgCdphx-Hd8zuoAh_BOwVDSqs/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. ========= HOW TO ADD SELF HOSTED SEND ORDER EMAIL SCIPTS 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. ==================== EDIT BOOTSTRAP NAVIGATION LINKS DROP DOWNS HOW TO'S 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, EDIT & CUSTOMIZE IMAGE CAROUSEL IN GALLERY PAGES 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/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/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/AVvXsEjXpx6UaEkl81zeykaj8N6Kl2pbCbHGGsyz8cdYLkCojyacrmAHcc2mz-2IOXwrutB70Nj88doLXSOAXXavQsw58JOZr-1kkFkK3__55tgC4PXssD2A41FKmUY_QDuMeh5je99UF6GVRPaf/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.

Bạn đang đọc bài viết Install Template width blogrcart closet tại Website: Học Lập Trình

• Tweet
• Share
• Share
• Share
• Share