SM Glasses - Responsive Magento Theme


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:

How to install theme

How to install extensions

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:

Important notes:

  1. Do not use "localhost" in URL, otherwise you could not log in your admin (you should use your local IP if installing on your computer.).

  2. At step 3 of installation - Configuration page: Leave "Tables prefix" blank

Before you begin the SM Glasses 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

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 Glasses 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:

Configure homepage

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="slideshow">       

<block type="slickslider/list" name="slickslider.list"/></reference>



<reference name="content-top">

                <block type="basicproducts/home" name="tab1" template="smartaddons/basicproducts/feature.phtml"> 

			<action method="setConfig">

 				<values>

					<block_title>Featured Products</block_title>

					<title></title>

                                        <product_source>catalog</product_source>

                                        <product_category>68</product_category>

					<product_order_by>price</product_order_by>

                                        <num_columns>4</num_columns>

                                        <product_limitation>8</product_limitation>

					<product_image_width>200</product_image_width>

					<product_image_height>135</product_image_height>

					<product_price_disp>1</product_price_disp>

					<product_rating_summary>0</product_rating_summary>

					<product_cart_or_status>1</product_cart_or_status>

					<product_addtocompare>0</product_addtocompare>

					<product_addtowishlist>0</product_addtowishlist>

				</values>

			</action>

                  </block>

</reference>

<reference name="content-bottom">

        	<block type="basicproducts/home" name="basicproducts.bestsales" template="smartaddons/basicproducts/bestsales.phtml">

        		<action method="setConfig">

					<values>

						<product_limitation>20</product_limitation>	

					        <product_cart_or_status>1</product_cart_or_status>

					</values>			

        		</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 Glasses configuration in backend:

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

2. Select SM Glasses Theme on the left-hand menu

3. Tweak the theme as you want

Admin Cpanel

Configure theme using Cpanel front end

This is fontend, identical to what has in backend:

Front end Cpanel

Color Sample

5 presets to be chosen

1 Body

Background, Link and Text color

2 Header

Background image and color

3 Footer

Background image and color

4 Menu Style

3 options to be chosen: Mega, CSS or Split

5 Typography

Google Font, various font-size and font-family

 

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

configuration

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 SM Glasses group. Other group has similar settings menu item

3.1  Home Menu

Front-end appreance 

Backend Settings: Click here

3.2 Style Menu

Front-end appreance 

Backend Settings: Click here

3.3 Men's glasses

Front-end appreance 

Backend Settings: Click here

Category1 Item: Backend

Category2 Item: Backend

Category3 Item: Backend

Category4 Item: Backend

Category5 Item: Backend

3.4 Women's glasses

Front-end appreance 

Backend Settings: Click here

Category1 Item: Backend

Category2 Item: Backend

Category3 Item: Backend

Category4 Item: Backend

Category5 Item: Backend

Category6 Item: Backend

Category7 Item: Backend

Category8 Item: Backend

3.5 Contact and About us

To change link Contact us & About us, unzip sm_glasses_tf_theme_m1.7.0.2_v1.0 >> app\design\frontend\default\sm_glasses\template\smartaddons\megamenu\megamenu.phtml >> find the code folow to fix:

<li class="sm_megamenu_lv1 sm_megamenu_nodrop">
<a id="sm_megamenu_12" href="<?php echo Mage::getBaseUrl(); ?>about-magento-demo-store" class="sm_megamenu_head sm_megamenu_nodrop ">
<span class="sm_megamenu_nodesc"><span class="sm_megamenu_title"><?php echo $this->__('About Us') ?></span></span></a>
</li>
<li class="sm_megamenu_lv1 sm_megamenu_nodrop    last-item">
<a id="sm_megamenu_13" href="<?php echo Mage::getBaseUrl(); ?>contacts" class="sm_megamenu_head sm_megamenu_nodrop ">
<span class="sm_megamenu_nodesc"><span class="sm_megamenu_title"><?php echo $this->__('Contact Us') ?></span></span>
</a>
</li> 

You should go to here for reading more configure:

SM Glasses - Positions

1. SM Slick Slider Module

 1.1 Position
 
sm-slickslider
 
1.2 Front-end appreance
 
 
1.3 Configuration:
 
Backend: Click here
 
To get this extension to show onto the front page at the up top position, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter -between tag as below :
 


<reference name="slideshow">       

<block type="slickslider/list" name="slickslider.list"/></reference>

2. SM Basic Products

2.1 Position

content-top and content-bottom

2.2 Front-end appreance

content-top

content-bottom

2.3 Configuration 

Backend: Click here

To get this extension to show onto the front page at the up top position, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter -between tag as below :

<reference name="content-top">

                <block type="basicproducts/home" name="tab1" template="smartaddons/basicproducts/feature.phtml"> 

			<action method="setConfig">

 				<values>

					<block_title>Featured Products</block_title>

					<title></title>

                                        <product_source>catalog</product_source>

                                        <product_category>68</product_category>

					<product_order_by>price</product_order_by>

                                        <num_columns>4</num_columns>

                                        <product_limitation>8</product_limitation>

					<product_image_width>200</product_image_width>

					<product_image_height>135</product_image_height>

					<product_price_disp>1</product_price_disp>

					<product_rating_summary>0</product_rating_summary>

					<product_cart_or_status>1</product_cart_or_status>

					<product_addtocompare>0</product_addtocompare>

					<product_addtowishlist>0</product_addtowishlist>

				</values>

			</action>

                  </block>

</reference>

<reference name="content-bottom">

        	<block type="basicproducts/home" name="basicproducts.bestsales" template="smartaddons/basicproducts/bestsales.phtml">

        		<action method="setConfig">

					<values>

						<product_limitation>20</product_limitation>	

					        <product_cart_or_status>1</product_cart_or_status>

					</values>			

        		</action>

		</block></reference>

3. SM Slider

3.1 Position
 
position-4
 
3.2 Front-end appreance
 
 
3.3 Configuration
 
Backend: Click here
The SM Glasses front-page has static blocks in the Theme:
  • block-user1
  • block-user2
  • block-user3
  • block-user4
  • block-user5
  • block-info-footer
  • free-banner
  • free-shipping-banner
  • position-4
  • custom block
  • facebook like box
To create static blocks, go to CMS >> Static Blocks >> Add new block
 
1. Block-user1
 
1.1.  Identifier
 
block-user1
 
1.2. Front-end Appearance
 
 
1.3. Backend settings: Click here
 
1.4. Code to display as demo
 
<div class="block-title"><span><span>SM</span> Glasses</span></div>

<div class="block-content">

<p>Forem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque....</p>

<ul>

<li><a href="#"><img src="/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvdmlzYS5wbmcifX0,/key/1ac9790e9192b89d28bc96d0d0bf81d4/" alt="" /> </a></li>

<li><a href="#"><img src="/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvcGF5cGFsLnBuZyJ9fQ,,/key/1ac9790e9192b89d28bc96d0d0bf81d4/" alt="" /> </a></li>

<li><a href="#"><img src="/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvbW9uZXlib29rZXIucG5nIn19/key/1ac9790e9192b89d28bc96d0d0bf81d4/" alt="" /> </a></li>

</ul>

</div>
2. ​Block-user2
 
2.1.  Identifier
 
block-user2
 
2.2. Front-end Appearance
 
 
2.3. Backend settings: Click here
 
2.4. Code to display as demo
 
<div class="block-title"><span>Contact us</span></div>

<div class="block-content">

<ul>

<li class="street">4955 West Irlo Bronson Memorial Highway Kissimmee</li>

<li class="div-li-items">&nbsp;</li>

<li class="phone-number">(084) - 00 - 1234567802345678</li>

<li class="div-li-items">&nbsp;</li>

<li class="emaillocal"><a class="linkcontact" href="mailto:contact@ytcvn.com">contact@ytcvn.com</a></li>

</ul>

</div>

3. Block-user3
 
3.1.  Identifier
 
 block-user3
 
3.2. Front-end Appearance
 
 
3.3. Backend settings: Click here
 
3.4. Code to display as demo
 
<div class="block-title"><span>Why choose us</span></div>

<div class="block-content">

<ul>

<li><a href="#">Shipping &amp; 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>
4. Block-user4
 
4.1.  Identifier
 
block-user4
 
4.2. Front-end Appearance
 
 
4.3. Backend settings: Click here
 
4.4. Code to display as demo
 
<div class="block-title"><span class="name">Popular tags <a href="/index.php/admin/cms_wysiwyg/directive/___directive/e3tjb25maWcgcGF0aD0id2ViL3NlY3VyZS9iYXNlX3VybCJ9fQ,,/key/1ac9790e9192b89d28bc96d0d0bf81d4/index.php/tag/list/"> <span> ( more )</span></a></span></div>

<div class="block-content">{{block type="tag/popular" name="tags_popular" template="tag/popular.phtml"}}</div>
 
5. Block-user5
 
5.1.  Identifier
 
block-user5
 
5.2. Front-end Appearance
 
 
5.3. Backend settings: Click here
 
5.4. Code to display as demo
 
<div class="block-content"><form id="newsletter-validate-detail" action="newsletter/subscriber/new/" method="post"><label>Exclusive Email Offers </label>

<div class="input-box"><input id="newsletter" class="input-text required-entry validate-email" title="Sign up for our newsletter" onfocus="if(this.value=='Enter your email address') this.value='';" onblur="if(this.value=='') this.value='Enter your email address';" type="text" name="email" value="Enter your email address" />

<div class="actions"><button class="button" title="Subscribe" type="submit"><span><span>Subscribe</span></span></button></div>

</div>

</form></div>
 
6. Block-info-footer
 
6.1.  Identifier
 
block-info-footer
 
6.2. Front-end Appearance
 
 
6.3. Backend settings: Click here
 
6.4 Code to display as demo
 
<ul>

<li class="nav-item"><a href="/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSBkaXJlY3RfdXJsPSJjb250YWN0cyJ9fQ,,/key/1ac9790e9192b89d28bc96d0d0bf81d4/">Contact</a></li>

<li class="nav-item"><a href="/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSBkaXJlY3RfdXJsPSJjYXRhbG9nL3Nlb19zaXRlbWFwL2NhdGVnb3J5In19/key/1ac9790e9192b89d28bc96d0d0bf81d4/">Site Map</a></li>

<li class="nav-item"><a href="#"> Legal Notice</a></li>

<li class="nav-item"><a href="/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSBkaXJlY3RfdXJsPSJjdXN0b21lci1zZXJ2aWNlIn19/key/1ac9790e9192b89d28bc96d0d0bf81d4/">Terms and conditions</a></li>

<li class="nav-item"><a href="/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSBkaXJlY3RfdXJsPSJhYm91dC1tYWdlbnRvLWRlbW8tc3RvcmUifX0,/key/1ac9790e9192b89d28bc96d0d0bf81d4/">About us</a></li>

</ul>
7. Free-banner
 
7.1.  Identifier
 
free-banner
 
7.2. Front-end Appearance
 
 
7.3. Backend settings: Click here
 
7.4 Code to display as demo
 
<div class="free-shipping-banner"><a href="#"><img src="/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFubmVyLnBuZyJ9fQ,,/key/1ac9790e9192b89d28bc96d0d0bf81d4/" alt="" /></a></div>
 
8. Free-shipping-banner
 
8.1.  Identifier
 
free-shipping-banner
 
8.2. Front-end Appearance
 
 
8.3. Backend settings: Click here
 
8.4. Code to display as demo
 
<div class="free-shipping-banner"><a href="#"><img src="/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvZnJlZS1zaGlwcGluZy5wbmcifX0,/key/1ac9790e9192b89d28bc96d0d0bf81d4/" alt="" /></a></div>
 
9. Position-4
 
9.1.  Identifier
 
position-4
 
9.2. Front-end Appearance
 
 
9.3. Backend settings: Click here
 
9.4. Code to display as demo
 
<p>{{block type="slider/list" name="slider.list"}}</p>

10. Custom Box
 
10.1. Identifer
 
block-custom
 
10.2. Front-end Appearance
 
 
10.3. Backend settings: Click here
 
10.4. Code to display as demo
 
<div class="block-custom">

<div class="block-content"><a class="twitter-timeline" href="https://twitter.com/smartaddons" data-widget-id="321482620284321792">Tweets by @smartaddons</a>

<script type="text/javascript">// <![CDATA[

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

// ]]></script>

</div>

<div class="block-content-bottom clearfix"><span>Join the conversation</span></div>

</div>
 
11. Facebook LikeBox
 
11.1. Identifer
 
block-likebox
 
11.2. Front-end Appearance
 
 
11.3. Backend settings: Click here
 
11.4. Code to display as demo
 
<div class="block-custom block-likebox">

<div class="block-content"><iframe style="border: none; overflow: hidden; width: 237px; height: 318px;" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmagentech&amp;width=237&amp;height=318&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" frameborder="0" scrolling="no" width="320" height="300"></iframe></div>
</div>

 

1. Home Page

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

  • Layout : select 1 columns on drop down list
  • Layout Update XML: Paste the code below

PHP Code:

<reference name="slideshow">       

<block type="slickslider/list" name="slickslider.list"/></reference>



<reference name="content-top">

        	<block type="basicproducts/home" name="default.basicproducts.list1" template="smartaddons/basicproducts/home.phtml">

        		<action method="setConfig">

					<values>

						<product_limitation>20</product_limitation>		

					</values>			

        		</action>

			</block>

</reference>

<reference name="content-bottom">

            <block type="basicproducts/home" name="tab1" template="smartaddons/basicproducts/feature.phtml"> 

			<action method="setConfig">

 				<values>

					<block_title>Featured Products</block_title>

					<title></title>

                                        <product_source>catalog</product_source>

                                        <product_category>68</product_category>

					<product_order_by>price</product_order_by>

                                        <num_columns>5</num_columns>

                                        <product_limitation>10</product_limitation>

					<product_image_width>200</product_image_width>

					<product_image_height>135</product_image_height>

					<product_price_disp>1</product_price_disp>

					<product_rating_summary>0</product_rating_summary>

					<product_cart_or_status>1</product_cart_or_status>

					<product_addtocompare>0</product_addtocompare>

					<product_addtowishlist>0</product_addtowishlist>

				</values>

			</action>

                  </block>

</reference>


2. About Us

To config this page, please navigate to CMS >> Pages, then select About Us page to update the settings as below

3. Contact Us

To show this page on Menu, please go to this file app\design\frontend\default\sm_glasses\template\smartaddons\megamenu\megamenu.phtml and insert the following code before ending of module

<li class="sm_megamenu_lv1 sm_megamenu_nodrop    last-item">

						<a id="sm_megamenu_13" href="<?php echo Mage::getBaseUrl(); ?>contacts" class="sm_megamenu_head sm_megamenu_nodrop ">

							<span class="sm_megamenu_nodesc"><span class="sm_megamenu_title"><?php echo $this->__('Contact Us') ?></span></span>

						</a>

					</li>

Support from MagenTech will be defined as following:

  • Support time: Monday - Friday 8:30AM to 5:30PM UTC+7
  • Response Time: Within 24 hours (1 business day)

Item support includes:

  • Responding to questions or problems regarding the item and its features
  • Fixing bugs and reported issues
  • Providing updates to ensure compatibility with new software versions

Item support does not include:

  • Customization and installation services
  • Support for 3rd parties' extensions

Installation Services-Quickstart installation services cost $25:

  • 1. Buy service-installation here
  • 2. Submit your account information to install here
That's it. Now you are ready for using!

Thank you so much for purchasing this theme. We would be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do the best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the our ticket system and send support request via Support Tickets System.

Thanks so much!