SM MOZA USERGUIDE


When you download theme from our store and unzip, you will be got full of main files for theme installation. They're:

INSTALLATION GUIDE

There are two ways to install a MagenTech theme:

Magento Community Edition 1.7.x and 1.8.x

Download: http://www.magentocommerce.com/download

Magentech provides SM Quickstart package for each template which aims to ease the installation for users. It will help you save much time of installing and configuring if you plan to start your site from the beginning.

Please following steps below (we used images of SM Glasses theme installation to illustrate for general installations - Magento Quickstart Installation - Magento Theme Installation - Magento Extension Installation):

Before you start the installation process of this theme, we recommend to back up your current live Magento files and database. If your store has not been available yet, get it quickly following Magento Installation Guide

The installation of our theme is quite simple. You just need follow steps below to get our theme ready for your Magento store:

Before you begin the SM Moza installation process, we recommend to back up your current live Magento files and database. If your store has not been available yet, get it quickly following Magento Installation Guide

You just need following steps below to get our extensions ready for your Magento store:

Important Note:

1. Select the homepage from CMS Pages

2. Select Homepage >> Design on the left-hand menu.

3. In the Layout Update XML box, add the code as you want, this is our demo homepage:

<reference name="content-top">
<!-- showproduct home -->
<block type="tablisting/list" name="tablisting"
<action method="setConfig">
</action>
</block>
<!-- end-->
<block type="blog/blog" name="blogleft"as="blogleft"template="aw_blog/blog-left.phtml"/>
<!--banner left-->
<block type="cms/block" name="bannerlefthome">
<action method="setBlockId"><block_id>banner-left-home-page</block_id></action>
</block>
<block type="cms/block" name="bannerlefthome-computer"
<action method="setBlockId"><block_id>banner-left-home-computer</block_id></action>
</block>
</reference>

4. Click the Save Page button.

 

Configure theme using admin back end

For easing the theme configuration, we has been created Cpanel in both backend and frontend, this is SM Macy configuration in backend:

1. Under Magento admin panel, go to System >> Configuration

2. Select SM Muzik theme on the left-hand menu

3. Tweak the theme as you want

 

Configure theme using Cpanel front end

This is fontend, identical to what has in backend:

 

1. Position

To replace default main menu

2. Configuration

To config General settings, module parameters, Advance, login your administrator, go to SM Mega Menu >> Configuration

To view more guide about how to install, set up and configure SM Mega Menu as you want, please click here

3. Mega Menu Items

In order to add menu items, Go to SM Mega Menu >> Menu items Manager

You must create add new Menu Group.

The settings below belong to Menu Group group. Other group has similar settings menu item

3.1. Home

Front-end Appreance:

Back - end Settings : click here

HOME MENU ITEMS TREE

http://smartaddons.s3.amazonaws.com/images/userguide/magento/sm-moza/tree_home.png

              Content code of Video:

<div class="w_video"
<h2>Video</h2>
<p>Lorem ipsum dolor sit amet<</p>
<div class="block_video"
<iframe>src="//player.vimeo.com/video/1974031"idth="100%" height="270" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

               Content code of  About us:

<div class="w-about-us"
<h2>About Us</h2>
<p>All about my company</p>
<div class="s-au">
<p><imgsrc="{{media url="wysiwyg/img-custom-1.png"}}" alt=""Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis 
pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus. Donec eu dolor dui, vel posuere mauris 
auctor mauris ut dui luctus semper. Pellentesque semper congue sodales. In consequat, metus eget con sequat ornare, augue 
dolor blandit purus, vitae lacinia nisi tellus in erat.Nulla ac justo eget massa aliquetsodales. Maecenas mattis male duiaNulla auctor maurisut 
dui luctus semper. In hac habitasse platea dictumst.
Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus. Donec eu dolor dui, vel posuere 
mauris auctor mauris ut dui luctus semper</p>
<p>Pellentesque semper congue sodales. In consequat, metus eget con sequat ornare, auguedolor blandit purus, vitae lacinia nisi tellus in erat. 
Nulla ac justo eget massa aliquet sodales. Maecenas mattis male duia</p>
</div>
</div>

3.2. Product Types

Front-end Appreance:

Back - end Settings : click here

Category/87:(To config: Go to Catalog >> Manager Categories > Product Types > Display Settings > Display Mode = "Products Only")

PRODUCT TYPES MENU ITEMS TREE

http://smartaddons.s3.amazonaws.com/images/userguide/magento/sm-moza/tree_producttype.png

            Content code of Top Content:

<div class="w-new w-topcontent">
<div class="sm-block-content">{{block type="slider/list" template="sm/slider/topcontent.phtml" name="topcontent"  product_source="catalog" 
product_category="87" product_image_width="275"  product_image_height="300" product_order_by="name" scroll="1" 
slider_title_text="" deviceclass_sfx="preset01-4 preset02-4 preset03-4 preset04-1 preset05-1"}}</div>
</div>
<div style="clear:both;"></div>

3.3. Guitar

Front-end Appreance:

Back - end Settings : click here

Category/74:(To config: Go to Catalog >> Manager Categories >> Guitar >> Display Settings >> Display Mode = "Products Only")

PRODUCT TYPES MENU ITEMS TREE

http://smartaddons.s3.amazonaws.com/images/userguide/magento/sm-moza/tree_guitar.png

             Content code of Column 1:

<div class="wc1-content">
<h2>Column 1</h2>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
<li><a href="#">Category 7</a></li>
<li><a href="#">Category 8</a></li>
</ul>
</div>

             Content code of Column 2:

<div class="wc1-content">
<h2>Column 2</h2>
<ul>
<li><a href="#">Category 9</a></li>
<li><a href="#">Category 10</a></li>
<li><a href="#">Category 11</a></li>
<li><a href="#">Category 12</a></li>
<li><a href="#">Category 13</a></li>
<li><a href="#">Category 14</a></li>
<li><a href="#">Category 15</a></li>
<li><a href="#">Category 16</a></li>
</ul>
</div>

               Content code of Banner:

<h2>Review new products</h2>
<div class="r-content">
<div class="w-img">
<img src="{{media url="wysiwyg/banner-top.png"}}" alt="img-review" />
</div>
<p>
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, nec dictum nunc tortor id urna. 
Suspendisse dapibus ullamcorper pede.
</p>
</div>

             Content code of Best sale:

<div class="w-bestsales">
<h2>Best sales</h2>
<div class="sm-block-content">{{block type="basicproducts/home" name="topbestsales" 
template="sm/basicproducts/bestseller.phtml" 
product_source="catalog" product_category="137" product_limitation="2" 
product_image_height="85" product_image_width="85" product_order_by="name"}}</div>
</div>
<div style="clear:both;"></div>

3.4. Keyboard

Front-end appreance: Keyboard & Drums

3.5.  Drums

Back - end Settings : click here

Category/137: (To config: Go to Catalog >> Manager Categories >> Drums >> Display Settings >> Display Mode = "Products Only")

             Content code of Category 1:

<div class="wc1-content">
<h2>Categories 1</h2>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
<li><a href="#">Category 7</a></li>
<li><a href="#">Category 8</a></li>
</ul>
</div>

               Content code of New Product backend:

<div class="w-new">
<h2>New Products</h2>
<div class="sm-block-content">{{block type="basicproducts/home" name="topnewproduct" template="sm/basicproducts/new-product-top.phtml" product_source="catalog" product_category="137" product_limitation="2" product_image_height="218" product_image_width="218" product_order_by="name"}}</div>
</div>
<div style="clear:both;"></div>

               Content code of Custom Text backend:

<h2>Custome Text</h2>
<div class="w-custext">
<p>Lorem ipsum, libero et luctus molestie, turpis mi sagittis nisl, a scelerisque leo nulla et lectus pendisse dictum posuere elit, in congue nisl varius quis lentesque a tellus eget quam varius aliquet. Cras ac hendrerit dui. Duis lacus ligula, luctus ac tristique eget Posuere id erat.Lorem ipsum, libero et luctus molestie, turpis mi sagittis nisl, a scelerisque leo nulla et lectus pendisse dictum posuere elit, in congue nisl varius quis lentesque a tellus eget.</p><div class="w-img"><img src="{{media url="wysiwyg/img-custext.png"}}" alt="" /></div>
</div>

I. SM Search Box Pro

II. SM Slider

III. SM Tab Listing

IV. SM Muzik

V. SM Cart Pro

The SM Moza front-page has static blocks in the Theme:

To create static blocks, go to CMS >> Static Blocks >> Add new block

Front - end Appearance

Back - end Settings

Content Code of moza banner top

<ul>
<li><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/magento/sm-muzik/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYm4xLnBuZyJ9fQ,,/key/2c212654728b3ce6c77d05db9909282b/" alt="" /></a></li>
<li><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/magento/sm-muzik/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYm4yLnBuZyJ9fQ,,/key/2c212654728b3ce6c77d05db9909282b/" alt="" /></a></li>
<li><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/magento/sm-muzik/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYm4zLnBuZyJ9fQ,,/key/2c212654728b3ce6c77d05db9909282b/" alt="" /></a></li>
</ul>

Front - end Appearance

Back - end Settings

Content Code of Muzik servies

<div class="span3 column1">
<ul>
<li class="first">
<div class="w2">
<div class="w1"><a href="#">free shipping</a></div>
</div>
</li>
<li><a href="#">Free Shipping</a></li>
<li>Pellentesque dictumst nibh Nulla dui at urna leo wisi dui Curabitur. Laoreet Nulla et id urna et vitae non tincidunt eros</li>
</ul>
</div>
<div class="span3 column2">
<ul>
<li class="first">
<div class="w2">
<div class="w1"><a href="#">Money Back Guarantee</a></div>
</div>
</li>
<li><a href="#">Money Back Guarantee</a></li>
<li>Pellentesque dictumst nibh Nulla dui at urna leo wisi dui Curabitur. Laoreet Nulla et id urna et vitae non tincidunt eros</li>
</ul>
</div>
<div class="span3 column3">
<ul>
<li class="first">
<div class="w2">
<div class="w1"><a href="#">Authenticity Guaranteed</a></div>
</div>
</li>
<li><a href="#">Authenticity Guaranteed</a></li>
<li>Pellentesque dictumst nibh Nulla dui at urna leo wisi dui Curabitur. Laoreet Nulla et id urna et vitae non tincidunt eros</li>
</ul>
</div>
<div class="span3 column4">
<ul>
<li class="first">
<div class="w2">
<div class="w1"><a href="#">Promotions</a></div>
</div>
</li>
<li><a href="#">Promotions</a></li>
<li>Pellentesque dictumst nibh Nulla dui at urna leo wisi dui Curabitur. Laoreet Nulla et id urna et vitae non tincidunt eros</li>
</ul>
</div>

Front - end Appearance

Back - end Settings

Content Code of Banner left home page

<div class="w-banner block"><img src="{{media url="wysiwyg/banner-left-home-page.png"}}" alt="" />
<div class="w-text">
<p class="text-content">Both times I've ordered from you, I had an excellent experience. I'm a small purchaser, but you treated me like royalty. 
Customer service is above and beyond.</p>
<p class="tg"><span>Mama Duo</span>- Social Media Strategist</p>
</div>
</div>

Front - end Appearance

Back - end Settings

Content Code of Moza:

<div class="open-time s-bg-h2">
<h2>Muzik Gear</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Vestibulum iaculis massa nec velit commodo lobortis.</p>
<p>Quisque diam lacus, tincidunt vitae eros porta, sagittis rhoncus est. Quisque sed justo a erat lobortis gravida.</p>
</div>

Front - end Appearance:

Back - end Settings

Content Code of Store Location:

<div class="open-time">
<h2>Store Location</h2>
<p>Feel free to contact us if you have any problems.</p>
<ul>
<li><strong>Address</strong> : 242 NTB Street, NY, US</li>
<li><strong>Email</strong> : support@moza.com</li>
<li><strong>Address</strong> : 242 NTB Street, NY, US</li>
<li><strong>Phone</strong> : 0123456789</li>
</ul>
</div>

Front - end Appearance

Back - end Settings

Content Code of Custom Service

<div class="open-time">
<h2>Customer Services</h2>
<ul>
<li><a href="#">Check Order Status</a></li>
<li><a href="#">Shipping Options</a></li>
<li><a href="#">Returns and Exchanges</a></li>
<li><a href="#">Product Recall</a></li>
<li><a href="#">Live chat support</a></li>
</ul>
</div>

Front - end Appearance

Back - end Settings

Content Code of Why Choose Us

<div class="open-time">
<h2>Why Choose Us</h2>
<ul>
<li><a href="#">Shipping & Returns</a></li>
<li><a href="#">Secure Shopping</a></li>
<li><a href="#">International Shipping</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Group Sales</a></li>
</ul>
</div>

Front - end Appearance

Back - end Settings

Content Code of Scocial

<ul class="list-social">
<li><a class="fb" href="https://www.facebook.com/magentech" target="_blank"><span>Facebook</span></a></li>
<li><a class="fr" href="http://www.flickr.com/" target="_blank"><span>Flickr</span></a></li>
<li><a class="gp" href="https://plus.google.com/111936609376399911024/posts" target="_blank"><span>Google plus</span></a></li>
<li><a class="tw" href="https://twitter.com/magentech" target="_blank"><span>Twitter</span></a></li>
<li><a class="vm" href="https://vimeo.com/log_in" target="_blank"><span>Vimeo</span></a></li>
</ul>

Front - end Appearance

Back - end Settings

Content Code of Newsletter

<ul class="newsletter-title">
<li>
<h2>Newsletter :</h2>
</li>
<li>
<p>In venenatis neque a eros laoreet eu placerat erat suscipit. Fusce cursus, erat ut scelerisque condimentum</p>
</li>
</ul>

Front - end Appearance

Back - end Settings

Content Code of Payment

<ul class="newsletter-title">
<li>
<h2>Newsletter :</h2>
</li>
<li>
<p>In venenatis neque a eros laoreet eu placerat erat suscipit. Fusce cursus, erat ut scelerisque condimentum</p>
</li>
</ul>

 Home Page

To config this page, please navigate to CMS >> Pages, create Home page, navigate to tab Design and update with the following settings:

PHP Code:

<reference name="content-top">
<!-- showproduct home -->
<block type="tablisting/list" name="tablisting">
<action method="setConfig">
</action>
</block>
<!-- end-->
<block type="blog/blog" name="blogleft" as="blogleft"  template="aw_blog/blog-left.phtml"/>
<!--banner left-->
<block type="cms/block" name="bannerlefthome">
<action method="setBlockId"><block_id>banner-left-home-page</block_id></action>
</block>
<block type="cms/block" name="bannerlefthome-computer">
<action method="setBlockId"><block_id>banner-left-home-page-computer</block_id></action>
</block>
</reference>

About us page

To config this page, please navigate to Catalog >> Manager Categories >> About Us category:

<div class="w-aboutus">
<h2 class="title-aboutus">About us</h2>
<div class="w-top">
<div class="w-left">
<div class="w-left-title">
<h2>Welcome To Moza</h2>
<div class="two-line"> </div>
</div>
<!--end w-left-title -->
<div class="w-left-content"><img src="{{media url="wysiwyg/img-about-us.png"}}" alt="" />
<p>Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. 
Nunc non nisl lacus. Integer pharetra lacinia dapibus. Donec eu dolor dui, vel posuere mauris.</p>
<p>Pellentesque semper congue sodales. In consequat, metus eget con sequat ornare, augue dolor blandit purus, vitae lacinia nisi tellus in erat. 
Nulla ac justo eget massa aliquet sodales. Maecenas mattis male suada sem, in fringilla massa dapibus quis. Suspendisse aliquam leo id neque
 auctor molestie. Etiam at nulla tellus.</p>
<p>Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim.</p>
</div>
<!--end w-left-content--></div>
<!-- end w-left -->
<div class="w-right">
<div class="w-left-title">
<h2>Why Choose Us</h2>
<div class="two-line"> </div>
</div>
<!--end w-left-title -->
<div class="w-right-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
<li>Affiliates</li>
<li class="lasts">Group Sales</li>
</ul>
</div>
<!--end w-right-content--></div>
</div>
<!--end w-top-->
<div class="w-middle">
<div class="w-middle-title">
<h2>Our Member</h2>
<div class="two-line"> </div>
<p>Consectetur adipiscing elit. Donec pellentesque venenatis elit, quis aliquet mauris malesuada vel. Donec vitae libero dolor, 
eget dapibus justo. Aenean facilisis aliquet feugiat. Suspendisse lacinia congue est ac semper. Nulla ut elit magna, vitae volutpat magna.</p>
</div>
<!--end w-middle-title --> <!--end w-middle-->
<div class="w-middle-content">{{block type="basenews/list" name="aboutus" template="sm/basenews/member.phtml" nb_column1="4" 
product_image_disp"0" item_desc_max_characs="100" product_image_width="194" product_image_height="194" product_details_page_link_disp="0"
 item_description_striptags="0"}}</div>
<!--end w-middle-content--></div>
<div class="w-footer">
<div id="happycs" class="carousel slide" data-interval="0">
<div class="icon-dp"> </div>
<div class="title">
<h2>Happy Customer Say</h2>
<ul>
<li><a class="minus" title="Previous" href="#happycs" data-slide="prev">‹</a></li>
<li><a class="plus" title="Next" href="#happycs" data-slide="next">›</a></li>
</ul>
</div>
<div class="w-footer-content">
<div class="carousel-inner">
<div class="active item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus adipiscing, dui nibh scelerisque justo, 
quis pretium turpis neque eget nulla. Curabitur dictum consectetur metus nec dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus 
adipiscing, dui nibh scelerisque justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium turpis.</p>
<p class="item-tg">- <span class="s-name">Mama Duo</span> - <span class="s-name-r">Social Media Strategist</span></p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue, justo non cursus adipiscing, dui nibh scelerisque justo, quis pretium 
turpis neque eget nulla. Curabitur dictum consectetur metus nec dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
In congue, justo non cursus adipiscing, dui nibh scelerisque justo non cursus adipiscing, dui nibh scelerisque justo, quispretium turpis.</p>
<p class="item-tg">- <span class="s-name">Mama Duo</span> - <span class="s-name-r">Social Media Strategist</span></p>
</div>
</div>
</div>
</div>
</div>
<!--end w-footer-content--> <!--end w-footer--></div>

Contact Us page

To config this page, please navigate to Catalog >> Manager Categories >> Contact Us category:

  1. Block contact info: click here
<p class="title">Contacts Us</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo ante, bibendum at bibendum iaculis, sodales id mauris. 
Nullam scelerisque ante eu tortor eleifend vel fringilla dui ullamcorper. Aenean diam diam, volutpat id commodo vitae, consequat in nisi. 
In elementum fringilla libero.</p>

      2. Block contact map: click here

<div class="block-map">
<div class="block-content">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"> </div>
<script type="text/javascript">// <![CDATA[
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(48.89364,2.33739), 	
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// ]]></script>
</div>
</div>

     3. Block Contact Address: click here

<div class="contant-addres-wrap">
<p>Add 1 : 40th Street, Oakland, California, United States</p>
</div>
<div class="contant-addres-wrap">
<p>Add 2 : 70th Street, Oakland, California, United States</p>
</div>
<div class="contant-addres-wrap">
<p>Tel : 084 - 00 - 12345678</p>
<p>Tel : 084 - 00 - 12345678</p>
</div>
<div class="contant-addres-wrap">
<p>Email : contact@moza.com</p>
</div>

Blog page

To config this page, please navigate to Catalog >> Manager Categories >> Blog category:

<reference name="content">
<block type="blog/blog" name="bloglist" as= "blog-list"template="aw_blog/blog-list.phtml">
<block type="blog/product_toolbar" name="aw_blog_list_toolbar" template="catalog/product/list/toolbar.phtml">
<block type="page/html_pager" name="product_list_toolbar_pager"/>                   
</block>
</block>
</reference>

Support from MagenTech will be defined as following:

Item support includes:

Item support does not include:

Installation Services-Quickstart installation services cost $25:

That's it. Now you are ready for using!

Thank you so much for purchasing this theme. If you have any questions that are beyond the scope of this help file, please send us via: Support Tickets System.

Thanks so much!