How To Setup Soracart Blogger Template

 Soracart is responsive as well as premium blogger template for eCommerce sites How To Setup SoraCart Blogger Template

Soracart is responsive as well as premium blogger template for eCommerce sites. Best inwards flat as well as loaded amongst tons of features, it takes your weblog to the adjacent level. Soracart is equipped amongst diverse of widgets which volition aid y’all to seat out your weblog to a greater extent than professionally. To arrive slowly for y’all nosotros cause got published this detailed documentation, hence that y’all tin transportation away setup your weblog correctly. You cause got made a skilful determination past times choosing our template. You tin transportation away cheque the alive demo or download the template through the push clit below as well as likewise Please Read this documentation carefully inwards company to laid upwards your weblog as well as delight Federal Reserve annotation that there’s no back upwards for gratuitous users.

Note:- Soracart is non a regular blogger template, it has precisely about unique stuffs inbuilt, y’all cause got to pay closed attending to this documentation, hence that y’all tin transportation away install this template põrnikas free.

Basic Setup

  1. Template Installation
  2. Logo Setup
  3. Template Setting
  4. Shortcodes & Markups
  5. Create Sitemap

Top Navigation

Access your blog Layout > click Edit link on Top Menu widget.

Contact Menu (Contact Details)

Access your blog Layout > click Edit link on Contact Details widget.


How to add together icons inwards the top navigation? 
Select an icon >> FontAwesome <<, Example  <i class=”fa fa-download”></i>
Example: <i class=”fa fa-download”></i>Download this Theme

Top Social Widget

Access your blog Layout > click Edit link on Top Social Widget.

Icons Avaliables { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }


Main Menu/ Mega Menu

Access your blog Theme > click Edit Html and hence notice the next coding.

   <ul class=’megamenu’ id=’megamenuid’>
<li><a href=’/’>Home</a></li> 
<li><a class=’menu-target’ href=’#’>Fashion</a>
<ul>
<li><a href=’http://sora-cart-soratemplates.blogspot.in/search/label/mens’>MEN</a></li>
<li><a href=’http://sora-cart-soratemplates.blogspot.in/search/label/women’>WOMEN</a></li>
<li><a href=’http://sora-cart-soratemplates.blogspot.in/search/label/kids’>KIDS</a></li>
</ul>
</li>
<li><a class=’menu-target’ href=’#’>Electronics</a>
<ul>
<li><a href=’http://sora-cart-soratemplates.blogspot.in/search/label/mobile’>SMARTPHONE</a></li>
<li><a href=’http://sora-cart-soratemplates.blogspot.in/search/label/laptop’>LAPTOP</a></li>
<li><a href=’http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch’>Smartwatch</a></li>
</ul></li>
<li><a href=’#’>Features</a></li>
<li><a href=’#’>Documentation</a></li>
<li><a href=’#’>Download This Template</a></li>
</ul>

In inwards a higher identify code at that topographic point are 2 types of bill of fare kickoff i is Normal bill of fare as well as other is Normal menu.
the code inwards blueish is normal i as well as the code inwards cherry-red is mega menu.

http://sora-cart-soratemplates.blogspot.in/search/label/mobile 

http://sora-cart-soratemplates.blogspot.in/search/label/laptop 

http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch

Replace inwards a higher identify links amongst your label url.

Creating a normal link

<li><a href=’#’>Features</a></li>

The inwards a higher identify code volition seem equally normal link precisely supervene upon the # amongst your link as well as Features amongst your text.

Creating the mega Menu amongst Image

<li><a class=’menu-target’ href=’#’>Your-primary-Label</a><ul><li><a href=’Your-Label-Url’>Your-Label-Text</a></li><li><a href=’Your-Label-Url’>Your-Label-Text</a></li><li><a href=’Your-Label-Url’>Your-Label-Text</a></li></ul></li>

The inwards a higher identify code volition seem equally mega bill of fare precisely supervene upon the Your-Label-Url with your link and Your-Label-Text with your text.
Note:-
1. Your-primary-label :- This is the primary label of the mega menu, other labels volition seem nether this. Example Electronics (Samartphone, Laptop, Smartwatch). inwards this representative “Electronics” volition live your primary label

2. Your-Label-Url :- This is the link of the secondary label from where the post volition appear. Example http://yourblogurl.blogspot.com/search/label/LABELNAME. inwards this representative “http://yourblogurl.blogspot.com” is your weblog url. as well as “LABELNAME” is your secondary label.
3. Your-Label-Text :- This is the secondary label of the mega menu, it volition seem nether primary label. Example Electronics (Samartphone, Laptop, Smartwatch). inwards this representative “(Samartphone, Laptop, Smartwatch)” volition live your secondary label

Vertical Icon Menu

Access your blog Layout > click Edit link on Top Menu widget.

How to add together icons inwards the top navigation? 
Select an icon >> FontAwesome <<, Example  <i class=”fa fa-download”></i>
Example: <i class=”fa fa-download”></i>Download this Theme

Slider Widget

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Slider Widget  Section, and hence add one of the following

Recent Posts: <div class=”latestposts” data-no=”5″></div>
Label / Tag Ex<div class=”tagpost” data-label=”Break” data-no=”5″></div>

Responsive Ads

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Responsive Ads Section, and hence add one of the following

<div id=”banner-1″ class=”banner”>
<a class=”banner__permalink” href=”#”>
<span class=”screen-reader-text”>Introducing the Vacation Collection — Up to 50% Off</span>
</a>
<div class=”banner__inside-wrapper”>
<div class=”banner__inside”>
<div class=”banner__content”>
<h3 class=”banner__title”>Introducing the Vacation Collection — Up to 50% Off</h3>
</div>

<div class=”banner__overlay”></div>
<div class=”banner__bg_image”></div>
</div>
</div>
</div>
<style type=”text/css”>
.banner {
    position: relative;
    color: #fff;
}
#banner-1 {
    min-height: 130px;
    background-color: #c6b78b;
}
#banner-1 .banner__title {
    font-size: 28px;
    letter-spacing: 0px;
}
#banner-1 .banner__subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}
#banner-1 .banner__inside {
    height: 130px;
    padding: 8px;
}
#banner-1 .banner__content {
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.5);
}
#banner-1 .banner__sep {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 20%;
}
#banner-1 .banner__bg_image {
    background-image: url(‘http://3.bp.blogspot.com/-_51Ws_ZLlMM/WVaDDNL6E9I/AAAAAAAADJ8/t6xKDYa3ivcQnAsC5mh70pESIGXQGGiUwCK4BGAYYCw/s1600/d.png’);
}
#banner-1 .banner__overlay {
    background-color: #0a0000;
    opacity: 0.3;
}
.banner__bg_image {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-position: oculus center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: 1;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    will-change: transform;
}
.banner__overlay {
    background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.banner__content {
    word-break: break-all;
    padding: 18px 30px;
    display: table-cell;
    vertical-align: middle;
    border: 2px venture #fff;
    text-align: center;
    position: relative;
    z-index: 3;
}
.banner__title {
    color: inherit;
    margin: 0;
}
.banner__inside {
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.banner__inside-wrapper {
    overflow: hidden;
    position: relative;
}
.banner__permalink {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
}
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}
.banner:hover .banner__bg_image, .banner__permalink:focus .banner__inside-wrapper .banner__bg_image {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
</style>

You tin transportation away job the inwards a higher identify code or glue your ain adsense code.

Description Tiles

Access your blog Theme > click Edit Html and hence notice the next coding.

<div class=”special-wrap row”>
<!– First –>
<div class=”special-tiles”>
<div class=”special-tiles-wrap”>
<span class=”special-icons”>
<i aria-hidden=”true” class=”fa fa-support”></i>
</span>
<h6 class=”special-heading”>24/7 Customer Care</h6>
<p class=”special-text”>Lorem Ipsum is only dummy text of the printing as well as typesetting industry. Lorem Ipsum has been the industry’s. </p>
</div></div>
<!– First One Ends –>
<!– Second –>
<div class=”special-tiles”>
<div class=”special-tiles-wrap”>
<span class=”special-icons”>
<i aria-hidden=”true” class=”fa fa-money”></i>
</span>
<h6 class=”special-heading”>Cash On Delivery</h6>
<p class=”special-text”>Lorem Ipsum is only dummy text of the printing as well as typesetting industry. Lorem Ipsum has been the industry’s. </p>
</div></div>
<!– Second Ends –>
<!– Third –>
<div class=”special-tiles”>
<div class=”special-tiles-wrap”>
<span class=”special-icons”>
<i aria-hidden=”true” class=”fa fa-clock-o”></i>
</span>
<h6 class=”special-heading”>One Day Shipping</h6>
<p class=”special-text”>Lorem Ipsum is only dummy text of the printing as well as typesetting industry. Lorem Ipsum has been the industry’s. </p>
</div></div>
<!– Third Ends –>
<!– Fourth –>
<div class=”special-tiles”>
<div class=”special-tiles-wrap”>
<span class=”special-icons”>
<i aria-hidden=”true” class=”fa fa-plane”></i>
</span>
<h6 class=”special-heading”>Worldwide Shipping</h6>
<p class=”special-text”>Lorem Ipsum is only dummy text of the printing as well as typesetting industry. Lorem Ipsum has been the industry’s. </p>
</div></div>
<!– Fourth Ends –>
</div>

Here are the things y’all involve to change.

  1. <h4>We Specialize in</h4> – Main Title.
  2. <i aria-hidden=’true’ class=’fa fa-heart-o’/> -Icon (fontawesome – http://fontawesome.io/cheatsheet/)
  3. <h6 class=’special-heading’>Wedding Photography</h6> -Tiles title
  4. <p class=’special-text’>Lorem Ipsum is only dummy text of the printing as well as typesetting industry. Lorem Ipsum has been the industry&#39;s. </p> -Description

Featured Product

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and hence add one of the following. (You tin transportation away add together upto three widgets)

<span class=”labelpost” data-label=”mobile” data-no=”4″></span>

Random Product

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and hence add one of the following

<span class=”randomposts” data-no=”4″></span>

How to add together toll inwards product

Access your blog Posts >  click New Post  > Labels , in labels come inwards price_$120 (Where $120 is toll of the product)
Note:-Change the $ symbol,  if y’all are using whatsoever other currency.
Image Example:


After add, click publish.

How to add together discount badge inwards product

Access your blog Posts >  click New Post  > Labels , in labels come inwards [email protected]%(where -75% is discount on the product)
Image Example:


After add, click publish.

Popular Product

Access your blog Layout > click Edit link on Popular product  widget.
This is bloggers official pop post widget, to arrive piece of work seat the settings equally blow image.

Recent reviews

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and hence add one of the following

<span class=”recentcomments” data-no=”4″></span>

Cart Page

Access your weblog Pages > click New Page  > Title , inwards championship come inwards “cart” (without quotes).
Note:- the cart page volition non piece of work if y’all don’t seat the championship correctly, afterward adding the championship your page link must hold off similar this.

http://sora-cart-soratemplates.blogspot.com/p/cart.html
 or 
http://www.xyz.com/p/cart.html

Checkout Page

Access your weblog Pages > click New Page  > Title , inwards championship come inwards “checkout” (without quotes).

Note:- the checkout page volition non piece of work if y’all don’t seat the championship correctly, afterward adding the championship your page link must hold off similar this.

http://sora-cart-soratemplates.blogspot.com/p/checkout.html
 or
http://www.xyz.com/p/checkout.html

Note:- To brand the checkout cast piece of work y’all cause got to add together contact widget inwards your blog. To add together the widget follow below steps.
 Access your weblog layout > click add together a gadget  > More gadgets , Add contact widget..

How to Add “Quick overview” to a Product

To add together quick overview inwards your products exercise equally mentioned below
Go to Blogger >> Settings >> Search preferences >> Description >> Edit >> Yes >> Save
Go to Blogger >> Add novel Post>> Search Description
In Search Description come inwards the text y’all desire to present equally the overview of the product.
Once everything is done, press “Publish” as well as your production is alive develop to sell

Paypal Email as well as Currency

Access your blog Theme > click Edit Html and hence notice the next coding.

<script>
//<![CDATA[
$(document).ready(function () {
simpleCart({
checkout: { 
type: “PayPal” , 
email: “[email protected]” 
}
});
simpleCart.currency( “USD” );
});
//]]>
</script>

Change this [email protected]  with your ain email.
Change this USD  with your ain currency (Only Below Currencies are supported).

“USD” – Currency Name  (“US Dollar”)  
“AUD” – Currency Name  (“Australian Dollar”)  
“BRL” – Currency Name  (“Brazilian Real”)  
“CAD” – Currency Name  (“Canadian Dollar”)  
“CZK” – Currency Name  (“Czech Koruna”)  
“DKK” – Currency Name  (“Danish Krone”)  
“EUR” – Currency Name  (“Euro”)  
“HKD” – Currency Name  (“Hong Kong Dollar”) 
“HUF” – Currency Name  (“Hungarian Forint”) 
“ILS” – Currency Name  (“Israeli New Sheqel”) 
“JPY” – Currency Name  (“Japanese Yen”) 
“MXN” – Currency Name  (“Mexican Peso”) 
“NOK” – Currency Name  (“Norwegian Krone”) 
“NZD” – Currency Name  (“New Zealand Dollar”) 
“PLN” – Currency Name  (“Polish Zloty”) 
“GBP” – Currency Name  (“Pound Sterling”) 
“SGD” – Currency Name  (“Singapore Dollar”) 
“SEK” – Currency Name  (“Swedish Krona”) 
“CHF” – Currency Name  (“Swiss Franc”) 
“THB” – Currency Name  (“Thai Baht”)
“BTC” – Currency Name  (“Bitcoin”)
“INR” – Currency Name  (“Indian Rupee”)

Pagenavigation Results

Access your blog Theme > click Edit Html and hence notice the next coding.

<script type=’text/javascript’>
  /*<![CDATA[*/
    var perPage=8;
    var numPages=6;
    var firstText =’First’;
    var lastText =’Last’;
    var prevText =’« Previous’;
    var nextText =’Next »’;
    var urlactivepage=location.href;
    var home_page=”/”;
  /*]]>*/
</script>

Change the value of   var perPage=8;  from 8 to whatsoever issue y’all desire (Archive).

Facebook Page Plugin:

<center><div class=”fb-page” data-href=”https://www.facebook.com/soratemplates/” data-width=”360″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”true”></div></center>

or y’all tin transportation away follow this tutorial if inwards a higher identify method won’t work

Theme Customization

Access your blog Template > click Customize.

Here y’all tin transportation away modify the background, as well as apply pre-defined colors



Clicking Advanced You volition run across the official pick to modify the Main Color


NOTE: To brand whatsoever changes y’all must click Apply to Blog in the upper Right.

NOTE 02: To render to default manner click “Clear advanced changes to subject color“, as well as click Apply to Blog.

Installation And Custom Services

We supply enough of templates for gratuitous but if y’all desire something unique for your weblog hence permit us exercise a unique pattern for your blog, Just state us your needs as well as nosotros volition convert your dream pattern into reality. We likewise Provide Blogger Template Installation Service. Our Installation service gives y’all a simple, quick as well as secure means of getting your template setup without hassle.


Sumber https://www.sorabloggingtips.com/