Leathercraft
Introduction
So you are about to install our responsive Magento theme Leathercraft -- the professional makeover of any eCommerce Magento stores about leather handbags and accessorises. The theme is packed up with up to 8 complementary Magento extensions including Megamenu, Basetheme, Slideshow, Masshead, Product List, Product Slider, QuickView and Tabs. Leathercraft is fully responsive and supports Off-canvas menu for collapsed screen devices.
There are two ways to install a JoomlArt Magento theme like Leathercraft:
- General Installation: Applicable if you have installed a Magento base on your server before.
- Quickstart Installation: Applicable if you want to get a whole new site as per Demo.
Decide which way to follow. Once downloaded, unzip the package of Leathercraft to get the following folders:
- mage_ext: contains all built-in extensions of the theme.
- mage_tpl: contains the theme files only.
- quickstart: a full Magento CMS version with Leathercraft already integrated to match the demo.
- source: contains all source files of the theme.
Let’s see how to install and configure the responsive Magento theme Leathercraft for your own website.
General Installation
Provided that you have installed the Magento base already, General Installation will help you adapt Leathercraft and its extensions with your current site.
Note: Your store must be ready before the installation. If not, get it done quickly by following the Magento Installation Guide.
Extension basetheme is required to be installed before installing the other extensions and theme.
1. Theme Installation
1. Copy the folders skin and app to the root of your Magento site folder on the server. The overwritten folders should have a directory layout like this:
{docroot} /magento/app/
index.php
js/
lib/
LICENSE.txt
media/
pear/
skin/
var/
2. Log in to your Admin Panel on the stage localhost: //localhost/magento/index.php/admin/.
3. Navigate to System >> Configuration >> Design.
4. Input the theme name into the Themes folder e.g. “jm_leathercraft” instead of “jm_purity”.
5. You can also change the settings for Leathercraft Header.
6. Click the button “Save Config” to finish. Now Leathercraft is ready!
2. Extension Installation
1. Copy all the folders of each extension folder in mage_ext to the root of your Magento site folder on the server.
2. Login to your Admin Panel on the stage localhost: //localhost/magento/index.php/admin/.
3. Navigate to System >> Configuration.
4. To enable an actual extension, in the JoomlArt section, enter this one’s tab and set Enable to “Yes”.
3. Create Static Blocks
1. Login to your Admin Panel on the stage localhost: //localhost/magento/index.php/admin/.
2. Navigate to CMS >> Static Blocks.
3. Click “Add new Block” button.
4. Fill in all fields as shown below and then click “Save Block”:
- Title: Right module
- Identifier: right_block
- Store View: All Store Views
- Status: Enable
- Content: fill in all syntax quoted as you would like
5. To edit the existing static blocks, go to CMS >> Pages and then select the page in which blocks you want to edit.
6. In General Information tab, fill in the Content field with syntax quoted.
7. To display a new static block, copy and paste the following code in the “Layout Update XML” field in “Design” tab.
<html> <reference name="right"> <block type="cms/block" name="jmtabs" before="-"> <action method="staticblock"> <title><strong><COLOR=Red>New block</COLOR></strong></title> <identifier><strong><COLOR=Red>new_block</COLOR></strong></identifier> </action> </block> </reference> </html>
8. To clear cache if needed, navigate to System >> Cache Management >> Save cache settings.
Refresh your Homepage to see the change applied.
Quickstart Installation
Quickstart package is to minimize time and effort in installing the theme as per Demo site. Please kindly note that, with Quickstart, all your existing data will be overwritten. Thus, we recommend using Quickstart for your first installation or just in case you want to refresh your site to the very beginning.
1. Upload the folder quickstart to your server. In Quickstart folder you will see the extracted folder that includes all sample data.
2. Create a database for your Magento store (using phpMyAdmin).
3. To install, open a browser and navigate to your URL (where the Quickstart package uploaded) to load the default Magento installer.
4. Kindly follow each step of the Installer so that the installation process can be set.
Note:
- Do not use “localhost” in URL, otherwise you could not log into your Admin area (you should use your local IP in case of installing on your computer).
- Leave “Tables prefix” field blank.

Layout and Block Positions
The layout of Leathercraft Homepage can be illustrated as follows.
In the front-page, Leathercraft has these following static blocks:
position-1 | position-2 | position-3 | position-4 | position-5 | position-6 | position-7 | position-8 | position-9 | footer-links |free-shipping | categories-tab1 | bestsell-tab2 | most-rated-tab3 | position-10 | featured-product-megamenu
To create a new block, refer to the mentioned details.
Page Configuration
This section will guide you to configure your pages just as the Demo of Leathercraft.
I. Homepage
Detailed layout of Leathercraft Homepage:
To configure this page, in the Magento Admin Panel, navigate to CMS >> Pages.
Create a new page named {Homepage} in “Page Management” section.
- Page Information Tab: click to see the Back-end Settings.
- Design Tab: click to see the Back-end Settings.
Copy and paste the following code into the “Design” field.
<reference name="tops1"> <block type="cms/block" name="position-1"> <action method="setBlockId"><block_id>position-1</block_id></action> </block> </reference> <reference name="tops2"> <block type="cms/block" name="position-2"> <action method="setBlockId"><block_id>position-2</block_id></action> </block> </reference> <reference name="tops3"> <block type="joomlart_jmtabs/core" name="jmtabs"> <action method="addTabs_staticblock"> <title>New Arrivals</title> <identifier>newarrivals-tab1</identifier> </action> <action method="addTabs_staticblock"> <title>Device Sleeves</title> <identifier>devicesleeves-tab2</identifier> </action> <action method="addTabs_staticblock"> <title> Accessories</title> <identifier>accessories-tab3</identifier> </action> </block> </reference> <reference name="mass-top"> <block type="cms/block" name="position-10"> <action method="setBlockId"><block_id>position-10</block_id></action> </block> </reference> <reference name="content"> <block type="core/messages" name="messages" as="messages"/> <remove name="content" /> </reference> <reference name="mass-bottom"> <block type="cms/block" name="position-3"> <action method="setBlockId"><block_id>position-3</block_id></action> </block> <block type="cms/block" name="position-4"> <action method="setBlockId"><block_id>position-4</block_id></action> </block> </reference>
II. 404 Page
To configure this page, in the Admin Panel, navigate to CMS >> Pages, select 404 Not Found 1 page to edit the following settings.
- Page Information Tab: click to see the Back-end Settings.
- Content Tab: click to see the Back-end Settings.
Copy and paste the following code into the “Content” field.
<div class="jm-404"> <div class="page-title"> <h1>Whoops!</h1> </div> <dl><dt>The page you requested was not found, and we have a fine guess why</dt><dd> <ul> <li>If you typed the URL directly, please make sure the spelling is correct.</li> <li>If you clicked on a link to get here, the link is outdated.</li> </ul> </dd><dt>What can you do?</dt><dd> <p>Have no fear, help is near! There are many ways you can get back on track with Magento Demo Store.</p> <ul> <li><a onclick="history.go(-1); return false;" href="#">Go back</a> to the previous page.</li> <li>Use the search bar at the top of the page to search for your products.</li> </ul> </dd><dt>Follow these links to get you back on track!</dt><dd> <ul class="link-404"> <li><a href="{{store url=""}}">Home Store</a></li> <li><a href="{{store url="customer/account"}}">My Account</a></li> </ul> </dd></dl></div>
Front-end Appearance:
Static Block Configuration
1. position-1: Slideshow
<p>{{block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" }}</p>
Front-end Appearance:

2. position-2: 3 Banner Top
<div class="block static-block bg1"><span class="text1"> Pure</span> <span class="text2">100% </span> <span class="text3">hand made </span></div> <div class="block static-block bg2"><span class="text1">Sale</span> <span class="text2">40%</span> <span class="text3">3 Day Only! </span> <span class="text4">Shop the sale <em class="icon-caret-right"></em></span></div> <div class="block static-block bg3"><span class="text1">Free</span> <span class="text2">100%</span> <span class="text3">Shipping*</span> <span class="text4"> *On all domestic orders $100 up.</span></div>
Front-end Appearance:

3. position-3: Hand crafted leather forged from an ancient heart.
<script type="text/javascript" src="{{skin url='js/fadeSlideShow.js'}}"></script> <script type="text/javascript">// <![CDATA[ jQuery(document).ready(function(){ jQuery('#slideshow').fadeSlideShow(); }); // ]]></script> <div id="slideshowWrapper" class="block static-block2"> <ul id="slideshow"> <li><span> Hand crafted leather forged from an ancient heart. </span> <span><a href="{{store direct_url="#"}}"> Learn more </a></span></li> <li><span> Leather handbag is the cherry on top of every outfit </span> <span><a href="{{store direct_url="#"}}"> Learn more </a></span></li> <li><span>Built with unbreakable parts & heavy duty full grain leather </span> <span><a href="{{store direct_url="#"}}"> Learn more </a></span></li> </ul> </div>
Front-end Appearance:

4. position-4: Travel Sale
<div class="block static-block3"> <div class="left"><a href="{{store direct_url="women.html"}}"><img src="{{media url="wysiwyg/index_11.jpg"}}" alt="Left Banner" /></a></div> <div class="right"> <div class="arrow-left"> </div> <ul> <li><a href="{{store direct_url="women.html"}}"><span class="text-title"> Travel Sale</span></a> <span class="text-deskiption">I had the pleasure of visiting Ethiopia almost 2 years ago. It's ridiculous that I just got around to posting the images now, I know. Such an amazing place. </span></li> </ul> <a class="button-reading" href="{{store direct_url="women.html"}}">Continue Reading</a></div> </div>
Front-end Appearance:

5. position-5: Stay up to date
<p>{{block type="newsletter/subscribe" name="position-10" template="newsletter/subscribe.phtml" }}</p>
Front-end Appearance:
6. position-6: Information
<div class="block block-information col-1 first"> <div class="col-inner"> <div class="block-title"><strong><span>information</span></strong><span class="block-control"><em class="icon-angle-down"><em>control</em></em></span></div> <div class="block-content"> <ul> <li><a href="{{store direct_url=""}}privacy-policy">Delivery</a></li> <li><a href="{{store direct_url=""}}sales/guest/form">Returns & Refunds</a></li> <li><a href="{{store direct_url=""}}contacts">Contact Us</a></li> <li><a href="{{store direct_url=""}}privacy-policy">Reglaze Service</a></li> <li><a href="{{store direct_url=""}}privacy-policy">Lens Price Comparison</a></li> <li><a href="{{store direct_url=""}}brands">A - Z Brands</a></li> </ul> </div> </div> <script type="text/javascript">// <![CDATA[ ja(document).ready(function(){ ja(".block-information span.block-control").click(function(){ ja(".block-information .block-content").toggle(); ja(this).toggleClass( "active" ); }); }); // ]]></script> </div>
Front-end Appearance:
7. position-7: Shopping
<div class="block block-shop col-2"> <div class="col-inner"> <div class="block-title"><strong><span>Shopping</span></strong><span class="block-control"><em class="icon-angle-down"><em>control</em></em></span></div> <div class="block-content"> <ul> <li><a href="{{store direct_url=""}}men.html">New products</a></li> <li><a href="{{store direct_url=""}}men.html">Top sellers</a></li> <li><a href="{{store direct_url=""}}men.html">Specials</a></li> <li><a href="{{store direct_url=""}}men.html">Manufacturers</a></li> <li><a href="{{store direct_url=""}}men.html">Suppliers</a></li> <li><a href="{{store direct_url=""}}men.html">Specials</a></li> <li><a href="{{store direct_url=""}}customer-service">Customer Service</a></li> </ul> </div> </div> <script type="text/javascript">// <![CDATA[ ja(document).ready(function(){ ja(".block-shop span.block-control").click(function(){ ja(".block-shop .block-content").toggle(); ja(this).toggleClass( "active" ); }); }); // ]]></script> </div>
Front-end Appearance:
8. position-8: My Account
<div class="block block-linkacc col-3"> <div class="col-inner"> <div class="block-title"><strong><span>my account</span></strong><span class="block-control"><em class="icon-angle-down"><em>control</em></em></span></div> <div class="block-content"> <ul> <li><a href="{{store direct_url=""}}customer/account/login">Sign In</a></li> <li><a href="{{store direct_url=""}}checkout/cart">View Cart</a></li> <li><a href="{{store direct_url=""}}wishlist">My Wishlist</a></li> <li><a href="{{store direct_url=""}}checkout">Check out</a></li> <li><a href="{{store direct_url=""}}sales/guest/form">Track My Order</a></li> <li><a href="{{store direct_url=""}}privacy-policy">Help</a></li> </ul> </div> </div> <script type="text/javascript">// <![CDATA[ ja(document).ready(function(){ ja(".block-linkacc span.block-control").click(function(){ ja(".block-linkacc .block-content").toggle(); ja(this).toggleClass( "active" ); }); }); // ]]></script> </div>
Front-end Appearance:
9. position-9: Social
<div class="block block-contact col-4 last"> <div class="col-inner"> <div class="block-title"><strong><span>Elsewhere online</span></strong><span class="block-control"><em class="icon-angle-down"><em>control</em></em></span></div> <div class="block-content"> <ul class="list-socials"> <li class="facebook"><a href="//www.facebook.com/joomlart"><em class="icon-facebook"> </em>Facebook</a></li> <li class="twitter"><a href="https://twitter.com/JoomlArt"><em class="icon-twitter"> </em>Twitter</a></li> <li class="google-plus"><a href="//www.joomlart.com"> <em class="icon-google-plus"> </em>Google plus</a></li> <li class="pinterest"><a href="//www.joomlart.com"> <em class="icon-pinterest"> </em>Pinterest</a></li> </ul> </div> </div> <script type="text/javascript">// <![CDATA[ ja(document).ready(function(){ ja(".block-contact span.block-control").click(function(){ ja(".block-contact .block-content").toggle(); ja(this).toggleClass( "active" ); }); }); // ]]></script> </div>
Front-end Appearance:
10. position-10: New Product Arrivals
<p>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" template="joomlart/jmproducts/list.phtml" }}</p>
Front-end Appearance:
11. free-shipping: Free Shipping
<div class="free-shipping">Free Shipping Over $100</div>
Front-end Appearance:
12. newarrivals-tab1: Newarrivals-Tab1
<p>{{block type="joomlart_jmcategorylist/list" name="jmcategorylist1" template="joomlart/jmcategorylist/category.phtml" catsid="12,13,14,15,16,17" }}</p>
Front-end Appearance:
13. devicesleeves-tab2: Device Sleeves Tab2
<p>{{block type="joomlart_jmcategorylist/list" name="jmcategorylist2" template="joomlart/jmcategorylist/category.phtml" catsid="16,17,18,19,20" }}</p>
Front-end Appearance:
14. accessories-tab3: Accessories Tab3
<p>{{block type="joomlart_jmcategorylist/list" name="jmcategorylist3" template="joomlart/jmcategorylist/category.phtml" catsid="21,22,23,24,16,17" }}</p>
Front-end Appearance:
15. contactinfo: Contact info
<div class="contact-info"> <div class="contact-map"><iframe src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=123+Main+st.+Los+Angeles,+CA,+90012,+U.S.A+&sll=37.0625,-95.677068&sspn=34.176059,86.572266&ie=UTF8&hq=&hnear=123+S+Main+St,+Los+Angeles,+California+90012&t=m&ll=34.051877,-118.243704&spn=0.027023,0.072012&z=14&iwloc=A&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="295"></iframe></div> <div class="info-inner"> <p>Fusce dapibus, tellus commodo, tortor mauris condimentum utellus fermentum, porta sem malesuada magna. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur. Fusce dapibus, tellus commodo, tortor mauris condimentum utellus fermentum, porta sem malesuada magna. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur. Fusce dapibus, tellus commodo, tortor mauris condimentum utellus fermentum, porta sem malesuada magna. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur. Fusce dapibus, tellus commodo, tortor mauris condimentum utellus fermentum, porta sem malesuada magna. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur.</p> <ul class="list-info"> <li class="address"><em class="icon-home"> </em><span>Address:</span> 123 Main st. Los Angeles, CA, 90012, U.S.A</li> <li class="phone"><em class="icon-phone"> </em><span>Phone:</span> (315) 457-0000</li> <li class="email"><em class="icon-envelope"> </em><span>Email:</span> <a href="mailto:[email protected]">[email protected]</a></li> </ul> </div> </div>
Front-end Appearance:
16. featured-product-megamenu: Featured Product
<div>{{block type="joomlart_jmproducts/list" name="oneproduct" quanlity="1" productsid="12" title="" template="joomlart/jmproducts/oneproduct.phtml" }}</div>
Front-end Appearance:
17. colors: Colors
<div class="colors-setting"><label for="select-colors">colors:</label><a class="colors-default" title="Default" href="{{store url=""}}?jmcolor=default"><span>default</span></a><a class="colors-blue" title="Blue" href="{{store url=""}}?jmcolor=blue"><span>blue</span></a><a class="colors-red" title="Red" href="{{store url=""}}?jmcolor=red"><span>red</span></a><a class="colors-pink" title="Pink" href="{{store url=""}}?jmcolor=pink"><span>pink</span></a><a class="colors-yellow" title="Yellow" href="{{store url=""}}?jmcolor=yellow"><span>yellow</span></a></div>
Front-end Appearance:
18. position-11: Size Chart
<div class="pview_info" style="line-height: 22px; display: block;">Most of our products are made as one size fits most. We use high quality leather which can be easily stretched.<br /> Please also refer to the following measurements restrictions: <br /> <br /> <table border="0" cellspacing="1" cellpadding="3" bgcolor="#cccccc"> <tbody> <tr> <td align="center" bgcolor="#ddd" width="105"><strong>Size </strong></td> <td align="center" bgcolor="#ddd" width="127"><strong>Bust(cm) </strong></td> <td align="center" bgcolor="#ddd" width="116"><strong>Waist(cm)</strong></td> <td align="center" bgcolor="#ddd" width="116"><strong>Hips(cm)</strong></td> </tr> <tr> <td align="center" bgcolor="#ddd"><strong>Small</strong></td> <td align="center" bgcolor="#ddd">81-86</td> <td align="center" bgcolor="#ddd">58-64</td> <td align="center" bgcolor="#ddd">86-91</td> </tr> <tr> <td align="center" bgcolor="#ddd"><strong>Medium</strong></td> <td align="center" bgcolor="#ddd">86-94</td> <td align="center" bgcolor="#ddd">64-71</td> <td align="center" bgcolor="#ddd">91-99</td> </tr> <tr> <td align="center" bgcolor="#ddd"><strong>Large</strong></td> <td align="center" bgcolor="#ddd">99-102</td> <td align="center" bgcolor="#ddd">71-79</td> <td align="center" bgcolor="#ddd">99-104</td> </tr> <tr> <td align="center" bgcolor="#ddd"><strong>XL</strong></td> <td align="center" bgcolor="#ddd">99-107</td> <td align="center" bgcolor="#ddd">79-86</td> <td align="center" bgcolor="#ddd">104-112</td> </tr> <tr> <td align="center" bgcolor="#ddd"><strong>XXL</strong></td> <td align="center" bgcolor="#ddd">107-117</td> <td align="center" bgcolor="#ddd">87-94</td> <td align="center" bgcolor="#ddd">112-119</td> </tr> <tr> <td align="center" bgcolor="#ddd"><strong>XXXL</strong></td> <td align="center" bgcolor="#ddd">117-122</td> <td align="center" bgcolor="#ddd">94-102</td> <td align="center" bgcolor="#ddd">119-127</td> </tr> <tr> <td align="center"><strong>one size</strong></td> <td align="center">86-102</td> <td align="center">58-79</td> <td align="center">90-104</td> </tr> </tbody> </table> </div>
Front-end Appearance:
Note:
Position-11 is a custom tab. To know how to add custom tabs into pages, following this guide: Add Custom Tabs to Magento Product.
Extension Configuration
1. Masshead Extension
Masshead Magento extension can be displayed at any position. In Leathercraft Demo site, this extension is being used at the header of the category pages.
In the Magento Admin Panel, navigate to JoomlArt >> Masshead and configure the default settings as the Back-end Settings.
To get this extension for any categories, navigate to Catalog >> Manage Categories >> select the actual category as shown in Back-end Settings.
Copy and paste the following code into the “Custom Layout Update” tab.
<reference name="mass-top1"> <block type="joomlart_jmmasshead/core" name="jmmasshead" > <action method="setData"><name>title</name><value>/ New Arrivals</value></action> <action method="setData"><name>background</name><value>masshead/masshead1.jpg</value></action> </block> </reference>
Front-end Appearance
For more detail, please check the documentation of the module.
2. Basetheme Extension
2.1. Basetheme Configuration
In the Magento Admin Panel, navigate to JoomlArt >> Basetheme and configure the default settings as the Back-end Settings.
Front-end Appearance
2.2. Label Configuration
To label any products, follow these steps.
Step 1: At Theme Settings, select “Yes” value to enable Labelling function.
Step 2: Navigate to Catalog >> Attributes >> Manage Attributes and create a new attribute named Label.
- Properties -- Back-end Settings
- Manage Label/ Options -- Back-end Settings
Step 3: Navigate to Catalog >> Attributes >> Manage Attribute Sets to add the “Label” attribute into “Default Attribute Set”.
Step 4: Simply choose the label you want for each product as Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
3. Mega Menu Extension
Navigate to JoomlArt >> Mega Menu, enable and choose the animation effect for your menu as the Back-end Settings. For detailed configuration of each menu item, refer to the Menu Configuration.
Front-end Appearance
For more detail, please check the documentation of the module.
4. QuickView Extension
Navigate to JoomlArt >> QuickView and configure the default settings as Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
5. Products Extension
Navigate to JoomlArt >> Products and configure the default settings as Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
6. Category List Extension
Navigate to JoomlArt >> Category List and configure the default settings as Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
7. Tabs Extension
Navigate to JoomlArt >> Tabs and configure the default settings as Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
8. Slideshow Extension
Navigate to JoomlArt >> Products Slider and configure the default settings as Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
Responsive Layout Configuration
As a responsive Magento theme, Leathercraft supports responsive layout for various screen sizes and Off-Canvas menu for collapsed screens of mobiles and tablets.
Screenshot of Leathercraft layout in various devices:
Screenshot of Off-Canvas layout for Leathercraft:
All the style files are located in the folder: skin/frontend/default/jm_Leathercraft/css.
In this particular theme, we support 3 layout styles for desktop, tablet and mobile. With the style files in hand, modification for the files need to be defined in the page.xml file located in:
app/design/frontend/default/jm_Leathercraft/layout.
Note:
The default settings of responsive Magento theme Leathercraft support any eCommerce Magento site to work at its best performance. Any modification may not be supported by us.