Magento Expert System - Software (Tools) Magento theme installation guide

JavaScript seem to be disabled in your browser.

You must have JavaScript enabled in your browser to utilize the functionality of this website.

clear

Home /
Magento Expert System /
Software (Tools) Magento theme installation guide

Software (Tools) Magento theme installation guide

9/25/11 11:15 PM

Thank you for using this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

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->Themes Tab and set all fields to wp-software value.

Now do the following actions from the admin side:

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.

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 * (Click to Hide Editor first)	<ul> <li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li> <li class="last"><a href="{{store direct_url="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 * (Click to Hide Editor first)	<ul class="q-links"> <li class="bor"><a title="HotDeals" href="#">HotDeals</a></li> <li class="bor"><a title="HotNews" href="#">HotNews</a></li> <li class="bor"><a title="Services" href="#">Services</a></li> <li><a title="Promotions" 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 * (Click to Hide Editor first)	<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 * (Click to Hide Editor first)	<div class="footer-cards"> <div class="payments"><img src="{{skin_url}}/images/cards-img-2.gif" alt="" /></div> <div class="secure"><img src="{{skin_url}}/images/cards-img-1.gif" alt="" /></div> <div class="authorize"><img src="{{skin_url}}/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 * (Click to Hide Editor first)	<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. Web-Experiment.info offers a wide choice of nice looking and easily editable Premium Magento Themes and lets you find the most appropriate design for your online store. Whatever design you choose, it’ll be easy to use and customize. <a title="Magento Template" href="#">Magento Template</a> \| <a title="Magento Theme" href="http://web-experiment.info">Magento Theme</a> \| <a title="Magento eCommerce template" href="http://web-experiment.info">Magento eCommerce template</a> \| <a title="Magento eCommerce theme" href="http://web-experiment.info">Magento eCommerce theme</a> \| <a title="Magento eCommerce" href="http://web-experiment.info">Magento eCommerce</a></p> <p>All contents © Copyright Web-Experiment.info. 2011. All Rights Reserved</p> <p> </p> </div> <div class="right_col"> <p>Tel: <strong>+1.253.243.2001</strong> Emai: <a href="malito:info@web-experiment.info">info@web-experiment.info</a></p> <p class="copy">WebExperiment © 2011</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 * (Click to Hide Editor first)	<p><a href="#"><img src="{{media url="wp-software/chat_online.gif"}}" alt="Livezilla chat goes here" /></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 * (Click to Hide Editor first)	<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>Nov 02, 2011</strong><a href="/news_details">- 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>Nov 02, 2011</strong><a href="/news_details">- 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="/news"><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 * (Click to Hide Editor first)	<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="{{media url="wp-software/dyn.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wp-software/mic.png"}}" alt="" /></a> <a href="#"><img src="{{media url="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 * (Click to Hide Editor first) Do not forget to change PopularProductsCategoryID to actual category ID	<div class="block"> <div class="block-title"><strong><span>What’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="/testimonials"><span>View all</span></a></p> </div> </div> <div>{{block type="catalog/product_popular" template="catalog/product/popular.phtml" category_id="PopularProductsCategoryID"}}</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 * (Click to Hide Editor first)	<ul id="headernav"> <li><a href="/home"><span>Home</span></a></li> <li class="level0 nav-1 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"> <a href="http://software-magento-template.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="http://software-magento-template.web-experiment.info/graphics-software-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;"> </div> </li> <li><a href="/customer-service"><span>Customer Service</span></a></li> <li><a href="/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 * (Click to Hide Editor first) 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="Tools Magento Template" href="#"> <img src="{{media url="wp-software/slider-img-1.jpg"}}" alt="Windows Intune" width="530" height="320" /> </a> <a title="Tools Magento Template" href="#"> <img src="{{media url="wp-software/slider-img-2.jpg"}}" alt="Tools Magento Template" width="530" height="320" /> </a> <a title="Tools Magento Template" href="#"> <img src="{{media url="wp-software/slider-img-3.jpg"}}" alt="Tools Magento Template" 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="{{media url="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 …</span></a></p> </div> <div style="clear: both; border-top: 1px dotted #D5D4D2; width: 100%; height: 5px;"> </div> <div>{{block type="catalog/product_popular" column_count="8" image_size="80" template="catalog/product/tabs_cat.phtml" category_id="HomePageSliderCategoryID"}}</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 & 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 & Emerging Businesses</a></h5> <div>{{block type="catalog/product_popular" column_count="8" image_size="80" template="catalog/product/tabs_cat.phtml" category_id="HomePageSliderCategoryID"}}</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;"> </div> </div> <div style="clear: both; padding-top: 10px;"> </div> <div class="hotdeals"> <div class="page-title"> <h2><strong>Hot Deals</strong></h2> </div> <div>{{block type="catalog/product_popular" template="catalog/product/hot_deals.phtml" column_count="4" category_id="HomePageProductsCategoryID"}}</div> </div> <div class="hotdeals"> <div class="page-title"> <h2><strong>This Month's Favourites</strong></h2> </div> <div>{{block type="catalog/product_popular" template="catalog/product/hot_deals.phtml" column_count="4" category_id="PopularProductsCategoryID"}}</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>

Custom Menu extension

If you need our custom menu layout, please load and install the extension http://web-experiment.info/webandpeople-custom-menu-extension.html

Shipping price calculator and One page checkout

Included in the package please check magento backend system->configuration->web-and-people section.
If you get 404 error when you try to access any extension, please relogin to the backend.

Congratulations! Your magento theme is ready!

We also recommend adding EasyLightbox Extension, Easy Tabs extension, Blog by AheadWorks to your magento

HTML & CSS Structure

This theme is built according to Magento standards, you might see the general structure of Magento themes here
HTML structure were kept as default in Magento. changed template phtml files are located at:

 
YourMagentoDir/app/design/frontend/default/wp-software/template

Theme also includes layout configuration xml files here:

 
YourMagentoDir/app/design/frontend/default/wp-software/layout

If you would like to edit the color, font, or style of any elements in one of these columns, you would edit this css file:

 
YourMagentoDir/skin/frontend/default/wp-software/css/skin.css

Files Structure

Theme uses standard css files plus custom skin.css which contains all custom styles.

Main directories: php, phtml, xml files

app/

banners and other media

media/

javascripts, css, images used by css

skin/

JavaScript

This theme imports several Javascript files.

jQuery
jQuery.jCarousel plugin (the product slider in the home_page_header_block static block)
jQuery.siteFeature plugin (main slider)
jQuery.dc-slider plugin (small sliders in the sidebars or categories)
slider.js file (contains main slider preferences like sizes, timings, effect types)
noconfilct js file

jQuery is a Javascript library that greatly reduces the amount of code that you must write.

PSD Files

please contact us in order to get the source files

Additional features

This theme has a built in css and html for a free

Quick contact magento extension http://www.magentocommerce.com/magento-connect/Mage-World/extension/1961/quick-contact--free-frontend-version

Easytabs would look nice with this theme http://www.magentocommerce.com/extension/packages/module/1725/magento-easytabs

Online chat buttons are used from the free livezilla chat programm http://www.livezilla.net/home/en/ You might find there all installation instructions

Free installation on the magento specialized hosting http://mageting.com

Bookmark with:

Stumbleupon.com

Posted in ToolStore By

WebExperiment team

Categories

Our news

You can now install our themes automatically with Magenting.com hosting
We are now upgrading our themes and extensions to 1.7.0.0

Magenting.com hosting gives you deeper integration. Get the theme and extensions rapidly installed on Magenting.com hosting for absolutely free. Just check that option at checkout.

All you have to do is follow the simple steps to get a Magenting.com hosting account (starting at $20/month).

2012-May-04

Magento 1.7.0.0 Stable has released. We are now upgrading our themes and extensions to 1.7.0.0

All extensions already checked and you can get updates by sending request to us

2012-May-10

Testimonials

I've been shopping around doing alot of comparison to find the best them for my new online store. I found these guys and wow couldn't believe my eyes. The theme looks so clean and match very well for my kids and beauty store. It works right out of the box without modification. I'm not a tech savvy or know how to code Magento so this is a big plus for me. Everything is ready to go after installed. Not to mention their tech support Live Chat was very helpful.

It was a great template to work with.

lovethehome.co.uk
Mike Elliss

I think the feeling that you really understood what a Pharmacy/ Beauty oriented shopping needs are. I have looked at many many web templates. The designers are smart people, no doubt about that but was always missing was that subtle hint that they really did not have that much of deep understanding of specific industries that they were building themes for. So, that makes a world of difference to see somebody actually has spend some time understanding your sector's specific needs.

I do not expect a 100% perfect template but i am going to appreciate and of course do business with somebody that at least has tried to show me that level of expertise plus understanding of my business needs that i expect. I am very excited and i hope that be a good costumer for you and you be a good vendor for me.

Ismail

Thank you very much for the template and appreciate it very much of you!, soon I will order next templates (we realy love your as we have also lightshop). So also a design question; when you guys are planning mobile template???

Michael

Keep doing that great work with themes. If our site goes up (and i'm sure of it) we will contact to you to make a most personalised/ unique one. I really like your designs.

Mifarma.es
Javier