MT Gero userguide

I. Quickstart Installation

• Step 1: Create new database and import sample database ( mt_gero.sql or mt_gero.sql.gz) in database folder.
• Step 2: Extract and Upload the whole Quickstart package to your server
• Step 3: Open browser and navigate to your site (where the quickstart uploaded) to load default Magento installer with the database you just created and import sample database.
• Step 4: Step by step to follow the instructions
• Step 5: Finish installer

II. Theme Installation

1. First, unzip theme package ZIP-file and then copy the whole "app and skin"- folders on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
2. A message may popup and warn you that there are similar files already on your server. You will need to select overwrite to overwrite the same files. If not, don't worry, it will still work.
3. Log in to your backend of your Magento Administration and go to "System"→ "Configuration" then select "Desgin" Tab under GENERAL. Open the "Themes" section, then enter "mt_gero" for "Default" field , and then click "Save Config" button.
4. Disable the Cache in System → Cache Management. Select all options. Then either refresh or disable your cache. Refresh means it will refresh your cache, Disable will disable your cache. We recommend disabling your cache when installing your theme and re- enabling it after you are done installing.

III. Setting up the static block

Footer Static

Copy the whole "media"- folder on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
We are now going to install our static blocks for this theme, go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

• Block Title: Footer Static
• Identifier: footer_static
• Status: Enabled
• Content:

<div class="company span3">
<div class="footer-static-title">
<h2>Company</h2>
</div>
<div class="footer-static-content">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Technologie</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">E-Gift Cards</a></li>
</ul>
</div>
</div>
<div class="policies span3">
<div class="footer-static-title">
<h2>Policies</h2>
</div>
<div class="footer-static-content">
<ul>
<li><a href="#">Terms Of Service</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Search Terms</a></li>
</ul>
</div>
</div>
<div class="customer-service span3">
<div class="footer-static-title">
<h2>Customer Service</h2>
</div>
<div class="footer-static-content">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Return Policy</a></li>
<li><a href="#">Shipping & Tax</a></li>
<li><a href="#">International</a></li>
</ul>
</div>
</div>
<div class="we-are-accept span3">
<div class="footer-static-title">
<h2>we are accept</h2>
</div>
<div class="footer-static-content">
<p>Lorem ipsum dolor amet consectetur adipiscing elit necsed urna rhoncus rhoncus quis</p>
<ul>
<li><a href="#"><img src="{{media url="wysiwyg/paypal.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/visa.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/mastercart.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/amex.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/visa2.png"}}" alt="" /></a></li>
</ul>
</div>
</div>

Social Static

Copy the whole "media"- folder on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
We are now going to install our static blocks for this theme, go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

• Block Title: Social Static
• Identifier: social
• Status: Enabled
• Content:

<div class="social">
<h4>Connect with Us</h4>
<ul>
<li><a href="#"><img src="{{media url="wysiwyg/facebook.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/twitter.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/v.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/plus.png"}}" alt="" /></a></li>
</ul>
</div>

Quote Static

Copy the whole "media"- folder on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
We are now going to install our static blocks for this theme, go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

• Block Title: Quote
• Identifier: quote
• Status: Enabled
• Content:

<div class="mt-quote span6">
<div class="mt-quote-inner">
<p>My shopping experience with you has been great. - <span>Sushma Jagram</span></p>
</div>
</div>

Right Static

Copy the whole "media"- folder on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
We are now going to install our static blocks for this theme, go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

• Block Title: Right Static
• Identifier: right_static
• Status: Enabled
• Content:

<div class="right-static">
<a href="{{store direct_url="women.html"}}">
<img src="{{media url="wysiwyg/right-static.png"}}" alt="" />
</a>
</div>

Products Static

Copy the whole "media"- folder on the main root of your local magento server (you will need to merge these files), if this files are not merged, you will have installation issues then.
We are now going to install our static blocks for this theme, go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

• Block Title: Product Static
• Identifier: product_static
• Status: Enabled
• Content:

<div class="product-static">
<ul>
<li><a href="#"><img src="{{media url="wysiwyg/product-static-1.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/product-static-2.png"}}" alt="" /></a></li>
</ul>
</div>

IV. Setting up the Home Page

To setup your homepage, you will need to go to (CMS → Manage Pages):

Select "Home Page", with the identifier as "home".

Design: 1 columns

Scroll down and look for "Content", inside that you will have to input your homepage code, inserting the following code:

Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

<div class="content-home">
<div class="row-fluid show-grid">
<div class="span4">
<div class="content-home-item"><a href="{{store direct_url="men.html"}}"><img src="{{media url="wysiwyg/hm_winter_2006_sm.jpg"}}" alt="" /></a>
<h3>The Men Collections</h3>
</div>
</div>
<div class="span4">
<div class="content-home-item"><a href="{{store direct_url="women.html"}}"><img src="{{media url="wysiwyg/JOOP-Women-Collection-Spring-Summer-2011-15.jpg"}}" alt="" /></a>
<h3>The Women Collections</h3>
</div>
</div>
<div class="span4 last">
<div class="content-home-item"><a href="{{store direct_url="juniors.html"}}"><img src="{{media url="wysiwyg/HM-Kids-Lookboook-Collection-Fall-2011-2.jpg"}}" alt="" /></a>
<h3>The Children Collections</h3>
</div>
</div>
</div>
</div>

V. Setting up MT Slideshow Module

1. Unzip and copy the whole "app, js, skin and media"- folders on the main root of your local magento server (you will need to merge these files).
2. Log in to your backend of your Magento Administration and go to "System"→ "Configuration "→"MT SlideShow". Open the "MAGENTHEMES" tab, then setup config like image below, and then click "Save Config".
3. Go to "MagenThemes"→ "MTSlideshow "→"Manage Slideshow", then fill parameter like image below.

Site Information:

• Identifier *: mtslideshow
• Position *: Top Content
• Style: MT OsSlide
• Width*: 1170
• Height*: 348
• Status: Enable

Images:

• browse to your images and upload them. After that fill the detail for each image like the following format:
• Title: the title of your image, ex: Kuhn Rikon
• Link: the link which you want image link to, ex: etiam-fermentum-mauris.html
• Demo Link: inputing the link for the SHOW NOW button, ex: etiam-fermentum-mauris.html
• Description: inputing the description for each image

Display on CMS Page: Home Page

VII. Setting up MT Product Thumbnail Scroller, MT Smart Menus & MT Mega Menus

MT Products Scroller

MT Smart Menus

MT Mega Menus

MT Cloud Zoom

• Log in to your backend of your Magento Administration and go to "System"→ "Configuration "→"MT Gero Admin"→"Configuration".
• Please see the following screenshot for getting the configuration values

Adding custom menus to Mega menus

Go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

• Block Title: Custom Menus
• Identifier: custom_menu
• Status: Enabled
• Content:

<div class="fashion-girl custom-menu"><img src="{{media url="wysiwyg/fashion-girl.png"}}" alt="" />
<h4>Fashion Girls</h4>
<p>Ut non elit leo, id consequat orci. Vivamus nec diam nulla, ut facilisis metus. Sed vel est sit amet lectus hendrerit tempor</p>
</div>
<div class="fashion-men custom-menu"><img src="{{media url="wysiwyg/fashion-men.png"}}" alt="" />
<h4>Fashion Men</h4>
<p>Vivamus ultricies pretium lacinia. Proin rhoncus faucibus mauris et vestibulum. Morbi tempor luctus quam quis posuere.</p>
</div>
<div class="fashion-news custom-menu">
<h4>Fashion Mens</h4>
<p>Ut non elit leo, id consequat orci. Vivamus nec diam nulla, ut facilisis metus</p>
<h4>Fashion Girls</h4>
<p>Nulla facilisi. Cras fermentum, metus a blandit laoreet, arcu sem ullamcorper</p>
<h4>Fashion Kids</h4>
<p>Curabitur tristique tempor tortor a aliquam. Phasellus sapien turpis, egestas</p>
</div>
<div class="fashion-collection custom-menu">
<h4>Fashion Collection</h4>
<div><iframe src="http://www.youtube.com/embed/xW7mrUEspz0" frameborder="0" width="430" height="290"></iframe></div>
</div>

Adding a static block to Mega menu item

Example: you want to add a static block to the "WOMEN" mega menu item:

Step 1: Getting URL KEY of the Mega Menu item, see the following image:

Step 2: Creating static block: Go to CMS → Static Blocks → Add New Block. Important!: Remember to click in "Show/Hide Editor" in order to Hide the HTML Editor. If not, the code will be displayed wrong.

• Block Title: Fashion show TV 2012
• Identifier: women (note: this is URL KEY which you get from step 1)
• Status: Enabled
• Content:

<p><img src="{{media url="wysiwyg/Untitled-2.png"}}" alt="" /></p>
<p>Vivamus gravida purus tellus. Phasellus ut elit quis magna bibendum dapibus. Suspendisse consectetur nisl quis dolor ullamcorper dapibus. Integer non neque mauris. Aliquam tincidunt bibendum ultrices. Ut consectetur erat in tortor ultricies quis cursus velit rhoncus. Curabitur vitae nibh augue, ut euismod purus. Suspendisse iaculis ligula a tortor pharetra at pellentesque nisl pretium. Integer tincidunt dignissim nulla a commodo.</p>