Software (Tools) Magento theme installation guide

You can now free install our themes automatically with Magenting.com - professional Magento hosting.

Initial installation

1. Copy files from the package theme/ dir to your Magento Directory (PSD/ dir in the package holds PSD source files).

2. Navigate to Backend->System->Configuration->Design->Package Tab-> Current Package Name Field and set this field to default value

3. Navigate to Backend->System->Configuration->Design->Themes Tab and set all fields to wp-software value.

4. Navigate to Backend->System->Configuration->Content Management Tab and set "Enable WYSIWYG Editor" to Disable by Default value.

Now do the following actions from the admin side.

Create category for main navigation menu

In order to get the main navigation visible, you need to create at least one active subcategory in the root folder. Category should be subcategory of the Root (default) category. Category must be active to be showing in the main navigation. Wiki: How to create new categories in Magento

Create hidden categories

Create 3 categories as subcategories to your theme default category. They must be inactive to be hidden in the main navigation. These categories would be for "Home Page Products" , "Home Page Slider", "Popular Products". Remember the IDs of these categories. See the image below.

Once categories are created it is good to add several products to them. Do not forget to keep indexes in touch. System->Index Management

Create or Edit Static Block footer_links

Go to CMS->Static Block to add new static blocks.

Block Title*	footer_links
Identifier*	footer_links
Store View*	Select correct store view
Status	Enabled*
Content	<ul> <li><a href="https://web-experiment.info/"about-magento-demo-store"">About Us</a></li> <li class="last"><a href="https://web-experiment.info/"customer-service"">Customer Service</a></li> </ul>

Create or Edit Static Block quick_links

Go to CMS->Static Block to add new static blocks.

Block Title*	quick_links
Identifier*	quick_links
Store View*	Select correct store view
Status	Enabled*
Content	<ul class="q-links"> <li class="bor"><a title="" href="#">HotDeals</a></li> <li class="bor"><a title="" href="#">HotNews</a></li> <li class="bor"><a title="" href="#">Services</a></li> <li><a title="" href="#">Promotions</a></li> </ul>

Create or Edit Static Block footer_columns

Go to CMS->Static Block to add new static blocks.

Block Title*	footer_columns
Identifier*	footer_columns
Store View*	Select correct store view
Status	Enabled*
Content	<div class="footer_columns"> <div class="col1"> <h2>Company</h2> <ul> <li><a href="#">Certification</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Profile</a></li> </ul> </div> <div class="col2"> <h2>Customer Service</h2> <ul> <li><a href="#">Trial Policy</a></li> <li><a href="#">Delivery Policy</a></li> <li><a href="#">Payments</a></li> <li><a href="#">Shipping</a></li> </ul> </div> <div class="col3"> <h2>Information</h2> <ul> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Legal Information</a></li> <li><a href="#">Site Map</a></li> </ul> </div> <div class="col4"> <h3 class="cphone">Customer service phone<strong> +1.253.243.2001</strong></h3> <p class="mail">Mail info@comany.com</p> <p class="fax">Fax 253-243-2001</p> <p class="phone">Phone 253-243-2001</p> </div> <div class="sp"><span>clear</span></div> </div>

Create or Edit Static Block footer_cards

Go to CMS->Static Block to add new static blocks.

Block Title*	footer_cards
Identifier*	footer_cards
Store View*	Select correct store view
Status	Enabled*
Content	<div class="footer-cards"> <div class="payments"><img src="https://web-experiment.info/skin/frontend/default/web-experiment//images/cards-img-2.gif" alt="" /></div> <div class="secure"><img src="https://web-experiment.info/skin/frontend/default/web-experiment//images/cards-img-1.gif" alt="" /></div> <div class="authorize"><img src="https://web-experiment.info/skin/frontend/default/web-experiment//images/authorize.png" alt="" /></div> <div class="sp"><span>clear</span></div> </div>

Create or Edit Static Block footer_info

Go to CMS->Static Block to add new static blocks.

Block Title*	footer_info
Identifier*	footer_info
Store View*	Select correct store view
Status	Enabled*
Content	<div class="footer-info"> <div class="left_col"> <ul> <li><a href="#">Accessibiity</a></li> <li class="last"><a href="#">Sitemap</a></li> <li class="last"><a href="#">Privacy Policy</a></li> <li class="last"><a href="#">Legal Notice</a></li> </ul> <p class="seo">SEO text goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a title="" href="#">Magento eCommerce theme</a> | <a title="" href="#">Magento eCommerce</a></p> <p>All contents &copy; Copyright Web-Experiment.info. 2012. All Rights Reserved</p> <p>&nbsp;</p> </div> <div class="right_col"> <p>Tel: <strong>+1.253.243.2001</strong> Emai: <a href="malito:info@domain.info">info@domain.info</a></p> <p class="copy">WebExperiment &copy; 2012</p> </div> <div class="sp"><span>clear</span></div> </div>

Create or Edit Static Block left_info_block

Go to CMS->Static Block to add new static blocks.

Block Title*	left_info_block
Identifier*	left_info_block
Store View*	Select correct store view
Status	Enabled*
Content	<p><a href="#"><img src="https://web-experiment.info/media/wp-software/chat_online.gif" alt="Chat Online" /></a></p>

Create or Edit Static Block news_left_col

Go to CMS->Static Block to add new static blocks.

Block Title*	news_left_col
Identifier*	news_left_col
Store View*	Select correct store view
Status	Enabled*
Content	<div class="block"> <div class="block-content news_left"> <div class="news-lef-col"> <h2><strong>News and announcements</strong> Read the latest news and information</h2> <dl> <dt> <strong>Aug 02, 2012</strong><a href="#">- Magento Community Edition</a> </dt> <dd>The Magento Community Edition is available as a free download under the open source OSL 3.0 license and is recommended for expert developers and highly technical enthusiasts and hobbyists in non-mission critical environments. </dd> <dt> <strong>Aug 02, 2012</strong><a href="#">- Upgrade to Magento Enterprise Edition</a></dt> <dd>Upgrade to Magento Enterprise Edition now to receive world-class support and Enterprise-exclusive features!. </dd> </dl> <p><a class="more" href="#"><span>Read all news</span></a></p> </div> </div> </div>

Create or Edit Static Block block_partners

Go to CMS->Static Block to add new static blocks.

Block Title*	block_partners
Identifier*	block_partners
Store View*	Select correct store view
Status	Enabled*
Content	<div class="block"> <div class="block-title"><strong><span>We are partners</span></strong></div> <div class="block-content"> <div class="partner"><a href="#"><img src="https://web-experiment.info/media/"wp-software/dyn.png"" alt="" /></a> <a href="#"><img src="https://web-experiment.info/media/"wp-software/mic.png"" alt="" /></a> <a href="#"><img src="https://web-experiment.info/media/"wp-software/siemens.png"" alt="" /></a></div> </div> <div class="sp"><span>clear</span></div> </div>

Create or Edit Static Block block_role

Go to CMS->Static Block to add new static blocks.

Block Title*	block_role
Identifier*	block_role
Store View*	Select correct store view
Status	Enabled*
Content Do not forget to change PopularProductsCategoryID to actual category ID	<div class="block"> <div class="block-title"><strong><span>What&rsquo;s your role?</span></strong></div> <div class="block-content"> <ul class="your-role"> <li class="role-mark"><a href="#">Marketing</a></li> <li class="role-sale"><a href="#">Sales</a></li> <li class="role-fina"><a href="#">Finance/Accounting</a></li> <li class="role-oper"><a href="#">Operations</a></li> <li class="role-pract"><a href="#">Practitioner</a></li> <li class="role-cust"><a href="#">Customer Service</a></li> </ul> </div> </div> <div class="sp"><span>clear</span></div> <div class="block testimonial"> <div class="block-title"><strong><span>Testimonial</span></strong></div> <div class="block-content"> <p>I am quite impressed with your level of customer service. I am really satisfied with Magento Template. I will reccomend you to my collegues.</p> <p class="signt">Matthew Bailey</p> <p class="link"><a href="#"><span>View all</span></a></p> </div> </div> <div></div>

Create or Edit Static Block header_navigation

Go to CMS->Static Block to add new static blocks.

Block Title*	header_navigation
Identifier*	header_navigation
Store View*	Select correct store view
Status	Enabled*
Content	<ul id="headernav"> <li><a href="https://web-experiment.info/""/"><span>Home</span></a></li> <li class="level0 nav-1 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"> <a href="https://web-experiment.info/"software-magento-template.html"/"> <span>One column menu</span> </a> <ul class="level0"> <li><a><strong class="menutitle">E-Commerce</strong></a></li> <li class="level1 nav-1-1 first"> <a href="#"> <span>Menu item</span> </a> </li> <li class="level1 nav-1-2 last"> <a href="#"> <span>Menu item</span> </a> </li> </ul> </li> <li><a href="https://web-experiment.info/"woodworking-magento-template.html"/"><span>Two columns menu</span></a> <div class="menudiv"> <div> <ul class="level0"> <li><a><strong class="menutitle">E-Commerce</strong></a> </li> <li class="level1 nav-1-1 first"> <a href="#"> <span>Educational</span> </a> </li> <li class="level1 nav-1-2"> <a href="#"> <span>Games</span> </a> </li> <li class="level1 nav-1-3"> <a href="#"> <span>Graphics</span> </a> </li> <li class="level1 nav-1-4 last"> <a href="#"> <span>Home and Hobby</span> </a> </li> <li><a><strong class="menutitle">E-Commerce</strong></a></li> <li class="level1 nav-1-1 first"> <a href="#"> <span>Educational</span> </a> </li> <li class="level1 nav-1-2"> <a href="#"> <span>Games</span> </a> </li> <li class="level1 nav-1-3"> <a href="#"> <span>Graphics</span> </a> </li> <li class="level1 nav-1-4 last"> <a href="#"> <span>Home and Hobby</span> </a> </li> </ul> </div> <div> <ul class="level0"> <li><a><strong class="menutitle">E-Commerce</strong> </a></li> <li class="level1 nav-1-1 first"> <a href="#"> <span>Educational</span> </a> </li> <li class="level1 nav-1-2"> <a href="#"> <span>Games</span> </a> </li> <li class="level1 nav-1-3"> <a href="#"> <span>Graphics</span> </a> </li> <li class="level1 nav-1-4 last"> <a href="#"> <span>Home and Hobby</span> </a> </li> <li><a><strong class="menutitle">E-Commerce</strong></a> </li> <li class="level1 nav-1-1 first"> <a href="#"> <span>Educational</span> </a> </li> <li class="level1 nav-1-2"> <a href="#"> <span>Games</span> </a> </li> <li class="level1 nav-1-3"> <a href="#"> <span>Graphics</span> </a> </li> <li class="level1 nav-1-4 last"> <a href="#"> <span>Home and Hobby</span> </a> </li> </ul> </div> </div> <div style="clear: both;">&nbsp;</div> </li> <li><a href="https://web-experiment.info/"customer-service"/"><span>Customer Service</span></a></li> <li><a href="https://web-experiment.info/"about-us"/"><span>About Us</span></a></li> </ul> <script type="application/javascript">document.observe("dom:loaded", function() { mainNav("headernav", {"show_delay":"100","hide_delay":"100"});});</script>

Edit home page

Go to CMS->Pages and Edit/Add home page

Page Title*	home
URL Key	home
Store View	Select correct store view
Status	Enabled*
Content * Do not forget to replace PopularProductsCategoryID, HomePageProductsCategoryID and HomePageSliderCategoryID with the IDs of created categories	<div class="slider-wrap" style="height: 320px; overflow: hidden;"> <div id="slider-content" class="slider-wrap"> <a title="" href="#"> <img src="https://web-experiment.info/media/"wp-software/slider-img-1.jpg"" alt="" width="530" height="320" /> </a> <a title="" href="#"> <img src="https://web-experiment.info/media/"wp-software/slider-img-2.jpg"" alt="" width="530" height="320" /> </a> <a title="" href="#"> <img src="https://web-experiment.info/media/"wp-software/slider-img-3.jpg"" alt="" width="530" height="320" /> </a> </div> </div> <div class="tabs_block"> <div id="hometabs" class="tabs_ul"> <ul> <li><a class="left_tab" href="#fragment-1">Featured Products</a></li> <li><a class="center_tab" href="#fragment-2">Promotions</a></li> <li><a class="right_tab" href="#fragment-3">eCommerce Platform</a></li> </ul> </div> <div id="fragment-1" class="tabs_info"> <div class="f-1_left"><a href="#"><img src="https://web-experiment.info/media/"wp-software/dyn.png"" alt="" /></a></div> <div class="f-1_right"> <h5><a href="#">Focus on Your Business</a></h5> <p>Removable wireless screen for ease of viewing when in tight areas <a class="tabs_more" href="#"><span>more &hellip;</span></a></p> </div> <div style="clear: both; border-top: 1px dotted #D5D4D2; width: 100%; height: 5px;">&nbsp;</div> <div></div> </div> <div id="fragment-2" class="tabs_info"> <h5><a href="#">Build a Better Online Store</a></h5> <p>Magento eCommerce, the deployed solution powers the world's leading merchants. Magenting, our hosted solution, enables small merchants with big ambitions to leverage this technology to build a better online store.</p> <h5><a href="#">Solutions for Small &amp; Emerging Businesses</a></h5> <p>The Magento Community Edition is available as a free download under the open source OSL 3.0 license and is recommended for expert developers and highly technical enthusiasts and hobbyists in non-mission critical environments. As this edition is unsupported it is intended to be used by those happy to spend time and resource solving issues independently</p> </div> <div id="fragment-3" class="tabs_info"> <div class="f-3_left"> <h5><a href="#">Build a Better Online Store</a></h5> <p>Magento eCommerce, the deployed solution powers the world's leading merchants. Magenting, our hosted solution, enables small merchants with big ambitions to leverage this technology to build a better online store.</p> <h5><a href="#">Solutions for Small &amp; Emerging Businesses</a></h5> <div></div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function(){jQuery("#hometabs").tabs({ fxFade: true, fxSpeed: 'fast', selected: '1' }); }); </script> <div style="clear: both;">&nbsp;</div> </div> <div style="clear: both; padding-top: 10px;">&nbsp;</div> <div class="hotdeals"> <div class="page-title"> <h2><strong>Hot Deals</strong></h2> </div> <div></div> </div> <div class="hotdeals"> <div class="page-title"> <h2><strong>This Month's Favourites</strong></h2> </div> <div></div> </div>
Layout	3columns*
Layout Update XML	<reference name="head"> <action method="addItem"><type>skin_css</type><name>css/tabs.css</name></action> <action method="addItem"><type>skin_js</type><name>js/jquery-1.5.2.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/noconflict.js</name></action> <action method="addItem"><type>skin_js</type><name>js/ui.js</name></action> <action method="addItem"><type>skin_js</type><name>js/cycle-fade-effect.js</name></action> <action method="addItem"><type>skin_js</type><name>js/slider.js</name></action> </reference>

 

Extensions

Shipping price calculator and One page checkout

Included in the package.

• Shipping Price Calculator Installation Guide
• OnePage Magento Checkout Installation Guide

Other extensions

• Extension which might be used with this theme: Quick Feedback.

We also recommend adding Lightbox extension to your Magento

• How to change "jQuery Cycle Plugin" effect, for templates without "Total Slider Manager"

Congratulations! Your magento theme is ready!

Thank you for using this theme.

Magento How Toes

Useful video tutorials powered by Template-help.com

• How to remove the warning message about {{base url}}
• How to add a category
• How to add a simple product
• How to create a configurable product
• How to create an attribute
• How to create an attribute set
• How to configure tier pricing
• How to configure a product listing layout
• How to add a static page
• How to manage html pages content

Magento template customization

Video tutorials powered by Template-help.com

• How to change the logo
• How to change the welcome message
• How to disable side-boxes
• How to edit the footer copyright notification
• How to change the home page banner links
• How to disable blocks on the home page

Go to contentsBack to previous page