Johny Magstore Shopping Blogger Template

Johny Blackstore is a beautiful e-commerce blogger template created by Maskolis. The shopping store template is packed with features like a dual menu bar, slider to display latest products, grid and list view of products on home page, simple panner and zoomer for users to take a better look at the product, social media profiles and more.
Johny Magstore Shopping Blogger Template
Lets start with the horizontal bar on top where the social media icons are displayed along with the search box. To add your links, go to Edit Html and search for this code, and replace '#' with your facebook, twitter etc., account ids.
<ul class='isocial'>
<li><a class='rss' href='#' target='_blank' title='Subscribe via RSS'/></li>
<li><a class='facebook' href='#' target='_blank' title='Become a Fan'/></li>
<li><a class='twitter' href='#' target='_blank' title='Follow Us'/></li>
<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Watch The Video'/></li>
</ul>
Coming to the first menu bar with drop down, look for this code in Edit Html -
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>
<li><a class='arrow' href='#'><span>Support</span>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
Now replace '#' with category links or any page links, this template shows a small tagline below each heading in the menu bar, you can change the text to display, like in the above code its given 'This is' .....'About us', edit it if you like.

Similarly, for the second menu bar, look for this code -
<li><a href='http://feeds.feedburner.com/JohnyTemplate' title='Posts RSS'>Posts RSS</a></li>
<li><a href='http://johnytemplate.blogspot.com/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://johny-darktube.blogspot.com/p/sample-page.html'>Sample Page</a></li>
Change the links, title, category name etc., and save the changes. Coming to setting up the product details, the below code has to appear in each post, instead of copying and pasting everytime, insert it in Settings--Posts and Comments--Post Template click on 'add' and paste the below code -
<div class="product_image">
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:150px; height:150px;">
<img border="0" class="item_thumb" src="product_image.jpg" /></div>
<span class="item_price">$00.00</span> </div>
<div class="product_describe">
Descriptions... </div>
Every time when you to go to create a new post or add a new product, the code will be there in the posting area. You need to change the below details in the code -

src="product_image.jpg" /> - add your product image url, image size should be 300px-300px.
$00.00 - Price of the product
Descriptions... - product description

This template uses simplecart of wojodesign.com and it supports top currency like Dollar, Pound Sterling and Euro. To replace the Paypal account with yours, find the code below -
<script type='text/javascript'>
simpleCart.email = &quot;johnytemplate@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; , &quot;Total&quot;, &quot;remove&quot; ];
</script>
Replace the text marked in bold with your email id and save the changes.
setting up the featured slider for shopping blogger template
The slider automatically picks up posts based on the label you have selected, to enable that feature go to Layout, click on 'edit' featured content slider, put in the label of your choice, save and the slider will be functioning. The product will be displayed when you hover on the image. Below the slider you will find the Grid and list view icon, you can see how the display changes, its a cool feature of this template.

Shopping cart is on top left which shows the costing details and checkout. The template has 2 columns on either side and also a related products widget at end of each post.


Download the Johny Magstore Shopping Blogger Template