SM Salamy

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

1 SYSTEM REQUIREMENT ai??i?? 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 and 1.9.x ( the latest version – V1.0.1 is compatible with Magento 1.9.2.1
  • Note:This package is upgraded to Magento Version 1.9.2.1

2LAYOUT POSITION ai??i?? Back to top

3INSTALLATION ai??i?? 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 ai???Extensionsai??? and ai???Themeai??? 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 serverai??i??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 and fill all theme information as screen shot below:

  • Step 4: Finally, Click button ai???Save Configai??? to save your configuration

Configure theme using admin back end

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

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

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

3. Tweak the theme as you want

3.3 Install Magento Extension

Note: These extension packages are the best compatibility version with this theme.

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 front end

  • Theme Color: support 5 presets to be chosen
  • Menu Style: Mega; Css

4.2 Configure Mega Menu

To configure 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

Mega Menu Items Configuration

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

Frontend

Tree of Home Menu:
http://images.smartaddons.com/smartaddons/images/userguide/magento/sm-salamy/tree-home.png

Content code of Content Home as below:

<ul class="layout-web">
<li><a title="Layout Full Width" href="{{store url="?___store=english&___from_store=spain"}}">Layout Full Width</a></li>
<li><a title="Layout Boxed" href="{{store url="?___store=spain&___from_store=english"}}">Layout Boxed</a></li>
</ul>

PRODUCT TYPES MENU

Frontend

Data type: category/268

To config: Go to Catalog >> Manager Categories > Basic > Display Settings > Display Mode = ai???Products Onlyai???.

Tree of Product Types Menu:
http://images.smartaddons.com/smartaddons/images/userguide/magento/sm-salamy/tree-product-types.png

Note: Child product of ai???Product Typesai??? below configure the same.

WOMEN MENU

Frontend

Data type: category/321

To config: Go to Catalog >> Manager Categories > Basic > Display Settings > Display Mode = ai???Products Onlyai???.

Tree of Women Menu:
http://images.smartaddons.com/smartaddons/images/userguide/magento/sm-salamy/tree-women.png

Content code of ai???Dressesai??? as below & note that ai???Sub-Menu below configure the same with Dressesai??? :

<ul class="list-cat">
<li><a href="{{store url="women/dresses/cocktail.html"}}" title="Demo Category 1">Cocktail</a></li>
<li><a href="{{store url="women/dresses/evening.html"}}"  title="Demo Category 2">Evening</a></li>
<li><a href="{{store url="women/dresses/sundresses.html"}}"  title="Demo Category 3">Sundresses</a></li>
<li><a href="{{store url="women/dresses/sweater.html"}}" title="Demo Category 4">Sweater</a></li>
<li><a url="women/dresses/belts.html"}}" title="Demo Category 5">Belts</a></li>
</ul>

Content code of ai???Static Imageai??? as below:

<a style="margin-left:15px; margin-top:10px; display:inline-block" href="#" title="Static Image"><img title="Static Image" src="{{media url="wysiwyg/static-image-menu.png"}}" alt="" /></a>

MEN MENU

Frontend

Data type: category/269

To config: Go to Catalog >> Manager Categories > Basic > Display Settings > Display Mode = ai???Products Onlyai???.

Tree of Men Menu:
http://images.smartaddons.com/smartaddons/images/userguide/magento/sm-salamy/tree-men.png

Content code of ai???Clothingai??? as below & note that ai???Sub-Menu below configure the same with Clothing sub-menuai??? :

<ul class="list-cat">
<li><a href="{{store url="men/clothing/coats-jackets.html"}}" title="Category 1">Coats & Jackets</a></li>
<li><a href="{{store url="men/clothing/blazers.html"}}" title="Category 2">Blazers</a></li>
<li><a href="{{store url="men/clothing/jackets.html"}}" title="Category 3">Jackets</a></li>
<li><a href="{{store url="men/clothing/raincoats.html"}}" title="Category 4">Raincoats</a></li>
</ul>

BLOG MENU

Frontend

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>

ABOUT MENU

Frontend

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

CONTACT US MENU

Frontend

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

<reference name="content">
            <block type="core/template" name="contactForm" template="contacts/form.phtml"/>
</reference>

4.3 Configure Extensions

I. SM Search Box Pro

  • Position: SM-SEARCHBOXPRO
  • Frontend

  • Backend
  • To view more guide about how to install, set up and configure SM Search Box as you want, please click here

II. SM Cart Pro

  • Position: SM-CARTPRO
  • Frontend

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

III. SM Dynamic Slideshow

  • Position: SM-DYNAMICSLIDESHOW
  • Frontend

  • Backend
  • To view more guide about how to install, set up and configure SM Dynamic Slideshow as you want, please click here

IV. SM Deal

  • Position: SM-DEAL
  • Frontend

V. SM Tab Listing

  • Position: SM Tab listing
  • Frontend

    • Backend
    • To get this extension to show on 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-tab">
    <block type="tablisting/list" name="tablisting">
    	<action method="setConfig"></action>
     </block>
</reference>
      • To view more guide about how to install, set up and configure SM Tab listing as you want, please click here

VI. SM Slider

      • Position: SM Slider
      • Frontend

      • Backend
      • To config this position, please navigate to CMS >> Pages >>Home page, navigate to Design tab and paste code as following:
<reference name="slider">
    <block type="slider/list" name="slider-blog" template="sm/slider/default.phtml"></block>
</reference>
      • To view more guide about how to install, set up and configure SM Slider as you want, please click here

 

4.4 Configure blocks

 

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

      • Salamy Banner Right Home
      • Salamy Social Fixed
      • Salamy Banner Bottom Home
      • Salamy Banner Center Home
      • Salamy Top Rating Home
      • Salamy What Client Says
      • Salamy Footer Left
      • [Salamy Footer] Contact With Us + Information + Customer Service
      • [Salamy Footer] My Account + Contact Us

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

Salamy Banner Right Home

Frontend

Backend

      • Code Code of banner-right-home:
<p><a title="Banner Right Home" href="#"><img src="{{media url="wysiwyg/banner-right-home.png"}}" alt="Banner Right Home" /></a></p>

Salamy Social Fixed

Frontend

Backend

      • Code Code of Salamy Social Fixed:
<div class="social-fixed">
<div class="list-social">
<ul class="table-item">
<li class="ic-social" title="Facebook"><img src="{{media url="wysiwyg/fb-icon-fixed.png"}}" alt="Facebook" /></li>
<li class="text-social">Facebook</li>
</ul>
<ul class="table-item">
<li class="ic-social"><img src="{{media url="wysiwyg/rss-icon-fixed.png"}}" alt="RSS Feed" /></li>
<li class="text-social">RSS Feed</li>
</ul>
<ul class="table-item">
<li class="ic-social"><img src="{{media url="wysiwyg/tw-icon-fixed.png"}}" alt="Twitter" /></li>
<li class="text-social">Twitter</li>
</ul>
<ul class="table-item">
<li class="ic-social"><img src="{{media url="wysiwyg/tumblr-icon-fixed.png"}}" alt="Tumblr" /></li>
<li class="text-social">Tumblr</li>
</ul>
<ul class="table-item">
<li class="ic-social"><img src="{{media url="wysiwyg/google-icon-fixed.png"}}" alt="Google Plus" /></li>
<li class="text-social">Google Plus</li>
</ul>
</div>
</div>

Salamy Banner Bottom Home

Frontend

Backend

      • Code Code of banner-bottom-home:
<div class="col-md-9 col-xs-9 l-banner-bottom"><a title="Banner Bottom Left" href="#"><img src="{{media url="wysiwyg/banner-bottom-left.png"}}" alt="Banner Bottom Left" /></a></div>
<div class="col-md-3 col-xs-3 banner-bottom-right"><a title="Banner Bottom Left" href="#"><img src="{{media url="wysiwyg/banner-bottom-right.png"}}" alt="Banner Bottom Right" /></a></div>

Salamy Banner Center Home

Frontend

Backend

  • Code Code of banner-center-home:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner-center-wrapper">
<div class="fashon-logo-center">logo</div>
<div class="free-shipping-car">shipping car</div>
<a title="FREE SHIPPING &amp; RETURNS" href="#"><span class="bold-text">FREE SHIPPING &amp; RETURNS</span> ON ORDERS OVER $99. THIS OFFER IS VALID ON ALL OUR STORE ITEMS.</a></div>
</div>
</div>
</div>

Best Sale Home

Frontend

Backend

  • Code Code of best-sale-home:
<p>{{block type="basicproducts/home" name="topbestsales" template="sm/basicproducts/basic-product-home.phtml" title="Best Sale" product_source="catalog" product_category="267,268,269" product_limitation="4" product_image_height="84" product_image_width="84" product_order_by="best_sales" product_title_max_length="20" product_title_disp="1" product_rating_summary="1" product_description_disp="0" product_description_max_length="40" product_cart_or_status="0" product_addtocompare="0" product_addtowishlist="0"}}</p>

Salamy What Client Says

Frontend

Backend

  • Code Code of what-client-says:
<div class="block-title"><strong> <span>What Client Says</span> </strong></div>
<div id="what-client-say" class="carousel slide"><ol class="carousel-indicators">
<li class="active" data-target="#what-client-say" data-slide-to="0"></li>
<li data-target="#what-client-say" data-slide-to="1"></li>
<li data-target="#what-client-say" data-slide-to="2"></li>
</ol>
<div class="slider-w">
<div class="slider-wrap-carousel">
<div class="carousel-inner">
<div class="item active">
<ul class="list-customer">
<li class="item-cus"><a class="cus-image-box" title="Jane Doe - Stylish Manager" href="#"> <img src="{{media url="wysiwyg/client-1.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Jane Doe - Stylish Manager" href="#">Jane Doe - Stylish Manager</a></p>
</div>
</li>
<li class="item-cus"><a class="cus-image-box" title="Barney Schwartz - Director/Manager" href="#"> <img src="{{media url="wysiwyg/client-2.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Barney Schwartz - Director/Manager" href="#">Barney Schwartz - Director/Manager</a></p>
</div>
</li>
<li class="item-cus"><a class="cus-image-box" title="Jochen Rechsteiner - Online Marketer" href="#"> <img src="{{media url="wysiwyg/client-3.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Jochen Rechsteiner - Online Marketer" href="#">Jochen Rechsteiner - Online Marketer</a></p>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="list-customer">
<li class="item-cus"><a class="cus-image-box" title="N. Winckel - Stylish Manager" href="#"> <img src="{{media url="wysiwyg/client-4.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="N. Winckel - Stylish Manager" href="#">N. Winckel - Stylish Manager</a></p>
</div>
</li>
<li class="item-cus"><a class="cus-image-box" title="Dr. Gregory F. Maassen - Doctor" href="#"> <img src="{{media url="wysiwyg/client-5.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Dr. Gregory F. Maassen - Doctor" href="#">Dr. Gregory F. Maassen - Doctor</a></p>
</div>
</li>
<li class="item-cus"><a class="cus-image-box" title="Cornelius Reeves - Ophthalmology" href="#"> <img src="{{media url="wysiwyg/client-6.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Cornelius Reeves - Ophthalmology" href="#">Cornelius Reeves - Ophthalmology</a></p>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="list-customer">
<li class="item-cus"><a class="cus-image-box" title="Decio Elias - Singer" href="#"> <img src="{{media url="wysiwyg/client-7.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Decio Elias - Singer" href="#">Decio Elias - Singer</a></p>
</div>
</li>
<li class="item-cus"><a class="cus-image-box" title="Jane Doe - Stylish Manager" href="#"> <img src="{{media url="wysiwyg/client-8.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Jane Doe - Stylish Manager" href="#">Jane Doe - Stylish Manager</a></p>
</div>
</li>
<li class="item-cus"><a class="cus-image-box" title="Lynn Lambert - Pulmonary" href="#"> <img src="{{media url="wysiwyg/client-9.png"}}" alt="" /> </a>
<div class="cus-info-box">
<p class="detail-s">&ldquo; 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, quis</p>
<p class="name-client"><a title="Lynn Lambert - Pulmonary" href="#">Lynn Lambert - Pulmonary</a></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
										jQuery(document).ready(function($) {
											$('.carousel').carousel({
												interval:   0,
												pause: '',
												wrap: true
											});	
										});
// ]]></script>

Salamy Footer Left

Frontend

Backend

  • Code Code of Salamy Footer Left:
<div class="block-ft footer-contact">
<div class="content-block-footer">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatt, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</div>
</div>
<div class="block-ft footer-payment">
<div class="footer-title">
<h2>Payment Method</h2>
</div>
<div class="content-block-footer"><label class="des-footer">We are using secure Paypal &amp; Money-bookers payment method. You can pay directly form your Credit Card via Moneybookers or Paypal and NEVER store your card information on our site</label>
<ul class="payment-item">
<li class="item"><img src="{{media url="wysiwyg/we-pay-icon.png"}}" alt="Payment" /></li>
<li class="item"><img src="{{media url="wysiwyg/master-cart-icon.png"}}" alt="Payment" /></li>
<li class="item"><img src="{{media url="wysiwyg/a-icon.png"}}" alt="Payment" /></li>
<li class="item"><img src="{{media url="wysiwyg/paypal-icon.png"}}" alt="Payment" /></li>
<li class="item"><img src="{{media url="wysiwyg/visa-icon.png"}}" alt="Payment" /></li>
</ul>
</div>
</div>

Salamy Footer Connect With Us

Frontend

Backend

  • Code Code of connect-with-us-footer:
<div class="block-ft footer-contact">
<div class="footer-title">
<h2>Connect with Us</h2>
</div>
<div class="content-block-footer">
<ul class="right-footer-link social-footer-links">
<li class="item fb-item"><a title="Follow us on facebook" href="#">Follow us on facebook</a></li>
<li class="item tw-item"><a title="Follow us on twitter" href="#">Follow us on twitter</a></li>
<li class="item lk-item"><a title="Follow us on linkedin" href="#">Follow us on linkedin</a></li>
<li class="item rs-item"><a title="RSS feeds" href="#">RSS feeds</a></li>
</ul>
</div>
</div>

Salamy Footer Information

Frontend

Backend

  • Code Code of information-footer:
<div class="block-ft footer-contact">
<div class="footer-title">
<h2>Information</h2>
</div>
<div class="content-block-footer">
<ul class="right-footer-link">
<li class="item"><a title="About Us" href="{{store url="about.html"}}">About Us</a></li>
<li class="item"><a title="Terms of Use" href="#">Terms of Use</a></li>
<li class="item"><a title="Club Info and FAQ's" href="#">Club Info and FAQ's</a></li>
<li class="item"><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li class="item"><a title="Contact Us" href="{{store url="contact-us.html"}}">Contact Us</a></li>
</ul>
</div>
</div>

Note 1: Static Block of ai???[Salamy Footer] Customer Service + My Account + Contact Usai??? configures the same with ai???[Salamy Footer] Informationai???
Note 2: We used Blog ai??i?? Community Edition extension for blog page. To install this extension, please click here.

 

4.5 How To Set Default Language and Currency in Magento

 

Please click HERE to see how to set default language and currency in Magento.

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!

×