SM Genera

This guide will help you install SM Genera themes step by step.

1 SYSTEM REQUIREMENT – Back to top

At the basic level, this theme will require the following conditions:

  • Compatible with Magento Community Edition 1.7.x; 1.8.x ; 1.9.x and the latest version 1.9.2.1
  • This theme is updated to version 1.1.0

2LAYOUT POSITION – Back to top

3INSTALLATION – Back to top

There are two ways to install a Magento Theme:

  • Install quickstart: By using this package, you will set the theme exactly as our Demo with sample data.
  • Install Theme and Extensions: You will need only be using the zipped files in “Extensions” and “Theme” folders.

3.1 Install with Quickstart Package:

Magentech provides SM Quickstart package for each theme 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:

    • Step 1: Download the quickstart package
    • Step 2: Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that include all sample data
    • Step 3: Create a database for your Magento

  • Step 4: Start installation by opening browser and navigate to your url (where the quickstart uploaded) to load default Magento installer.
  • Step 5: Finish installation

3.2 Install Magento Theme

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

  • Step 1: Upload folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}). You should see a directory layout like this:

    {docroot} /magento/

    app/ index.php js/ lib/ LICENSE.txt media/ pear/ skin/ var/
  • Step 2: Login your Magento Admin area (ex: Access Magento Admin area: http://yourdomain/index.php/admin/)
  • Step 3: Navigate to System => Configuration => Design as screen shot below.

  • Step 4: Finally, Click button “Save Config” to save your configuration

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

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

2. Select SM Setting Theme theme on the left-hand menu

3. Tweak the theme as you want

3.3 Install Magento Extension

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

  • Step 1: Upload folders skin and app from our download package to your Web serverai??i??s document root (from here on, referenced as {docroot}). These files will overwrite default folders skin and app in your Magento folder, you should see a directory layout like this:

    {docroot} /magento/

    app/

    index.php

    js/

    lib/

    LICENSE.txt

    media/

    pear/

    skin/

    var/

  • Step 2: Login your Magento Admin area (ex: access Magento Admin area: http://yourdomain/magento/index.php/admin/)
  • Step 3: Navigate to System => Configuration => Extensions Configuration

  • Step 4: You will see installed extension, click extensionai??i??s name tab to go to extension configuration page.

4CONFIGURATION ai??i?? Back to top

4.1 General Configuration

Configure theme using Cpanel frontend

  • Theme Color: support 4 presets to be chosen
  • Layout Style: Full width and Boxed
  • Menu Style: Mega; Css; Split

4.2 Configure pages

Home Page

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

  • Layout: select 1 column
  • Layout update XML: paste the code below
  • Link show home pageai??i??s backend. Please click Here to view.
<reference name="dynamicslideshow">
	<block type="dynamicslideshow/list" name="dynamicslideshow.list.default" template="sm/adsslideshow/default.phtml"/>			
</reference>		

<reference name="content-left">
<block type="catalog/navigation" name="catalog.leftnav" before="-"  template="catalog/navigation/sidenav.phtml"/>
<block type="cms/block" name="news-letter">
    <action method="setBlockId"><block_id>news-letter</block_id></action>
</block> 
<block type="cms/block" name="helmets-full-face">
	<action method="setBlockId"><block_id>helmets-full-face</block_id></action>
</block> 
<block type="cms/block" name="banner-right-home">
    <action method="setBlockId"><block_id>banner-right-home</block_id></action>
</block> 
</reference>

<reference name="content-right">	
<block type="tablisting/list" name="tablisting"/>
<block type="cms/block" name="banner-content-bottom">
    <action method="setBlockId"><block_id>banner-content-bottom</block_id></action>
</block> 

<block type="slider/list" name="slider.most.view" template="sm/slider/most_view_product.phtml"> 
    <action method="setConfig">
		<values>
		      <slider_title_text>MOST VIEWED PRODUCTS</slider_title_text> 
		      <pretext>Lorem ipsum dolor sit amet, consectetur adipiscing</pretext>
		      <product_source>catalog</product_source> 
		      <product_category>10</product_category>
		      <product_title_disp>1</product_title_disp>
		      <product_price_disp>1</product_price_disp>
		      <product_reviews_count>1</product_reviews_count>
		      <deviceclass_sfx>preset01-3 preset02-2 preset03-1 preset04-1 preset05-1</deviceclass_sfx>
		</values>
    </action> 
</block>
</reference>	

<reference name="content-bottom-2">	
<block type="deal/List" name="deal" template="sm/deal/default.phtml"/>
</reference>	

<reference name="content-bottom-3">		

<block type="slider/list" name="slider.list.default" template="sm/slider/default.phtml"/>

<block type="cms/block" name="shop-policy">
    <action method="setBlockId"><block_id>shop-policy</block_id></action>
</block>

<block type="basicproducts/home" name="recomended" template="sm/basicproducts/recomended_product.phtml">
	<action method="setConfig">	
		<values>
			<title>Recommended</title> 
			<product_limitation>4</product_limitation>
			<product_category>10</product_category>
			<product_cart_or_status>0</product_cart_or_status>
			<product_title_disp>1</product_title_disp>
			<product_image_width>84</product_image_width>
			<product_image_height>84</product_image_height>
		</values>
	</action>
</block>

<block type="cms/block" name="send-feedback">
    <action method="setBlockId"><block_id>send-feedback</block_id></action>
</block>
<block type="cms/block" name="what-peopel-say">
    <action method="setBlockId"><block_id>what-people-say</block_id></action>
</block> 
</reference>

4.3 Configure Mega Menu

To configure “General settings, Module settings, Advance settings”Ai??of SM Megamenu, please login your administrator, goAi??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

Mega Menu Items Configuration

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

HOME MENU

Frontend

  • Link show Home Menuai??i??s backend. Please click Here to view.

In the admin Panel page, navigate to SM MegaMenu >> Menu Items Manager to view Tree of Home Menu:

http://images.smartaddons.com/smartaddons/images/userguide/magento/sm-genera/tree-home.png

  • Link Layout: backend
  • Content Code of Link Layout:
<ul class="layout-web">
	<li>
		<a title="Layout Full Width" href="{{store url=""}}?___store=default">Layout Full Width</a>
	</li>
	<li>
		<a title="Layout Boxed" href="{{store url=""}}?___store=french">Layout Boxed</a>
	</li>
</ul>

TYPES MENU

Frontend

  • Link show Types Menuai??i??s backend. Please click Here to view.

In the admin Panel page, navigate to SM MegaMenu >> Menu Items Manager to view Tree of Types Menu:

http://images.smartaddons.com/smartaddons/images/userguide/magento/sm-genera/tree-types.png

Important: ai???Categories 2 & Categories 3ai??? configure the same with ai???Categories 1ai??? as above.

Menu type: CMS Block

To config: Go to CMS >> Static Block >> Genera banner helmets and paste content code of Genera banner helmets as below:

<img src="{{media url="wysiwyg/images-geneva/banner-helmets.png"}}" alt="" />

BODY ARMOURS MENU

Frontend

  • Link show Body Armours Menuai??i??s backend. Please click Here to view.

In the admin Panel page, navigate to SM MegaMenu >> Menu Items Manager to view Tree of Body Armours Menu:

http://images.smartaddons.com/smartaddons/images/userguide/magento/sm-genera/tree-body.png

Important: ai???Catagories container 2; Catagories container 3ai??? configure the same with ai???Catagories container 1ai??? as above.

Menu type: CMS Block

To config: Go to CMS >> Static Block >> Banner body amours and paste content code of Banner body amours as below:

<img src="{{media url="wysiwyg/images-geneva/banner-body-amours.png"}}" alt="" />

ABOUT US MENU

Frontend

  • Backend of About Us Menu. Click Here

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

BLOG MENU

Frontend

  • Link show Blog Menuai??i??s backend. Please click Here to view

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

<reference name="content">
<block type="blog/blog" name="blog" as= "blog-list" template="aw_blog/blog.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>

<reference name="left">
            <block type="blog/menu_sidebar" name="left.blog.menu"  before="-">
                <action method="setTemplate" ifconfig="blog/menu/left">
                    <template>aw_blog/menu.phtml</template> 
                </action>
                <block type="blog/tags" name="blog_tags" />
            </block>
</reference>

CONTACT US MENU

Frontend

  • Link show Contact Us Menuai??i??s backend. Please click Here to view.

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

4.4 Configure Extensions

I. SM Cart Pro

  • Position: SM Cart Pro
  • Frontend

  • Backend of SM Cart Pro: Click Here
  • To view more guide about how to install, set up and configure SM Cart Pro as you want, please click here

II. SM Dynamic Slideshow

  • Position: SM Dynamic slideshow
  • Frontend

  • Backend of SM Dynamic Slideshow. Click Here
  • To view more guide about how to install, set up and configure SM Dynamic Slideshow as you want, please click here
  • Slideshow Mobile Configuration: in the admin panel, go to CMS >> Add a new Static Block with name ai???Gen slideshow mobileai???. Below is content code of ai???Gen slideshow mobileai???:
<div id="slideshow-mobile" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#slideshow-mobile" data-slide-to="0" class="active"></li>
    <li data-target="#slideshow-mobile" data-slide-to="1"></li>
    <li data-target="#slideshow-mobile" data-slide-to="2"></li>
    <li data-target="#slideshow-mobile" data-slide-to="3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <a href="#">
      <img src="{{media url="wysiwyg/images-geneva/img-slide1.png"}}" alt="" />
       </a>
    </div>
    <div class="item">
      <a href="#">
      <img src="{{media url="wysiwyg/images-geneva/img-slide2.png"}}" alt="" />
       </a>
    </div>
    <div class="item">
      <a href="#">
      <img src="{{media url="wysiwyg/images-geneva/img-slide3.png"}}" alt="" />
       </a>
    </div>
    <div class="item">
      <a href="#">
      <img src="{{media url="wysiwyg/images-geneva/img-slide4.png"}}" alt="" />
       </a>
    </div>
  </div>

</div>

III. SM Tab Listing

  • Position: SM Tab listing
  • Frontend

  • Backend of SM Tab Listing. Click Here
  • To view more guide about how to install, set up and configure SM Tab listing as you want, please click here

IV. SM Slider

  • Position: SM Slider
  • Frontend

To config this position, please navigate to CMS >> Pages >>Home page, navigate to Design tab and paster code rows as following:

<block type="slider/list" name="slider.most.view" template="sm/slider/most_view_product.phtml"> 
    <action method="setConfig">
		<values>
		      <slider_title_text>MOST VIEWED PRODUCTS</slider_title_text> 
		      <pretext>Lorem ipsum dolor sit amet, consectetur adipiscing</pretext>
		      <product_source>catalog</product_source> 
		      <product_category>10</product_category>
		      <product_title_disp>1</product_title_disp>
		      <product_price_disp>1</product_price_disp>
		      <product_reviews_count>1</product_reviews_count>
		      <deviceclass_sfx>preset01-3 preset02-2 preset03-1 preset04-1 preset05-1</deviceclass_sfx>
		</values>
    </action> 
</block>

V. SM Deal

  • Position: SM Deal
  • Frontend

  • Backend of SM Deal. Click Here

VI. SM Slider

  • Position: SM slider
  • Frontend

To config this position, please navigate to CMS >> Pages >> Home page, navigate to Design tab and paste code as following:

<block type="slider/list" name="slider.list.default" template="sm/slider/default.phtml"/>
  • Backend of SM Slider: Click Here
  • To view more guide about how to install, set up and configure SM Slider as you want, please click here

VII. SM Basic Products

  • Position: SM Basic Products
  • Frontend

  • Backend of SM Basic Products. Click Here

4.5 Configure blocks

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

  • news-letter
  • helmets-full-face
  • banner-right-home
  • banner-helmets
  • shop-policy
  • send-feedback
  • what-people-say
  • custom-service
  • useful-link
  • contact-us-footer
  • payment-footer

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

Genera Newsletter

Frontend

Link showBackend of Genera Newsletter.

  • Code Code of Genera Newsletter:
<div class="block block-news-letter">
<div class="block-title">
        <span>Newsletter</span>
</div>
<div class="block-content">
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
{{block type="newsletter/subscribe" name="newsletter" template="newsletter/subscribe.phtml"}}
<div class="wrap-social">
<ul>
<li ><a class="fb" href="#">text</a></li>
<li ><a class="tw" href="#">text</a></li>
<li><a  class="rss" href="#">text</a></li>
<li><a class="ytb" href="#">text</a></li>
<li><a  class="vim" href="#">text</a></li>
</ul>
</div><!--end wrap-social-->
</div>
</div>

Genera Helmets full face

Frontend

Link show Backend of Genera Helmets full face.

  • Code Code of Genera Helmets full face:
<div class="block block-hff">
<div class="block-title">
        <span>Helmets full face</span>
</div>
<div class="block-content">
<a class="item-img" href="#">
<img src="{{media url="wysiwyg/images-geneva/img-left-home.png"}}" alt="" /></a>
<p>Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque...</p>
<a href="#" class="button"><span><span>View all Collections</span></span></a>
</div>
</div>

Gen banner right home

Frontend

Link show Backend of Gen banner right home.

  • Code Code of Gen banner right home:
<div class="block banner-left-home"><a href="#"><img src="{{media url="wysiwyg/images-geneva/banner-right-home.png"}}" alt="" /></a></div>

Genera banner helmets

Frontend

Link show Backend of Genera banner helmets.

  • Code Code of Genera banner helmets:
<img src="{{media url="wysiwyg/images-geneva/banner-helmets.png"}}" alt="" />

Genera Shop Policy

Frontend

Link show Backend of Genera Shop Policy

  • Code Code of Genera Shop Policy:
<div class="wrap-shop-policy">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="item">
<div class="item-inner">
<div class="i-top i-top-1">icon-top</div>
<div class="content">
<a href="#" class="title">Free Shipping Item</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mi eros, facilisis ac mollis et, ullamcorper non neque. </p>
</div>
</div><!--end item inner-->
<div class="item-btn">
<a href="#" class="r_btn button">Read more</a>
</div><!-- item btn-->
</div><!--end item-->
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="item">
<div class="item-inner">
<div class="i-top i-top-2">icon-top</div>
<div class="content">
<a href="#" class="title">Money Back Guarantee</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mi eros, facilisis ac mollis et, ullamcorper non neque. </p>
</div>
</div><!--end item inner-->
<div class="item-btn">
<a href="#" class="r_btn button">Read more</a>
</div><!-- item btn-->
</div><!--end item-->
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="item">
<div class="item-inner">
<div class="i-top i-top-3">icon-top</div>
<div class="content">
<a href="#" class="title">Authentic Guaranteed</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mi eros, facilisis ac mollis et, ullamcorper non neque. </p>
</div>
</div><!--end item inner-->
<div class="item-btn">
<a href="#" class="r_btn button">Read more</a>
</div><!-- item btn-->
</div><!--end item-->
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="item">
<div class="item-inner">
<div class="i-top i-top-4">icon-top</div>
<div class="content">
<a href="#" class="title">Secured Payment</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mi eros, facilisis ac mollis et, ullamcorper non neque. </p>
</div>
</div><!--end item inner-->
<div class="item-btn">
<a href="#" class="r_btn button">Read more</a>
</div><!-- item btn-->
</div><!--end item-->
</div>
</div><!--end wrap-->

Genera send your feedback

Frontend

Link show Backend Genera send your feedback

  • Code Code of Genera send your feedback:
<div class="block block-send-feedback col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="block-title">
        <span>Send your feedback</span>
</div>
<div class="block-content">
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form-for-homepage.phtml"}}
</div>
</div>

Genera what people say

Frontend

Link show Backend of Genera what people say

  • Code Code of Genera what people say:
<div class="block block-what-peopel-say col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="block-title">
        <span>WHAT PEOPLE SAY</span>
</div>
<div class="block-content">
<div class="item first">
<div class="text-content">
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas </p>
</div>
<div class="img-text-content">
<div class="wrap-img"><a href="#"><img src="{{media url="wysiwyg/images-geneva/img-what.png"}}" alt="" /></a></div>
<ul>
<li class="first"><a href="#">Jane Doe</a></li>
<li><a href="#">Account Manager</a></li>
</ul>
</div><!--end img-text-content-->
</div><!--end item-->
<div class="item">
<div class="text-content">
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas </p>
</div>
<div class="img-text-content">
<div class="wrap-img"><a href="#"><img src="{{media url="wysiwyg/images-geneva/img-what.png"}}" alt="" /></a></div>
<ul>
<li class="first"><a href="#">Jane Doe</a></li>
<li><a href="#">Account Manager</a></li>
</ul>
</div><!--end img-text-content-->
</div><!--end item-->
</div>

Genera Customer Service

Frontend

Link show Backend of Genera Customer Service

  • Code Code of Genera Customer Service:
<div class="block block-cs col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="block-title">
        <span>Customer Service</span>
</div>
<div class="block-content">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Gift Vouchers</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
</ul>
</div>
</div>

Gen Footer Contact us

Frontend

Link show Backend of Gen Footer Contact us

  • Code Code of Gen Footer Contact us:
<div class="block block-ctu col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="block-title">
        <span>Contact Us</span>
</div>
<div class="block-content">
<p> Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles </p>
<p>
Email : <a href="mailto:support@genera.com">support@genera.com</a>
           <a href="mailto:support2@genera.com" class="m-left">support2@genera.com</a>
</p>
<p>
Hotline : 0123-4567-8910
             <span class="m-left-phone"> 0123-4567-8910</span>
</p>
</div>
</div>

Gen Footer Payment

Frontend

Link show Backend of Gen Footer Payment

  • Code Code of Gen Footer Payment:
<ul class="payment">
<li class="p1"><span>wepay</span></li>
<li class="p2"><span>master</span></li>
<li class="p3"><span>a</span></li>
<li class="p4"><span>paypal</span></li>
<li class="p5"><span>visa</span></li>
</ul>

 

5SUPPORT ai??i?? Back to top

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!

×