SM Style

This guide will help you install SM Style theme 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 and 1.9.x

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

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

2. Select SM Style Setting 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 server’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 (on the left-hand menu)
  • Step 4: You will see installed extension, click extension’s name tab to go to extension configuration page.

4CONFIGURATION – Back to top

4.1 Configure pages

Home Page with default style

To config this page, please navigate to CMS >> Pages

Create a new page named {home} in Page Management section.

  • Layout: 1 column
  • Page information Tab: Please click Here to view Backend Settings.
  • Design Tab: Please click Here to view Backend Settings.
  • Layout update XML: paste the code below to the Design field.
Home Page with style 2

To config this page, please navigate to CMS >> Pages

Create a new page named {home-v2} in Page Management section.

  • Layout: 1 column
  • Page information Tab: Please click Here to view Backend Settings.
  • Design Tab: Please click Here to view Backend Settings.
  • Layout update XML: paste the code below to the Design field.
Home Page with style 3

To config this page, please navigate to CMS >> Pages

Create a new page named {home-v3} in Page Management section.

  • Layout: 1 column
  • Page information Tab: Please click Here to view Backend Settings.
  • Design Tab: Please click Here to view Backend Settings.
  • Layout update XML: paste the code below to the Design field.

Home Page with style 4

To config this page, please navigate to CMS >> Pages

Create a new page named {home-v4} in Page Management section.

  • Layout: 1 column
  • Page information Tab: Please click Here to view Backend Settings. Paste “URL Key” is home-v4
  • Design Tab: Please click Here to view Backend Settings.
  • Layout update XML: paste the code below to the Design field.

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

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

  • Link show Home Menu’s backend. Please click Here to view.

Content code of Home Menu:

WOMEN MENU

Frontend

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

Backend

Data Type: “category/323″. To config, please go to Catalog >> Manage Categories >> Women Category

Dropdown: backend

Categories: backend

Static Image: backend

Content code of Satic Image:

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 Camera Slide

    • Position: SM Camera Slide
    • Frontend

    • Backend

III. SM Deal

      • Position: SM Deal
      • Frontend

      • Backend of SM Deal: Click Here
      • To view more guide about how to install and configure SM Deal as you want, please click here
      • To config this position, please navigate to CMS >> Pages >> SM Style – Responsive Magento Fashion Theme, navigate to Design tab and paste code as below:
IV. SM Tab Listing

      • Position: SM Tab Listing
      • Frontend

      • Backend of SM Tab Listing: Click Here
      • To view more guide about how to install and configure SM Tab Listing as you want, please click here
      • To config this position, please navigate to CMS >> Pages >> SM Style – Responsive Magento Fashion Theme, navigate to Design tab and paste code as below:
V. SM Twitter Slider

      • Position: SM Twitter Slider
      • Frontend

        • Backend of SM Twitter Slider: Click Here
        • To config this position, please navigate to CMS >> Pages >> SM Style – Responsive Magento Fashion Theme, navigate to Design tab and paste code as below:
      • To view more guide about how to install and configure SM Twitter Slider as you want, please click here

4.5 Configure blocks

The SM Style has static blocks in the Theme:

      • Style – Service Top
      • Style – Left Static Navigation
      • Style – 2 Static Image
      • Style – Video Slider
      • Style – Image Static Left
      • Style – Image Static Center
      • Style – About Shop Home
      • Style – Testimonials
      • Style – Description Footer
      • Style – Brand Footer
      • Style – Shop Info Footer
      • Style – Categories Footer
      • Style – My Account Footer
      • Style – Help Footer
      • Style – Bottom Links Footer
      • Style – Footer Payment
      • Style – Instant View

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

Style – Service Top

Identifier: service-top

Frontend

Link show Backend of Style – Service Top.

Content Code of Style – Service Top:

Style – Left Static Navigation

Identifier: left-static-navigation

Frontend

Link show Backend of Style – Left Static Navigation.

Content Code of Style – Left Static Navigation:

Style – 2 Static Image

Identifier: static-image-2

Frontend

Link show Backend of Style – 2 Static Image.

Content Code of Style – 2 Static Image:

Style – Video Slider

Identifier: video-slider Frontend Link show Backend of Style – Video Slider. Content Code of Style – Video Slider:

Style – Image Static Left

Identifier: img-static-left

Frontend

Link show Backend of Style – Image Static Left.

Content Code of Style – Image Static Left:

Style – Image Static Center

Identifier: static-center-image

Frontend

Link show Backend of Style – Image Static Center.

Content Code of Style – Image Static Center:

Style – About Shop Home

Identifier: about-shop-home

Frontend

Link show Backend of Style – About Shop Home.

Content Code of Style – About Shop Home:

Style – Testimonials

Identifier: slider-testimonials

Frontend

Link show Backend of Style – Testimonials.

Content Code of Style – Testimonials:

Style – Description Footer

Identifier: description-footer

Frontend

Link show Backend of Style – Description Footer.

Content Code of Style – Description Footer:

Style – Brand Footer

Identifier: band-footer

Frontend

Link show Backend of Style – Brand Footer.

Content Code of Style – Brand Footer:

Style – Shop Info Footer

Identifier: shop-info-footer

Frontend

Link show Backend of Style – Shop Info Footer.

Content Code of Style – Shop Info Footer:

Style – Categories Footer

Identifier: categories-footer

Frontend

Link show Backend of Style – Categories Footer.

Content Code of Style – Categories Footer:

Style – My Account Footer

Identifier: account-footer

Frontend

Link show Backend of Style – My Account Footer.

Content Code of Style – My Account Footer:

Style – Help Footer

Identifier: help-footer

Frontend

Link show Backend of Style – Help Footer.

Content Code of Style – Help Footer:

Style – Bottom Links Footer

Identifier: bottom-links-footer

Frontend

Link show Backend of Style – Bottom Links Footer.

Content Code of Style – Bottom Links Footer:

Style – Footer Payment

Identifier: payment-footer

Frontend

Link show Backend of Style – Footer Payment.

Content Code of Style – Instant View:

Style – Instant View

Identifier: instant-view

Frontend

Link show Backend of Style – Instant View.

Content Code of Style – Instant View:

4.6 How To Enable/Disable Social setting & Custom Copyright in admin

In the Administrator page, Please navigate to System >> Configuration >> find SM Theme Style to configure the “Social Styles” & “Custom Copyright” parameter as image below:

Socials Styles

Facebook

  • Show Facebook – Allow to Enable/Disable Facebook
  • Facebook Name – Allow to input the name of Facebook
  • Facebook Url – Allow to input the Url of Facebook

Twitter

  • Show Twitter – Allow to Enable/Disable Twitter
  • Twitter Name – Allow to input the name of Twitter
  • Twitter Url – Allow to input the Url of Twitter

Google+

  • Show Google+ – Allow to Enable/Disable Google+
  • Google+ Name – Allow to input the name of Google+
  • Google+ Url – Allow to input the Url of Google+

Linkedin

  • Show Linkedin – Allow to Enable/Disable Linkedin
  • Linkedin Name – Allow to input the name of Linkedin
  • Linkedin Url – Allow to input the Url of Linkedin

Flickr

  • Show Flickr – Allow to Enable/Disable Flickr

Pinterest

  • Show Pinterest – Allow to Enable/Disable Pinterest
  • Pinterest Name – Allow to input the name of Pinterest
  • Pinterest Url – Allow to input the Url of Pinterest

Advanced Style

  • Show Cpanel – Allow to Enable/Disable Cpanel
  • Show Go to Top – Allow to Enable/Disable Go to Top
  • Use Add to Cart – Allow to Enable/Disable Cart
  • Use Add to Wishlist – Allow to Enable/Disable Wishlist
  • Use Add to Compare – Allow to Enable/Disable Compare
  • Enable Custom Copyright – Allow to Enable/Disable Custom Copyright
  • Copyright – If you select “Yes”, please custom copyright here, or else “No” will display the default copyright of Magento.
  • Custom Css – Allow to custom css
  • Custom Javascript – Allow to custom Javascript

5SUPPORT – 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!

×