Soracart is responsive and premium blogger template for eCommerce sites. Best in class and loaded with tons of features, it takes your blog to the next level. Soracart is equipped with various of widgets which will help you to publish your blog more professionally. To make it easy for you we have published this detailed documentation, so that you can setup your blog correctly. You have made a good decision by choosing our template.You can check the live demo or download the template through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there’s no support for free users.
 |
| SoraCart Blogger Template |
Note:- Soracart is not a regular blogger template, it has some unique stuffs inbuilt, you have to pay close attention to this documentation, so that you can install this template bug free.
Documentation Setup SoraCart Blogger Template
You can check this below video to understand the setup process much more easily, just click the below image to watch the video directly on YouTube, or click this link - How To Setup SoraCart Blogger Template
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 icons in 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 then find the following 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 above code there are two types of menu first one is Normal menu and other is Mega menu.
the code in blue is normal one and the code in 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 above links with your label url.
Creating a normal link
<li><a href='#'>Features</a></li>
The above code will appear as normal link just replace the # with your link and Features with your text.
Creating the mega Menu with 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 above code will appear as mega menu just replace the Your-Label-Url with your link and Your-Label-Text with your text.
Note:-
1. Your-primary-label :- This is the main label of the mega menu, other labels will appear under this. Example Electronics (Samartphone, Laptop, Smartwatch). in this example "Electronics" will be your primary label
2. Your-Label-Url :- This is the link of the secondary label from where the post will appear. Example http://yourblogurl.blogspot.com/search/label/LABELNAME. in this example "http://yourblogurl.blogspot.com" is your blog url. and "LABELNAME" is your secondary label.
3. Your-Label-Text :- This is the secondary label of the mega menu, it will appear under main label. Example Electronics (Samartphone, Laptop, Smartwatch). in this example "(Samartphone, Laptop, Smartwatch)" will be your secondary label
Vertical Icon Menu
Access your blog Layout > click Edit link on Top Menu widget.
How to add icons in 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 WidgetAccess your blog Layout > click Add a Gadget > HTML/JavaScript on Slider Widget Section, and then 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 then 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMtwMTKDszgjR1OUiFL_sagUFVrM3waKiwpau_fHAWwQDqjBb6wxIuUwtjVrWBw4eKmEwZznJhm3iGc2sSNf2v4HZSIVzV2Tm8Sld5-3Ab4C09R8EsISkH-S9qvrycxLHK-mmaGkD2GM/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: center 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 solid #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 can use the above code or paste your own adsense code.
Description Tiles
Access your blog Theme > click Edit Html> and then find the following 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 simply dummy text of the printing and 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 simply dummy text of the printing and 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 simply dummy text of the printing and 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 simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div></div>
<!-- Fourth Ends -->
</div>
Here are the things you need to change.
<i aria-hidden="true" class="fa fa-support"></i> - Icon (fontawesome - http://fontawesome.io/cheatsheet/)
<h6 class="special-heading">24/7 Customer Care</h6> -Tiles title
<p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p> -Description
Featured ProductAccess your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and then add one of the following. (You can add upto 3 widgets)
<span class="labelpost" data-label="mobile" data-no="4"></span>
Random ProductAccess your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and then add one of the following
<span class="randomposts" data-no="4"></span>
How to add price in product
Access your blog Posts > click New Post > Labels , in labels enter price_$120 (Where $120 is price of the product)
Note:- Change the $ symbol, if you are using any other currency.
Image Example:
After add, click publish.
How to add discount badge in product
Access your blog Posts > click New Post > Labels , in labels enter off@-75%(where -75% is discount on the product)
Image Example:
After add, click publish.
Product Size
Size Shortcode: size/"Your Product Size 1"/"Your Product Size 2"/"Your Product Size 3"
Size EX: Inside the post add the text size/35/36/37 and add the style Strikethrough
Popular Product
Access your blog Layout > click Edit link on Popular product widget.
This is bloggers official popular post widget, to make it work put the settings as blow image.
Recent reviews
Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and then add one of the following
<span class="recentcomments" data-no="4"></span>
Cart Page
Access your blog Pages > click New Page > Title , in title enter "cart" (without quotes).
Note:- the cart page will not work if you don't put the title correctly, after adding the title your page link must look like this.
http://sora-cart-soratemplates.blogspot.com/p/cart.html
or
http://www.xyz.com/p/cart.html
Checkout Page
Access your blog Pages > click New Page > Title , in title enter "checkout" (without quotes).
Note:- the checkout page will not work if you don't put the title correctly, after adding the title your page link must look like this.
http://sora-cart-soratemplates.blogspot.com/p/checkout.html
or
http://www.xyz.com/p/checkout.htmlNote:- To make the checkout form work you have to add contact widget in your blog. To add the widget follow below steps.
Access your blog layout > click add a gadget > More gadgets , Add contact widget..
How to Add "Short Description" to a Product
To add quick overview in your products do as mentioned below
Go to Blogger >> Settings >> Search preferences >> Description >> Edit >> Yes >> Save
Go to Blogger >> Add new Post >> Search Description
In Search Description enter the text you want to show as the overview of the product.
Once everything is done, press "Publish" and your product is live ready to sell
Paypal Email, shipping Fees and Currency
Access your blog Theme > click Edit Html> and then find the following coding.
<script>
//<![CDATA[
$(document).ready(function () {
simpleCart({
checkout: {
type: "PayPal" ,
email: "templatemania@yahoo.com"
}
});
simpleCart.currency( "USD" ); simpleCart({
shippingQuantityRate: 10
});
});
//]]>
</script>
Change this templatemania@yahoo.com with your own email.
Change this USD with your own 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 ResultsAccess your blog Theme > click Edit Html> and then find the following 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 any number you want (Archive).
Theme Options
A) - Upi Options
Access your blog Layout > click Edit icon on Upi Options widget.
In New Site Name add Your Upi Gateway Name, in New Site URL add Your Upi QR Code Image, after click on save button.
B) - Bank Details
Access your blog Layout > click Edit icon on Bank Details widget.
In New Site Name add Your Bank Details, in New Site URL add Your Bank Detail Values, after click on save button.
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 you can follow this tutorial if above method won't work
How to Add Responsive Facebook Like Box Widget In Blogger
Theme Customization
Access your blog Template > click Customize.
Here you can change the background, and apply pre-defined colors
Clicking Advanced You will see the official option to change the Main Color
NOTE: To make any changes you must click Apply to Blog in the upper Right.
NOTE 02: To return to default style click "Clear advanced changes to theme color", and click Apply to Blog.
Installation And Custom Services
We provide plenty of templates for free but if you want something unique for your blog then let us create a unique design for your blog, Just tell us your needs and we will convert your dream design into reality. We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle.
Documentation Setup SoraCart Blogger Template
You can check this below video to understand the setup process much more easily, just click the below image to watch the video directly on YouTube, or click this link - How To Setup SoraCart Blogger Template
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 icons in 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 then find the following 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 above code there are two types of menu first one is Normal menu and other is Mega menu.
the code in blue is normal one and the code in 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 above links with your label url.
Creating a normal link
<li><a href='#'>Features</a></li>
The above code will appear as normal link just replace the # with your link and Features with your text.
Creating the mega Menu with 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 above code will appear as mega menu just replace the Your-Label-Url with your link and Your-Label-Text with your text.
Note:-
1. Your-primary-label :- This is the main label of the mega menu, other labels will appear under this. Example Electronics (Samartphone, Laptop, Smartwatch). in this example "Electronics" will be your primary label
2. Your-Label-Url :- This is the link of the secondary label from where the post will appear. Example http://yourblogurl.blogspot.com/search/label/LABELNAME. in this example "http://yourblogurl.blogspot.com" is your blog url. and "LABELNAME" is your secondary label.
3. Your-Label-Text :- This is the secondary label of the mega menu, it will appear under main label. Example Electronics (Samartphone, Laptop, Smartwatch). in this example "(Samartphone, Laptop, Smartwatch)" will be your secondary label
Vertical Icon Menu
Access your blog Layout > click Edit link on Top Menu widget.
How to add icons in 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 WidgetAccess your blog Layout > click Add a Gadget > HTML/JavaScript on Slider Widget Section, and then 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 then 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMtwMTKDszgjR1OUiFL_sagUFVrM3waKiwpau_fHAWwQDqjBb6wxIuUwtjVrWBw4eKmEwZznJhm3iGc2sSNf2v4HZSIVzV2Tm8Sld5-3Ab4C09R8EsISkH-S9qvrycxLHK-mmaGkD2GM/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: center 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 solid #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 can use the above code or paste your own adsense code.
Description Tiles
Access your blog Theme > click Edit Html> and then find the following 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 simply dummy text of the printing and 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 simply dummy text of the printing and 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 simply dummy text of the printing and 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 simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div></div>
<!-- Fourth Ends -->
</div>
Here are the things you need to change.
<i aria-hidden="true" class="fa fa-support"></i> - Icon (fontawesome - http://fontawesome.io/cheatsheet/)
<h6 class="special-heading">24/7 Customer Care</h6> -Tiles title
<p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p> -Description
Featured ProductAccess your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and then add one of the following. (You can add upto 3 widgets)
<span class="labelpost" data-label="mobile" data-no="4"></span>
Random ProductAccess your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and then add one of the following
<span class="randomposts" data-no="4"></span>
How to add price in product
Access your blog Posts > click New Post > Labels , in labels enter price_$120 (Where $120 is price of the product)
Note:- Change the $ symbol, if you are using any other currency.
Image Example:
After add, click publish.
How to add discount badge in product
Access your blog Posts > click New Post > Labels , in labels enter off@-75%(where -75% is discount on the product)
Image Example:
After add, click publish.
Product Size
Size Shortcode: size/"Your Product Size 1"/"Your Product Size 2"/"Your Product Size 3"
Size EX: Inside the post add the text size/35/36/37 and add the style Strikethrough
Popular Product
Access your blog Layout > click Edit link on Popular product widget.
This is bloggers official popular post widget, to make it work put the settings as blow image.
Recent reviews
Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Product Section, and then add one of the following
<span class="recentcomments" data-no="4"></span>
Cart Page
Access your blog Pages > click New Page > Title , in title enter "cart" (without quotes).
Note:- the cart page will not work if you don't put the title correctly, after adding the title your page link must look like this.
http://sora-cart-soratemplates.blogspot.com/p/cart.html
or
http://www.xyz.com/p/cart.html
Checkout Page
Access your blog Pages > click New Page > Title , in title enter "checkout" (without quotes).
Note:- the checkout page will not work if you don't put the title correctly, after adding the title your page link must look like this.
http://sora-cart-soratemplates.blogspot.com/p/checkout.html
or
http://www.xyz.com/p/checkout.htmlNote:- To make the checkout form work you have to add contact widget in your blog. To add the widget follow below steps.
Access your blog layout > click add a gadget > More gadgets , Add contact widget..
How to Add "Short Description" to a Product
To add quick overview in your products do as mentioned below
Go to Blogger >> Settings >> Search preferences >> Description >> Edit >> Yes >> Save
Go to Blogger >> Add new Post >> Search Description
In Search Description enter the text you want to show as the overview of the product.
Once everything is done, press "Publish" and your product is live ready to sell
Paypal Email, shipping Fees and Currency
Access your blog Theme > click Edit Html> and then find the following coding.
<script>
//<![CDATA[
$(document).ready(function () {
simpleCart({
checkout: {
type: "PayPal" ,
email: "templatemania@yahoo.com"
}
});
simpleCart.currency( "USD" ); simpleCart({
shippingQuantityRate: 10
});
});
//]]>
</script>
Change this templatemania@yahoo.com with your own email.
Change this USD with your own 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 ResultsAccess your blog Theme > click Edit Html> and then find the following 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 any number you want (Archive).
Theme Options
A) - Upi Options
Access your blog Layout > click Edit icon on Upi Options widget.
In New Site Name add Your Upi Gateway Name, in New Site URL add Your Upi QR Code Image, after click on save button.
B) - Bank Details
Access your blog Layout > click Edit icon on Bank Details widget.
In New Site Name add Your Bank Details, in New Site URL add Your Bank Detail Values, after click on save button.
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 you can follow this tutorial if above method won't work
How to Add Responsive Facebook Like Box Widget In Blogger
Theme Customization
Access your blog Template > click Customize.
Here you can change the background, and apply pre-defined colors
Clicking Advanced You will see the official option to change the Main Color
NOTE: To make any changes you must click Apply to Blog in the upper Right.
NOTE 02: To return to default style click "Clear advanced changes to theme color", and click Apply to Blog.
Installation And Custom Services
We provide plenty of templates for free but if you want something unique for your blog then let us create a unique design for your blog, Just tell us your needs and we will convert your dream design into reality. We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle.
Post a Comment