SP Atom

August 12, 2015, 2:07 am

1GETTING STARTED

1.1 Introduction

First of all, I would like to thank you for purchasing this theme. We’ve put in lots of love in developing this Prestashop Theme and are excited that you’ve chosen this theme for your website. We hope you find it easy to use our theme. This documentation guides you through the main features of the theme and guides you how to use and customize the theme.

1.2 System Requirements

Please make sure your hosting server meets the PrestaShop requirements:

Supported operating system: Windows, Mac and Linux.
Wamp (for Windows) or Xampp (for Windows and Mac)
Web server: Apache Web server 1.3 or later, Microsoft’s IIS Web server 6.0 or later.
PHP 5.2* or later.
MySQL 5.0 or later.
At least 32 Mb of RAM on your server (64 Mb is comfortable, the more the better).

Note: If you can not install the theme/module, You need to increase the parameter “memory_limit=200M”; “max_execution_time=300″; “max_execution_time=1000″ & “upload_max_filesize=20M” in the file php.ini.

1.3 PrestaShop Guide

If you are new with Prestashop. Please read Prestashop guide first: http://doc.prestashop.com/display/PS16/Getting+Started

2INSTALLATION

There are two ways to install SP Atom Theme

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation : Include of Theme layout Installation Packages. Please unzip the file and you would see the following packages:
- module folder
- override folder
- sp_atom_template_p16_v1.0.0.zip file

2.1 Quickstart Installation

We provide SP Atom 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 a quickstart package
Step 2: Extract the downloaded package “sp_atom_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting). In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Prestashop installer. Please follow each step of the Installer so that the installation process can be set.

Installation Assistant (Choose your language)

Please select the installation language

Please note: the installation language option will not affect your store language. By default PrestaShop is offered in English. You can install additional localization packages to change the store language.

When you are done, click the ‘Next’ button.

Installation Assistant (License agreements)

Please check the license agreement.

When you are done, click the ‘Next’ button.

System Compatibility

Check the PHP settings and directory permissions. In case of any errors, please contact your hosting provider for further assistance.

If everything is correct, click the ‘Next’ button.

Store Information

Now add required information for your store: Shop name, Main activity, Country, Shop timezone and add the account info: first name, last name, email and password. The information is very important so please make sure you store it somewhere. Click “Next” to next step.

When you are done, click the ‘Next’ button.

System Configuration

Here is the database configuration panel, we need to create database first.

Access your database panel and create database for your site. Add database name and then hit “Create” button.

Database is created successfully, copy the database name, paste database name in the “Database name” field and then you can test to see if database configuration is correct or not. Database configuration is connected, click “Next” to move to next step.

Finish installation: This process could take you some time

Note: For security reasons you need to delete the /install/ directory on your hosting server.

And finally, go to the frontend or backend as you want:

2.2 Theme Installation

Note: Before installing theme, you must disable cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> press “Save”.

SP Atom Default Theme Installation

Note: Here we will only guide you How To Install SP Atom Default Theme, with layout 2 or layout 3 do the same.

Firstly, you must EXTRACT the “sp_atom_layout1_theme_p16_v1.0.0.zip” package and open the extracted folder. Here you will see:

module folder: contain of the smartblog.zip file, smartblogcategories.zip file and themeinstallator.zip file.
override folder: contain of “FrontController.php” file in the folder URL: \override\classes\controller\ .
and the sp_atom_template_p16_v1.0.0.zip file.

STEP 1: Install “smartblog.zip”, “smartbloghomelatestnews.zip” and“smartblogcategories.zip” Module.

1. Login to your Prestashop admin panel and navigate to MODULES -> Modules. At the top of the page click the Add a new module button.

2. Choose the “smartblog.zip” file and click “Upload this module” button

3. There is a message-box “The module was successfully downloaded.”

4. Please find to the uploaded module and Install it.

5. A pop-up window will display. Please click “Proceed with the installation” button.

6. Finally, Module(s) installed successfully.

Note: The “smartblogcategories.zip” and “smartbloghomelatestnews.zip” module installation steps do the same.

STEP 2: Install “themeinstallator” Module.

1. Login to your Prestashop admin panel and navigate to MODULES -> Modules. At the top of the page click the Add a new module button.

2. Select your module.zip file “themeinstallator.zip” and click “Upload this module” button

3. The uploading process will be started. You will see the message that the module has been successfully downloaded.

4. The new module will be located in the modules list. Search the name of module and Click on the Install button to install the module.

5. Finally, you will see a notice message: “Module(s) installed successfully”.

STEP 3: Install the “sp_atom_template_p16_v1.0.0.zip” file.

1. In the your Prestashop admin panel and navigate to MODULES -> Modules. Find to the module that you have installed and clicked on Configure button to configure the module.

2. Navigate to “Import from your computer” >> choose the zip theme file as named “sp_atom_layout1_theme_p16_v1.0.0.zip” >> Next.

3. You will see a message, please click on “Next” button.

4. Select the module that you want to install/disable >> press “Next” to continue the installation process.

5. List of the installed/disabled modules will be showed out and click on “Finish” button to finish the theme installation.

3SP THEME CONFIGURATION

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the Settings section, find to the parameter “Keep Menu Bar On Top” to set “Yes” and press “Save”. Go to the front-end to view the changes.

3.2 Select Theme Color, Font, Box Layout

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the Settings section, find to the parameter “Display Live Configurator” to set “Yes” and press “Save”.

4. Go to the front-end to view the changes and select theme color, font, box layout as you want. Please note that when you select (the theme color; font; box layout), remember to “Save” again and refresh to view the changes.

3.3 Setup Logo

1. To configure Logo for your store, navigate to PREFERENCES > Themes in your Prestashop Admin Dashboard. Go to Logo tab to set up your logo. Click “Add File” to upload the logo image as you want and “Save”.

2. Please check the front-end to view the changes.

3.4 Image Size Adjustment

In your Prestashop admin dashboard, navigate to: PREFERENCES > Images to configure the image size for category, manufacturer, supplier, product etc that fit your layout best.

1. Image size - You can choose the type of product images that will suit your products the best.

2. Image quality - Set image quality to use on your site.

3. Regenerate thumbnails - To see the changes after you update the image sizes, image quality you need to re-generate the images is using in your site. Select option then click button Regenerate thumbnails.

3.5 Edit Copyright

Frontend Appearance:

To edit Copyright, please the steps following:

1. Open your theme installation directory >> go to the themes\themeXXX\(XXX is your theme) >> open “footer.tpl” file with your HTML/PHP editor (for example, Adobe Dreamweaver, Notepad++, etc).

2. Look for the following code and replace as you want:

<div id="copyright">
		<div  class="container">
		<div class="copy-right col-md-12 clear">
		SP Atom &copy; 2015  <a class="_blank" href="http://www.magentech.com/">PrestaShop Themes Demo Store</a>. All Rights Reserved. Designed By <a class="_blank" href="http://www.magentech.com">MagenTech.Com</a>
			</div>
			</div>
			</div>

4MULTISHOP CONFIGURATION

1. In the Administrator Dashboard, navigate to PREFERENCES > General > find to the parameter “Enable Multistore” > click “Yes” to enable multishop and “Save” .

2. Please go to >> ADVANCED PARAMETERS >> Multistore

3. In the Multistore Tree, click “Welcome to SP Atom Layout2“.

multistore-tree

4. After click the link “click here to set URL for this shop” to set URL for SP Atom Layout2

5. Select your “Shop”; set “Virtual URL” and press “Save”.

6. Finally, click the URL to view the changes

↧

SW StabWall

August 20, 2015, 12:57 am

≫ Next: SM Stationery

≪ Previous: SP Atom

View demo More detail

1GETTING STARTED

1.1 Introduction

First of all, I would like to thank you for purchasing this theme. We’ve put in lots of love in developing this wordpress theme and are excited that you’ve chosen this theme for your website. We hope you find it easy to use our theme. This documentation guides you through the main features of the theme and guides you how to use and customize the theme.

1.2 System Requirements

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

Apache 2.x or Microsoft IIS 7
PHP 5.3.x
MySQL 5.0.4 or higher
WordPress 3.9+, 4.0+

Recommended PHP Configuration Limits: Many issues you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can contact with your web host and ask them to increase those limits to a minimum or You can do this on your own by finding php.ini file in your root directory as follows:

max_execution_time 360

memory_limit 128M

post_max_size 32M

upload_max_filesize 32M

2INSTALLATION

2.1 Files Structure

At first, you need to download the package about my computer and then unzip the package. The Main Files Gives You All The Content Listed Below

Data folder - Contains the “sample_data.xml” file and “widget.wie” file file.
Theme installation package – Contains the sw_stabwall_theme_v1.0.0.zip (the newest version) file and sw_stabwall-child-theme.zip WordPress Theme. The child theme is only for users who make code changes.

2.2 Theme Installation

You can install the theme in two ways: through WordPress, or via FTP.

Note: If the theme file size is larger than 8M, please upload to FTP (File Transfer Protocol).

2.2.1 Theme Via FTP Installation

Extract themename_version.zip.
Load your FTP client, such as FileZilla.
Upload the themename_version folder to the /wp-content/themes directory.
In the left menu sidebar, go to Appearance >> Themes.
Click Activate underneath the theme’s named section.

2.2.2 Theme Via WordPress Admin Panel Installation

Step 1 – Open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g (www.your_domain.com/wp-admin/).

Step 2 – Login to your WordPress Dashboard and navigate to Appearance >> Themes. At the top of the page click the Add New button.

Step 3 – Click the Upload Theme button >> Choose File in Import from your computer section. Navigate to previously zipped theme package and open theme installator folder: Select your “ sw_stabwall_theme_v1.0.0.zip” file and click Install Now.

Step 4 – The uploading process will be started. You will see the message that Theme installed successfully.

Step 5 – After the installation you will be able to activate the theme to do this click the “blue” activation link.

Step 6 – Select “Create static front page = No” and press “Save Changes” to complete the theme activation.

Once theme is installed, you need to install Required Plugins to get full features working.

2.3 Required Plugins Installation

After installing and activating the theme you will see a yellow popup at the top of the page. Saying: “This theme requires the following plugins…” please click the ‘Begin Installing plugins’ link.

You will be redirected to ‘Install Required Plugins’ page, here you will find all of the theme required plugins. To install them just check all of them and from the drop down select install once installed do the same to activate them.

Note: If the plugins installation process could have a notice some plugins unsuccessful installation, please go to these plugins to install one by one. This case usually occurs as you select all plugins installation at once.

2.4 Sample Data Installation

Step 1 - In the Administrator page, please navigate to Tools >> Import.

Step 2 - Please choose “WordPress” to import.

Step 3 - In Import WordPress page, click “choose file” button to select file “sample_data.xml” to upload.

Step 4 - Assign Authors and Import Attachments with selecting “Download and import file attachments“ and then press “Submit” button.

Step 1 – In the Administrator page, please navigate to Tools >> Widget Importer & Exporter.

Step 2 – After that choose “widget_data.wie” file >> press Import Widgets button.

2.6 Change Product Image Sizes

You can change the image size in “Woocommerce > Settings > Products > Display” section.

woocommerce

After change the images sizes, you should regenerate all the thumbnails. For this, you should install and activate “Regenerate Thumbnails” plugin.

3THEME OPTIONS

In your Admin Panel, navigate to Appearance >> Theme Options to configure.

3.1 General

Color Scheme – Color of schemes: Default.
Background Image – Browse to select image file that you want for background image.
Color Option – Only color validation can be done on this field type. This is the description field, again good for additional info.
Background Repeat – This option determines if the background image is repeated (Used for boxed layout).
Favicon Icon - Use the Upload button to upload the new favicon and get URL of the favicon.
Responsive Support – Support reponsive layout, if you do not want to use this function, please uncheck.
Logo Image - Use the Upload button to upload the new logo and get URL of the logo.

3.2 Layout

Box Layout – Select Layout Box or Wide.
Background Box Image – Browse to select image that you want.
Left Sidebar Expand – Select width of left sidebar.
Right Sidebar Expand – Select width of right sidebar medium desktop.
Left Sidebar Medium Desktop Expand – Select width of left sidebar medium desktop.
Right Sidebar Medium Desktop Expand – Select width of right sidebar.
Left Sidebar Tablet Expand - Select width of left sidebar tablet.
Right Sidebar Tablet Expand – Select width of right sidebar tablet.
Sidebar Blog Layout – Select style sidebar blog: Full Layout/Left Sidebar/Right Sidebar/Left Right Sidebar.
Layout product – Select style layout blog: List Layout/Right Sidebar/Grid Layout.
Blog column – Select style number column blog: 2 columns/ 3 columns/ 4 columns.

Menu Type – Select “Mega Menu” or “Dropdown Menu” type.
Theme Location – Select theme location to active mega menu.
Responsive Menu Visible – Select option to show responsive menu visible.

3.4 Product Options

Product Listing column Desktop – Select number of column on Desktop Screen.
Product Listing column Medium Desktop – Select number of column on Medium Desktop Screen.
Product Listing column Tablet – Select number of column on Tablet Screen.
Sidebar Product Layout – Select style sidebar product.

3.5 Portfolio Options

Portfolio image intro – Select portfolio image intro.
Portfolio Categories – Select Portfolio Category.
Portfolio style – Select portfolio style.
Portfolio column Desktop – Select number of column on Desktop Screen.
Portfolio column Medium Desktop – Select number of column on Medium Desktop Screen.
Portfolio column Tablet – Select number of column on Tablet Screen.
Portfolio column Smartphone – Select number of column on Smartphone Screen.

3.6 Typography

Use Google Webfont – Insert font style that you actually need on your webpage.
Webfont Weight – For weight, see Google Fonts to custom for each font style.
Webfont Assign to – Select the place will apply the font style headers, every where or custom.
Webfont Custom Selector – Insert the places will be custom here, after selected custom Webfont assign.

Turn on/turn off sharing buttons appearing in Home page

Social share – Enable Social share button.
Facebook – Enable Facebook Share button.
Twitter – Enable Twitter Share button.
Linked_in – Enable LinkedIn Share button.
Google+ – Enable Google+ Share button.

3.8 Advanced

Show cPanel – Turn on/off Cpanel.
Widget Advanced – Turn on/off Widget Advanced.
Developer Mode – Turn on/off preset.
Direction – Left To Right / Right To Left.
Active Effect Scroll – Check to active effect scroll in homepage.
Google Analytics ID – Enter Google Analytics code.
Custom CSS/JS – Insert your own CSS into this block. This overrides all default styles located throughout the theme.

↧

SM Stationery

August 25, 2015, 1:55 am

≫ Next: SM Madives

≪ Previous: SW StabWall

View demo More detail

This guide will help you install SM Stationery 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 and 1.9.x ( latest version 1.9.2.0 ) (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION – Back to top

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation (include of Theme Installation).

2.1 Quickstart Installation :

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. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Do not use “localhost” in URL, otherwise you could not log in to your Admin area (you should use your local IP in case of installing on your computer).
- Leave Tables prefix field blank.

Step 7: Create Admin Account. Please fill fully into Required Fields (“First Name; Last Name; Email; Username; password and confirm password”.)

Step 8: Finish Installation and now you can Go to Frontend or Go to Backend.

2.2 Manual Installation

Step 1: Extract “sm_atom_theme.zip” file and Copy folders skin; app; media, lib to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/). Log out and log in back.
Step 3: Navigate to System >> Cache Management, Sellect All the cache types, take Action as Refresh and Submit.
Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header .

Step 7: You can also change the settings for Footer .

2.3 Theme Setting

Configure SM Stationery General Setting Theme In Magento admin panel, navigate to SM Stationery Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab), Layout Group 1,2,3,4,5,6 to configure
Configure theProduct To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc..
Configure Rich Snippets
Configure Socials Setting: To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced Setting: To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Insatallation

: To import Static blocks data and Pages data, users don’t need navigate co CMS and create one static block or page step by step.

Note:To “Theme Installation”, pay attention that after clicking“Import Static Block” or “Import Pages”, the below notification will appear to announce that you import data successfully.

However, you have to come back CMS >> Static Block ( or Pages) to configure and select Store View for each Block or Page.

Configure Extensions In SM Stationery Setting area, below the General and Catalog fields, navigate toMagentech.com field in the left hand column to configure extensions as you want.

SM Mega Menu Module
SM Search Box Pro Module
SM Stationery Setting Module
SM Camera Slide Module
SM Listing Tabs Module
SM Deal
SM Basic Product

3CONFIGURATION – Back to top

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Here are list of configuration process for this style:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<reference name="camera-slide">
    <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" />
</reference>
<!--GROUP 1-->
<reference name="group1_col1">
        <block type="cms/block" name="static-image-home-center">
	        <action method="setBlockId"><block_id>static-image-home-center</block_id></action>
         </block>  
</reference>
<reference name="group2_col1">
<block type="stationery/wrapper" name="section.no">
     <action method="setParams"><params>class="tabs-listtopcms1"</params></action>
       <block type="listingtabs/list" name="listingtabs_list_default" template="sm/listingtabs/default.phtml"/>
</block>
</reference>
<reference name="group3_col1">
        <block type="cms/block" name="testimonial">
	    <action method="setBlockId"><block_id>slider-testimonials-home1</block_id></action>
    </block>
</reference>
<reference name="group4_col1">
       <block type="deal/list" name="deal.list.default" template="sm/deal/deal-slider.phtml">
       </block>
</reference>
<reference name="group4_col2">
       <block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/default-home1.phtml">
	</block>
</reference>
<reference name="group5_col1">
<block type="blog/menu_sidebar" name="latest_post_index1">
        <action method="setTemplate" >
            <template>aw_blog/latest_post_index1.phtml</template>
        </action>
   </block>
</reference>
<reference name="group6_col1">
	<block type="cms/block" name="brand-slider1">
	    <action method="setBlockId"><block_id>brand-slider1</block_id></action>
    </block>
</reference>

3.1.2 Homepage Style 2

Frontend of Homepage-2 Layout Position

To configure this Homepage Style 2, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Including 3 tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<reference name="camera-slide">
    <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" />
       <block type="cms/block" name="service-top">
	        <action method="setBlockId"><block_id>service-top-index2</block_id></action>
         </block>
</reference>

<!--GROUP 1-->
<reference name="group1_col1">
<block type="stationery/wrapper" name="section.no">
     <action method="setParams"><params>class="tabs-row-gird"</params></action>
        <block type="listingtabs/list" name="listingtabs_list_default" template="sm/listingtabs/default.phtml">
          <action method="_setConfig">
         <values>
                     <listingtabs_title_text>New Arrivals</listingtabs_title_text>
                      <filter_type>categories</filter_type>
                       <product_category>64,65,67</product_category>
         </values>
      </action>  
         </block>
  </block>
</reference>
<reference name="group2_id2">
      <block type="cms/block" name="static_image_index2">
	    <action method="setBlockId"><block_id>static-image-index2</block_id></action>
   </block>
</reference>

<!--GROUP 2-->
<reference name="group2_col1">
<block type="stationery/wrapper" name="section.no2">
     <action method="setParams"><params>class="tabs-row-litting"</params></action>
       <block type="listingtabs/list" name="listingtabs_list_default2" template="sm/listingtabs/default.phtml">
      <action method="_setConfig">
         <values>
               <listingtabs_title_text>Featured Products</listingtabs_title_text>
               <product_description>1</product_description>
              <product_limitation>4</product_limitation>     
            <row_count>2</row_count>
              <product_description_display>1</product_description_display>
                 <nbi_column1>2</nbi_column1>
               <nbi_column2>2</nbi_column2>
             <nav>0</nav>
            <loop>0</loop>
           </values>
      </action>  
  </block>
  </block>
</reference>

<!--GROUP 3-->
<reference name="group3_col1">
    <block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribes-sidebar.phtml"/>
</reference>

<!--GROUP 4-->
<reference name="group4_col1">
      <block type="cms/block" name="testimonial2">
	    <action method="setBlockId"><block_id>slider-testimonials-home2</block_id></action>
    </block>
</reference>

<!--GROUP 5-->
<reference name="group5_col1">
    <block type="blog/menu_sidebar" name="latest_post_index2">
        <action method="setTemplate" >
            <template>aw_blog/latest_post_index2.phtml</template>
        </action>
   </block>
</reference>
<!--GROUP 6-->
<reference name="group6_col1">
	<block type="cms/block" name="brand-slider2">
	    <action method="setBlockId"><block_id>brand-slider2</block_id></action>
      </block>
</reference>

3.1.3 Homepage Style 3

Frontend of Homepage-3 Layout Position

Similarly to Homepage style 2, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<reference name="camera-slide">
    <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" />
</reference>

<!--GROUP 1-->
<reference name="group1_col1">
<block type="deal/list" name="deal.list.default" template="sm/deal/default-index3.phtml">
 </block>
</reference>
<reference name="group1_col2">
<block type="stationery/wrapper" name="section.no">
     <action method="setParams"><params>class="tabs-listtop"</params></action>
       <block type="listingtabs/list" name="listingtabs_list_default" template="sm/listingtabs/default.phtml">
          <action method="_setConfig">
         <values>
                     <listingtabs_title_text>New Arrivals</listingtabs_title_text>
                      <filter_type>categories</filter_type>
                       <product_category>64,65,67</product_category>
         </values>
      </action>  
         </block>
 </block>
</reference>
<reference name="group1_col3">
  <block type="cms/block" name="static-image-home3">
	     <action method="setBlockId"><block_id>static-image-home3</block_id></action>
     </block>  
</reference>
<reference name="group1_col4">
 <block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/default-home3.phtml">
</block>
</reference>
<!--GROUP 2-->
<reference name="group2_col1">
   <block type="cms/block" name="testimonial2">
	    <action method="setBlockId"><block_id>slider-testimonials-home2</block_id></action>
    </block>
</reference>

<!--GROUP 3-->
<reference name="group3_col1">
      <block type="blog/menu_sidebar" name="latest_post_index2">
        <action method="setTemplate" >
            <template>aw_blog/latest_post_index2.phtml</template>
        </action>
   </block>
</reference>
<!--GROUP 4-->
<reference name="group4_col1">
<block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/product-list-home3.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>Top Rating</basicproducts_title_text>
			<product_title_maxlength>80</product_title_maxlength>
			<product_order_by>top_rating</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>1</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>
</reference>
<reference name="group4_col2">
<block type="basicproducts/list" name="basicproducts.list.custom2" template="sm/basicproducts/product-list-home3.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>New products</basicproducts_title_text>
			<product_title_maxlength>80</product_title_maxlength>
			<product_order_by>created_at</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>1</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>
</reference>
<reference name="group4_col3">
<block type="basicproducts/list" name="basicproducts.list.custom3" template="sm/basicproducts/product-list-home3.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>Best sellers</basicproducts_title_text>
			<product_title_maxlength>80</product_title_maxlength>
			<product_order_by>best_sales</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>1</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>
</reference>

3.1.4 Homepage Style 4

Frontend of Homepage-4 Layout Position

Similarly to Homepage style 3, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<reference name="left">
<block type="megamenu/list" name="megamenu.list.theme.content" as="megaMenuLeft" template="sm/megamenu/megamenu-left-style2.phtml">
          <action method="setConfig">
                <values>
                    <title>Category</title>  
                    <group_id>3</group_id>
                    <theme>2</theme>
                </values>
         </action>
          </block>
<block type="cms/block" after="imagesleft-index4" name="left-image">
	<action method="setBlockId"><block_id>imagesleft-index4</block_id></action>
</block>
<block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/product-list-home4.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>Featured</basicproducts_title_text>
			<product_title_maxlength>100</product_title_maxlength>
			<product_order_by>lastest_product</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>0</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>
 <block type="blog/blog" name="blog" template="aw_blog/latest_post.phtml"/>
<block type="basicproducts/list" name="basicproducts.list.custom2" template="sm/basicproducts/product-list-home4.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>Top Rated</basicproducts_title_text>
			<product_title_maxlength>100</product_title_maxlength>
			<product_order_by>top_rating</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>0</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>	
 <block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribes-index4.phtml"/>
 <block type="cms/block" name="testimonial4">
	    <action method="setBlockId"><block_id>slider-testimonials-home4</block_id></action>
    </block>	
</reference>
<!--GROUP 1-->
<reference name="content">
   <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" />
<block type="stationery/wrapper" name="section.no1">
     <action method="setParams"><params>class="lintting-tabs-no-slider4"</params></action>
    <block type="listingtabs/list" name="listingtabs_list_default" template="sm/listingtabs/default.phtml">
      <action method="_setConfig">
         <values>
              <product_limitation>6</product_limitation>
            <row_count>2</row_count>
              <product_description_display>0</product_description_display>
                 <nbi_column1>3</nbi_column1>
               <nbi_column2>3</nbi_column2>
             <nav>0</nav>
            <loop>0</loop>
           </values>
      </action>  
  </block>
  </block>
<block type="stationery/wrapper" name="section.no2">
     <action method="setParams"><params>class="tabs-productbttom  lintting-tabs-no-slider4"</params></action>
    <block type="listingtabs/list" name="listingtabs_list_default2" template="sm/listingtabs/default.phtml">
      <action method="_setConfig">
         <values>
              <product_limitation>6</product_limitation>     
                <listingtabs_title_text>NEW PRODUCTS</listingtabs_title_text>
               <filter_type>categories</filter_type>
                 <product_category>64,65,67</product_category>
               <row_count>2</row_count>
              <product_description_display>0</product_description_display>
                 <nbi_column1>3</nbi_column1>
               <nbi_column2>3</nbi_column2>
             <nav>0</nav>
            <loop>0</loop>
           </values>
      </action>  
  </block>
  </block>
</reference>
<reference name="after-content">
<block type="cms/block" name="brand-slider4">
	<action method="setBlockId"><block_id>brand-slider4</block_id></action>
</block>
</reference>

3.1.5 Homepage Style 5

Frontend of Homepage-5 Layout Position

Similarly to Homepage style 4, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<reference name="saletop-index">
<block type="cms/block"  name="banner_saletop5">
	<action method="setBlockId"><block_id>banner_saletop5</block_id></action>
</block>
</reference>
<!--GROUP 1-->
<reference name="group1_col1">
    <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" />
</reference>
<reference name="group1_col2">
<block type="deal/list" name="deal.list.default" template="sm/deal/default-index5.phtml">
<action method="_setConfig">
         <values>
         <product_reviews_count> 0  </product_reviews_count>
        <product_addcart_display> 0  </product_addcart_display>
       <product_addwishlist_display> 0  </product_addwishlist_display>
        <product_addcompare_display> 0  </product_addcompare_display>
          </values>
 </action>  
 </block>
</reference>
<reference name="group1_col3">
<block type="stationery/wrapper" name="section.no1">
     <action method="setParams"><params>class="tabs-listtop"</params></action>
  <block type="listingtabs/list" name="listingtabs_list_default" template="sm/listingtabs/default.phtml">
          <action method="_setConfig">
         <values>
                     <listingtabs_title_text>New Arrivals</listingtabs_title_text>
                      <filter_type>categories</filter_type>
                       <product_category>64,65,67</product_category>
         </values>
      </action>  
         </block>
  </block>
</reference>
<reference name="group1_col4">
  <block type="cms/block" name="static-image-home3">
	     <action method="setBlockId"><block_id>static-image-home3</block_id></action>
     </block>  
</reference>
<reference name="group1_col5">
<block type="stationery/wrapper" name="section.no2">
     <action method="setParams"><params>class="tabs-row-litting"</params></action>
 <block type="listingtabs/list" name="listingtabs_list_default2" template="sm/listingtabs/default.phtml">
      <action method="_setConfig">
         <values>
              <product_limitation>4</product_limitation>     
                <listingtabs_title_text>Featured Products</listingtabs_title_text>
             <filter_type>categories</filter_type>
                 <product_category>64,65,67</product_category>
               <product_description>1</product_description>
            <row_count>2</row_count>
              <product_description_display>1</product_description_display>
                 <nbi_column1>2</nbi_column1>
               <nbi_column2>2</nbi_column2>
             <nav>0</nav>
            <loop>0</loop>
           </values>
      </action>  
  </block>
  </block>
</reference>
<!--GROUP 2-->
<reference name="group2_col1">
   <block type="cms/block" name="testimonial2">
	    <action method="setBlockId"><block_id>slider-testimonials-home2</block_id></action>
    </block>
</reference>

<!--GROUP 3-->
<reference name="group3_col1">
      <block type="blog/menu_sidebar" name="latest_post_index2">
        <action method="setTemplate" >
            <template>aw_blog/latest_post_index2.phtml</template>
        </action>
   </block>
</reference>
<!--GROUP 4-->
<reference name="group4_col1">
<block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/product-list-home3.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>Top Rating</basicproducts_title_text>
			<product_title_maxlength>80</product_title_maxlength>
			<product_order_by>top_rating</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>1</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>
</reference>
<reference name="group4_col2">
<block type="basicproducts/list" name="basicproducts.list.custom2" template="sm/basicproducts/product-list-home3.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>New product</basicproducts_title_text>
			<product_title_maxlength>80</product_title_maxlength>
			<product_order_by>created_at</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>1</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>
</reference>
<reference name="group4_col3">
<block type="basicproducts/list" name="basicproducts.list.custom3" template="sm/basicproducts/product-list-home3.phtml">
	<action method="_setConfig">
		<values>
			<product_limitation>3</product_limitation>
			<basicproducts_title_text>Best sellers</basicproducts_title_text>
			<product_title_maxlength>80</product_title_maxlength>
			<product_order_by>best_sales</product_order_by>
			<nb_column1>1</nb_column1>
			<product_title_display>1</product_title_display>
			<product_price_display>1</product_price_display>
			<product_reviews_count>1</product_reviews_count>
			<product_addcart_display>0</product_addcart_display>
			<product_addwishlist_display>0</product_addwishlist_display>
			<product_addcompare_display>0</product_addcompare_display>
			<product_readmore_display>0</product_readmore_display>
			<product_description_display>0</product_description_display>
		</values>
	</action>  
</block>
</reference>

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” – have id 1 and “Group – Vertical” – have id 3), Two id will be shown in Configuration of SM Mega Menu.

Step 2: Navigate to SM Mega Menu >> Configuration & fill the id number for two above groups in step 1

Step 3: In order to add menu items, Go to SM Mega Menu >> Menu items Manager to add items as you want.

3.2.1 With Horizontal Mega Menu:

Horizontal-mega-menu
Features Menu
Frontend Appearance

Link show Features Department Menu’s backend. Please click Here to view.

Categories Menu

Frontend Appearance
Tree of Categories Menu:

Backend Settings of Categories Menu

Note:Categories Menu: To config this page, please navigate to SM Stationery setting >> SM Mega Menu >> Menu Items Manager

Item: “Banner-left”– Menu Backend Settings

Copy and paste the following code into the parameter “Layout Update XML”:

<div class="banner-menu-left">
<a class="banner-menu">
<img src="{{media url="wysiwyg/img-megamenu/banner.jpg"}}" alt="banner" />
</a>
</div>

Item: “Column 1″– Menu Backend Settings

Item: “Category_01″– Menu Backend Settings

Blog Menu

Frontend Appearance

Note: Blog Menu: To config this page, please navigate to SM Stationery setting >> SM Mega Menu >> Menu Items Manager

Backend Settings of Blog Menu

Shop Menu

Frontend Appearance
Tree of Shop Menu:

Backend Settings of Shop Menu

Note:Shop Menu: To config this page, please navigate to SM Stationery setting >> SM Mega Menu >> Menu Items Manager

Item: “Category_01″– Menu Backend Settings

Copy and paste the following code into the parameter “Layout Update XML”:

<ul>
<li><a href="{{store url="category/pens-pencils.html"}}">Pencils & pens</a></li>
<li><a href="{{store url="category/pens-pencils.html"}}">Scrapbooks</a></li>
<li><a href="{{store url="category/pens-pencils.html"}}">Paper Works</a></li>
<li><a href="{{store url="category/pens-pencils.html"}}">Notebook</a></li>
<li><a href="{{store url="category/pens-pencils.html"}}">Lorem ipsum dolor</a></li>
</ul>

Item: “Banner-bottom”– Menu Backend Settings

Copy and paste the following code into the parameter “Layout Update XML”:

<div style="clear:both">&nbsp;</div>
<div class="banner-menu-bottom">
<a class="banner-menu">
<img src="{{media url="wysiwyg/img-megamenu/banner1.jpg"}}" alt="banner" />
</a>
</div>

About Menu

Frontend Appearance
Tree of About Menu:

Backend Settings of About Menu

Note:About Menu: To config this page, please navigate to SM Stationery setting >> SM Mega Menu >> Menu Items Manager

Item: “column-about”– Menu Backend Settings

Copy and paste the following code into the parameter “Layout Update XML”:

<ul class="item-home-store layout-about">
        <li class="title-menu-home">About Us Layouts</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&amp;___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&amp;___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&amp;___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&amp;___from_store=default"}}">About Us Style 4</a></li>
</ul>

Contact Menu

Frontend Appearance
Tree of Contact Menu:

Backend Settings of Contact Menu

Note:Contact Menu: To config this page, please navigate to SM Stationery setting >> SM Mega Menu >> Menu Items Manager

Item: “column-contact”– Menu Backend Settings

Copy and paste the following code into the parameter “Layout Update XML”:

<ul class="item-home-store layout-contact">
        <li class="title-menu-home">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&amp;___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&amp;___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&amp;___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&amp;___from_store=default"}}">Contact Us Style 4</a></li>
    </ul>

3.2.2 With Vertical Mega Menu:

Frontend Appearance

Frontend Appearance of Electronics tree

Tree of Electronics in Mega Menu Items Managerment:

Link show Electronics Menu’s backend. Please click Here to view.
Item: “Column 1″( the second generation of Electronics family)– Menu Backend Settings
Item: “Column 1″ which is covered by the Column 1 above– Menu Backend Settings
Item: “Style”– Menu Backend Settings
Item: “Column 2″ which is covered by the Column 1 of Electronics– Menu Backend Settings
Item: “Brand”– Menu Backend Settings
Item: “Column 2″( the second generation of Electronics family).– Menu Backend Settings
Item: “Column 1″ which is covered by the Column 2 above– Menu Backend Settings
Item: “Other”– Menu Backend Settings
Item: “Column 2″ which is covered by the Column 2 of Electronics– Menu Backend Settings
Item: “Devices”– Menu Backend Settings
Item: “Static image”– Menu Backend Settings

Copy and paste the following code into the parameter “Content” of Static Image Horizontal:

<div class="static-bottom-menu">
<a href="#" title="Static Image"><img src="{{media url="wysiwyg/image-cat/image-megamenu.png"}}" alt="Static Image" /></a>
</div>

Note: Other Items in Vertical Mega Menu are configured the same as above items.

3.3 Configure Extensions

The SM Stationery front-page has been integrated with extensions in the Theme as following list:

I. SM Search Box Pro

Position: SM Search Box Pro
Frontend Appearance

Backend of SM Search Box Pro: Click Here
Go Here to readmore about the SM Search Box Pro module.

II. SM Cart Pro

Position: SM Cart Pro
Frontend Appearance

Backend of SM Cart Pro: Click Here
Go Here to readmore about the SM CartPro module.

III. SM Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: Click Here
Go Here to readmore about the SM Image Slider module.

IV. SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Go Here to readmore about the SM Deal module.

V. SM Super Categories

Position: SM Super Categories
Frontend Appearance

Backend of SM Super Categories: Click Here
Go Here to readmore about the SM Super Categories module.

VII. SM Facebook

Position: SM Categories Accordion
Frontend Appearance

Backend of SM Facebook : Click Here
Go Here to readmore about the SM Facebook module.

VIII. SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here
Go Here to readmore about the SM Basic Products module.

3.4 Configure Static Blocks

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

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

1. Static-Theme Right Static Image

To create static blocks, go to CMS >> Static Blocks with Identifier * : “right-static-image”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Right Static Image:

<div class="static-image-right two-image">
	<ul class="list-image">
		<li><a href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/static-image-home-1.png"}}" alt="Static Image" /></a></li>
		<li><a href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/static-image-home-2.png"}}" alt="Static Image" /></a></li>
	</ul>
</div>

2. Static-Theme Home Centre 1

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-image-home-center”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Home Centre 1:

<div class="static-image-center">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/static-image-center.png"}}" alt="Static Image" /></a>
</div>

3. Static-Theme Home Centre 2

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-image-home-center-2″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Home Centre 2:

<div class="static-image-center">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/static-image-center-2.png"}}" alt="Static Image" /></a>
</div>

4. Static-Theme Home Centre 3

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-image-home-center-3″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Home Centre 3:

<div class="static-image-center">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/static-image-center-3.png"}}" alt="Static Image" /></a>
</div>

5. Static-Theme Home Centre 4

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-image-home-center-4″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Home Centre 4:

<div class="static-image-center">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/static-image-home-4.png"}}" alt="Static Image" /></a>
</div>

6. Static-Theme Home Centre 5

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-image-home-center-5″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Home Centre 5:

<div class="static-home-5">
<a href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/static-image-center-5.png"}}" alt="Static Image" /></a>
</div>

7. Static-Theme Top Brand

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-top-brand”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Top Brand:

<div class="top-brand">
	<div class="title-home">
		<h2>Top Brands</h2>
	</div>

	<div class="top-brand-slider">
		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.png"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.png"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-6.png"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-7.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-8.png"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-9.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-10.png"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.png"}}" alt="Brand" /></a></div>
			</div>
		</div>
		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.png"}}" alt="Brand" /></a></div>
			</div>
		</div>
		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.png"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-6.png"}}" alt="Brand" /></a></div>
			</div>
		</div>
	</div>
</div>

<script>
	jQuery(document).ready(function($) {
		var owl_topbrand = $(".top-brand-slider");
		owl_topbrand.owlCarousel({

			responsive:{
				0:{
					items:2
				},
				480:{
					items:3
				},
				768:{
					items:3
				},
				992:{
					items:4
				},
				1200:{
					items:5
				}
			},

			autoplay:false,
			loop:false,
			nav : true, // Show next and prev buttons
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:0,

		});
	});

</script>

8. Static-Theme Collection

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “collection-tab”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Collection:

<div id="tab_collection">
	<div class="title-home">
		<h2>Collections</h2>
	</div>

    <ul class="resp-tabs-list">
        <li class="fa fa-coffee">LifeStyle</li>
        <li class="fa fa-sun-o">Out Doors</li>
        <li class="fa fa-home">Clearance</li>
        <li class="fa fa-gift">Gifts & Holidays</li>
        <li class="fa fa-cogs">Cool Gadets</li>
        <li class="fa fa-star">Novelties</li>
        <li class="fa fa-leaf">beauty care</li>
    </ul>

    <div class="resp-tabs-container">

        <div>
            <div class="content-tab-collection">
				<div class="row">
					<ul class="list-item-collection">
						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Golf Relate Prodcuts" href="#">Golf Relate Prodcuts</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-1.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Bicycle equipments" href="#">Bicycle equipments</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-2.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Binocular & Telescops" href="#">Binocular & Telescops</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-3.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Camping & Hiking" href="#">Camping & Hiking</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-4.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Fishing" href="#">Fishing</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-5.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Team Sports" href="#">Team Sports</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-6.png"}}" alt="Collection" />
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </div>

        <div>
            <div class="content-tab-collection">
				<div class="row">
					<ul class="list-item-collection">

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Bicycle equipments" href="#">Bicycle equipments</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-2.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Golf Relate Prodcuts" href="#">Golf Relate Prodcuts</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-1.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Camping & Hiking" href="#">Camping & Hiking</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-4.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Binocular & Telescops" href="#">Binocular & Telescops</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-3.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Fishing" href="#">Fishing</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-5.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Team Sports" href="#">Team Sports</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-6.png"}}" alt="Collection" />
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </div>

        <div>
            <div class="content-tab-collection">
				<div class="row">
					<ul class="list-item-collection">
						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Golf Relate Prodcuts" href="#">Golf Relate Prodcuts</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-1.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Binocular & Telescops" href="#">Binocular & Telescops</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-3.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Bicycle equipments" href="#">Bicycle equipments</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-2.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Fishing" href="#">Fishing</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-5.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Team Sports" href="#">Team Sports</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-6.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Camping & Hiking" href="#">Camping & Hiking</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-4.png"}}" alt="Collection" />
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </div>

		<div>
            <div class="content-tab-collection">
				<div class="row">
					<ul class="list-item-collection">
						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Binocular & Telescops" href="#">Binocular & Telescops</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-3.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Golf Relate Prodcuts" href="#">Golf Relate Prodcuts</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-1.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Bicycle equipments" href="#">Bicycle equipments</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-2.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Fishing" href="#">Fishing</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-5.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Camping & Hiking" href="#">Camping & Hiking</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-4.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Team Sports" href="#">Team Sports</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-6.png"}}" alt="Collection" />
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </div>

		<div>
            <div class="content-tab-collection">
				<div class="row">
					<ul class="list-item-collection">
						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Bicycle equipments" href="#">Bicycle equipments</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-2.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Golf Relate Prodcuts" href="#">Golf Relate Prodcuts</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-1.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Binocular & Telescops" href="#">Binocular & Telescops</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-3.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Fishing" href="#">Fishing</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-5.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Camping & Hiking" href="#">Camping & Hiking</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-4.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Team Sports" href="#">Team Sports</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-6.png"}}" alt="Collection" />
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </div>

		<div>
            <div class="content-tab-collection">
				<div class="row">
					<ul class="list-item-collection">
						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Team Sports" href="#">Team Sports</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-6.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Golf Relate Prodcuts" href="#">Golf Relate Prodcuts</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-1.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Binocular & Telescops" href="#">Binocular & Telescops</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-3.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Bicycle equipments" href="#">Bicycle equipments</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-2.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Camping & Hiking" href="#">Camping & Hiking</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-4.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Fishing" href="#">Fishing</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-5.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

					</ul>
				</div>
			</div>
        </div>

		<div>
            <div class="content-tab-collection">
				<div class="row">
					<ul class="list-item-collection">
						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Bicycle equipments" href="#">Bicycle equipments</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-2.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Golf Relate Prodcuts" href="#">Golf Relate Prodcuts</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-1.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Binocular & Telescops" href="#">Binocular & Telescops</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-3.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Team Sports" href="#">Team Sports</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-6.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Camping & Hiking" href="#">Camping & Hiking</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-4.png"}}" alt="Collection" />
								</div>
							</div>
						</li>

						<li class="col-lg-4 col-md-4 item-cat">
							<div class="item-cat-wrapper">
								<div class="text-cat">
									<h2><a title="Fishing" href="#">Fishing</a></h2>
									<p class="des-collection-cat">Ab inventore asperiores</p>
									<a class="button" href="#" title="Shop Now">Shop Now</a>
								</div>

								<div class="image-cat">
									<img src="{{media url="wysiwyg/collection/img-cat-5.png"}}" alt="Collection" />
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </div>

    </div>

</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tab_collection').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
        });
    });
</script>

9. Static-Testimonials

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “slider-testimonials”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Testimonials:

<div class="overflow-slider testimonials">
	<div class="title-home">
		<h2>Testimonials</h2>
	</div>

	<div class="margin-slider">
		<ul class="testimonials-slider">
			<li class="item">
				<div class="client-child client-left">
					<div class="comment">
						Ultrices lectus tempor, magna mauris porta magnis tristique, egestas etiam! Scelerisque nascetur nascetur aliquet platea. 
					</div>

					<div class="client client-left">
						<div class="image-client">
							<img src="{{media url="wysiwyg/testimonial/client-1.png"}}" alt="Venus" />
						</div>
						<div class="info-client">
							<h2 class="client-name">Venus</h2>
							<div class="client-job">Market Research</div>
						</div>
					</div>
				</div>

				<div class="client-child client-right">
					<div class="comment">
						Ultrices lectus tempor, magna mauris porta magnis tristique, egestas etiam! Scelerisque nascetur nascetur aliquet platea. 
					</div>

					<div class="client client-right">
						<div class="image-client">
							<img src="{{media url="wysiwyg/testimonial/client-2.png"}}" alt="Venus" />
						</div>
						<div class="info-client">
							<h2 class="client-name">Venus</h2>
							<div class="client-job">Market Research</div>
						</div>
					</div>
				</div>
			</li>

			<li class="item">
				<div class="client-child client-left">
					<div class="comment">
						Ultrices lectus tempor, magna mauris porta magnis tristique, egestas etiam! Scelerisque nascetur nascetur aliquet platea. 
					</div>

					<div class="client client-left">
						<div class="image-client">
							<img src="{{media url="wysiwyg/testimonial/client-1.png"}}" alt="Venus" />
						</div>
						<div class="info-client">
							<h2 class="client-name">Venus</h2>
							<div class="client-job">Market Research</div>
						</div>
					</div>
				</div>

				<div class="client-child client-right">
					<div class="comment">
						Ultrices lectus tempor, magna mauris porta magnis tristique, egestas etiam! Scelerisque nascetur nascetur aliquet platea. 
					</div>

					<div class="client client-right">
						<div class="image-client">
							<img src="{{media url="wysiwyg/testimonial/client-2.png"}}" alt="Venus" />
						</div>
						<div class="info-client">
							<h2 class="client-name">Venus</h2>
							<div class="client-job">Market Research</div>
						</div>
					</div>
				</div>
			</li>

			<li class="item">
				<div class="client-child client-left">
					<div class="comment">
						Ultrices lectus tempor, magna mauris porta magnis tristique, egestas etiam! Scelerisque nascetur nascetur aliquet platea. 
					</div>

					<div class="client client-left">
						<div class="image-client">
							<img src="{{media url="wysiwyg/testimonial/client-1.png"}}" alt="Venus" />
						</div>
						<div class="info-client">
							<h2 class="client-name">Venus</h2>
							<div class="client-job">Market Research</div>
						</div>
					</div>
				</div>

				<div class="client-child client-right">
					<div class="comment">
						Ultrices lectus tempor, magna mauris porta magnis tristique, egestas etiam! Scelerisque nascetur nascetur aliquet platea. 
					</div>

					<div class="client client-right">
						<div class="image-client">
							<img src="{{media url="wysiwyg/testimonial/client-2.png"}}" alt="Venus" />
						</div>
						<div class="info-client">
							<h2 class="client-name">Venus</h2>
							<div class="client-job">Market Research</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>

	<script>
		jQuery(document).ready(function($) {
			var owl_testimonial = $(".testimonials-slider");
			owl_testimonial.owlCarousel({
				responsive:{
					0:{
						items:1
					},
					480:{
						items:1
					},
					768:{
						items:1
					},
					992:{
						items:1
					},
					1200:{
						items:1
					}
				},

				autoplay:false,
				loop:false,
				nav : true, // Show next and prev buttons
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:30,
			});
		});

	</script>
</div>

10. Static-Why Choose Us

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “why-choose-us”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Why Choose Us:

<div class="why-choose">
	<div class="title-why">
		<h2>Why Choose Us?</h2>
	</div>
	<div class="row">
		<div class="col-lg-4 col-md-4">
			<div class="block-whychoose">
				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-1.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2>The Best Merchandise</h2>
						<div class="des-why-choose">Hac habitant eius lacinia harum, repellat aperiam ex hac consequatur lectus per, metus ullam</div>
					</div>
				</div>

				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-2.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2>Easy to Order</h2>
						<div class="des-why-choose">Hac habitant eius lacinia harum, repellat aperiam ex hac consequatur lectus per, metus ullam facilis suscipit curae eaque gravida hac</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-4 col-md-4">
			<div class="block-whychoose">
				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-3.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2>Free shipping - No Minimum Order</h2>
						<div class="des-why-choose">Hac habitant eius lacinia harum, repellat aperiam ex hac consequatur lectus per, metus ullam</div>
					</div>
				</div>

				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-4.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2>Support online 24/7</h2>
						<div class="des-why-choose">Hac habitant eius lacinia harum, repellat aperiam ex hac consequatur lectus per, metus ullam facilis suscipit curae eaque gravida hac</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-4 col-md-4">
			<div class="block-whychoose">
				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-5.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2>Free delivery for all our stock</h2>
						<div class="des-why-choose">Hac habitant eius lacinia harum, repellat aperiam ex hac consequatur lectus per, metus ullam</div>
					</div>
				</div>

				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-6.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2>Secure Online Shopping</h2>
						<div class="des-why-choose">Hac habitant eius lacinia harum, repellat aperiam ex hac consequatur lectus per, metus ullam facilis suscipit curae eaque gravida hac</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

11. Static-Payment System

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-payment”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Payment System:

<ul>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-1.png"}}" alt="Payment" /></a></li>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-2.png"}}" alt="Payment" /></a></li>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-3.png"}}" alt="Payment" /></a></li>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-4.png"}}" alt="Payment" /></a></li>
								</ul>

Frontend

About Us

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-about”

Frontend

Backend Setting

Coppy & paste the code chain for Content of About Us:

<div class="footer-block-title">
									<h2>About Us</h2>
								</div>

								<div class="footer-block-content">
									<ul>
										<li><a href="#" title="Subscribe">Subscribe</a></li>
										<li><a href="#" title="Unsubscribe">Unsubscribe</a></li>
										<li><a href="#" title="Help">Help</a></li>
										<li><a href="#" title="How to Uninstall">How to Uninstall</a></li>
										<li><a href="#" title="About Company">About Company</a></li>
										<li><a href="#" title="Contact Us">Contact Us</a></li>
									</ul>
								</div>

Help Center

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-help”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Help Center:

<div class="footer-block-title">
									<h2>Help</h2>
								</div>

								<div class="footer-block-content">
									<ul>
										<li><a href="#" title="Tortor massa">Tortor massa</a></li>
										<li><a href="#" title="Proident et facilisi">Proident et facilisi</a></li>
										<li><a href="#" title="Per esse">Per esse</a></li>
										<li><a href="#" title="Magnis integer">Magnis integer</a></li>
										<li><a href="#" title="Aptent lacinia">Aptent lacinia</a></li>
										<li><a href="#" title="Suscipit">Suscipit</a></li>
									</ul>
								</div>

Services

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-services”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Services:

<div class="footer-block-title">
									<h2>Our services</h2>
								</div>

								<div class="footer-block-content">
									<ul>
										<li><a href="#" title="Curo concerns">Curo concerns</a></li>
										<li><a href="#" title="Hare thery">Hare thery</a></li>
										<li><a href="#" title="Phease incocal">Phease incocal</a></li>
										<li><a href="#" title="Scelerisque">Scelerisque</a></li>
										<li><a href="#" title="Aptent lacinia">Aptent lacinia</a></li>
										<li><a href="#" title="Natoque">Natoque</a></li>
									</ul>
								</div>

Contact Us

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-contact-us”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Services:

<div class="footer-block-title">
									<h2>Contact us</h2>
								</div>

								<div class="footer-block-content">
									<ul>
										<li><span class="label-footer">Add:</span> Lafayette has a great customer service</li>
										<li><span class="label-footer">Tel:</span>  <a href="tel:+842800011800" title="Telephone">02 8000 11 800</a></li>
										<li><span class="label-footer">Email:</span> <a href="mailto:name@email.com" title="Mail to: hr@atomshop.com">hr@atomshop.com</a></li>
										<li><span class="label-footer">Hotline:</span> <a href="tel:+846475071376" title="Hotline">647-507-1376</a></li>
									</ul>
								</div>

3.5 How To Edit Copyright in admin

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Stationery Setting Module to configure the “Custom Copyright” parameter as image below:

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

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Stationery Setting Module to configure the “Social style” parameter as image below:

4SUPPORT – 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 a bunch!

↧

SM Madives

July 28, 2015, 12:49 am

≫ Next: SM Lavender

≪ Previous: SM Stationery

View demo More detail

This guide will help you install SM Madives 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 and 1.9.x ( latest version 1.9.2.0 ) (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION – Back to top

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation (include of Theme Installation).

2.1 Quickstart Installation :

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. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Do not use “localhost” in URL, otherwise you could not log in to your Admin area (you should use your local IP in case of installing on your computer).
- Leave Tables prefix field blank.

Step 7: Create Admin Account. Please fill fully into Required Fields (“First Name; Last Name; Email; Username; password and confirm password”.)

Step 8: Finish Installation and now you can Go to Frontend or Go to Backend.

2.2 Manual Installation

Step 1: Extract “sm_atom_theme.zip” file and Copy folders skin; app; media, lib to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/). Log out and log in back.
Step 3: Navigate to System >> Cache Management, Sellect All the cache types, take Action as Refresh and Submit.
Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header .

2.3 Theme Setting

Configure SM Madives General Setting Theme In Magento admin panel, navigate to SM Madives Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab), Layout Group 1,2,3,4,5,6 to configure
Configure theProduct To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc..
Configure Rich Snippets
Configure Socials Setting: To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced Setting: To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Insatallation

: To import Static blocks data and Pages data, users don’t need navigate co CMS and create one static block or page step by step.

Note:To “Theme Installation”, pay attention that after clicking“Import Static Block” or “Import Pages”, the below notification will appear to announce that you import data successfully.

However, you have to come back CMS >> Static Block ( or Pages) to configure and select Store View for each Block or Page.

Configure Extensions In SM Madives Setting area, below the General and Catalog fields, navigate toMagentech.com field in the left hand column to configure extensions as you want.

SM Search Box Pro Module
SM Cart Pro Module
SM Camera Slide
SM QuickView
SM Shopby
SM Listing Tab
SM Mega Menu
SM Basic Product

3CONFIGURATION – Back to top

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Here are list of configuration process for this style:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
           <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col2">

</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">
      <block type="cms/block" name="service-home">
	        <action method="setBlockId"><block_id>service-home</block_id></action>
         </block>
</reference>

<reference name="group2_col2">

</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">
         <block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/custom-default.phtml">
                 <action method="_setConfig">
			<values>
				<product_limitation>10</product_limitation>
				<basicproducts_title_text>Featured Products</basicproducts_title_text>
				<product_order_dir>ASC</product_order_dir>
				<product_order_by>best_sales</product_order_by>
				<product_title_maxlength>50</product_title_maxlength>
				<nb_column1>6</nb_column1>
				<nb_column2>4</nb_column2>
				<nb_column3>2</nb_column3>
				<nb_column4>1</nb_column4>
				<product_title_display>1</product_title_display>
				<product_price_display>1</product_price_display>
				<product_reviews_count>1</product_reviews_count>
				<product_addcart_display>1</product_addcart_display>
				<product_addwishlist_display>1</product_addwishlist_display>
				<product_addcompare_display>1</product_addcompare_display>
				<product_readmore_display>0</product_readmore_display>
				<product_description_display>0</product_description_display>
			</values>
                 </action>  
	 </block>
</reference>

<reference name="group3_col2">
       <block type="cms/block" name="content-static-image">
	        <action method="setBlockId"><block_id>content-static-image</block_id></action>
        </block>
</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">
          <block type="listingtabs/list" name="listingtabs_list_default_1" template="sm/listingtabs/default.phtml"></block>
</reference>

<reference name="group4_col2">
          <block type="cms/block" name="static_image_home_center">
	        <action method="setBlockId"><block_id>static-image-home-center</block_id></action>
         </block>
</reference>

<reference name="group4_col3">
         <block type="cms/block" name="static_image_home_center_2">
	        <action method="setBlockId"><block_id>static-image-home-center-2</block_id></action>
         </block>
</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">
    <block type="blog/menu_sidebar" name="latest_post_index2">
        <action method="setTemplate" >
            <template>aw_blog/latest_post_index2.phtml</template>
        </action>
    </block>

</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">
         <block type="cms/block" name="sevicer-bottom">
	        <action method="setBlockId"><block_id>sevicer-bottom</block_id></action>
         </block>
</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

3.1.2 Homepage Style 2

Frontend of Homepage-2 Layout Position

To configure this Homepage Style 2, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Including 3 tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">

         <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col2">

</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">
          <block type="cms/block" name="sevicer-top">
	        <action method="setBlockId"><block_id>sevicer-top</block_id></action>
         </block>
</reference>

<reference name="group2_col2">

</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">
         <block type="cms/block" name="static-image-1-index2">
	    <action method="setBlockId"><block_id>static-image-1-index2</block_id></action>
         </block>
</reference>

<reference name="group3_col2">
         <block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/custom-default.phtml">
	 </block>
</reference>

<reference name="group3_col3">
        <block type="cms/block" name="static-image-2-index2">
	     <action method="setBlockId"><block_id>static-image-2-index2</block_id></action>
          </block>
</reference>

<reference name="group3_col4">
          <block type="cms/block" name="static-image-center-index2">
	      <action method="setBlockId"><block_id>static-image-center-index2</block_id></action>
          </block> 
</reference>

<reference name="group3_col5">
         <block type="cms/block" name="static-image-3-index2">
	     <action method="setBlockId"><block_id>static-image-3-index2</block_id></action>
        </block>
</reference>

<reference name="group3_col6">
          <block type="listingtabs/list" name="listingtabs_list_default_1" template="sm/listingtabs/default.phtml"></block>
</reference>

<!--GROUP 4-->
<reference name="group4_col1">
          <block type="cms/block" name="testimonial">
	        <action method="setBlockId"><block_id>slider-testimonials</block_id></action>
         </block>
</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">
	<block type="blog/menu_sidebar" name="latest_post_index2">
            <action method="setTemplate" >
               <template>aw_blog/latest_post_index2.phtml</template>
            </action>
         </block>
</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<!--GROUP 6-->
<reference name="group6_col1">
       <block type="cms/block" name="brand-slider">
	    <action method="setBlockId"><block_id>brand-slider</block_id></action>
    </block>
</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

3.1.3 Homepage Style 3

Frontend of Homepage-4 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
	<block type="megamenu/list" name="megamenu.list.theme.content1" as="megaMenuLeft" template="sm/megamenu/megamenu-left.phtml">
		<action method="setConfig">
			<values>
                                <title>Categories</title>  
			        <group_id>3</group_id>
				<theme>2</theme>
			</values>
		</action>
	</block>
</reference>

<reference name="group1_col2">
	<block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">
           <block type="cms/block" after="image-sidebar" name="product-sidebar-index3">
	            <action method="setBlockId"><block_id>product-sidebar-index3</block_id></action>
           </block>

            <block type="cms/block" name="left-image-index3">
	       <action method="setBlockId"><block_id>left-image-index3</block_id></action>
            </block>

            <block type="blog/menu_sidebar" name="latest_post">
                 <action method="setTemplate" >
                    <template>aw_blog/latest_post_index3.phtml</template>
                 </action>
            </block>

</reference>

<reference name="group2_col2">
         <block type="cms/block" name="service-top">
	        <action method="setBlockId"><block_id>service-top-index3</block_id></action>
         </block>

         <block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/custom-default-index3.phtml"></block>

          <block type="cms/block" name="static-image-center-index3">
	       <action method="setBlockId"><block_id>static-image-center-index3</block_id></action>
          </block>

          <block type="listingtabs/list" name="listingtabs_list_default_1" template="sm/listingtabs/default-index3.phtml"></block>

          <block type="cms/block" name="brand-slider-index3">
	       <action method="setBlockId"><block_id>brand-slider-index3</block_id></action>
          </block>
</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">

</reference>

<reference name="group3_col2">

</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">

</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">

</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">

</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

3.1.4 Homepage Style 4

Frontend of Homepage-4 Layout Position

Similarly to Homepage style 3, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
      <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col2">
           <block type="cms/block" name="three-static-image">
	        <action method="setBlockId"><block_id>three-static-image</block_id></action>
         </block>
</reference>

<reference name="group1_col3">
        <block type="cms/block" name="service-top-index4">
	        <action method="setBlockId"><block_id>service-top-index4</block_id></action>
       </block>
</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">
         <block type="megamenu/list" name="megamenu.list.theme.content" as="megaMenuLeft" template="sm/megamenu/megamenu-left.phtml">
		<action method="setConfig">
			<values>
                                <title>Categories</title>  
			        <group_id>3</group_id>
				<theme>2</theme>
			</values>
		</action>
	</block>

        <block type="blog/menu_sidebar" name="latest_post">
                 <action method="setTemplate" >
                    <template>aw_blog/latest_post_index4.phtml</template>
                 </action>
         </block>

         <block type="cms/block" name="testimonial">
	        <action method="setBlockId"><block_id>slider-testimonials-id4</block_id></action>
         </block>
</reference>

<reference name="group2_col2">
          <block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/custom-default.phtml"></block>

           <block type="cms/block" name="four_static_image_index4">
	       <action method="setBlockId"><block_id>four-static-image-index4</block_id></action>
           </block>

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

           </block>
</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">
          <block type="cms/block" name="brand-slider">
	       <action method="setBlockId"><block_id>brand-slider</block_id></action>
          </block>
</reference>

<reference name="group3_col2">

</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">

</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">

</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">

</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

3.1.5 Homepage Style 5

Frontend of Homepage-5 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
         <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col2">

</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">
          <block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/custom-default-index5.phtml"></block>
</reference>

<reference name="group2_col2">
        <block type="cms/block" name="six-static-image-index5">
	    <action method="setBlockId"><block_id>six-static-image-index5</block_id></action>
         </block>
</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">
         <block type="listingtabs/list" name="listingtabs_list_default_2" template="sm/listingtabs/default.phtml">
    </block>
</reference>

<reference name="group3_col2">

</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">
       <block type="cms/block" name="service-center-index5">
	    <action method="setBlockId"><block_id>service-center-index5</block_id></action>
    </block>
</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">
	<block type="cms/block" name="service-bottom-index5">
	    <action method="setBlockId"><block_id>service-bottom-index5</block_id></action>
        </block>
</reference>

<reference name="group5_col2">
	 <block type="blog/menu_sidebar" name="latest_post">
                 <action method="setTemplate" >
                    <template>aw_blog/latest_post_index5.phtml</template>
                 </action>
         </block>
</reference>

<reference name="group5_col3">
         <block type="cms/block" name="testimonial">
	        <action method="setBlockId"><block_id>slider-testimonials-home5</block_id></action>
         </block>
</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">

</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

3.1.6 Homepage Style 6

Frontend of Homepage-6 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">

</reference>

<reference name="group1_col2">
	<block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">

</reference>

<reference name="group2_col2">
         <block type="basicproducts/list" name="basicproducts.list.custom1" template="sm/basicproducts/custom-default-index6.phtml">                      </block>
</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">
       <block type="cms/block" name="content-static-image-Index6">
	        <action method="setBlockId"><block_id>content-static-image-Index6</block_id></action>
        </block>
</reference>

<reference name="group3_col2">

</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">
         <block type="basicproducts/list" name="basicproducts.list.custom2" template="sm/basicproducts/custom-default-index6-2.phtml">
                     <action method="_setConfig">
					<values>
						<product_category>69</product_category>
					</values>
                </action>  
         </block>
</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">

</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">

</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

<remove name="footer" />

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” – have id 1 and “Group – Vertical” – have id 3), Two id is automatically created, and they will be shown in Configuration of SM Mega Menu.
Step 2: Navigate to SM Mega Menu >> Configuration & fill the id number for two above groups in step 1
Step 3: In order to add menu items, Go to SM Mega Menu >> Menu items Manager to add items as you want.

Note: To this theme, this guide will tutorial how to configure Menu, detailed here: Mega Menu. We only instruct you configure the homepage default, other page done the same.

3.2.1 With Horizontal Mega Menu:

Horizontal-mega-menu
In the Horizontal Mega Menu, it concludes 7 main items:

Home
Shop
Features
Brand
Blog
About Us
Contact Us

Home
Frontend Appearance
Backend

Shop Menu ( Shop-tree form)
Frontend Appearance

Tree of Shop:

Shop-by-department-menu

Shop Menu’s backend. – Here to view.
Item: “Column 1″– Menu Backend Settings
Item: “Categories 1″ which belongs to Column 1– Menu Backend Settings
Item: “Column 2″– Menu Backend Settings
Other Items are configured the same as above ones.

Features Menu

Frontend Appearance

Backend Settings of Features Menu

Note: Features Menu: To config this page, please navigate to SM Madives setting >> SM Mega Menu >> Menu Items Manager, then coppy & paste the following code chain into Content Tab:

<div class="home-menu-dropdown">
	<ul class="item-home-store layout-home">
		<li class="title-menu-home font-title">Home Page Layouts</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&amp;___from_store=belgium"}}">Home Winer Shop</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=belgium&amp;___from_store=default"}}">Home Fahison Shop</a></li>
		<li><a title="Home Style 3" href="{{store url="?___store=somaliland&amp;___from_store=default"}}">Home Mobile & Digital Shop</a></li>
		<li><a title="Home Style 4" href="{{store url="?___store=benin&amp;___from_store=default"}}">Home Furniture Shop</a></li>
		<li><a title="Home Style 5" href="{{store url="?___store=barbados&amp;___from_store=default"}}">Home Cakes Shop</a></li>
		<li><a title="Home Style 6" href="{{store url="?___store=andorra&amp;___from_store=default"}}">Home Fahison Shop (Style2)</a></li>
	</ul>
       <ul class="item-home-store theme-color">
		<li class="title-menu-home font-title">Colors</li>
		<li class="damson"><a title="Damson" href="{{store url="?___store=french&amp;___from_store=default"}}">Damson</a></li>
		<li class="red"><a title="Red" href="{{store url="?___store=argentina&amp;___from_store=default"}}">Red</a></li>
		<li class="blue"><a title="Blue" href="{{store url="?___store=hungary&amp;___from_store=default"}}">Blue</a></li>
		<li class="pink"><a title="Pink" href="{{store url="?___store=german&amp;___from_store=default"}}">Pink</a></li>
		<li class="green"><a title="Green" href="{{store url="?___store=bolivia&amp;___from_store=default"}}">Green</a></li>
		<li class="purple"><a title="purple" href="{{store url="?___store=italy&amp;___from_store=default"}}">Purple</a></li>
	</ul>
	<ul class="item-home-store layout-header">
		<li class="title-menu-home font-title">Header Styles</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&amp;___from_store=belgium"}}">Header Style 1</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=belgium&amp;___from_store=default"}}">Header Style 2</a></li>
		<li><a title="Home Style 3" href="{{store url="?___store=somaliland&amp;___from_store=default"}}">Header Style 3</a></li>
		<li><a title="Home Style 4" href="{{store url="?___store=benin&amp;___from_store=default"}}">Header Style 4</a></li>
		<li><a title="Home Style 5" href="{{store url="?___store=barbados&amp;___from_store=default"}}">Header Style 5</a></li>
		<li><a title="Home Style 6" href="{{store url="?___store=andorra&amp;___from_store=default"}}">Header Style 6</a></li>
	</ul>

	<ul class="item-home-store detail-home">
		<li class="title-menu-home font-title">Product Page Layouts</li>
		<li><a title="Product Detail - Full" href="{{store url="tumase-pikane-mitren.html"}}">Product Page - Full</a></li>
		<li><a title="Product Detail - Left Sidebar" href="{{store url="tumase-pikane-mitren.html?detail_style=2"}}">Product Page - Left Sidebar</a></li>
		<li><a title="Product Detail - Right Sidebar" href="{{store url="tumase-pikane-mitren.html?detail_style=3"}}">Product Page  - Right Sidebar</a></li>
		<li><a title="Thumbnail  - Vertical" href="{{store url="tumase-pikane-mitren.html?vertical=1"}}">Product Page - Vertical</a></li>
		<li><a title="Thumbnail - Horizontal" href="{{store url="tumase-pikane-mitren.html/?___store=french&amp;___from_store=default"}}">Product Page - Horizontal </a></li>
	</ul>

	<div style="clear:both;">&nbsp;</div>

	<ul class="item-home-store layout-home">
		<li class="title-menu-home font-title">About Us Layout</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html?___store=default&amp;___from_store=french"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html?___store=german&amp;___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html?___store=argentina&amp;___from_store=german"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html?___store=bolivia&amp;___from_store=argentina"}}">About Us Style 4</a></li>
	</ul>

	<ul class="item-home-store layout-home">
		<li class="title-menu-home font-title">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html?___store=french&amp;___from_store=bolivia"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html?___store=bolivia&amp;___from_store=hungary"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html?___store=german&amp;___from_store=hungary"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html?___store=argentina&amp;___from_store=hungary"}}">Contact Us Style 4</a></li>
	</ul>

	<ul class="item-home-store detail-home">
		<li class="title-menu-home font-title">Zoom - Types</li>
		<li><a title="Product Page Inner Zoom" href="{{store url="tumase-pikane-mitren.html/?___store=argentina&amp;___from_store=default"}}">Product Inner Zoom</a></li>
		<li><a title="Product Page Outer Zoom" href="{{store url="tumase-pikane-mitren.html/?___store=bolivia&amp;___from_store=default"}}">Product Outer Zoom</a></li>
		<li><a title="Product Page Lens Zoom" href="{{store url="tumase-pikane-mitren.html/?___store=default&amp;___from_store=german"}}">Product Lens Zoom</a></li>
	</ul>

	<ul class="item-home-store layout-home">
		<li class="title-menu-home font-title">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>
</div>

Brand Menu

Frontend Appearance

Backend Settings of Brand Menu
Item: “Brand 1″– Menu Backend Settings

Note:Because “Brand 1″ belongs to “content” Menu Categories, so Coppy & Paste the following code chain into content tab:

<div class="static-category">

     <div class="image-cat-st">
          <a title="Men" href="#"><img src="{{media url="wysiwyg/image-cat/1.jpg"}}" alt="Men" /></a>
     </div>

     <div class="des-cat-st">
         <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
     </div>

</div>

Item: “Brand 2″– Menu Backend Settings

Note:Because “Brand 2″ belongs to “content” Menu Categories, so Coppy & Paste the following code chain into content tab:

<div class="static-category">

     <div class="image-cat-st">
          <a title="Men" href="#"><img src="{{media url="wysiwyg/image-cat/2.jpg"}}" alt="Men" /></a>
     </div>

     <div class="des-cat-st">
         <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
     </div>

</div>

Item: “Brand 3″– Menu Backend Settings

Note:Because “Brand 3″ belongs to “content” Menu Categories, so Coppy & Paste the following code chain into content tab:

<div class="static-category">

     <div class="image-cat-st">
          <a title="Men" href="#"><img src="{{media url="wysiwyg/image-cat/3.jpg"}}" alt="Men" /></a>
     </div>

     <div class="des-cat-st">
         <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
     </div>

</div>

Blog

Frontend Appearance

Backend Settings of Blog
Item: “Categories 1″– Menu Backend Settings

Note:Because “Categories 1″ belongs to “content” Menu Categories, so Coppy & Paste the following code chain into content tab:

<div class="static-category cat1">
	<div class="title-category">
		<span>Caterories</span>
	</div>
	<ul>
		<li><span><a title="Men" href="#">Versace</a></span></li>
		<li><span><a title="Men" href="#">Thalia</a></span></li>
		<li><span><a title="Men" href="#">Tommy Hilfiger</a></span></li>
		<li><span><a title="Men" href="#">Tory Burch</a></span></li>
		<li><span><a title="Men" href="#">Tretorn</a></span></li>
		<li><span><a title="Men" href="#">True Religion</a></span></li>
	</ul>
</div>
<div class="static-category cat3">
	<div class="title-category">
		<span>Caterories</span>
	</div>
	<ul>
		<li><span><a title="Men" href="#">Versace</a></span></li>
		<li><span><a title="Men" href="#">Thalia</a></span></li>
		<li><span><a title="Men" href="#">Tommy Hilfiger</a></span></li>
		<li><span><a title="Men" href="#">Tory Burch</a></span></li>
		<li><span><a title="Men" href="#">Tretorn</a></span></li>
		<li><span><a title="Men" href="#">True Religion</a></span></li>
	</ul>
</div>

Item: “Categories 2″– Menu Backend Settings

Note:Because “Categories 2″ belongs to “content” Menu Categories, so Coppy & Paste the following code chain into content tab:

<div class="static-category cat2">
	<div class="title-category">
		<span>Caterories</span>
	</div>
	<ul>
		<li><span><a title="Men" href="#">Versace</a></span></li>
		<li><span><a title="Men" href="#">Thalia</a></span></li>
		<li><span><a title="Men" href="#">Tommy Hilfiger</a></span></li>
		<li><span><a title="Men" href="#">Tory Burch</a></span></li>
		<li><span><a title="Men" href="#">Tretorn</a></span></li>
		<li><span><a title="Men" href="#">True Religion</a></span></li>
	</ul>
</div>
<div class="static-category cat4">
	<div class="title-category">
		<span>Caterories</span>
	</div>
	<ul>
		<li><span><a title="Men" href="#">Versace</a></span></li>
		<li><span><a title="Men" href="#">Thalia</a></span></li>
		<li><span><a title="Men" href="#">Tommy Hilfiger</a></span></li>
		<li><span><a title="Men" href="#">Tory Burch</a></span></li>
		<li><span><a title="Men" href="#">Tretorn</a></span></li>
		<li><span><a title="Men" href="#">True Religion</a></span></li>
	</ul>
</div>

Item: “Image blog”– Menu Backend Settings

Note:Because “Image blog” belongs to “content” Menu Categories, so Coppy & Paste the following code chain into content tab:
<div class="image-bg-blog">
          <a title="Men" href="#"><img src="{{media url="wysiwyg/image-cat/bg-blog.jpg"}}" alt="Men" /></a>
</div>

About Us

Frontend Appearance

Backend Settings of About Us Menu

Contact Menu
Frontend Appearance

Backend Settings of Staff Pick Menu

Note:All data of Mega Menu, if you want it like demo, all you need to do is that: Navigate to SM Madives Setting, then go to Theme installation ,aand import data. However, after importing data, you comeback to SM Mega Menu >> Menu Item Manager and “Enable” all items in Menu.

3.3 Configure Extensions

The SM Atom front-page has been integrated with extensions in the Theme as following list:

I. SM Search Box Pro

Position: SM Search Box Pro
Frontend Appearance

Backend of SM Search Box Pro: Click Here
Go Here to readmore about the SM Search Box Pro module.

II. SM Cart Pro

Position: SM Cart Pro
Frontend Appearance

Backend of SM Cart Pro: Click Here
Go Here to readmore about the SM CartPro module.

III. SM Camera Slide

Position: SM Camera Slide
Frontend Appearance

Backend of SM Image Slider: Click Here
Go Here to readmore about the SM Image Slider module.

IV. SM Basic Product

Position: SM Basic Product
Frontend Appearance

Backend of SM Basic Product: Click Here
Go Here to readmore about the SM Basic Product module.

V. SM Listing Tab

Position: SM Listing Tab
Frontend Appearance

Backend of SM Listing Tab: Click Here
Go Here to readmore about the SM Listing Tab module.

VI. SM Shopby

Position: SM Shopby
Frontend Appearance

Backend of SM Shopby : Click Here

VII. SM QuickView

Position: SM QuickView
Frontend Appearance

Backend of SM QuickView: Click Here
Go Here to readmore about the SM Quickview module.

3.4 Configure Static Blocks

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

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

1. Static: Theme-service-homepage1

To create static blocks, go to CMS >> Static Blocks with Identifier * : “service-home”
Frontend

Backend Setting
Coppy & paste the code chain for Content of Theme Service homepage 1:

<div class="service-block">
	<div class="block-title">
		<strong><span>About Madives</span></strong>
	</div>
        <div class="img-title"></div>
	<div class="block-content">
		<ul class="list-service">
			<li><span class="text-about">Lorem ipsum dolor sit amet, an munere tibique consequat mel, congue albucius no qui, at everti meliore erroribus sea. Vero graeco cotidieque ea duo, in eirmod insolens interpretaris nam. Pro at nostrud percipit definitiones, eu tale porro cum. Sea ne accusata voluptatibus. Ne cum falli dolor voluptua, duo ei sonet choro facilisis, labores officiis torquatos cum</span></li>
			<li class="icon-more"><a href="#" title="read more">Read More</a></li>

		</ul>
	</div>
</div>

2. Content-home-static-image-Index1

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “content-static-image”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Theme Home Centre 1:

<div class="static-image-content">
	<div class="static-image two-image one-img hidden-xs hidden-sm  hidden-md">
		<ul class="list-image">
			<li><a  href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/img-1.jpg"}}" alt="Static Image" /></a></li>
		</ul>
	</div>
	<div class="static-image two-image two-img">
		<ul class="list-image">
			<li><a  href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/img-2.jpg"}}" alt="Static Image" /></a></li>
			<li><a  href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/img-3.jpg"}}" alt="Static Image" /></a></li>
		</ul>
	</div>
	<div class="static-image two-image three-img hidden-xs hidden-sm hidden-md">
		<ul class="list-image">
			<li><a   href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/img-4.jpg"}}" alt="Static Image" /></a></li>
		</ul>
	</div>
</div>

3. Static: Content-home-static-image-V1

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “content-static-image1″

Frontend

Backend Setting

Coppy & paste the code chain for Content-home-static-image-V1:

<div class="static-image one-image">
	<ul class="list-image">
		<li><a href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/img-1.jpg"}}" alt="Static Image" /></a></li>
	</ul>
</div>

4.Static: service-bottom-index1

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “servicer-bottom”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Service-bottom-index1:

<div class="why-choose">
	<div class="rows">
		<div class="col-lg-3 col-md-3 col-sm-6">
			<div class="block-whychoose">
				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-1.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2><a href="#" title="free">Free Shipping Item</a></h2>
						<div class="des-why-choose">Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elemen</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-3 col-md-3 col-sm-6 whychoose2 ">
			<div class="block-whychoose">
				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-2.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2><a href="#" title="free">Cash on Delivery</a></h2>
						<div class="des-why-choose">Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elemen</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-3 col-md-3 col-sm-6 whychoose3">
			<div class="block-whychoose">
				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-3.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2><a href="#" title="free">Secure payment</a></h2>
						<div class="des-why-choose">Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elemen</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-3 col-md-3 col-sm-6">
			<div class="block-whychoose">
				<div class="why-choose-content">
					<div class="image-why-choose">
						<img src="{{media url="wysiwyg/why-choose-us/choose-4.png"}}" alt="Choose" />
					</div>

					<div class="info-why-choose">
						<h2><a href="#" title="free">Accepting orders 24/7</a></h2>
						<div class="des-why-choose">Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elemen</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

5. Static: Footer: Info-logo + Information + Why Choose Us + Contact Us

Frontend

Info-logo

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-info”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Info-logo:

<div class="footer-block-content">
	<span>MON to TH  ....................... 10 AM to 20 PM</span>
	<span>SAT ...................................... 12 AM to 24 PM</span>
	<span>SUN  .......................................12 AM to 20 PM</span>
	<ul>
		<li><span class="label-footer">Email :</span> <a href="mailto:name@email.com" title="Mail to: support@madives.com">support@madives.com</a></li>
		<li><span class="label-footer">Phone 1 :</span>  <a href="tel:+0123456789 " title="Telephone">0123456789 </a></li>
		<li><span class="label-footer">Phone 2 :</span> <a href="tel:+0123456789 " title="Hotline">0123456789 </a></li>
                <li class="pay-footer pay1"><span><a href="#" title="pay"></a></span></li>
                <li class="pay-footer pay2"><span><a href="#" title="pay"></a></span></li>
                <li class="pay-footer pay3"><span><a href="#" title="pay"></a></span></li>
                <li class="pay-footer pay4"><span><a href="#" title="pay"></a></span></li>
                <li class="pay-footer pay5"><span><a href="#" title="pay"></a></span></li>
	</ul>
</div>

Information

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-information”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Information:

<div class="footer-block-title">
	<h2>Information</h2>
</div>

<div class="footer-block-content">
	<ul>
		<li><a href="#" title="Press Room ">Press Room </a></li>
		<li><a href="#" title="Help ">Help </a></li>
		<li><a href="#" title="Terms & Conditions ">Terms & Conditions </a></li>
		<li><a href="#" title="Personal information">Personal information</a></li>
		<li><a href="#" title="My merchandise returns">My merchandise</a></li>
		<li><a href="#" title="Manufacturers">Manufacturers</a></li>
		<li><a href="{{store url="contact-us.html"}}" title="Contact Us">Contact Us</a></li>
	</ul>
</div>

Why Choose Us

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-Choose-us”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Why Choose Us:

<div class="footer-block-title">
	<h2>Why Choose Us</h2>
</div>

<div class="footer-block-content">
	<ul>
		<li><a href="#" title="Product Recall">Product Recall</a></li>
		<li><a href="#" title="Gift Vouchers">Gift Vouchers</a></li>
		<li><a href="#" title="Returns and Exchanges">Returns</a></li>
		<li><a href="#" title="Shipping Options">Shipping Options</a></li>
		<li><a href="#" title="Secure payment">Secure payment</a></li>
		<li><a href="#" title="Help & FAQs">Help & FAQs</a></li>
		<li><a href="#" title="Hard to Find Parts">Hard to Find Parts</a></li>
	</ul>
</div>

Contact Us

To create static blocks, go to CMS >> Static Blocks with Identifier * : “footer-contact-us”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Services:

<div class="footer-block-title">
	<h2>Contact us</h2>
</div>

<div class="footer-block-content">
	<div class="maps-footer">
		<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1671.1475626053434!2d-96.82686380000001!3d33.10132420000002!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c3c9bcad9f273%3A0x5bad647389ff5778!2sNetwork+Blvd%2C+Frisco%2C+TX+75034%2C+USA!5e0!3m2!1sen!2s!4v1433400644183" ></iframe>
	</div>
	<ul>
		<li><span class="label-footer">Address :</span> No 40 Bia Sreet 133/2 NewYork City, NY,  United States</li>
	</ul>
</div>

3.5 How To Edit Copyright in admin

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Madives Setting Module to configure the “Custom Copyright” parameter as image below:

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

4SUPPORT – 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 a bunch!

↧

SM Lavender

September 4, 2015, 8:46 pm

≫ Next: SW Atom

≪ Previous: SM Madives

View demo More detail

This guide will help you install SM Lavender 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 and 1.9.x ( latest version 1.9.2.0 ) (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION – Back to top

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation (include of Theme Installation).

2.1 Quickstart Installation :

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. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Do not use “localhost” in URL, otherwise you could not log in to your Admin area (you should use your local IP in case of installing on your computer).
- Leave Tables prefix field blank.

Step 7: Create Admin Account. Please fill fully into Required Fields (“First Name; Last Name; Email; Username; password and confirm password”.)

Step 8: Finish Installation and now you can Go to Frontend or Go to Backend.

2.2 Manual Installation

Step 1: Extract “sm_atom_theme.zip” file and Copy folders skin; app; media, lib to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/). Log out and log in back.
Step 3: Navigate to System >> Cache Management, Sellect All the cache types, take Action as Refresh and Submit.
Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header .

Step 7: You can also change the settings for Footer .

2.3 Theme Setting

Configure SM Lavender General Setting Theme In Magento admin panel, navigate to SM Lavender Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab), Layout Group 1,2,3,4,5,6 to configure
Configure theProduct Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns, Product Shows Effect On Hover, etc..
Configure theProduct Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc..
Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Insatallation

: To import Static blocks data and Pages data, users don’t need navigate co CMS and create one static block or page step by step.

Note:To “Theme Installation”, pay attention that after clicking“Import Static Block” or “Import Pages”, the below notification will appear to announce that you import data successfully.

However, you have to come back CMS >> Static Block ( or Pages) to configure and select Store View for each Block or Page.

Configure Extensions In SM Lavender Setting area, below the General and Catalog fields, navigate toMagentech.com field in the left hand column to configure extensions as you want.

SM Shop By Module
SM Quickview Module
SM Cart Pro Module
SM Basic Product Module
SM Listing Tab Module
SM Deal Module
SM Mega Menu Module
SM Lavender Setting
SM Camera Slider Module

3CONFIGURATION – Back to top

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Here are list of configuration process for this style:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<div class="home-default homestyle1">
	<div class="slideshow-wrapper">
		{{block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide"}}
	</div>

	<div class="static-wrapper static-wrapper-1">
		{{block type="cms/block" block_id="static-image-1"}}
	</div>

	<div class="listingtab-wrapper">
		{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml"}}
	</div>

	<div class="static-wrapper static-wrapper-2">
		{{block type="cms/block" block_id="static-image-2"}}
	</div>

	<div class="slider-basic-wrapper">
		{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
	</div>

	<div class="slider-latest-blog">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}
	</div>

	<div class="brand-wrapper">
		{{block type="cms/block" block_id="feature-brand-slider"}}
	</div>

</div>

3.1.2 Homepage Style 2

Frontend of Homepage-2 Layout Position

To configure this Homepage Style 2, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Including 3 tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<div class="home-default homestyle2">
	<div class="slideshow-wrapper">
		<div class="row">
			<div class="col-lg-9 col-md-9 slideshow">
				{{block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide"}}
			</div>

			<div class="col-lg-3 col-md-3 static-wrapper static-wrapper-1">
				{{block type="cms/block" block_id="static-image-1-home2"}}
			</div>
		</div>
	</div>

	<div class="full-wrapper full-block-1" style="background-color:#f9f9f9;">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-3 sidebar-left">
					<div class="megamenu-vertical-home">
						{{block type="megamenu/list" name="megamenu.vertical.theme" as="megaMenu" template="sm/megamenu/megamenu-vertical.phtml" title="Top Categories" theme="2" group_id="5"}}
					</div>
					<div class="deal-sidebar-wrapper">
						{{block type="deal/list" name="deal.list.sidebar" template="sm/deal/deal-sidebar.phtml" product_addcart_display="1" product_addwishlist_display="1" product_addcompare_display="1"}}
					</div>
				</div>

				<div class="col-lg-9 col-md-9 col-right-home">
					<div class="listingtab-wrapper">
						{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default-home2.phtml"}}
					</div>

					<div class="static-image-wrapper">
						{{block type="cms/block" block_id="static-image-3-home2"}}
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="slider-basic-wrapper">
		{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
	</div>

	<div class="full-wrapper full-block-2" style="background-color:#f9f9f9;">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-md-12">
					{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post-home2.phtml"}}
				</div>
			</div>
		</div>
	</div>

	<div class="brand-wrapper">
		{{block type="cms/block" block_id="feature-brand-slider"}}
	</div>

	<div class="full-wrapper full-block-3 static-image-bottom" style="background-color:#f9f9f9;">
		<div class="container">
			{{block type="cms/block" block_id="static-image-2-home2"}}
		</div>
	</div>

</div>

3.1.3 Homepage Style 3

Frontend of Homepage-3 Layout Position

Similarly to Homepage style 2, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Coppy & paste the code chain for Content of Homepage-3:

<div class="home-default homestyle3">
	<div class="static-wrapper static-wrapper-1">
		{{block type="cms/block" block_id="static-image-1-home3"}}
	</div>

	<div class="deal-sidebar-wrapper">
		{{block type="deal/list" name="deal.list.home3" template="sm/deal/deal-home3.phtml" product_addcart_display="1" product_addwishlist_display="1" product_addcompare_display="1"}}
	</div>

	<div class="static-wrapper static-wrapper-2">
		{{block type="cms/block" block_id="static-image-2-home3"}}
	</div>

	<div class="slider-basic-wrapper">
		{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
	</div>

	<div class="static-wrapper static-wrapper-2">
		{{block type="cms/block" block_id="static-image-3-home3"}}
	</div>

	<div class="brand-wrapper">
		{{block type="cms/block" block_id="feature-brand-slider"}}
	</div>

	<div class="slider-latest-blog">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}
	</div>
</div>

3.1.4 Homepage Style 4

Frontend of Homepage-4 Layout Position

Similarly to Homepage style 3, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Coppy & paste the code chain for Content of Homepage-4:

<div class="home-default homestyle4">
	<div class="deal-sidebar-wrapper">
		{{block type="deal/list" name="deal.list.home4" template="sm/deal/deal-home4.phtml" product_addcart_display="1" product_addwishlist_display="1" product_addcompare_display="1"}}
	</div>

	<div class="static-wrapper static-wrapper-1">
		{{block type="cms/block" block_id="static-image-1-home4"}}
	</div>

	<div class="listingtab-wrapper">
		{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default-home2.phtml"}}
	</div>

	<div class="full-wrapper full-block-testimonial">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-md-12">
					<div class="static-wrapper static-wrapper-2">
						{{block type="cms/block" block_id="static-testimonial"}}
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="list-product-basic">
		<div class="row">
			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 list-col-basic">
				{{block type="cms/block" block_id="basic-product-1"}}
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 list-col-basic">
				{{block type="cms/block" block_id="basic-product-2"}}
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 list-col-basic">
				{{block type="cms/block" block_id="basic-product-3"}}
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 list-col-basic">
				{{block type="cms/block" block_id="basic-product-4"}}
			</div>
		</div>
	</div>

	<div class="slider-latest-blog">
		{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}
	</div>

	<div class="brand-wrapper">
		{{block type="cms/block" block_id="feature-brand-slider"}}
	</div>
</div>

3.1.5 Homepage Style 5

Frontend of Homepage-5 Layout Position

Similarly to Homepage style 4, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<div class="home-default homestyle5">
	<div class="slideshow-wrapper">
		{{block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide"}}
	</div>

	<div class="static-wrapper static-wrapper-service">
		{{block type="cms/block" block_id="servicetop-home5"}}
	</div>

	<div class="full-wrapper full-block-listingtab">
		<div class="container">
			<div class="overflow-padding">
				{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml"}}
			</div>
		</div>
	</div>

	<div class="static-wrapper static-wrapper-image">
		{{block type="cms/block" block_id="static-image-1-home4"}}
	</div>

	<div class="list-product-basic">
		<div class="row">
			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 basic-product-home">
				{{block type="cms/block" block_id="basic-product-1"}}
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 basic-product-home">
				{{block type="cms/block" block_id="basic-product-2"}}
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 basic-product-home">
				{{block type="cms/block" block_id="basic-product-3"}}
			</div>

			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 basic-product-home">
				{{block type="cms/block" block_id="basic-product-4"}}
			</div>
		</div>
	</div>

	<div class="full-wrapper full-block-blog">
		<div class="container">
			<div class="overflow-padding">
				{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post-home2.phtml"}}
			</div>
		</div>
	</div>

	<div class="brand-wrapper">
		<div class="overflow-padding">
			{{block type="cms/block" block_id="feature-brand-slider"}}
		</div>
	</div>
</div>

3.1.6 Homepage Style 6

Frontend of Homepage-6 Layout Position

Similarly to Homepage style 5, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Coppy & paste the code chain for Content of Homepage-6:

<div class="home-default homestyle6">

    <div class="static-wrapper static-wrapper-service">
		{{block type="cms/block" block_id="servicetop-home5"}}
	</div>

	<div class="static-wrapper static-image-1">
		{{block type="cms/block" block_id="static-image-1-home6"}}
	</div>

	<div class="deal-sidebar-wrapper">
        <div class="overflow-padding">
		    {{block type="deal/list" name="deal.list.home4" template="sm/deal/deal-home6.phtml" product_addcart_display="1" product_addwishlist_display="1" product_addcompare_display="1"}}
        </div>
    </div>

	<div class="full-wrapper full-block-testimonial">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-md-12">
					<div class="static-wrapper static-wrapper-2">
						{{block type="cms/block" block_id="static-testimonial"}}
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="listingtab-wrapper">
        <div class="overflow-padding">
		    {{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default-home6.phtml"}}
        </div>
	</div>

	<div class="full-wrapper full-block-video-blog">
		<div class="container">
			<div class="row">
				<div class="col-lg-6 col-md-6 video-block">
					{{block type="cms/block" block_id="static-video"}}
				</div>

				<div class="col-lg-6 col-md-6 latest-blog">
					{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post-home6.phtml"}}
				</div>
			</div>
		</div>
	</div>

	<div class="brand-wrapper">
        <div class="overflow-padding">
		    {{block type="cms/block" block_id="feature-brand-slider"}}
        </div>
	</div>
</div>

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” – have id 1 and “Group – Vertical” – have id 3), Two id will be shown in Configuration of SM Mega Menu.

Step 2: Navigate to SM Mega Menu >> Configuration & fill the id number for two above groups in step 1

Step 3: In order to add menu items, Go to SM Mega Menu >> Menu items Manager to add items as you want.

3.2.1 With Horizontal Mega Menu:

Horizontal-mega-menu

Fashion Menu

Frontend Appearance

Tree of Fashion Menu:

Backend Settings of Fashion Menu

Item: “Group 1″– Menu Backend Settings
Item: “Women”– Menu Backend Settings
Item: “Tops & Blouses”– Menu Backend Settings
Item: “‘Link Static Bottom”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="static-bottom-link">
	<ul class="link-bottom">
		<li class="label-featured">Featured Categories:</li>
		<li><a href="#" title="Men">Men</a></li>
		<li><a href="#" title="Dresses">Dresses</a></li>
		<li><a href="#" title="Bags">Bags</a></li>
		<li><a href="#" title="Jewelry">Jewelry</a></li>
	</ul>
</div>

Electronics Menu

Frontend Appearance

Tree of Electronics Menu:

Backend Settings of Electronics Menu

Item: “Group 1″– Menu Backend Settings
Item: “Televisions & Video”– Menu Backend Settings
Item: “Icon”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="icon-group"><img src="{{media url="wysiwyg/icon-megamenu/icon-1.png"}}" alt="Television" /></div>

Item: “Promotions”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="deal-megamenu">
{{block type="deal/list" name="deal.list.default" template="sm/deal/deal-megamenu.phtml" product_limitation="1" }}
</div>

Item: “Link Static Bottom”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="static-bottom-link">
	<ul class="link-bottom">
		<li class="label-featured label-color">Suggestions:</li>
		<li><a href="#" title="Men">Men</a></li>
		<li><a href="#" title="Dresses">Dresses</a></li>
		<li><a href="#" title="Bags">Bags</a></li>
		<li><a href="#" title="Jewelry">Jewelry</a></li>
	</ul>
</div>

About Us Menu

Frontend Appearance

Tree of About Us Menu:

Backend Settings of About Us Menu

Note:About Us Menu: To config this page, please navigate to SM Lavender setting >> SM Mega Menu >> Menu Items Manager

Item: “Dropdown”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<ul class="item-about-contact">
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&amp;___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&amp;___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&amp;___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&amp;___from_store=default"}}">About Us Style 4</a></li>
	</ul>

Contact Us Menu

Frontend Appearance

Tree of Contact Us Menu:

Backend Settings of Contact Us Menu

Note:Contact Us Menu: To config this page, please navigate to SM Lavender setting >> SM Mega Menu >> Menu Items Manager

Item: “Dropdown”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<ul class="item-about-contact">
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&amp;___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&amp;___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&amp;___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&amp;___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>

3.2.2 With Vertical Mega Menu ( In The Homepage 2)

Vertical Mega menu includes 9 items:

Fashion
Electronics
Shop
Home Gadern
Featured
Clothers
Gift Box
Lorem ipsum dolor
Eiusmod tempor

Frontend Appearance

Backend Appearance

Electronics

Frontend Appearance

Tree of Electronics:

Backend Settings of Electronics

Note: To configure these sub-items inside this category, we do as following tasks:

Item: “Categories Group”– Menu Backend Settings
Item: “Category 1″– Menu Backend Settings
Item: “Camera & Photo”– Menu Backend Settings
Item: “Image”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/image-menu-5.jpg"}}" alt="Static Image" />
</a>
</div>

Shop

Frontend Appearance

Tree of Shop:

Backend Settings of Shop

Item: “Categories Group”– Menu Backend Settings
Item: “Categories1″— Menu Backend Settings
Item: “Software”—- Menu Backend Settings
Item: “Image Group”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<ul class="image-list">
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-1.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-2.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-3.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-4.jpg"}}" alt="Static Image" /></a></li>
</ul>

Home Gadern

Frontend Appearance

Tree of Home Gadern:

Backend Settings of Home Gadern

Item: “Popular Products”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="basicproduct-content-menu">
{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="61"
	product_order_by="lastest_product"
	product_limitation="3"
	product_addcart_display="0"
	product_addwishlist_display="0"
	product_addcompare_display="0"
}}
</div>

Clothers

Frontend Appearance

Tree of Clothers:

Backend Settings of Clothers

Item: “Categories – Product”– Menu Backend Settings
Item: “Category 1″– Menu Backend Settings
Item: “Men”– Menu Backend Settings
Item: “Best Seller”– Menu Backend Settings
Item: “Image”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/image-menu-6.jpg"}}" alt="Static Image" />
</a>
</div>

Other items in vertical menu are configured the same as above items.

3.5 How To Edit Copyright in admin

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Lavender Setting Module to configure the “Custom Copyright” parameter as image below:

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

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Lavender Setting Module to configure the “Social style” parameter as image below:

4SUPPORT – 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 a bunch!

↧

SW Atom

September 9, 2015, 12:35 am

≫ Next: SP Lavender

≪ Previous: SM Lavender

View demo More detail

1GETTING STARTED

1.1 Introduction

1.2 System Requirements

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

Apache 2.x or Microsoft IIS 7
PHP 5.3.x
MySQL 5.0.4 or higher
WordPress 3.9+, 4.0+

Recommended PHP Configuration Limits: Many issues you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can contact with your web host and ask them to increase those limits to a minimum or You can do this on your own by finding php.ini file in your root directory as follows:

max_execution_time 360

memory_limit 128M

post_max_size 32M

upload_max_filesize 32M

2INSTALLATION

2.1 Files Structure

At first, you need to download the package about my computer and then unzip the package. The Main Files Gives You All The Content Listed Below

Data folder - Contains the “sample_data.xml” file, “widget.wie” and “theme_options.txt” file.
Revslider folder – Contains the “slideonepage.zip” file.
Theme installation package – Contains the sw_atom_theme_v1.0.0.zip (the newest version) file and sw_atom-child-theme.zip WordPress Theme. The child theme is only for users who make code changes.

2.2 Theme Installation

You can install the theme in two ways: through WordPress, or via FTP.

Note: If the theme file size is larger than 8M, please upload to FTP (File Transfer Protocol).

2.2.1 Theme Via FTP Installation

Extract themename_version.zip.
Load your FTP client, such as FileZilla.
Upload the themename_version folder to the /wp-content/themes directory.
In the left menu sidebar, go to Appearance >> Themes.
Click Activate underneath the theme’s named section.

2.2.2 Theme Via WordPress Admin Panel Installation

Step 1 – Open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g (www.your_domain.com/wp-admin/).

Step 2 – Login to your WordPress Dashboard and navigate to Appearance >> Themes. At the top of the page click the Add New button.

Step 3 – Click the Upload Theme button >> Choose File in Import from your computer section. Navigate to previously zipped theme package and open theme installator folder: Select your “ sw_atom_theme_v1.0.0.zip” file and click Install Now.

Step 4 – The uploading process will be started. You will see the message that Theme installed successfully.

Step 5 – After the installation you will be able to activate the theme to do this click the “blue” activation link.

Step 6 – Select “Create static front page = No” and press “Save Changes” to complete the theme activation.

Once theme is installed, you need to install Required Plugins to get full features working.

2.3 Required Plugins Installation

Note: If the plugins installation process could have a notice some plugins unsuccessful installation, please go to these plugins to install one by one. This case usually occurs as you select all plugins installation at once.

2.4 Sample Data Installation

Step 1 - In the Administrator page, please navigate to Tools >> Import.

Step 2 - Please choose “WordPress” to import.

Step 3 - In Import WordPress page, click “choose file” button to select file “sample_data.xml” to upload.

Step 4 - Assign Authors and Import Attachments with selecting “Download and import file attachments“ and then press “Submit” button.

Step 1 – In the Administrator page, please navigate to Tools >> Widget Importer & Exporter.

Step 2 – After that choose “widget_data.wie” file >> press Import Widgets button.

2.6 Import Theme Options

Step 1 – In the Administrator page, please navigate to Appearance >> Theme Options >> Import/ Export tab.

Step 2 – Click “Import the file” button >> open the “theme_options.txt” file with your NotePad editor >> Copy the content into textbox.

Step 3 – Finally, press “Import” and “Save Change” .

2.7 Import Revolution Slider

Step 1 – In the Administrator page, please navigate to Revolution Slider >> Click “Import Slider” button .

Step 2 – The “Import Slider” pop-up window, please choose the “slideonepage.zip” file (in the folder “revslider”) and press “Import Slider“ button.

2.8 Change Product Image Sizes

You can change the image size in “Woocommerce > Settings > Products > Display” section.

woocommerce

After change the images sizes, you should regenerate all the thumbnails. For this, you should install and activate “Regenerate Thumbnails” plugin.

3THEME OPTIONS

In your Admin Panel, navigate to Appearance >> Theme Options to configure.

3.1 General

Color Scheme – Color of schemes: Default.
Background Image – Browse to select image file that you want for background image.
Color Option – Only color validation can be done on this field type. This is the description field, again good for additional info.
Background Repeat – This option determines if the background image is repeated (Used for boxed layout).
Favicon Icon - Use the Upload button to upload the new favicon and get URL of the favicon.
Responsive Support – Support reponsive layout, if you do not want to use this function, please uncheck.
Logo Image - Use the Upload button to upload the new logo and get URL of the logo.

3.2 Layout

Box Layout – Select Layout Box or Wide.
Background Box Image – Browse to select image that you want.
Left Sidebar Expand – Select width of left sidebar.
Right Sidebar Expand – Select width of right sidebar medium desktop.
Left Sidebar Medium Desktop Expand – Select width of left sidebar medium desktop.
Right Sidebar Medium Desktop Expand – Select width of right sidebar.
Left Sidebar Tablet Expand - Select width of left sidebar tablet.
Right Sidebar Tablet Expand – Select width of right sidebar tablet.

Header Style – Select Header style: style1 / style2 / style3.
Phone number – Fill here your phone number to be displayed in header.
Search form – Hide or show search form.

Menu Type – Select “Mega Menu” or “Dropdown Menu” type.
Theme Location – Select theme location to active mega menu.
Responsive Menu Visible – Select option to show responsive menu visible.
Select Menu Style – Allow to select menu style: Default / Fixed Menu.

3.5 Blog Options

Sidebar Blog Layout – Select style sidebar blog: Full Layout / Left Sidebar / Right Sidebar / Left Right Sidebar.
Layout blog – Select style layout blog: Default / List Layout / Right Sidebar / Grid Layout.
Blog column – Select style number column blog: 2 colums / 3 columns / 4 columns.

3.6 Product Options

Product Listing column Desktop – Select number of column on Desktop Screen.
Product Listing column Medium Desktop – Select number of column on Medium Desktop Screen.
Product Listing column Tablet – Select number of column on Tablet Screen.
Sidebar Product Layout – Select style sidebar product.

3.7 Portfolio Options

Portfolio Categories – Select Portfolio Category.
Portfolio style – Select portfolio style: Default Column(s)/Fitrows/Masonry.
Portfolio column Desktop – Select number of column on Desktop Screen.
Portfolio column Medium Desktop – Select number of column on Medium Desktop Screen.
Portfolio column Tablet – Select number of column on Tablet Screen.
Portfolio column Smartphone – Select number of column on Smartphone Screen.

3.8 Typography

Use Google Webfont – Insert font style that you actually need on your webpage.
Webfont Weight – For weight, see Google Fonts to custom for each font style.
Webfont Assign to – Select the place will apply the font style headers, every where or custom.
Webfont Custom Selector – Insert the places will be custom here, after selected custom Webfont assign.

Turn on/turn off sharing buttons appearing in Home page

Social share – Enable Social share button.
Facebook – Enable Facebook Share button.
Twitter – Enable Twitter Share button.
Linked_in – Enable LinkedIn Share button.
Google+ – Enable Google+ Share button.

3.10 Advanced

Show cPanel – Turn on/off Cpanel.
Widget Advanced – Turn on/off Widget Advanced.
Developer Mode – Turn on/off preset.
Back to top - Turn on/off back to top
Direction – Left To Right / Right To Left.
Active Popup – Turn on/off Subcribe to our Newsletters form when you load initial page .
Code show popup – Copy & Paste the code show popup into your text editor. Click Here to view details.

<div class="newsletter-content">
<p class="title">Subcribe to our Newsletters</p>
<p class="get-off">Get 20% Off</p>
[contact-form-7 id="771" title="Newsletter Popup"]
</div>

Active Effect Scroll – Turn on/off active effect scroll in homepage
Google Analytics ID – Enter Google Analytics code.
Custom CSS/JS – Insert your own CSS into this block. This overrides all default styles located throughout the theme.

5MEGA MENU

In your Administrator Page, please navigate to Appearance > Menus to configure the menu structure.

The Frontend Appearance:

The Backend Settings:

1. We call Parent Level Menu Level 0. Then, next levels are Level 1, Level 2…

2. Click on a Menu Level 0 (Parent Level Menu ) item and select Dropdown Size = “6″ in selectbox.

3. Click “Save”

The parameter explanation in Advanced Menu Config:

Active mega menu: Allow to activate/inactivate Mega Menu

Icon: Using icon-* class to display Icon for any menu item with Font Awesome intergrated. Refercence Font Awesome for details

Dropdown Size: Set the width of dropdown menu. (ex: min = 1 (= 150px); max = 6 (= 900px)).

Dropdown Align

- Only for menu items level 0 – If you want dropdown (if have) align by right direction, config it to ‘Right’ instead of ‘Left’ or ‘Default’ – ‘Default’: no class be add to dropdown, everything are nature by default css. – ‘Left’ / ‘Right’: add to dropdown an utility class for float it left/ right. Make it align as you want.

Show Description as Subtitle

- Mean as the name. – Description is core attribute of menu item. You may need check to show it in the metabox screen.

Hide Title

- Sometime you need hide the title of menu, select ‘Yes’ value please. In this case, Icon or Subtitle or Advanced Content are need to show as replacer.

Disable Link: Allow to disable link.

Advanced:

- Some advanced functions are placed here. – ‘Default’: NOOP, do nothing. Sure, it is not advanced – ‘Use as Divider’: Show any icon, title, subtitle, content. Divider style only. – ‘Append Advanced Content’: Append content after menu title block (icon+title+subtitle) – ‘Append Advanced Content with Shortcode’: as above, but ‘do_shortcode’ with this before append.

Advanced content: Insert content follow Advanced ( input HTML, image… not included js & css)

Menu Thumbnail: Allow to upload thumbnail for menu

The Frontend Appearance:

The Backend Settings:

6PAGES

6.1 How To Create A New Page

Step 1 - Navigate to Pages in your admin sidebar and click Add New option.

Step 2 – Input a new name for your page, then find the Page Attributes box on right side.

Step 3 – Set your Parent page. It’s usually set to No Parent.

Step 4 – Set your page template from the Template dropdown list. See list of page templates below.

Step 5 - Content for your page goes in the editing field, use the Visual or Text editor.

Here is a screenshot that shows you the various areas and descriptions of the page settings described above.

6.2 Setting Up Home Page

Setting up your home page is the same as setting up any other regular pages, except that you need to specify in the settings which page will be your Main Home Page.

How To Set Your Home Page

Step 1 - Navigate to Settings >> Reading tab.

Step 2 – Select A Static Page option.

Step 3 – Choose the page you want as your home page from the Front Page dropdown list.

Step 4 – Choose the blog page as the Posts page.

6.3 Page Templates

SW Atom includes several page templates to choose from, and you will need to choose the page template that suits your needs. For example, if you want a page that is Contact Us Page of the browser window, then you would select the Contact page template. All of this is done in the Pages section of your WordPress admin.

Below are the Page Templates, along with a description of each one.

About Us Page – This is the About Us page template. Choose this template when you want to give the customers the information about yourself website.
Contact Us Page – This is the Contact page template that you should choose when you make your contact page with Google Map & a contact form.
FAQ Page - This is the FAQ page template. Choose this template when you make your FAQ page.
Our Services – This is the Our Services page template. In this page include “The Best Solution For Your Business”, “Best Services”, “Testimonials”…
Comming Soon – In this page uses shortcode to show countdown time for any products comming soon.

6.4 Edit Page with Visual Composer

The SW Atom Theme uses the Visual Composer Plugin. The most powerful feature of the Visual Composer is that it gives you an easy drag and drop page builder that can be used from the standard WordPress page/post edit area or directly from the frontend.

For example: “FAQs Page“.

Step 1: you click “Edit with Visual Composer” link at the frontend editor.

Step 2: Edit Text Block by click “pencil” icon.

Step 3: Edit content as you want at General tab of Text Block Settings.

8.1 Portfolio 2 Columns

Frontend Editor – Click on “pencil” sign to configure the portfolio settings

frontend-portfolio-2column

The pop-up window will display the portfolio settings so that you can configure the content as you want:

config-portfolio-2column

Title – Input title of portfolio.
Description – Input Description of portfolio.
Category – Select Category
Order By – Allow to order by Name/Author/Date/title/Modified/Parent/ID/Random/Comment Count.
Order – Allow to order Descending/Ascending.
Number Of Post – Allow to display number of post. For example: “4″ – will display 4 posts.
- Number of Columns – Allow to display number of columns on the devices:
- Number of Columns >1200px
- Number of Columns on 992px to 1199px
- Number of Columns on 768px to 991px
- Number of Columns on 480px to 767px
- Number of Columns in 480px or less than
- Layout – Select Layout Fitrows / Masonry style.
- Show Tab – Allow to show tab Or not
- Show button loadmore – Allow to show loadmore button Or not.

Note: With the Portfolio 3 OR 4 Columns Settings part do the same. If you want to set to display 3 or 4 columns, only need to select number of columns on each devices as you want. With the Portfolio Masonry, you select “Masonry” layout.

9SHORTCODE

9.1 Woo CountDown

Frontend Editor – Click on “pencil” sign to configure the Shortcode Woo CountDown settings

frontend-countdown

The pop-up window will display the Shortcode Woo CountDown settings so that you can configure the content as you want:

backend-countdown

Title – Input title of widget.

Header Style – Select style for header. There are 2 options for you: Header Style Default / Header Style 1.

Style Countdown – Select style for countdown: There are 3 options for you: Style Default / Style 1 / Style 2 .

Category – Allow to select category.

Order by – Select how to sort retrieved posts.

Order – Designates the ascending or descending order of the ‘orderby’ parameter.

Number of posts – Allow to display number of post. For example: “6″ – will display 6 posts.

Number row per column – Allow to select number row of per column.
Number of Columns – Display number of columns on devices:
- Number of Columns >1200px
- Number of Columns on 992px to 1199px
- Number of Columns on 768px to 991px
- Number of Columns on 480px to 767px
- Number of Columns in 480px or less than

Speed – Set speed of slide (Faster = Slower)

Auto Play – Set the “autoplay” parameter to “true”, so the slider will start playing as soon as the page loads and vice versa.

Layout – Select Default Layout.

Interval – Set timer interval between slide.

Total Items Slided – Allow to set total item slided. For example: Set “1″ – Slider will run one by one.

9.2 Woo Tabs Slider

Frontend Editor – Click on “pencil” sign to configure the Shortcode Woo Tabs Slider settings

frontend-tab-slider

The pop-up window will display the Shortcode Woo Tabs Slider settings so that you can configure the content as you want:

backend-tab-slider

Header Style – Select style for header. There are 2 options for you: Header Style Default / Header Style 1 / Header Style 2.
Select Order Product – Select Order Product: Latest Products / Top Rating Products / Best Selling Products / Featured Products.

9.3 Partner Slider

Frontend Editor – Click on “pencil” sign to configure the Shortcode Partner Slider settings

frontend-partner-slider

The pop-up window will display the Shortcode Partner Slider settings so that you can configure the content as you want:

backend-partner-slider

9.4 Testimonials

Frontend Editor – Click on “pencil” sign to configure the Shortcode Testimonials settings

frontend-testimonial

The pop-up window will display the Shortcode Testimonials settings so that you can configure the content as you want:

backend-testimonial

Style title – Select style for title: Style title 1 / Style title 2 / Style title 3 or leave blank to use default style title.
Excerpt length (in words) – Set the length of words in except.
Template – Select template for testimonial. There are 4 options for you: Indicator Ups / Slide Style 1 / Slide Style 2 / Style Our Service.
Extra class name – If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

9.5 Responsive Slider Blog

Frontend Editor – Click on “pencil” sign to configure the Shortcode Responsive Slider Blog settings

frontend-responsive

The pop-up window will display the Shortcode Responsive Slider Blog settings so that you can configure the content as you want:

backend-responsive

Category filter – Category filter : Blog / All Links / Post Format / Uncategorized.

10OTHER

SUPPORT – If you have any questions that are beyond the scope of this help file, please send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

SP Lavender

September 11, 2015, 7:25 pm

≫ Next: SW WooShop

≪ Previous: SW Atom

View demo More detail

1GETTING STARTED

1.1 Introduction

1.2 System Requirements

Please make sure your hosting server meets the PrestaShop requirements:

Supported operating system: Windows, Mac and Linux.
Wamp (for Windows) or Xampp (for Windows and Mac)
Web server: Apache Web server 1.3 or later, Microsoft’s IIS Web server 6.0 or later.
PHP 5.2* or later.
MySQL 5.0 or later.
At least 32 Mb of RAM on your server (64 Mb is comfortable, the more the better).

Note: If you can not install the theme/module, You need to increase the parameter “memory_limit=200M”; “max_execution_time=300″; “max_execution_time=1000″ & “upload_max_filesize=20M” in the file php.ini.

1.3 PrestaShop Guide

If you are new with Prestashop. Please read Prestashop guide first: http://doc.prestashop.com/display/PS16/Getting+Started

2INSTALLATION

There are two ways to install SP Lavender Theme

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation : Include of Theme layout Installation Packages. Please unzip the file and you would see the following packages:
- module folder
- override folder
- sp_lavender_template_p16_v1.0.0.zip file

2.1 Quickstart Installation

We provide SP Lavender 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 a quickstart package
Step 2: Extract the downloaded package “sp_lavender_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting). In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Prestashop installer. Please follow each step of the Installer so that the installation process can be set.

Installation Assistant (Choose your language)

Please select the installation language

Please note: the installation language option will not affect your store language. By default PrestaShop is offered in English. You can install additional localization packages to change the store language.

When you are done, click the ‘Next’ button.

Installation Assistant (License agreements)

Please check the license agreement.

When you are done, click the ‘Next’ button.

System Compatibility

Check the PHP settings and directory permissions. In case of any errors, please contact your hosting provider for further assistance.

If everything is correct, click the ‘Next’ button.

Store Information

When you are done, click the ‘Next’ button.

System Configuration

Here is the database configuration panel, we need to create database first.

Access your database panel and create database for your site. Add database name and then hit “Create” button.

Finish installation: This process could take you some time

Note: For security reasons you need to delete the /install/ directory on your hosting server.

And finally, go to the frontend or backend as you want:

2.2 Theme Installation

Note: Before installing theme, you must disable cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> press “Save”.

SP Lavender Layout1 Theme Installation

Note: Here we will only guide you How To Install SP Lavender layout1 Theme, with layout2, 3, 4, 5, 6 do the same.

Firstly, you must EXTRACT the “sp_lavender_layout1_theme_p16_v1.0.0.zip” package and open the extracted folder. Here you will see:

module folder: contain of the smartblog.zip file, smartblogcategories.zip file and themeinstallator.zip file.
override folder: contain of “FrontController.php” file in the folder URL: \override\classes\controller\ .
and the sp_lavender_template_p16_v1.0.0.zip file.

STEP 1: Install “smartblog.zip”, “smartbloghomelatestnews.zip” and“smartblogcategories.zip” Module.

1. Login to your Prestashop admin panel and navigate to MODULES -> Modules. At the top of the page click the Add a new module button.

2. Choose the “smartblog.zip” file and click “Upload this module” button

3. There is a message-box “The module was successfully downloaded.”

4. Please find to the uploaded module and Install it.

5. A pop-up window will display. Please click “Proceed with the installation” button.

6. Finally, Module(s) installed successfully.

Note: The “smartblogcategories.zip” and “smartbloghomelatestnews.zip” module installation steps do the same.

STEP 2: Install “themeinstallator” Module.

1. Login to your Prestashop admin panel and navigate to MODULES -> Modules. At the top of the page click the Add a new module button.

2. Select your module.zip file “themeinstallator.zip” and click “Upload this module” button

3. The uploading process will be started. You will see the message that the module has been successfully downloaded.

4. The new module will be located in the modules list. Search the name of module and Click on the Install button to install the module.

5. Finally, you will see a notice message: “Module(s) installed successfully”.

STEP 3: Install the “sp_lavender_template_p16_v1.0.0.zip” file.

1. In the your Prestashop admin panel and navigate to MODULES -> Modules. Find to the module that you have installed and clicked on Configure button to configure the module.

2. Navigate to “Import from your computer” >> choose the zip theme file as named “sp_lavender_layout1_theme_p16_v1.0.0.zip” >> Next.

3. You will see a message, please click on “Next” button.

4. Select the module that you want to install/disable >> press “Next” to continue the installation process.

5. List of the installed/disabled modules will be showed out and click on “Finish” button to finish the theme installation.

STEP 4: Override folder: copy the “FrontController.php” file into the installation folder with the URL: override\classes\controller.

3SP THEME CONFIGURATION

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the Settings section, find to the parameter “Keep Menu Bar On Top” to set “Yes” and press “Save”. Go to the front-end to view the changes.

3.2 Select Theme Color, Font, Box Layout

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the Settings section, find to the parameter “Display Live Configurator” to set “Yes” and press “Save”.

4. Go to the front-end to view the changes and select theme color, font, box layout as you want. Please note that when you select (the theme color; box layout), remember to “Save” again and refresh to view the changes.

3.3 Setup Logo

2. Please check the front-end to view the changes.

3.4 Image Size Adjustment

In your Prestashop admin dashboard, navigate to: PREFERENCES > Images to configure the image size for category, manufacturer, supplier, product etc that fit your layout best.

1. Image size - You can choose the type of product images that will suit your products the best.

2. Image quality - Set image quality to use on your site.

3.5 Edit Copyright

Frontend Appearance:

To edit Copyright, please the steps following:

2. Look for the following code and replace as you want:

<div id="copyright">
		<div  class="container">
		<div class="copy-right col-md-12 clear">
		Lavender &copy; 2015  <a class="_blank" href="http://www.magentech.com/">PrestaShop Themes Demo Store</a>. All Rights Reserved. Designed By <a class="_blank" href="http://www.magentech.com">MagenTech.Com</a>
			</div>
			</div>
			</div>

4MULTISHOP CONFIGURATION

1. In the Administrator Dashboard, navigate to PREFERENCES > General > find to the parameter “Enable Multistore” > click “Yes” to enable multishop and “Save” .

2. Please go to >> ADVANCED PARAMETERS >> Multistore

3. In the Multistore Tree, click “Welcome to SP Atom Layout2“.

multistore-tree

4. After click the link “click here to set URL for this shop” to set URL for SP Atom Layout2

5. Select your “Shop”; set “Virtual URL” and press “Save”.

6. Finally, click the URL to view the changes

5SP TOP HORIZONTAL MENU CONFIGURATION

1. Navigate to Modules -> Modules >> look for SP Top horizontal menu >> Click the Configure button to access the module configuration page.

2. The left column displays current menu elements and the right one displays available menu elements. To add a new element to the frontend menu, you should select the required element on the right and click the Add button and Click Save to confirm adding a new menu item for the top menu.

3. You may also add custom links to the menu list using the Add a new link section.

4. After adding label and link as you want. We will be displayed at Link List.

5. Check the frontend to view the changes.

↧

SW WooShop

September 14, 2015, 7:54 pm

≫ Next: SM Matrix

≪ Previous: SP Lavender

View demo More detail

1GETTING STARTED

1.1 Introduction

1.2 System Requirements

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

Apache 2.x or Microsoft IIS 7
PHP 5.3.x
MySQL 5.0.4 or higher
WordPress 3.9+, 4.0+

Recommended PHP Configuration Limits: Many issues you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can contact with your web host and ask them to increase those limits to a minimum or You can do this on your own by finding php.ini file in your root directory as follows:

max_execution_time 180

memory_limit 128M

post_max_size 32M

upload_max_filesize 32M

1.3 Key Features

Compatible with IE9+, Firefox 4+, Netscape, Safari, Opera 9.5 and Chrome
Responsive layout for all devices
WooCommerce included
Advanced widget options
Unlimited colors and over 500 Google web fonts
Allow to set site title, tagline, logo and Analytics ID
WPML Compatible & RTL Ready
Support menu with Mega and dropdown style
Support primary menu location, widget sidebars
5 Preset Color Styles: Default, blue, Emerald, Green, Tangerine.
Fully integrated with Font Awesome Icon
Support to add custom CSS/JS
Social Networks integration
CSS3 table-less design
LESS for advanced development
Custom style for plugin Contact Form 7 and SEO Plugins to allow higher ranks.

1.4 WordPress Information

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes. Below are all the useful links for WordPress information.

WordPress Codex – General info about WordPress and how to install on your server.
Instructional Video – Awesome How-To video created by Woo Themes.
First Steps With WordPress – General info about multiple topics about WordPress.
FAQ New To WordPress – The most popular FAQ’s regarding WordPress.
WordPress 101 Tutorial videos – Some great videos from WordPress 101 Tutorial Series.

2INSTALLATION

2.1 Files Structure

At first, you need to download the package about my computer and then unzip the package. The Main Files Gives You All The Content Listed Below

Theme folder – Contains the sw_wooshop_theme_version1.0.0.zip (the newest version) file and sw_wooshop-child-theme.zip WordPress Theme. The child theme is only for users who make code changes.
Data folder - Contains the sample_data.xml file and widget.wie file.

2.2 Theme Installation

You can install the theme in two ways: through WordPress, or via FTP.

Note: If the theme file size is larger than 8M, please upload to FTP (File Transfer Protocol).

2.2.1 Theme Via FTP Installation

Extract themename_version.zip.
Load your FTP client, such as FileZilla.
Upload the themename_version folder to the /wp-content/themes directory.
In the left menu sidebar, go to Appearance >> Themes.
Click Activate underneath the theme’s named section.

2.2.2 Theme Via WordPress Admin Panel Installation

Step 1 – Open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g (www.your_domain.com/wp-admin/).

Step 2 – Login to your WordPress Dashboard and navigate to Appearance >> Themes. At the top of the page click the Add New button.

Step 3 – Click the Upload Theme button >> Choose File in Import from your computer section. Navigate to previously zipped theme package and open theme installator folder: Select your “sw_wooshop_theme_version1.0.0.zip” file and click Install Now.

Step 4 – The uploading process will be started. You will see the message that Theme installed successfully.

Step 5 – After the installation you will be able to activate the theme to do this click the “blue” activation link.

Step 6 – Press “Save Changes” to complete the theme activation.

Once theme is installed, you need to install Required Plugins to get full features working.

2.3 Required Plugins Installation

2.4 Sample Data Installation

Step 1 - In the Administrator page, please navigate to Tools >> Import.

Step 2 - Please choose “WordPress” to import.

Step 3 - In Import WordPress page, click “choose file” button to select file “sample_data.xml” to upload.

Note: You must import “sample_data.xml” file twice. The first time, In Import Attachments part, selecting “Download and import file attachments” and the second time, unselecting “Download and import file attachments“.

Step 4 - Assign Authors and Import Attachments with selecting “Download and import file attachments“ and then press “Submit” button.

Step 5 - You must import “sample_data.xml” more one again but note that in Import Attachments part with unselecting “Download and import file attachments“ and then press “Submit” button.

2.5 Change Product Image Sizes

You can change the image size in “Woocommerce > Settings > Products > Display” section.

woocommerce

After change the images sizes, you should regenerate all the thumbnails. For this, you should install and activate “Regenerate Thumbnails” plugin.

Note: If you have not had “Widget Importer & Exporter” Plugin, please install more this plugin by going to Plugins >> Add New >> Search ” Widget Importer & Exporter” plugin >> install and activate it.

Step 1 – In the Administrator page, please navigate to Tools >> Widget Importer & Exporter.

Step 2 – After that choose “widget_data.wie” file >> press Import Widgets button.

3THEME OPTIONS

In your Admin Panel, navigate to Appearance >> Theme Options

3.1 General

Color Scheme – Select one of 5 predefined schemes: Default, Green, Blue, Orange, Cyan.
Background Image – Browse to select image file that you want for background image.
Background Repeat – This option determines if the background image is repeated (Used for boxed layout).
Favicon Icon - Use the Upload button to upload the new favicon and get URL of the favicon.
Responsive Support – Support reponsive layout, if you do not want to use this function, please uncheck.
Logo Image - Use the Upload button to upload the new logo and get URL of the logo.

3.2 Layout

Box Layout – Select Layout Box or Wide.
Background Box Image – Browse to select image that you want.
Left Sidebar Expand – Select width of left sidebar.
Right Sidebar Expand – Select width of right sidebar medium desktop.
Left Sidebar Medium Desktop Expand – Select width of left sidebar medium desktop.
Right Sidebar Medium Desktop Expand – Select width of right sidebar.
Left Sidebar Tablet Expand - Select width of left sidebar tablet.
Right Sidebar Tablet Expand – Select width of right sidebar tablet.
Layout product – Select style layout blog.
Blog column – Select style number column blog.

Header Style – Have 5 Header Style for your selection.
Phone number - Fill here your phone number to be displayed in header.
Search form – Hide or show search form

Menu Type – Select “Mega Menu” or “Dropdown Menu” type.

3.5 Typography

Use Google Webfont – Insert font style that you actually need on your webpage.
Webfont Weight – For weight, see Google Fonts to custom for each font style.
Webfont Assign to – Select the place will apply the font style headers, every where or custom.
Webfont Custom Selector – Insert the places will be custom here, after selected custom Webfont assign.

3.7 Advanced

Show cPanel – Turn on/off Cpanel.
Widget Advanced – Turn on/off Widget Advanced.
Developer Mode – Turn on/off preset.
Webfont Custom Selector – Insert the places will be custom here, after selected custom Webfont assign.
Back to top – Turn on/off Back to top.
Direction – Left To Right / Right To Left.
Active Effect Scroll – Check to active effect scroll in homepage.
Google Analytics ID – Enter Google Analytics code.
Custom CSS/JS – Insert your own CSS into this block. This overrides all default styles located throughout the theme.

4PAGES

4.1 How To Set your Homepage

Step 1 - Go to Settings > Reading in your WordPress Dasrdoard panel.

Step 2 - Set “Front page displays” to a “Static Page”.

Step 3 - In the drop down menu for “Front Page” choose a page which will be your home page.

Step 4 - Leave the drop down menu for “Posts page” empty, as this is not used by the theme.

Step 5 - Save changes.

reading

4.2 Plugin Visual Composer

SW WooShop uses the Visual Composer Page Builder plugin – take full control over your WordPress site with Frontend and Backend editors. Build any layout you can imagine with drag and drop page builder plugin – no programming knowledge required.

Note: Please go Here to get more info about this plugin.

When you view site, you will see some modules which have not been fully configured. Please make the following instruction, so you have a demo site.

This is the frontend of some elements not yet fully configured:

config-frontend

We will guide you build your content with frontend page builder option as below.

Step 1: At the frontend, please click “Edit with Visual Composer”.

edit-visual-composer

Step 2: Click “pencil” to edit content

pencil

Step 3: Select “Category filter: ELECTRONICS”.

Select-electronic

Step 4: Finally, Press “Save Changes”.

Step 5: Click “pencil” to edit content of skiboarding:

skiboarding

Step 6: Select “Category filter: mobiles”.

mobiles

Step 7: Finally, Press “Save Changes”.

Step 8: Click “pencil” to edit content:

Step 9: Select “Category filter: COMPUTER & ACCESSORIES”.

mobiles

Step 10: Finally, Press “Save Changes”.

Step 11: After editing all contents the following the steps above, please press “Update” button to see the changes.

5MENU SETUP

You must define a menu before you can add items to it.

1. Login to the WordPress Dashboard.

2. From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option to bring up the Menu Editor.

3. Select Create a new menu at the top of the page

4. Enter a name for your new menu in the Menu Name box or select a menu.

5.2 Add Items to a Menu

The Screen Options allow you to choose which items you can use to add to a menu. Click on the Screen Options tab to expand the options available for a particular Screen, check (or unchecked) the desired options, then click the Screen Options hanging tab to collapse the Screen Options.

1. For example, Locate the pane entitled Pages.

2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.

3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.

4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.

5. Click the Save Menu button once you’ve added all the menu items you want. Your custom menu has now been saved.

For more info about the menu creation please go to http://en.support.wordpress.com/menus

5.3 Custom Menu Items

The Navigation Label This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog. The Title Attribute This field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.

1. Click on the arrow in the top right-hand corner of the menu item to expand it.

2. Enter the values for the Navigation Label and Title Attribute that you want to assign to the item.

3. Click the Save Menu button to save your changes.

Click on “Show/Hide Advanced Menu Config” button to configure Mega Menu

It will show as the image below:

1. Advanced Mega menu – With Level 1:

Active mega menu: Allow to activate/inactivate Mega Menu
Icon: Using icon-* class to display Icon for any menu item with Font Awesome intergrated. Refercence Font Awesome for details
Dropdown Size: Set the width of dropdown menu. (ex: min = 1 (= 150px); max = 6 (= 900px)).
Dropdown Align

- Only for menu items level 1 – If you want dropdown (if have) align by right direction, config it to ‘Right’ instead of ‘Left’ or ‘Default’ – ‘Default’: no class be add to dropdown, everything are nature by default css. – ‘Left’ / ‘Right’: add to dropdown an utility class for float it left/ right. Make it align as you want.

Show Description as Subtitle

- Mean as the name. – Description is core attribute of menu item. You may need check to show it in the metabox screen.

Hide Title

- Sometime you need hide the title of menu, select ‘Yes’ value please. In this case, Icon or Subtitle or Advanced Content are need to show as replacer.

Disable Link: Allow to disable link.
Advanced:

- Some advanced functions are placed here. – ‘Default’: NOOP, do nothing. Sure, it is not advanced – ‘Use as Divider’: Show any icon, title, subtitle, content. Divider style only. – ‘Append Advanced Content’: Append content after menu title block (icon+title+subtitle) – ‘Append Advanced Content with Shortcode’: as above, but ‘do_shortcode’ with this before append.

Advanced content: Insert content follow Advanced ( input HTML, image… not included js & css)
Menu Thumbnail: Allow to upload thumbnail for menu

2. Advanced Mega menu – With Level 2:

Dropdown sub size: Set the width of dropdown submenu. (ex: default/ min = 1 (= 150px)/ max = 6 (= 900px)).

6WOOCOMMERCE

SW WooShop Theme is fully compatible with WooCommerce plugin. WooCommerce is external plugin and all info about this awesome plugin you can find plugin’s author page. Below you have all friendly links that will be useful:

6.1 How to install WooCommerce

At first please go to Plugins > Add new section and type “WooCommerce” into search field. Then press “enter”".

After that you will results and what you need to do is click on “Install now” button next to “WooCommerce – excelling eCommerce” plugin.

After that plugin will be installed and please click “Activate plugin” link.

woocommerce

6.2 How to add new product

Go to Products >> Add product section. After that you will see page wich looks like below and all you need to do is fill those fields with own values.

All info about adding new product you can read on http://docs.woothemes.com/document/managing-products/

woocommerce

6.3 Registration Options

You need to show registration form on My Account page, you should check “Enable registration on the “My Account” page” in “Woocommerce > Settings > Products > Accounts” section.

woocommerce

7POST

7.1 Creating/Editing Posts

Step 1 - Navigate to Posts in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field. You can use visual composer or Ya shortcodes elements inside the post.

Step 3 - Select Post Format from the right side.

Step 4 - Add Categories from the right side. To assign it to the post, check the box next to the Category name.

Step 5 - Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

Step 6 - For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 7 - Once you are finished, click Publish or Update to save the post.

Here Is A Screenshot That Shows The Various Areas Of The Post Page Described Above.

create-posts

7.2 Add New Partner

The frontend Appearance:

To Add New Partner, Please make the steps following:

Step 1: In your administrator page, please navigate to Partner >> Add New

Step 2: Please input Title of partner, Partner Detail, Categories Partner, Featured Image.

7.3 Add New Testimonial

The frontend Appearance:

To Add New Partner, Please make the steps following:

Step 1: In your administrator page, please navigate to Testimonial >> Add New

Step 2: Please input Title , Description, Testimonial Options and Featured Image

7.4 Add New Our Team

The frontend Appearance:

To Add New Partner, Please make the steps following:

Step 1: In your administrator page, please navigate to Our Team >> Add New

Step 2: Please input title of Title, Description, Our Team Detail and Featured Image

8WIDGETS

Step 1 - Navigate to Appearance > Widgets to access the list of widgets and widget sections that they can be added to. The left hand side shows all the widgets you can use. The right hand side shows all the different sections you can add widgets to.

Step 2 - Simply drag and drop the widget you want into the widget section you want on the right hand side.

Step 3 - When finished, make sure to click Save in the widget editing box to save the widgets added to your sidebar.

Here Is A Screenshot That Shows The Various Areas Of The Widget Section Described Above.

Below is the description of widgets parameter:

Title – Input Title of widget
Select Menu – Allow to select menu
- Advanced Options – Support 3 options for your advance
  - Widget Style – Style of widget ( container is selection )
- Widget Display – Option select widget display. There are 3 option:
  - All - Widget will display all in theme in the sidebar that’s selected.
  - Except on selected – Allow to choose pages that don’t want to show widget
  - Only on selected – Allow to choose pages that want to show widget
    - Users – Allow to be shown for user pages (login/ not login)
    - General – Check into the checkbox that you want to show the sidebar( blog, archive…)
    - Taxonomy Slugs – Input Taxonomy Slugs of pages that you want to display widget, if have many taxonomies then separate them by “,” mark.
    - Posts type – Input Posts type of pages that you want to display widget, if have many posts type then separate them by “,” mark.
    - Categories ID & Posts ID – ID of Categories or Posts, if have many IDs then separate them by “,” mark.
    - Menu – Allow to choose menu that you want to display widget.

The Frontend Appearance of Footer:

8.2.1 Position Above Footer

1. Text Widget

Please go in “Appearance > Widgets” on admin sidebar.
You should add “Text” widget in the sidebar.
You should configure the fields and save.

Frontend Appearance

Backend Settings

Copy & Paste the code into text editor:

[row]
<div class="col-lg-3 col-md-3">
<div class="socials-wrap">
<ul>
	<li><a href="your_facebook_page_link"><span class="icon-facebook"></span></a></li>
							<li><a href="your_twitter_page_link"><span class="icon-twitter"></span></a></li>
							<li><a class="icon-google-plus show_google" title="Google+" href="your_plus_google_page_link" target="_blank" data-icon="g"></a></li>

					<li><a class="icon-pinterest show_pinterest" title="Pinterest" href="#" target="_blank" data-icon="&amp;"></a></li>

					<li><a class="icon-linkedin show_linkedin" title="Linkedin" href="#" target="_blank" data-icon="i"></a></li>

	</ul>
</div>    
</div>
<div class="col-lg-9 col-md-9">
					<div class="block-subscribe-footer">
	<div class="title-block">
		<h2>SIGN UP FOR OUR NEWSLETTER </h2>
		<p>Duis at ante non massa consectetur iaculis id non tellus</p>
	</div>

	<div class="block-content">
		[contact-form-7 id="497" title="newsletter"]
	</div>
</div>
</div>
[/row]

8.2.2 Position Footer

1. Text Widget

Please go in “Appearance > Widgets” on admin sidebar.
You should add “Text” widget in the sidebar.
You should configure the fields and save.

Frontend Appearance

Backend Settings

Copy & Paste the code into text editor:

<div class="content-block-footer">
<h2 class="footer-logo"><img alt="Madison Island" src="[bloginfo show="wpurl" filter="raw"]/wp-content/themes/sw_wooshop/assets/img/[colorset]/logo-footer.png"><span style="display:none;">Madison Island</span></h2>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>					</div>

2. Custom Menu: MY ACCOUNT

Please go in “Appearance > Widgets” on admin sidebar.
You should add “Custom Menu” widget in the sidebar.
You should configure the fields and save.

Frontend Appearance

Backend Settings

3. Custom Menu: INFORMATION

Please go in “Appearance > Widgets” on admin sidebar.
You should add “Custom Menu” widget in the sidebar.
You should configure the fields and save.

Frontend Appearance

Backend Settings

4. Text: CONTACT US

Please go in “Appearance > Widgets” on admin sidebar.
You should add “Text” widget in the sidebar.
You should configure the fields and save.

Frontend Appearance

Backend Settings

Copy & Paste the code into text editor:

<ul class="contact-us">
<li><span class="sp-ic icon-home" style="font-size: 16px; position: relative; top: 1px;">&nbsp;</span>8901 Marmora Road, Glasgow, D04 89GR</li>
<li style="margin-top: -4px;"><span class="sp-ic icon-mobile-phone" style="font-size: 22px; position: relative; top: 4px;">&nbsp;</span>Telephone: <a title="Call:(801) 2345 - 6789" href="tel:+84123456789">(801) 2345 - 6789</a></li>
<li><span class="sp-ic icon-envelope" style="font-size: 13px; position: relative;">&nbsp;</span>E-mail: <a title="support@wooshop.com" href="mailto:name@email.com">support@wooshop.com</a></li>
</ul>
<ul class="payment-method">
<li><a title="Payment Method" href="#"><img src="yourdomainname.com" alt="Payment"></a></li>
<li><a title="Payment Method" href="#"><img src="yourdomainname.com" alt="Payment"></a></li>
<li><a title="Payment Method" href="#"><img src="yourdomainname.com" alt="Payment"></a></li>
<li><a title="Payment Method" href="#"><img src="yourdomainname.com" alt="Payment"></a></li>
<li><a title="Payment Method" href="#"><img src="yourdomainname.com" alt="Payment"></a></li>
</ul>

9WPML

WPML is the most popular plugin for multi language support, our theme is fully compatible with WPML. Below you will find documentation their team created for using WPML plugin with this theme. If you’ve purchased WPML and have any questions or issues, please check the links below.

WPML Plugin- The highly recommended plugin to manage multi-lingual sites.
WPML Forum Support - If you bought WPML then you get free support from their amazing team.
Translating Widgets – Tutorial recommended by wpml team for translating widgets

Please Click Here To Purchase WPML Plugin!

10OTHER

SUPPORT – If you have any questions that are beyond the scope of this help file, please send us via: Support Tickets System
FAQs – Go to Here to view more the Frequently Asked Questions.

↧

SM Matrix

September 14, 2015, 9:40 pm

≫ Next: SM Instagram Gallery

≪ Previous: SW WooShop

View demo More detail

This guide will help you install SM Matrix 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 and 1.9.x ( latest version 1.9.2.0 ) (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION – Back to top

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation (include of Theme Installation).

2.1 Quickstart Installation :

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. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Do not use “localhost” in URL, otherwise you could not log in to your Admin area (you should use your local IP in case of installing on your computer).
- Leave Tables prefix field blank.

Step 7: Create Admin Account. Please fill fully into Required Fields (“First Name; Last Name; Email; Username; password and confirm password”.)

Step 8: Finish Installation and now you can Go to Frontend or Go to Backend.

2.2 Manual Installation

Step 1: Extract “sm_atom_theme.zip” file and Copy folders skin; app; media, lib to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/). Log out and log in back.
Step 3: Navigate to System >> Cache Management, Sellect All the cache types, take Action as Refresh and Submit.
Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header .

Step 7: You can also change the settings for Footer .

2.3 Theme Setting

Configure SM Matrix General Setting Theme In Magento admin panel, navigate to SM Matrix Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab), Layout Group 1,2,3,4,5,6 to configure
Configure theProduct Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns, Product Shows Effect On Hover, etc..
Configure theProduct Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc..
Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Insatallation

: To import Static blocks data and Pages data, users don’t need navigate co CMS and create one static block or page step by step.

Note:To “Theme Installation”, pay attention that after clicking“Import Static Block” or “Import Pages”, the below notification will appear to announce that you import data successfully.

However, you have to come back CMS >> Static Block ( or Pages) to configure and select Store View for each Block or Page.

Configure Extensions In SM Matrix Setting area, below the General and Catalog fields, navigate toMagentech.com field in the left hand column to configure extensions as you want.

SM Quickview Module
SM Shop By Module
SM Search Box Pro Module
SM Cart Pro Module
SM Facebook Module
SM Categories
SM Basic Products
SM Deal
SM Listing Tabs
SM Camera Slide
SM Megamenu
SM Super Categories
SM Matrix Setting

3CONFIGURATION – Back to top

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Here are list of configuration process for this style:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
         <block type="megamenu/list" name="megamenu.list.theme.content" as="megaMenuLeft" template="sm/megamenu/megamenu-left.phtml">
		<action method="setConfig">
			<values>
                                <title>CATEGORIES</title>  
			        <group_id>3</group_id>
				<theme>2</theme>
			</values>
		</action>
	</block>

</reference>

<reference name="group1_col2">

        <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>

</reference>

<reference name="group1_col3">
         <block type="cms/block" name="service_top">
	        <action method="setBlockId"><block_id>service-home</block_id></action>
         </block>
</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">
         <block type="deal/list" name="deal.list.default" template="sm/deal/deal-slider.phtml"></block>

         <block type="cms/block" name="static-image-1">
	        <action method="setBlockId"><block_id>static-image-1</block_id></action>
         </block>

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

<reference name="group2_col2">

	<block type="cms/block" name="product-sidebar">
		<action method="setBlockId"><block_id>product-sidebar</block_id></action>
	</block>

         <block type="cms/block" name="testimonial">
	        <action method="setBlockId"><block_id>slider-testimonials</block_id></action>
         </block>

         <block type="cms/block" name="tab-rating-random">
	        <action method="setBlockId"><block_id>tab-rating-random</block_id></action>
         </block>

         <block type="cms/block" name="static-image-2">
	        <action method="setBlockId"><block_id>static-image-2</block_id></action>
         </block>
</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">
         <block type="cms/block" name="brand-slider">
	        <action method="setBlockId"><block_id>brand-slider</block_id></action>
         </block>
</reference>

<reference name="group3_col2">

</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">
         <block type="blog/menu_sidebar" name="latest_post">
                <action method="setTemplate" >
                    <template>aw_blog/latest_post.phtml</template>
                </action>
            </block>
</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">

</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">

</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

<reference name="footer_mastop">

         <block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribes.phtml"/>
</reference>

3.1.2 Homepage Style 2

Frontend of Homepage-2 Layout Position

To configure this Homepage Style 2, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Including 3 tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
         <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col2">

</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">

         <block type="cms/block" name="static-image-homepage2-1">
	        <action method="setBlockId"><block_id>static-image-homepage2-1</block_id></action>
         </block>

</reference>

<reference name="group2_col2">

	<block type="cms/block" name="product-sidebar">
		<action method="setBlockId"><block_id>product-sidebar</block_id></action>
	</block>

         <block type="cms/block" name="testimonial">
	        <action method="setBlockId"><block_id>slider-testimonials</block_id></action>
         </block>

         <block type="cms/block" name="tab-rating-random">
	        <action method="setBlockId"><block_id>tab-rating-random</block_id></action>
         </block>

</reference>

<reference name="group2_col3">

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

         <block type="cms/block" name="static-image-homepage2-2">
	        <action method="setBlockId"><block_id>static-image-homepage2-2</block_id></action>
         </block>

	<block type="basicproducts/list" name="basicproducts.slide.grid" template="sm/basicproducts/product-slide-grid.phtml">
        <action method="_setConfig">
			<values>
				<product_limitation>10</product_limitation>
				<basicproducts_title_text>NEW ARRIVALS</basicproducts_title_text>
				<product_order_dir>ASC</product_order_dir>
				<product_order_by>lastest_product</product_order_by>
				<product_title_maxlength>50</product_title_maxlength>
				<nb_column1>3</nb_column1>
				<nb_column2>2</nb_column2>
				<nb_column3>2</nb_column3>
				<nb_column4>1</nb_column4>
				<product_title_display>1</product_title_display>
				<product_price_display>1</product_price_display>
				<product_reviews_count>1</product_reviews_count>
				<product_addcart_display>1</product_addcart_display>
				<product_addwishlist_display>1</product_addwishlist_display>
				<product_addcompare_display>1</product_addcompare_display>
				<product_readmore_display>0</product_readmore_display>
				<product_description_display>0</product_description_display>
			</values>
        </action>  
	</block>

	<block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribes-index2.phtml"/>

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">

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

</reference>

<reference name="group3_col2">

</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">
         <block type="blog/menu_sidebar" name="latest_post_slide">
                <action method="setTemplate" >
                    <template>aw_blog/latest_post_index2.phtml</template>
                </action>
            </block>
</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">

</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">

</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

<reference name="footer_mastop">

         <block type="cms/block" name="brand-slider">
	        <action method="setBlockId"><block_id>brand-slider</block_id></action>
         </block>

</reference>

3.1.3 Homepage Style 3

Frontend of Homepage-3 Layout Position

Similarly to Homepage style 2, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">

        <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>

</reference>

<reference name="group1_col2">

         <block type="cms/block" name="static-image-homepage3-1">
	        <action method="setBlockId"><block_id>static-image-homepage3-1</block_id></action>
         </block>

</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">

         <block type="megamenu/list" name="megamenu.list.theme.content" as="megaMenuLeft" template="sm/megamenu/megamenu-left.phtml">
		<action method="setConfig">
			<values>
                                <title>CATEGORIES</title>  
			        <group_id>3</group_id>
				<theme>2</theme>
			</values>
		</action>
	</block>

         <block type="cms/block" name="tab-rating-random-index3">
	        <action method="setBlockId"><block_id>tab-rating-random-index3</block_id></action>
         </block>

         <block type="cms/block" name="static-image-homepage3-3">
	        <action method="setBlockId"><block_id>static-image-homepage3-3</block_id></action>
         </block>

         <block type="cms/block" name="slider-testimonials-home3">
	        <action method="setBlockId"><block_id>slider-testimonials-home3</block_id></action>
         </block>

	<block type="cms/block" name="product-sidebar">
		<action method="setBlockId"><block_id>product-sidebar</block_id></action>
	</block>

			<block type="cms/block" after="tab-related-upsell" name="image-sidebar-view">
				<action method="setBlockId"><block_id>image-static-sidebar-view</block_id></action>
			</block>

</reference>

<reference name="group2_col2">

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

         <block type="cms/block" name="static-image-homepage3-2">
	        <action method="setBlockId"><block_id>static-image-homepage3-2</block_id></action>
         </block>

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

         <block type="cms/block" name="static-image-homepage3-4">
	        <action method="setBlockId"><block_id>static-image-homepage3-4</block_id></action>
         </block>

<block type="supercategories/list" name="supercategories.list.default.computer" template="sm/supercategories/default.phtml">
                 <action method="_setConfig">
			<values>
				<product_category>89</product_category>
			</values>
                 </action>  
	</block>

         <block type="cms/block" name="static-image-homepage3-5">
	        <action method="setBlockId"><block_id>static-image-homepage3-5</block_id></action>
         </block>

         <block type="cms/block" name="box-3columns-index3">
	        <action method="setBlockId"><block_id>box-3columns-index3</block_id></action>
         </block>

</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">

</reference>

<reference name="group3_col2">

</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">
         <block type="blog/menu_sidebar" name="latest_post_slide">
                <action method="setTemplate" >
                    <template>aw_blog/latest_post_index2.phtml</template>
                </action>
            </block>
</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">

</reference>

<reference name="group5_col2">

</reference>

<reference name="group5_col3">

</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">

</reference>

<reference name="group6_col2">

</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

<reference name="footer_mastop">

         <block type="cms/block" name="brand-slider">
	        <action method="setBlockId"><block_id>brand-slider</block_id></action>
         </block>

</reference>

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” – have id 1 and “Group – Vertical” – have id 3), Two id will be shown in Configuration of SM Mega Menu.

Step 2: Navigate to SM Mega Menu >> Configuration & fill the id number for two above groups in step 1

Step 3: In order to add menu items, Go to SM Mega Menu >> Menu items Manager to add items as you want.

3.2.1 With Horizontal Mega Menu:

Horizontal-mega-menu
Featured Menu
Frontend Appearance

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

Electronic Menu

Frontend Appearance
Tree of Electronic Menu:

Backend Settings of Electronic Menu

Note:Electronic Menu: To config this page, please navigate to SM Matrix setting >> SM Mega Menu >> Menu Items Manager

Item: “Colum 1″– Menu Backend Settings

Item: “HealthCare Devices”– Menu Backend Settings

Item: “Colum 2″– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="product-megamenu">
{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/product-menu.phtml" 
nb_column1="2"
product_limitation="2"
imgcfg_width="270"
imgcfg_height="270"
}}
</div>

Mobiles Menu

Frontend Appearance
Tree of Mobiles Menu:

Note: Mobiles Menu: To config this page, please navigate to SM Matrix setting >> SM Mega Menu >> Menu Items Manager

Backend Settings of Mobiles Menu

Item: “Simple Product”– Menu Backend Settings

Laptop Menu

Frontend Appearance
Tree of Laptop Menu:

Backend Settings of Laptop Menu

Note:Laptop Menu: To config this page, please navigate to SM Matrix setting >> SM Mega Menu >> Menu Items Manager

Item: “Colum1″– Menu Backend Settings

Item: “Beauty & Health”– Menu Backend Settings

Item: “Mind & Body”– Menu Backend Settings

Item: “Colum3″– Menu Backend Settings

About Us Menu

Frontend Appearance
Tree of About Us Menu:

Backend Settings of About Us Menu

Note:About Us Menu: To config this page, please navigate to SM Matrix setting >> SM Mega Menu >> Menu Items Manager

Item: “About Us Style Demo”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="drop-content">
<div class="item">
<a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&amp;___from_store=argentina"}}">About Us Style 1</a>
</div>
<div class="item">
<a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&amp;___from_store=default"}}">About Us Style 2</a>
</div>
<div class="item">
<a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&amp;___from_store=default"}}">About Us Style 3</a>
</div>
<div class="item">
<a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&amp;___from_store=default"}}">About Us Style 4</a>
</div>
</div>

Contact Us Menu

Frontend Appearance
Tree of Contact Us Menu:

Backend Settings of Contact Us Menu

Note:Contact Us Menu: To config this page, please navigate to SM Matrix setting >> SM Mega Menu >> Menu Items Manager

Item: “Contact Style Demo”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="drop-content">
	<div class="item">
		<a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&amp;___from_store=argentina"}}">Contact Us Style 1</a>
	</div>
	<div class="item">
		<a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&amp;___from_store=default"}}">Contact Us Style 2</a>
	</div>
	<div class="item">
		<a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&amp;___from_store=default"}}">Contact Us Style 3</a>
	</div>
	<div class="item">
		<a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&amp;___from_store=default"}}">Contact Us Style 4</a>
	</div>
</div>

3.2.2 With Vertical Mega Menu ( In The Homepage 1)

Vertical Mega menu includes 10 items:

Electronics
Laptop
Apparel
Auto & Bike
Home & Kitchens
Beauty & Health
Fashion & Accesories
Sport & Fitness
Outdoor adventure
Support

Frontend Appearance

Backend Appearance

Electronics
Frontend Appearance

Tree of Electronics:

Backend Settings of Electronics

Note: To configure these sub-items inside this category, we do as following tasks:

Item: “Column 1″– Menu Backend Settings
Item: “Column 1 1″– Menu Backend Settings
Item: “Style”– Menu Backend Settings
Item: “Static Image”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="static-bottom-menu">
<a href="#" title="Static Image"><img src="{{media url="wysiwyg/image-cat/image-megamenu.jpg"}}" alt="Static Image" /></a>
</div>

Laptop
Frontend Appearance

Tree of Laptop:

Backend Settings of Laptop

Item: “Asus”– Menu Backend Settings

Auto & Bike
Frontend Appearance

Tree of Auto & Bike:

Backend Settings of Auto & Bike

Note: To configure these sub-items inside this category, we do as following tasks:

Item: “Column 1″– Menu Backend Settings
Item: “Style”– Menu Backend Settings
Item: “Image”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="cat-image">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-cat/img-cart-item.jpg"}}" alt="Static Image" /></a>
</div>

Other items in vertical menu are configured the same as above items.

3.3 Configure Extensions

The SM Matrix front-page has been integrated with extensions in the Theme as following list:

I. SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

II. SM Mega Menu

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu: Click Here
Go Here to readmore about the SM Mega Menu module.

III. SM Mega Menu 2

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu: Click Here
Go Here to readmore about the SM Mega Menu module.

IV. SM Camera Slide

Position: SM Camera Slide
Frontend Appearance

Backend of SM Camera Slide: Click Here
Go Here to readmore about the SM Camera Slide module.

V. SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Go Here to readmore about the SM Deal module.

VI. SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here
Go Here to readmore about the SM Basic Products module.

VII. SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of Listing Tabs : Click Here
Go Here to readmore about the SM Listing Tabs module.

3.4 Configure Static Blocks

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

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

1. Static-Service-Home

To create static blocks, go to CMS >> Static Blocks with Identifier * : “service-home”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Service-Home:

<div class="service-block">
	<ul class="list-service">
		<li>
			<div class="border-eff">
				<div class="inner">
					<div class="icon">
						<a href="#" title="Unique Design"><img src="{{media url="wysiwyg/home-page-image/service1.jpg"}}" alt="" /></a>
					</div>
					<div class="info">
						<p class="title"><a href="#">UNIQUE DESIGN</a></p>
						<p class="desc">Praesent non tempus lorem</p>
					</div>
				</div>
			</div>
		</li>

		<li>
			<div class="border-eff">
				<div class="inner">
					<div class="icon">
						<a href="#" title="Free Shipping"><img src="{{media url="wysiwyg/home-page-image/service2.jpg"}}" alt="" /></a>
					</div>
					<div class="info">
						<p class="title"><a href="#">Free Shipping</a></p>
						<p class="desc">Praesent non tempus lorem</p>
					</div>
				</div>
			</div>
		</li>

		<li>
			<div class="border-eff">
				<div class="inner">
					<div class="icon">
						<a href="#" title="Free Shipping"><img src="{{media url="wysiwyg/home-page-image/service3.jpg"}}" alt="" /></a>
					</div>
					<div class="info">
						<p class="title"><a href="#">Free Shipping</a></p>
						<p class="desc">Praesent non tempus lorem</p>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>

2. Static-Image-1

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “image-1″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Image-1:

<div class="static-image static-image-1">
	<div class="list-image-static list-3columns">
		<div class="image-column-1">
			<div class="border-eff">
				<div class="inner">
					<a href="#" title="Static Image">
						<img src="{{media url="wysiwyg/home-page-image/static-image-home-1.jpg"}}" alt="" />
					</a>
				</div>
			</div>
		</div>

		<div class="image-column-2">
			<div class="border-eff">
				<div class="inner">
					<a href="#" title="Static Image">
						<img src="{{media url="wysiwyg/home-page-image/static-image-home-2.jpg"}}" alt="" />
					</a>
				</div>
			</div>
			<div class="border-eff">
				<div class="inner">
					<a href="#" title="Static Image">
						<img src="{{media url="wysiwyg/home-page-image/static-image-home-3.jpg"}}" alt="" />
					</a>
				</div>
			</div>
		</div>

		<div class="image-column-3">
			<div class="border-eff">
				<div class="inner">
					<a href="#" title="Static Image">
						<img src="{{media url="wysiwyg/home-page-image/static-image-home-4.jpg"}}" alt="" />
					</a>
				</div>
			</div>
		</div>		
	</div>
</div>

3. Static-Slider-testimoials

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “slider-testimoials”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Slider-testimoials:

<div class="overflow-slider testimonials">
	<div class="title-home">
		<h2>Testimonials</h2>
	</div>

	<div class="margin-slider">
		<ul class="testimonials-slider">
			<li class="item">
				<div class="client-child client-left">
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/clien1.jpg"}}" alt="Venus" />
					</div>

					<div class="comment">
						"Suspendisse fringilla tincidunt on laoreet. Fusce dignissim diam at dictum vulputate. Nulla ac lorem enim."
					</div>

					<div class="info-client">
						<h2 class="client-name">Interaction Designer</h2>
					</div>
				</div>
			</li>
			<li class="item">
				<div class="client-child client-left">
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/clien2.jpg"}}" alt="Venus" />
					</div>

					<div class="comment">
						"Suspendisse fringilla tincidunt on laoreet. Fusce dignissim diam at dictum vulputate. Nulla ac lorem enim."
					</div>

					<div class="info-client">
						<h2 class="client-name">Interaction Designer</h2>
					</div>
				</div>
			</li>
			<li class="item">
				<div class="client-child client-left">
					<div class="image-client">
						<img src="{{media url="wysiwyg/testimonial/clien3.jpg"}}" alt="Venus" />
					</div>

					<div class="comment">
						"Suspendisse fringilla tincidunt on laoreet. Fusce dignissim diam at dictum vulputate. Nulla ac lorem enim."
					</div>

					<div class="info-client">
						<h2 class="client-name">Interaction Designer</h2>
					</div>
				</div>
			</li>
		</ul>
	</div>

	<script>
		jQuery(document).ready(function($) {
			var owl_testimonial = $(".testimonials-slider");
			owl_testimonial.owlCarousel({
				responsive:{
					0:{
						items:1
					},
					480:{
						items:1
					},
					768:{
						items:1
					},
					992:{
						items:1
					},
					1200:{
						items:1
					}
				},

				autoplay:false,
				loop:true,
				nav : true, // Show next and prev buttons
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:30,
			});
		});

	</script>
</div>

4. Static-Tab-Rating-Random

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “tab-rating-random”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Tab-Rating-Random:

<div class="block block-tab tab-rating-random">
	<ul class="nav nav-tabs" id="tab_rating_random">
		<li class="active"><a href="#rating">Top Rating</a></li>
		<li><a href="#random">Random</a></li>
	</ul>

	<div class="tab-content">
		<div id="rating" class="tab-pane fade in active">
{{block type="basicproducts/list" name="basicproducts.list.tab.rating" template="sm/basicproducts/basic-product-list.phtml" 
			product_limitation="3"
			product_order_dir="ASC"
			product_order_by="top_rating"
			product_title_maxlength="50"
			product_title_display="1"
			product_price_display="1"
			product_reviews_count="1"
			imgcfg_width="77"
			imgcfg_height="77"
			product_addwishlist_display="0"
			product_addcompare_display="0"
			product_readmore_display="0"
			product_description_display="0"
			product_addcart_display="0"
			product_addwishlist_display="0"
			product_addcompare_display="0"
}}
		</div>
		<div id="random" class="tab-pane fade">
{{block type="basicproducts/list" name="basicproducts.list.tab.random" template="sm/basicproducts/basic-product-list.phtml" 
			product_limitation="3"
			product_order_dir="ASC"
			product_order_by="random"
			product_title_maxlength="50"
			product_title_display="1"
			product_price_display="1"
			product_reviews_count="1"
			imgcfg_width="77"
			imgcfg_height="77"
			product_addwishlist_display="0"
			product_addcompare_display="0"
			product_readmore_display="0"
			product_description_display="0"
			product_addcart_display="0"
			product_addwishlist_display="0"
			product_addcompare_display="0"		 
}}
		</div>
	</div>
</div>

5. Static-image-2

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-image-2″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-image-2:

<div class="static-image static-image-2">
	<div class="border-eff">
		<div class="inner">
			<a href="#" title="Static Image">
				<img src="{{media url="wysiwyg/home-page-image/static-image-home-5.jpg"}}" alt="" />
			</a>
		</div>
	</div>
</div>

6. Static-Brand-slider

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-brand-slider”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Brand-slider:

<div class="block-brand">

	<div class="brand-slider">
		<div class="item">
			<div class="border-eff">
				<div class="inner">
					<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.png"}}" alt="Brand" /></a></div>
				</div>
			</div>
		</div>

		<div class="item">
			<div class="border-eff">
				<div class="inner">
					<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.png"}}" alt="Brand" /></a></div>
				</div>
			</div>
		</div>

		<div class="item">
			<div class="border-eff">
				<div class="inner">
					<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.png"}}" alt="Brand" /></a></div>
				</div>
			</div>
		</div>

		<div class="item">
			<div class="border-eff">
				<div class="inner">
					<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.png"}}" alt="Brand" /></a></div>
				</div>
			</div>
		</div>

		<div class="item">
			<div class="border-eff">
				<div class="inner">
					<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.png"}}" alt="Brand" /></a></div>
				</div>
			</div>
		</div>

	</div>
</div>

<script>
	jQuery(document).ready(function($) {
		var owl_slidebrand = $(".brand-slider");
		owl_slidebrand.owlCarousel({

			responsive:{
				0:{
					items:2
				},
				480:{
					items:3
				},
				768:{
					items:3
				},
				992:{
					items:4
				},
				1200:{
					items:5
				}
			},

			autoplay:false,
			loop:true,
			nav : true, // Show next and prev buttons
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:0,

		});
	});

</script>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-about”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Footer-about:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates sunt eligendi deserunt vitae magnam necessitatibus rem laudantium iusto corporis commodi veniam inventore libero, porro! Tempora, modi molestiae neque!

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-contact-us”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Footer-contact-us:

<div class="footer-block-title">
									<h2>Contact</h2>
								</div>

								<div class="footer-block-content">
									<ul>
										<li><i class="fa fa-envelope"></i><span class="label-footer">Email</span><a href="mailto:name@email.com" title="Mail to: hr@atomshop.com">hr@me.com</a></li>
										<li><i class="fa fa-phone"></i>
<span class="label-footer">Phone</span>  <a href="tel:+842800011800" title="Telephone">02 8000 11 800</a></li>
										<li><i class="fa fa-home"></i>
<span class="label-footer">Address</span>199 King Street, Melbourne Victoria 3000 Australia</li>
									</ul>
								</div>
<div class="more-contact"><a href="{{config path="web/unsecure/base_url"}}contact-us.html">Contact Us<i class="fa fa-angle-right"></i>
</a></div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-information”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Footer-information:

<div class="footer-block-title">
									<h2>Information</h2>
								</div>

								<div class="footer-block-content">
									<ul>
										<li><a href="{{config path="web/unsecure/base_url"}}about-us.html" title="About us">About us</a></li>
										<li><a href="{{config path="web/unsecure/base_url"}}contact-us.html" title="Contact us">Contact us</a></li>
										<li><a href="#" title="Delivery">Delivery</a></li>
										<li><a href="#" title="Information">Information</a></li>
										<li><a href="#" title="Privacy">Privacy</a></li>
										<li><a href="#" title="Policy">Policy</a></li>
										<li><a href="#" title="Terms & conditions">Terms & conditions</a></li>
										<li><a href="#" title="Site map">Site map</a></li>
									</ul>
								</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-payment”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Footer-payment:

<ul>
									<li><img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /></li>
								</ul>

3.5 How To Edit Copyright in admin

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Matrix Setting Module to configure the “Custom Copyright” parameter as image below:

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

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Matrix Setting Module to configure the “Social style” parameter as image below:

4SUPPORT – 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 a bunch!

↧

SM Instagram Gallery

August 6, 2015, 1:49 am

≫ Next: How To Set a product To ‘On Sale’ in PrestaShop 1.6

≪ Previous: SM Matrix

View demo More detail

This guide will help you install SM Instagram step by step.
When you buy the module the first time, you will have the latest version.

1REQUIREMENT – Back to top

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

Compatible with Magento 1.9.x ( the latest version 1.9.2.0 ).

2INSTALLATION – Back to top

Extension Installation

There are two ways to install extension:

Step 1: Download and unzip extension contents on your computer and navigate inside the extracted folder.
Step 2: 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 3: Log into your Admin Panel on the stage localhost: http://localhost/magento/index.php/admin/.

OR you also install the steps as following:

Step 1: In the Administrator page, Navigate to System >> Magento Connect >> Magento Connect Management

Step 2: Click Browse and Upload package file

Important Note:

After installing extension, you should logout first and then login Admin Panel to ensure all functions work normally.
You should disable all caches in cache management in the installation and configuration process.

3EXTENSION CONFIGURATION – Back to top

3.1 Below is module layout

3.2 Module Configuration

Notes: We used the images of module’s installation on Magento 1.9.x to illustrate

In the Administrator Page, navigate to System -> Configuration and find SM Instagram Gallery (in the left hand column) to configure.
The parameters are divided into the following groups:

General settings
Configure number column for Devices

Let’s look at the parameters in detail:

General settings

Enable/Disable – Choose to publish/unpublished the module parameter.
Title – Fill in the Title of Module.
Instagram Users – When you access the link: http://www.pinceladasdaweb.com.br/instagram/access-token/ , after that you fill your Use Name/ Password of your Instagram Account , you will receive Instagram User and Access Token.
Access Token – Set access token as Instagram User above.
Limit Image – Set the limitation of image quantity in the module

Configure number column for Devices

To the different screen of devices, the displaying column number of this module on front-end area will be set based on dimension of screen:

For devices have screen width from 1200px up to greater.
For devices have screen width from 992px up to 1199px.
For devices have screen width from 768px up to 991px.
For devices have screen width less than or equal 767px.

4PAGE CONFIGURATION – Back to top

To display this module on front page, go to CMS >> Pages.

Create a new page in Page Management section, then edit as the following instruction:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

<div style="width: 100%; overflow: hidden; margin: 0px auto; text-align: left;">
<h3><span style="font-size: xx-large; color: #ff6600;">SM Instagram Gallery</span></h3>
</div>

Design Tab: Please click to see the Backend Settings .

Copy and paste the following code into the Design field:

<reference name="content">
<block type="instagramgallery/instagramusers_viewlist" name="instagramgallery" as="instagramgallery">
</block>
</reference>

5SUPPORT – Back to top

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

Thanks so much!

↧

How To Set a product To ‘On Sale’ in PrestaShop 1.6

September 16, 2015, 7:24 pm

≫ Next: SM Restaurant

≪ Previous: SM Instagram Gallery

Setting an item to an On Sale status in PrestaShop is relatively easy. It is done on an individual basis, meaning there is not a way to set multiple products on sale at the same time. Follow these instructions to learn how.

Step 1 – Log into your PrestaShop 1.6 admin interface.

Step 2 – Click on the Catalog link from the left hand menu and then click on the Product option.

Step 3 – From the main Product list page, find the product you want to place on sale and click on the Edit option on the right side of the product row.

Step 4 – Look to the tabs on the left and click on the Prices tab.

Step 5 – From the Prices data tab, look for a checkbox with the description “Display the ‘on sale’ icon on the product page, and in the text found within the product listing.” Click on the checkbox to activate the ‘On Sale‘ status.

Step 6 – Click on the Save and Stay button in the Product Price section.

Step 7 – Next, look to the lower section titled Specific Prices to set the details of the sale. There are different options here, but for our example, we allow the discount to apply to all customers. We decided to allow a 10% discount.

Step 8 – Click on the Save button in the lower right corner of the section.

↧

SM Restaurant

September 21, 2015, 1:32 am

≫ Next: SP Mega Menu

≪ Previous: How To Set a product To ‘On Sale’ in PrestaShop 1.6

View demo More detail

This guide will help you install SM Restaurant 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 and 1.9.x ( latest version 1.9.2.0 ) (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION – Back to top

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation (include of Theme Installation).

2.1 Quickstart Installation :

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. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Do not use “localhost” in URL, otherwise you could not log in to your Admin area (you should use your local IP in case of installing on your computer).
- Leave Tables prefix field blank.

Step 7: Create Admin Account. Please fill fully into Required Fields (“First Name; Last Name; Email; Username; password and confirm password”.)

Step 8: Finish Installation and now you can Go to Frontend or Go to Backend.

2.2 Manual Installation

Step 1: Extract “sm_atom_theme.zip” file and Copy folders skin; app; media, lib to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/). Log out and log in back.
Step 3: Navigate to System >> Cache Management, Sellect All the cache types, take Action as Refresh and Submit.
Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header .

Step 7: You can also change the settings for Footer .

2.3 Theme Setting

Configure SM Restaurant General Setting Theme In Magento admin panel, navigate to SM Restaurant Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab), Layout Group 1,2,3,4,5,6 to configure
Configure theProduct Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns, Product Shows Effect On Hover, etc..
Configure theProduct Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc..
Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Insatallation

: To import Static blocks data and Pages data, users don’t need navigate co CMS and create one static block or page step by step.

Note:To “Theme Installation”, pay attention that after clicking“Import Static Block” or “Import Pages”, the below notification will appear to announce that you import data successfully.

However, you have to come back CMS >> Static Block ( or Pages) to configure and select Store View for each Block or Page.

Configure Extensions In SM Restaurant Setting area, below the General and Catalog fields, navigate toMagentech.com field in the left hand column to configure extensions as you want.

SM Shop By Module
SM Quickview Module
SM Cart Pro Module
SM Facebook Module
SM Categories
SM Deal
SM Basic Products
SM Listing Tabs
SM Restaurant Setting
SM Megamenu
SM Camera Slide
SM Instagram Gallery

3CONFIGURATION – Back to top

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Here are list of configuration process for this style:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
         <block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml" />
<block type="cameraslide/slide_preview" name="camera.slider1" />
</reference>

<reference name="group1_col2">
        <block type="cms/block" name="banner-homepage1">
	        <action method="setBlockId"><block_id>banner-homepage1</block_id></action>
         </block>
</reference>
<reference name="group1_col3">
        <block type="cameraslide/slide_preview" name="camera.slider1" id="1" />
</reference>

<!--GROUP 2-->
<reference name="group2_col1">
       <block type="cms/block" name="history-slider">
	        <action method="setBlockId"><block_id>history-slider</block_id></action>
         </block>
</reference>

<!--GROUP 3-->
<reference name="group3_col1">
 <block type="deal/list" name="deal.list.default" template="sm/deal/deal-slider.phtml"></block>
</reference>

<!--GROUP 4-->
<reference name="group4_col1">
        <block type="cms/block" name="testimonial">
	        <action method="setBlockId"><block_id>slider-testimonials</block_id></action>
         </block>
</reference>

<!--GROUP 5-->
<reference name="group5_col1">
        <block type="blog/menu_sidebar" name="latest_post">
                <action method="setTemplate" >
                    <template>aw_blog/latest_post.phtml</template>
                </action>
            </block>
</reference>

<!--GROUP 6-->

Tree of Homepage1

Item: “Our Menu”– Menu Backend Settings

Other items in Homepage1 are configured the same as above items.

3.1.2 Homepage Style 2

Frontend of Homepage-2 Layout Position

To configure this Homepage Style 2, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Including 3 tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
        <block type="core/text_list" name="camera-slide" as="camera-slide" translate="label">
                <label>SM Camera slide</label>
       </block>
</reference>

<reference name="group1_col2">
      <block type="cms/block" name="service-top">
	        <action method="setBlockId"><block_id>service-top-index2</block_id></action>
         </block>
</reference>

<reference name="group1_col3">

</reference>

<reference name="group1_col4">

</reference>

<reference name="group1_col5">

</reference>

<reference name="group1_col6">

</reference>

<!--GROUP 2-->
<reference name="group2_col1">
     <block type="deal/list" name="deal.list.default" template="sm/deal/deal-slider.phtml" />   
</reference>

<reference name="group2_col2">
  <block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribes-content.phtml"/>
</reference>

<reference name="group2_col3">

</reference>

<reference name="group2_col4">

</reference>

<reference name="group2_col5">

</reference>

<reference name="group2_col6">

</reference>

<!--GROUP 3-->
<reference name="group3_col1">
         <block type="listingtabs/list" name="listingtabs_list_default_1" template="sm/listingtabs/default.phtml"></block>
</reference>

<reference name="group3_col2">
       <block type="cms/block" name="banner-homepage1">
         <action method="setBlockId"><block_id>banner-homepage1</block_id></action>
    </block>
</reference>

<reference name="group3_col3">

</reference>

<reference name="group3_col4">

</reference>

<reference name="group3_col5">

</reference>

<reference name="group3_col6">

</reference>

<!--GROUP 4-->
<reference name="group4_col1">

</reference>

<reference name="group4_col2">

</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">

</reference>

<reference name="group4_col5">

</reference>

<reference name="group4_col6">

</reference>

<!--GROUP 5-->
<reference name="group5_col1">
	<block type="blog/menu_sidebar" name="latest_post_index3">
        <action method="setTemplate" >
            <template>aw_blog/latest_post_index3.phtml</template>
        </action>
    </block>	
</reference>

<reference name="group5_col2">
	<block type="cms/block" name="testimonial-comlumn">
	    <action method="setBlockId"><block_id>testimonial-comlumn</block_id></action>
    </block>
</reference>

<reference name="group5_col3">
<block type="facebook/list" name="facebook.list.default" template="sm/facebook/default.phtml"></block>
</reference>

<reference name="group5_col4">

</reference>

<reference name="group5_col5">

</reference>

<reference name="group5_col6">

</reference>

<reference name="group6_col1">
 <block type="cms/block" name="our-brands">
	    <action method="setBlockId"><block_id>our-brands</block_id></action>
    </block>

</reference>

<reference name="group6_col2">
	<block type="page/html" name="social_info_sticky" as="social_info_sticky" template="page/html/social-sticky.phtml"/>	
</reference>

<reference name="group6_col3">

</reference>

<reference name="group6_col4">

</reference>

<reference name="group6_col5">

</reference>

<reference name="group6_col6">

</reference>

3.1.3 Homepage Style 3

Frontend of Homepage-3 Layout Position

Similarly to Homepage style 2, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<reference name="left">
            <block type="megamenu/list" name="megamenu.list.theme.sidebar.1" as="megaMenuLeft1" template="sm/megamenu/megamenu-left-style2.phtml">
                <action method="setConfig">
                    <values>
                        <title>Menu</title>
                        <group_id>5</group_id>
                        <theme>2</theme>
                    </values>
                </action>
            </block>
            <block type="cms/block" name="banner-slider3">
	           <action method="setBlockId"><block_id>banner-slider3</block_id></action>
              </block>            
             <block type="blog/blog" name="blog" template="aw_blog/latest_post_index2.phtml"/>
             <block type="cms/block" name="testimonial-comlumn-3">
	                  <action method="setBlockId"><block_id>testimonial-comlumn-3</block_id></action>
             </block>
        </reference>
        <reference name="content">
            <block type="deal/list" name="deal.list.default" template="sm/deal/deal-slider.phtml">
                <action method="_setConfig">
                    <values>
                        <product_title_maxlength>50</product_title_maxlength>
                        <nb_column1>2</nb_column1>
                        <nb_column2>2</nb_column2>
                        <nb_column3>2</nb_column3>
                        <nb_column4>2</nb_column4>
                    </values>
                </action>
            </block>
             <block type="cms/block" name="mbanner-homepage3">
	           <action method="setBlockId"><block_id>mbanner-homepage3</block_id></action>
              </block>
            <block type="listingtabs/list" name="listingtabs_list_default_3" template="sm/listingtabs/default.phtml">
                <action method="_setConfig">
                    <values>
                        <row_count>2</row_count>
                    </values>
                </action>
            </block>
        </reference>
        <reference name="group1_col2">
            <block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribes-content.phtml"/>
        </reference>

<reference name="group6_col1">
 <block type="cms/block" name="our-brands">
	    <action method="setBlockId"><block_id>our-brands</block_id></action>
    </block>

</reference>

3.1.4 Homepage Style 4

Frontend of Homepage-4 Layout Position

Similarly to Homepage style 3, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the parameter “Layout Update XML”:

<reference name="left">
    <block type="megamenu/list" name="megamenu.list.theme.sidebar.1" as="megaMenuLeft1" template="sm/megamenu/megamenu-left-style2.phtml">
        <action method="setConfig">
            <values>
                <title>Menu</title>
                <group_id>5</group_id>
                <theme>2</theme>
            </values>
        </action>
    </block>
  <block type="newsletter/subscribe" name="left.newsletter4" template="newsletter/subscribes-sidebar.phtml"/>
   <block type="instagramgallery/instagramusers_viewlist" name="instagram.block" after="left.newsletter4"/>
    <block type="cms/block" name="testimonial-comlumn-3">
        <action method="setBlockId"><block_id>testimonial-comlumn-3</block_id></action>
    </block>
</reference>
<reference name="content">
       <block type="core/text_list" name="camera-slide" as="camera-slide" translate="label">
              <label>SM Camera slide</label>
        </block>
         <reference name="camera-slide">
              <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" />
         </reference>

    <block type="listingtabs/list" name="listingtabs_list_default_4" template="sm/listingtabs/default.phtml">
        <action method="_setConfig">
            <values>
                <row_count>1</row_count>
            </values>
        </action>
    </block>

    <block type="cms/block" name="mbanner-homepage3">
        <action method="setBlockId"><block_id>mbanner-homepage4</block_id></action>
    </block>

    <block type="deal/list" name="deal.list.default" template="sm/deal/deal-slider.phtml">
        <action method="_setConfig">
            <values>
                <product_title_maxlength>50</product_title_maxlength>
                <nb_column1>2</nb_column1>
                <nb_column2>2</nb_column2>
                <nb_column3>2</nb_column3>
                <nb_column4>2</nb_column4>
            </values>
        </action>
    </block>

</reference>

<reference name="group2_col1">

    <block type="cms/block" name="our-brands">
        <action method="setBlockId"><block_id>our-brands</block_id></action>
    </block>

</reference>

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” – have id 1 and “Group – Vertical” – have id 4), Two id will be shown in Configuration of SM Mega Menu.

Step 2: Navigate to SM Mega Menu >> Configuration & fill the id number for two above groups in step 1

Step 3: In order to add menu items, Go to SM Mega Menu >> Menu items Manager to add items as you want.

3.2.1 With Horizontal Mega Menu:

Horizontal-mega-menu
Our Menu
Frontend Appearance
Tree of Our Menu:

Backend Settings of Our Menu

Note:Our Menu: To config this page, please navigate to SM Restaurant setting >> SM Mega Menu >> Menu Items Manager

Item: “Our-menu-dropdown”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="home-menu-dropdown ourmenu">
    <ul class="item-home-store breakfast">
        <li class="title-menu-home">Breakfast</li>
        <li><a title="Pizza" href="#">Pizza</a></li>
        <li><a title="Duis aute" href="#">Duis aute</a></li>
        <li><a title="Voluptate" href="#">Voluptate</a></li>
        <li><a title="Excepteur sint" href="#">Excepteur sint</a></li>
        <li><a title="Reprehenderit" href="#">Reprehenderit</a></li>
    </ul>

    <ul class="item-home-store drinks">
        <li class="title-menu-home">Drinks</li>
        <li><a title="Beer" href="#">Beer</a></li>
        <li><a title="Tomato smoothie" href="#">Tomato smoothie</a></li>
        <li><a title="Pineapple juice" href="#">Pineapple juice</a></li>
        <li><a title="Orange juice" href="#">Orange juice</a></li>
        <li><a title="Sapodilla smoothie" href="#">Sapodilla smoothie</a></li>
    </ul>

    <ul class="item-home-store desserts">
        <li class="title-menu-home">Desserts</li>
        <li><a title="Cupcakes" href="#">Cupcakes</a></li>
        <li><a title="Chocolate" href="#">Chocolate</a></li>
        <li><a title="Ice Cream" href="#">Ice Cream</a></li>
        <li><a title="Jams Fruit" href="#">Jams Fruit</a></li>
        <li><a title="Marshmallow" href="#">Marshmallow</a></li>
    </ul>

    <div class="item-home-store banner">
        <img src="{{media url="wysiwyg/icon-megamenu/Chef.jpg"}}" alt="" />
    </div>   
</div>

Features Menu

Frontend Appearance
Tree of Features Menu:

Note: Features Menu: To config this page, please navigate to SM Restaurant setting >> SM Mega Menu >> Menu Items Manager

Backend Settings of Features Menu

Item: “Features-dropdown”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

<div class="home-menu-dropdown">
    <ul class="item-home-store layout-home">
        <li class="title-menu-home">Home Styles</li>
        <li><a title="Home Style 1" href="{{store url="?___store=default&amp;___from_store=belgium"}}">Home Style 1</a></li>
        <li><a title="Home Style 2" href="{{store url="?___store=french&amp;___from_store=default"}}">Home Style 2 (Boxed)</a></li>
        <li><a title="Home Style 3" href="{{store url="?___store=german&amp;___from_store=default"}}">Home Style 3</a></li>
        <li><a title="Home Style 3" href="{{store url="?___store=argentina&amp;___from_store=default"}}">Home Style 4</a></li>        
    </ul>

    <ul class="item-home-store theme-color">
        <li class="title-menu-home">Color Styles</li>
        <li class="red"><a title="Red" href="{{store url="?___store=default&amp;___from_store=belgium"}}">Red</a></li>
        <li class="brown"><a title="Brown" href="{{store url="?___store=french&amp;___from_store=default"}}">Brown</a></li>
        <li class="green"><a title="Green" href="{{store url="?___store=german&amp;___from_store=default"}}">Green</a></li>
        <li class="yellow"><a title="Yellow" href="{{store url="?___store=argentina&amp;___from_store=default"}}">Yellow</a></li>
    </ul>

    <ul class="item-home-store header-home">
        <li class="title-menu-home">Headers</li>
        <li><a title="Header Type 1" href="{{store url="?___store=default&amp;___from_store=belgium"}}">Header Type 1</a></li>
        <li><a title="Header Type 2" href="{{store url="?___store=french&amp;___from_store=default"}}">Header Type 2</a></li>
        <li><a title="Header Type 3" href="{{store url="?___store=german&amp;___from_store=default"}}">Header Type 3</a></li>
        <li><a title="Header Type 4" href="{{store url="?___store=argentina&amp;___from_store=default"}}">Header Type 4</a></li>
    </ul>

    <ul class="item-home-store detail-home">
        <li class="title-menu-home">Product Detail Layouts</li>
		 <li><a title="Thumbnail  - Vertical"  href="{{store url="dumas-kremas.html/?___store=default&amp;___from_store=german"}}" >Thumbnail  - Vertical</a></li>
        <li><a title="Product Detail - Full" href="{{store url="dumas-kremas.html/?___store=german&amp;___from_store=default"}}">Product Detail - Full</a></li>
        <li><a title="Product Detail - Left Sidebar" href="{{store url="dumas-kremas.html/?___store=french&amp;___from_store=german"}}">Product Detail - Left Sidebar</a></li>
        <li><a title="Product Detail - Right Sidebar" href="{{store url="dumas-kremas.html/?___store=argentina&amp;___from_store=default"}}">Product Detail - Right Sidebar</a></li>

    </ul>

    <ul class="item-home-store detail-home">
        <li class="title-menu-home">Zoom Types</li>
        <li><a title="Product Page Inner Zoom" href="{{store url="dumas-kremas.html/?___store=default&amp;___from_store=argentina"}}">Product Page Inner Zoom</a></li>
        <li><a title="Product Page Outer Zoom" href="{{store url="dumas-kremas.html/?___store=french&amp;___from_store=default"}}">Product Page Outer Zoom</a></li>
        <li><a title="Product Page Lens Zoom" href="{{store url="dumas-kremas.html/?___store=german&amp;___from_store=default"}}">Product Page Lens Zoom</a></li>
    </ul>

    <div style="clear:both;">&nbsp;</div>

    <ul class="item-home-store layout-home">
        <li class="title-menu-home">Listing Layouts</li>
        <li><a title="Without Sidebar" href="{{store url="electronics.html/?___store=german&amp;___from_store=default"}}">Without Sidebar</a></li>
        <li><a title="Left Sidebar" href="{{store url="fashion-accesories.html/?___store=default&amp;___from_store=german"}}">Left Sidebar</a></li>
        <li><a title="Right Sidebar" href="{{store url="fashion-accesories.html/?___store=french&amp;___from_store=default"}}">Right Sidebar</a></li>
    </ul>

    <ul class="item-home-store layout-home">
        <li class="title-menu-home">About Us Layouts</li>
        <li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&amp;___from_store=argentina"}}">About Us Style 1</a></li>
        <li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&amp;___from_store=default"}}">About Us Style 2</a></li>
        <li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&amp;___from_store=default"}}">About Us Style 3</a></li>
        <li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&amp;___from_store=default"}}">About Us Style 4</a></li>
    </ul>

    <ul class="item-home-store layout-home">
        <li class="title-menu-home">Contact Us Layouts</li>
        <li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&amp;___from_store=argentina"}}">Contact Us Style 1</a></li>
        <li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&amp;___from_store=default"}}">Contact Us Style 2</a></li>
        <li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&amp;___from_store=default"}}">Contact Us Style 3</a></li>
        <li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&amp;___from_store=default"}}">Contact Us Style 4</a></li>
    </ul>

    <ul class="item-home-store layout-home">
        <li class="title-menu-home">404 Page Layout</li>
        <li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
    </ul>

    <ul class="item-home-store detail-home">
        <li class="title-menu-home">Effect Hover Product</li>
        <li><a title="Simple" href="{{store url="?___store=default&amp;___from_store=french"}}">Simple</a></li>
        <li><a title="Display Second Image" href="{{store url="?___store=french&amp;___from_store=default"}}">Display Second Image</a></li>
        <li><a title="Display Slider Image" href="{{store url="?___store=argentina&amp;___from_store=default"}}">Display Slider Image</a></li>
    </ul>
</div>

Brands Menu

Frontend Appearance
Tree of Brands Menu:

Backend Settings of Brands Menu

Note:Brands Menu: To config this page, please navigate to SM Restaurant setting >> SM Mega Menu >> Menu Items Manager

Item: “Brands Dropdown”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

{{block type="listingtabs/list" listingtabs_title_text="Popular Products" nbi_column1="3" nbi_column2="3" nbi_column2="3" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0" tab_all_display="0" filter_order_by="best_sales" product_category="130, 71, 5, 4, 11" product_limitation="3"  template="sm/listingtabs/default-menu.phtml"}}

3.2.2 With Vertical Mega Menu ( In The Homepage 3, Homepage 4)

Vertical Mega menu includes 6 items:

Breakfast
Lunch
Dinner
Drinks
Desserts
Fast Foods

Other items in Horizontal menu are configured the same as above items.

Frontend Appearance

Backend Appearance

Breakfast
Frontend Appearance

Tree of Breakfast:

Backend Settings of Breakfast

Note: To configure these sub-items inside this category, we do as following task:

Item: “Breakfast Dropdown”– Menu Backend Settings

Note: Coppy & paste the following code chain into tab “content”:

{{block type="listingtabs/list" listingtabs_title_text="Popular Product" nbi_column1="3" nbi_column2="3" nbi_column2="3" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0" tab_all_display="0" filter_order_by="best_sales" product_category="130, 71, 5, 4, 11" product_limitation="3"  template="sm/listingtabs/default-menu1.phtml"}}

Lunch
Frontend Appearance

Backend Settings of Lunch

Note: Coppy & paste the following code chain into tab “content”:

<div class="home-menu-dropdown ourmenu-vertical row">
    <div class="col-lg-7">
        <ul class="item-home-store breakfast">
            <li class="title-menu-home">Breakfast</li>
            <li><a title="Pizza" href="#">Pizza</a></li>
            <li><a title="Duis aute" href="#">Duis aute</a></li>
            <li><a title="Voluptate" href="#">Voluptate</a></li>
            <li><a title="Excepteur sint" href="#">Excepteur sint</a></li>
            <li><a title="Reprehenderit" href="#">Reprehenderit</a></li>
        </ul>

        <ul class="item-home-store drinks">
            <li class="title-menu-home">Drinks</li>
            <li><a title="Beer" href="#">Beer</a></li>
            <li><a title="Tomato smoothie" href="#">Tomato smoothie</a></li>
            <li><a title="Pineapple juice" href="#">Pineapple juice</a></li>
            <li><a title="Orange juice" href="#">Orange juice</a></li>
            <li><a title="Sapodilla smoothie" href="#">Sapodilla smoothie</a></li>
        </ul>

        <ul class="item-home-store desserts">
            <li class="title-menu-home">Desserts</li>
            <li><a title="Cupcakes" href="#">Cupcakes</a></li>
            <li><a title="Chocolate" href="#">Chocolate</a></li>
            <li><a title="Ice Cream" href="#">Ice Cream</a></li>
            <li><a title="Jams Fruit" href="#">Jams Fruit</a></li>
            <li><a title="Marshmallow" href="#">Marshmallow</a></li>
        </ul>

        <ul class="item-home-store desserts">
            <li class="title-menu-home">Dinner</li>
            <li><a title="Cupcakes" href="#">Cupcakes</a></li>
            <li><a title="Chocolate" href="#">Chocolate</a></li>
            <li><a title="Ice Cream" href="#">Ice Cream</a></li>
            <li><a title="Jams Fruit" href="#">Jams Fruit</a></li>
            <li><a title="Marshmallow" href="#">Marshmallow</a></li>
        </ul>
    </div>
    <div class="col-lg-5">
        <div class="banner">
            <img src="{{media url="wysiwyg/icon-megamenu/Chef.jpg"}}" alt="" />
        </div>
    </div>    
</div>

Dinner
Frontend Appearance

Backend Settings of Dinner

Note: Coppy & paste the following code chain into tab “content”:

<div class="home-menu-dropdown dinner">
    <ul class="item-home-store breakfast">
        <li class="title-menu-home">Breakfast</li>
        <li><a title="Pizza" href="#">Pizza</a></li>
        <li><a title="Duis aute" href="#">Duis aute</a></li>
        <li><a title="Voluptate" href="#">Voluptate</a></li>
        <li><a title="Excepteur sint" href="#">Excepteur sint</a></li>
        <li><a title="Reprehenderit" href="#">Reprehenderit</a></li>
    </ul>

    <ul class="item-home-store drinks">
        <li class="title-menu-home">Drinks</li>
        <li><a title="Beer" href="#">Beer</a></li>
        <li><a title="Tomato smoothie" href="#">Tomato smoothie</a></li>
        <li><a title="Pineapple juice" href="#">Pineapple juice</a></li>
        <li><a title="Orange juice" href="#">Orange juice</a></li>
        <li><a title="Sapodilla smoothie" href="#">Sapodilla smoothie</a></li>
    </ul>

    <ul class="item-home-store desserts">
        <li class="title-menu-home">Desserts</li>
        <li><a title="Cupcakes" href="#">Cupcakes</a></li>
        <li><a title="Chocolate" href="#">Chocolate</a></li>
        <li><a title="Ice Cream" href="#">Ice Cream</a></li>
        <li><a title="Jams Fruit" href="#">Jams Fruit</a></li>
        <li><a title="Marshmallow" href="#">Marshmallow</a></li>
    </ul>

    <div class="item-home-bottom banner">
        <img src="{{media url="wysiwyg/icon-megamenu/shipping.jpg"}}" alt="" />
    </div>    
</div>

Other items in vertical menu are configured the same as above items.

3.3 Configure Extensions

The SM Restaurant front-page has been integrated with extensions in the Theme as following list:

I. SM Mega Menu

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu: Click Here
Go Here to readmore about the SM Mega Menu module.

II. SM Mega Menu 2

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu 2: Click Here
Go Here to readmore about the SM Mega Menu module.

III. SM Camera Slide

Position: SM Camera Slide
Frontend Appearance

Backend of SM Camera Slide: Click Here
Go Here to readmore about the SM Camera Slide module.

IV. SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of Listing Tabs : Click Here
Go Here to readmore about the SM Listing Tabs module.

V. SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Go Here to readmore about the SM Deal module.

VI. SM Restaurant Settings Socials

Position: SM Restaurant Settings Socials
Frontend Appearance

Backend of SM Restaurant Settings Socials: Click Here
Go Here to readmore about the SM Restaurant Settings Socials module.

VII. SM Restaurant Settings Advanced

Position: SM Restaurant Settings Advanced
Frontend Appearance

Backend of SM Restaurant Settings Advanced: Click Here
Go Here to readmore about the SM Restaurant Settings Advanced.

VIII. SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

IX. SM Facbook

Position: SM Facbook
Frontend Appearance

Backend of SM Facbook: Click Here
Go Here to readmore about the SM Facbook module.

X. SM Instagram Gallery

Position: SM Instagram Gallery
Frontend Appearance

Backend of SM Instagram Gallery: Click Here
Go Here to readmore about the SM Instagram Gallery module.

3.4 Configure Static Blocks

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

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

To create static blocks, go to CMS >> Static Blocks with Identifier * : “banner-homepage1″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Banner-Homepage1:

<div class="banner-homepage1">
<ul class="list-image item-left col-3 wow fadeIn">
<li><a title="Static Image" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/Banner-3-copy.jpg"}}" /></a></li>
<li><a title="Static Image" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/Banner-4-copy.jpg"}}" /></a></li>
</ul>
<div class="item-center col-6 wow fadeIn"><a title="Static Image" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/Banner-1.jpg"}}" /></a></div>
<ul class="list-image item-right col-3 wow fadeIn">
<li><a title="Static Image" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/Banner-3.jpg"}}" /></a></li>
<li><a title="Static Image" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/Banner-4.jpg"}}" /></a></li>
</ul>
</div>

2. Static-History-Slider

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “history-slider1″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-History-Slider:

<div id="history" class="overflow-slider history">
<div class="title-home  wow fadeIn">
<h2>The History</h2>
</div>
<div class="logo wow fadeIn"><img alt="" src="{{media url="wysiwyg/history/history-logo.png"}}" /></div>
<div class="pre-text wow fadeIn">
<p>Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue. Vivamus adipiscing nisl ut dolor dignissim semper. Nulla luctus malesuada tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer enim purus, posuere at ultricies eu, placerat a felis. Suspendisse aliquet urna pretium eros convallis interdum. Quisque in arcu id dui vulputate mollis eget non arcu. Aenean et nulla purus.</p>
</div>
<div class="margin-slider wow fadeIn">
<ul class="history-slider">
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-1.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-2.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-3.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-4.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-1.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-2.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-3.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-4.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
<li class="item">
<div class="item-inner">
<div class="avatar"><img alt="" src="{{media url="wysiwyg/history/member-1.jpg"}}" /></div>
<div class="name"><span>Jony Kash</span></div>
<div class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {
            var owl_testimonial = $(".history-slider");
            owl_testimonial.owlCarousel({
                responsive:{
                    0:{
                        items:1
                    },
                    480:{
                        items:1
                    },
                    768:{
                        items:1
                    },
                    992:{
                        items:3
                    },
                    1200:{
                        items:5
                    }
                },

                autoplay:false,
                loop:true,
                nav : true, // Show next and prev buttons
                dots: false,
                autoplaySpeed : 500,
                navSpeed : 500,
                dotsSpeed : 500,
                autoplayHoverPause: true,
                margin:30,
                center: true
            });
        });
// ]]></script>
</div>

3. Static-Slider-Testimoials

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “slider-testimoials”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Slider-Testimoials:

<div id="testimonial" class="overflow-slider testimonials wow fadeIn">
    <div class="title-home wow fadeIn">
        <h2>What Our Customers Say ?</h2>
    </div>
    <div class="margin-slider wow fadeIn">
        <ul class="testimonials-slider">
            <li class="item">
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service1.jpg"}}" /></div>
                    </div>
                    <div class="comment">"Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue. Vivamus adipiscing nisl ut dolor dignissim semper. Nulla luctus malesuada tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra."</div>
                </div>
            </li>
            <li class="item">
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service2.jpg"}}" /></div>
                    </div>
                    <div class="comment">"Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue. Vivamus adipiscing nisl ut dolor dignissim semper. Nulla luctus malesuada tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra."</div>
                </div>
            </li>
            <li class="item">
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service1.jpg"}}" /></div>
                    </div>
                    <div class="comment">"Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue. Vivamus adipiscing nisl ut dolor dignissim semper. Nulla luctus malesuada tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra."</div>
                </div>
            </li>
        </ul>
    </div>
    <script type="text/javascript">// <![CDATA[
        jQuery(document).ready(function($) {
            var owl_testimonial = $(".testimonials-slider");
            owl_testimonial.owlCarousel({
                responsive:{
                    0:{
                        items:1
                    },
                    480:{
                        items:1
                    },
                    768:{
                        items:1
                    },
                    992:{
                        items:1
                    },
                    1200:{
                        items:1
                    }
                },

                autoplay:false,
                loop:true,
                nav : false, // Show next and prev buttons
                dots: true,
                autoplaySpeed : 500,
                navSpeed : 500,
                dotsSpeed : 500,
                autoplayHoverPause: true,
                margin:30
            });
        });
        // ]]></script>
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-openinghou”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Footer-Openinghou:

<div class="footer-block-title">
    <h2>Opening Hours</h2>
</div>
<div class="footer-block-content">
    <ul>
        <li><span class="day">Monday:</span><span class="hour">8am - 11pm</span></li>
        <li><span class="day">Tuesday:</span><span class="hour">8am - 11pm</span></li>
        <li><span class="day">Wednesday:</span><span class="hour">8am - 11pm</span></li>
        <li><span class="day">Thursday:</span><span class="hour">8am - 11pm</span></li>
        <li><span class="day">Friday:</span><span class="hour">7:30am - Midnight</span></li>
        <li><span class="day">Saturday:</span><span class="hour">10am - 8pm</span></li>
    </ul>
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-contact”

Frontend

Backend Setting

Coppy & paste the code chain for Static-Footer-Contact:

<div class="footer-block-title">
<h2>Contact Us</h2>
</div>
<div class="footer-block-content">
<ul>
<li><span class="address">Address : No 40 Baria Sreet 133/2 Arizona City, AZ, United States</span></li>
<li><span class="mail">Mail : support@restaurant.domain</span></li>
<li><span class="phone">Phone 1 : 0123456789<br /> Phone 2 : 0123456789</span></li>
</ul>
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-get-in-touch”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Footer-Get-In-Touch:

<div class="footer-block-title">
<h2>Get in Touch</h2>
</div>
<div class="footer-block-content">
{{block type="core/template" name="contact.form.footer" template="contacts/form-footer.phtml"}}
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-payment”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Footer-Payment:

<ul>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-1.png"}}" alt="Payment" /></a></li>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-2.png"}}" alt="Payment" /></a></li>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-3.png"}}" alt="Payment" /></a></li>
									<li><a href="#" title="Payment Method"><img src="{{media url="wysiwyg/payment/payment-4.png"}}" alt="Payment" /></a></li>
								</ul>

8. Static-Service-Top-Index2

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “service-top-index2″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Service-Top-Index2:

<div class="services-top-wrapper">
    <div class="col-lg-3 col-md-6">
        <div class="service-inner">
            <div class="icon-service">
                <img src="{{media url="wysiwyg/service/icon.png"}}" alt="" />
            </div>

            <div class="info-service">
                <h2><a href="#" title="Breakfast">Breakfast</a></h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="service-inner">
            <div class="icon-service">
               <img src="{{media url="wysiwyg/service/martini.png"}}" alt="" />
            </div>
            <div class="info-service">
                <h2><a href="#" title="Breakfast">Drinks</a></h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="service-inner">
            <div class="icon-service">
               <img src="{{media url="wysiwyg/service/icon1.png"}}" alt="" />
            </div>

            <div class="info-service">
                <h2><a href="#" title="Free Giftcode every wenesdays ">Dinner</a></h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="service-inner">
            <div class="icon-service">
                <img src="{{media url="wysiwyg/service/muffin.png"}}" alt="" />
            </div>

            <div class="info-service">
                <h2><a href="#" title="Desserts">Desserts</a></h2>
                <p>eque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur</p>
            </div>
        </div>
    </div>
</div>

9. Static-Testimonal-Column

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “testimonal-column”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Testimonal-Columnn:

<div class="overflow-slider testimonials-column">
    <div class="title-home">
        <h2>Testimonial</h2>
    </div>
    <div class="pre-text">Lorem ipsum dolor sit amet</div>
    <div class="margin-slider">
        <ul class="testimonials-slider">
            <li class="item">
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service1.jpg"}}" /></div>
                    </div>
                    <div class="info">
                        <div class="comment">“Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus”</div>
                        <div class="name">Jennifer lawrence</div>
                        <div class="position">Co-Founder</div>
                    </div>
                </div>
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service2.jpg"}}" /></div>
                    </div>
                    <div class="info">
                        <div class="comment">“Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus”</div>
                        <div class="name">Jennifer lawrence</div>
                        <div class="position">Co-Founder</div>
                    </div>
                </div>
            </li>
            <li class="item">
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service1.jpg"}}" /></div>
                    </div>
                    <div class="info">
                        <div class="comment">“Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus”</div>
                        <div class="name">Jennifer lawrence</div>
                        <div class="position">Co-Founder</div>
                    </div>
                </div>
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service2.jpg"}}" /></div>
                    </div>
                    <div class="info">
                        <div class="comment">“Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus”</div>
                        <div class="name">Jennifer lawrence</div>
                        <div class="position">Co-Founder</div>
                    </div>
                </div>
            </li>
            <li class="item">
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service2.jpg"}}" /></div>
                    </div>
                    <div class="info">
                        <div class="comment">“Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus”</div>
                        <div class="name">Jennifer lawrence</div>
                        <div class="position">Co-Founder</div>
                    </div>
                </div>
                <div class="client-child">
                    <div class="client">
                        <div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service1.jpg"}}" /></div>
                    </div>
                    <div class="info">
                        <div class="comment">“Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus”</div>
                        <div class="name">Jennifer lawrence</div>
                        <div class="position">Co-Founder</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script type="text/javascript">// <![CDATA[
        jQuery(document).ready(function($) {
            var owl_testimonial = $(".testimonials-column .testimonials-slider");
            owl_testimonial.owlCarousel({
                responsive:{
                    0:{
                        items:1
                    },
                    480:{
                        items:1
                    },
                    768:{
                        items:1
                    },
                    992:{
                        items:1
                    },
                    1200:{
                        items:1
                    }
                },

                autoplay:false,
                loop:true,
                nav : true, // Show next and prev buttons
                dots: true,
                autoplaySpeed : 500,
                navSpeed : 500,
                dotsSpeed : 500,
                autoplayHoverPause: true,
                margin:30
            });
        });
        // ]]></script>
</div>

10. Static-Top-Brand

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “top-brand”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Top-Brand:

<div class="top-brand">
	<div class="title-home">
		<h2>Top Brands</h2>
	</div>

	<div class="top-brand-slider">
		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-6.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-7.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-8.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-9.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-10.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>

		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>
		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>
		<div class="item">
			<div class="child-item">
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.jpg"}}" alt="Brand" /></a></div>
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-6.jpg"}}" alt="Brand" /></a></div>
			</div>
		</div>
	</div>
</div>

<script>
	jQuery(document).ready(function($) {
		var owl_topbrand = $(".top-brand-slider");
		owl_topbrand.owlCarousel({

			responsive:{
				0:{
					items:2
				},
				480:{
					items:3
				},
				768:{
					items:3
				},
				992:{
					items:4
				},
				1200:{
					items:5
				}
			},

			autoplay:false,
			loop:false,
			nav : true, // Show next and prev buttons
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:0,

		});
	});

</script>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-about-us”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Footer-About-Us:

<div class="footer-block-title">
<h2>About Us</h2>
</div>
<div class="footer-block-content">
<div>
<div>
<p><strong class="first-letter">R</strong>Restaurant ipsum dolor sit amet, consectetur adipiscing elit.Aliquam iaculis egestas laoreet. Etiam fauci bus massa sed risus lacinia in elit vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla elitte<br /> tempus nisi lorem ipsum dolor sit. vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi</p>
</div>
</div>
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-why-choose-us”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Footer-Why-Choose-Us:

<div class="footer-block-title">
    <h2>Why Choose Us</h2>
</div>
<div class="footer-block-content">
    <ul class="first">
        <li><a href="#">Product Recall</a></li>
         <li><a href="#">Gift Vouchers</a></li>
         <li><a href="#">Returns and Exchanges</a></li>
         <li><a href="#">Shipping Options</a></li>
          <li><a href="#">Help & FAQs</a></li>
    </ul>
<span class="title-payment">We accept payment :</span>
<ul class="payment">
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-1.png"}}" /></a></li>
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-2.png"}}" /></a></li>
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-3.png"}}" /></a></li>
<li><a title="Payment Method" href="#"><img alt="Payment" src="{{media url="wysiwyg/payment/payment-4.png"}}" /></a></li>
</ul>
</div>

13. Static-mBanner-Homepage3

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “mbanner-homepage3″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-mBanner-Homepage3:

<div class="mbanner-homepage3"><a title="Static Image" href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/banner-homepage3.jpg"}}" /></a></div>

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Banner-Slider3:

<div class="overflow-slider banner-slider">
<div class="margin-slider">
<ul class="slider">
<li class="item"><a href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/banner-slider.jpg"}}" /></a></li>
<li class="item"><a href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/banner-slider1.jpg"}}" /></a></li>
<li class="item"><a href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/banner-slider2.jpg"}}" /></a></li>
<li class="item"><a href="#"><img alt="" src="{{media url="wysiwyg/home-page-image/banner-slider3.jpg"}}" /></a></li>
</ul>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {
            var owl_banner_slider = $(".banner-slider .slider");
            owl_banner_slider.owlCarousel({
                responsive:{
                    0:{
                        items:1
                    },
                    480:{
                        items:1
                    },
                    768:{
                        items:1
                    },
                    992:{
                        items:1
                    },
                    1200:{
                        items:1
                    }
                },

                autoplay:true,
                loop:true,
                nav : false, // Show next and prev buttons
                dots: true,
                autoplaySpeed : 500,
                navSpeed : 500,
                dotsSpeed : 500,
                autoplayHoverPause: true
            });
        });
// ]]></script>
</div>

15. Static-Testimonial-Column3

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “testimonial-column3″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Testimonial-Column3:

<div class="overflow-slider testimonials-column">
<div class="title-home">
<h2>Testimonial</h2>
</div>
<div class="margin-slider">
<ul class="testimonials-slider">
<li class="item">
<div class="client-child">
<div class="client">
<div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service1.jpg"}}" /></div>
</div>
<div class="info">
<div class="comment">&ldquo;Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus&rdquo;</div>
<div class="name">Jennifer lawrence</div>
<div class="position">Co-Founder</div>
</div>
</div>
</li>
<li class="item">
<div class="client-child">
<div class="client">
<div class="image-client"><img alt="" src="{{media url="wysiwyg/testimonial/customer-service2.jpg"}}" /></div>
</div>
<div class="info">
<div class="comment">&ldquo;Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus&rdquo;</div>
<div class="name">Jennifer lawrence</div>
<div class="position">Co-Founder</div>
</div>
</div>
</li>
<li class="item">
<div class="client-child">
<div class="client">
<div class="image-client"><img src="{{media url="wysiwyg/testimonial/jennifer-lawrence-compressed.png"}}" alt="" /></div>
</div>
<div class="info">
<div class="comment">&ldquo;Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus&rdquo;</div>
<div class="name">Jennifer lawrence</div>
<div class="position">Co-Founder</div>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {
            var owl_testimonial = $(".testimonials-column .testimonials-slider");
            owl_testimonial.owlCarousel({
                responsive:{
                    0:{
                        items:1
                    },
                    480:{
                        items:1
                    },
                    768:{
                        items:1
                    },
                    992:{
                        items:1
                    },
                    1200:{
                        items:1
                    }
                },

                autoplay:true,
                loop:true,
                nav : true, // Show next and prev buttons
                dots: false,
                autoplaySpeed : 500,
                navSpeed : 500,
                dotsSpeed : 500,
                autoplayHoverPause: true,
                margin:30
            });
        });
// ]]></script>
</div>

16. Static-Brand-Slider

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “brand-slider”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Brand-Slider:

<div class="brand-slider-wrapper">
	<div class="brand-slider">
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-1.jpg"}}" alt="Brand Image" /></a></div>
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-2.jpg"}}" alt="Brand Image" /></a></div>
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-3.jpg"}}" alt="Brand Image" /></a></div>
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-4.jpg"}}" alt="Brand Image" /></a></div>
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-5.jpg"}}" alt="Brand Image" /></a></div>
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-6.jpg"}}" alt="Brand Image" /></a></div>
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-7.jpg"}}" alt="Brand Image" /></a></div>
		<div><a title="Brand Image" href="#"><img src="{{media url="wysiwyg/brand/brand-8.jpg"}}" alt="Brand Image" /></a></div>
	</div>

	<script>
		jQuery(document).ready(function($) {
			var owl_brand = $(".brand-slider");
			owl_brand.owlCarousel({

				responsive:{
					0:{
						items:2
					},
					480:{
						items:3
					},
					768:{
						items:4
					},
					992:{
						items:4
					},
					1200:{
						items:6
					}
				},

				autoplay:false,
				loop:false,
				nav : true, // Show next and prev buttons
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:30,
				rtl: false,
			});	 

		});	
	</script>
</div>

17. Static-Contact-Googlemap

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “contact-googlemap”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Contact-Googlemap:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11878.456621041889!2d12.521171805609182!3d41.90115444634741!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x177d4eda1de88d2d!2sCimitero+Monumentale+del+Verano!5e0!3m2!1sen!2s!4v1434962790288"  style="border:0"></iframe>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “MBanner-Homepage4homepage4″

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-MBanner-Homepage4:

<div class="imagess-slider4-wrapper">
	<div class="imagess-slider4">
		<div class="static-homepage-4">
			<div class="block-left">
				<div class="block-inner">
					<div class="head-icon" style="width: 39px; height: 36px;"></div>
					<div class="logo">
						<a href="#"><img src="{{media url="wysiwyg/home-page-image/static-block-4.png"}}" alt="" /></a>
					</div>
					<h3 class="title">Maecenas malesuada purus et dui dignissim</h3>
					<p class="intro">
						Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue.
					</p>
					<div class="symbol">
						<img src="{{media url="wysiwyg/home-page-image/symbol.png"}}" alt="" />
					</div>
				</div>
			</div>
			<div class="block-right">
				<div class="block-inner">
					<a class="banner-image" href="#">
						<img src="{{media url="wysiwyg/home-page-image/static-homepage4.jpg"}}" alt="" />
					</a>
				</div>
			</div>
		</div>
		<div class="static-homepage-4">
			<div class="block-left">
				<div class="block-inner">
					<div class="head-icon" style="width: 39px; height: 36px;"></div>
					<div class="logo">
						<a href="#"><img src="{{media url="wysiwyg/home-page-image/static-block-4.png"}}" alt="" /></a>
					</div>
					<h3 class="title">Maecenas malesuada purus et dui dignissim</h3>
					<p class="intro">
						Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue.
					</p>
					<div class="symbol">
						<img src="{{media url="wysiwyg/home-page-image/symbol.png"}}" alt="" />
					</div>
				</div>
			</div>
			<div class="block-right">
				<div class="block-inner">
					<a class="banner-image" href="#">
						<img src="{{media url="wysiwyg/home-page-image/about_2.jpg"}}" alt="" />
					</a>
				</div>
			</div>
		</div>
		<div class="static-homepage-4">
			<div class="block-left">
				<div class="block-inner">
					<div class="head-icon" style="width: 39px; height: 36px;"></div>
					<div class="logo">
						<a href="#"><img src="{{media url="wysiwyg/home-page-image/static-block-4.png"}}" alt="" /></a>
					</div>
					<h3 class="title">Maecenas malesuada purus et dui dignissim</h3>
					<p class="intro">
						Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue.
					</p>
					<div class="symbol">
						<img src="{{media url="wysiwyg/home-page-image/symbol.png"}}" alt="" />
					</div>
				</div>
			</div>
			<div class="block-right">
				<div class="block-inner">
					<a class="banner-image" href="#">
						<img src="{{media url="wysiwyg/home-page-image/about_3.jpg"}}" alt="" />
					</a>
				</div>
			</div>
		</div>
	</div>
	<script>
		jQuery(document).ready(function($) {
			var owl_images = $(".imagess-slider4");
			owl_images.owlCarousel({

				responsive:{
					0:{
						items:1
					},
					480:{
						items:1
					},
					768:{
						items:1
					},
					992:{
						items:1
					},
					1200:{
						items:1
					}
				},

				autoplay:false,
				loop:false,
				nav : false, // Show next and prev buttons
				dots: true,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:30,
				rtl: false,
			});	 

		});	
	</script>
</div>

19. Static-Our-Brands

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “our-brands”

Frontend

Backend Setting

Coppy & paste the code chain for Content of Static-Our-Brands:

<div class="brands-block">

				<div class="client-logo-slider">
					<div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/1.png"}}" /></a></div>
                                       <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/2.png"}}" /></a></div>
                                       <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/3.png"}}" /></a></div>
                                      <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/4.png"}}" /></a></div>
                                       <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/5.png"}}" /></a></div>
                                      <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/1.png"}}" /></a></div>
                                         <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/2.png"}}" /></a></div>
                                       <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/3.png"}}" /></a></div>
                                          <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/4.png"}}" /></a></div>
                                          <div class="item"><a title="Client" href="#"><img alt="Client" src="{{media url="wysiwyg/brand/5.png"}}" /></a></div>
				</div>

				<script>
					jQuery(document).ready(function($) {
						var client_logo_slider = $(".client-logo-slider");
						client_logo_slider.owlCarousel({
							responsive:{
								0:{
									items:1
								},
								480:{
									items:2
								},
								768:{
									items:3
								},
								992:{
									items:4
								},
								1200:{
									items:5
								}
							},

							autoplay:false,
							loop:true,
							nav : true,
							dots: false,
							autoplaySpeed : 500,
							navSpeed : 500,
							dotsSpeed : 500,
							autoplayHoverPause: true,
							margin:30,
						});
					});
				</script>
			</div>

3.5 Configure AW Blogs

You can download the package Here. You click “Free Download” and download package you want.

3.6 How To Edit Copyright in admin

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Restaurant Setting Module to configure the “Custom Copyright” parameter as image below:

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

3.7 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM Restaurant Setting Module to configure the “Social style” parameter as image below:

4SUPPORT – 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 a bunch!

↧

SP Mega Menu

September 21, 2015, 3:13 am

≫ Next: SP Stationery

≪ Previous: SM Restaurant

View demo More detail

This guide will help you install SP Mega Menu module step by step.

1 Installation

Firstly, you must install Prestashop version 1.6.x. Please Click Here to read more about How To Install Prestashop version 1.6.x
Secondly, prepare for installing the SP Mega Menu. The installation contains 6 steps as following:

Step 1: Login to your Prestashop admin panel and Go to Back Office >> Modules and Services >> Modules and Services.

Step 2: At the top of the page, click the Add a new module button.

Step 3: Click “Choose a file” button to select your module .zip file “spmegamenu.zip” that you have downloaded and then click “Upload this module” button.

Step 4: The module downloaded successfully, please click “Install” button to install this module.

Step 5: You will see a notification messages, please click “Proceed with the installation” button to finish the installation process.

Step 6: The installing process will be started. You will see the message “Module(s) installed successfully”. Please click “Configure” button to configure this module.

↧

SP Stationery

September 23, 2015, 1:14 am

≫ Next: SM Handmade

≪ Previous: SP Mega Menu

View demo More detail

1GETTING STARTED

1.1 Introduction

1.2 System Requirements

Please make sure your hosting server meets the PrestaShop requirements:

Supported operating system: Windows, Mac and Linux.
Wamp (for Windows) or Xampp (for Windows and Mac)
Web server: Apache Web server 1.3 or later, Microsoft’s IIS Web server 6.0 or later.
PHP 5.2* or later.
MySQL 5.0 or later.
At least 32 Mb of RAM on your server (64 Mb is comfortable, the more the better).

Note: If you can not install the theme/module, You need to increase the parameter “memory_limit=200M”; “max_execution_time=300″; “max_execution_time=1000″ & “upload_max_filesize=20M” in the file php.ini.

1.3 PrestaShop Guide

If you are new with Prestashop. Please read Prestashop guide first: http://doc.prestashop.com/display/PS16/Getting+Started

2INSTALLATION

There are two ways to install SP Stationery Theme

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation : Include of Theme layout Installation Packages. Please unzip the file and you would see the following packages:
- module folder
- override folder
- sp_stationery_template_p16_v1.0.0.zip file

2.1 Quickstart Installation

We provide SP Stationery 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 a quickstart package
Step 2: Extract the downloaded package “sp_stationery_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting). In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Prestashop installer. Please follow each step of the Installer so that the installation process can be set.

Installation Assistant (Choose your language)

Please select the installation language

Please note: the installation language option will not affect your store language. By default PrestaShop is offered in English. You can install additional localization packages to change the store language.

When you are done, click the ‘Next’ button.

Installation Assistant (License agreements)

Please check the license agreement.

When you are done, click the ‘Next’ button.

System Compatibility

Check the PHP settings and directory permissions. In case of any errors, please contact your hosting provider for further assistance.

If everything is correct, click the ‘Next’ button.

Store Information

When you are done, click the ‘Next’ button.

System Configuration

Here is the database configuration panel, we need to create database first.

Access your database panel and create database for your site. Add database name and then hit “Create” button.

Finish installation: This process could take you some time

Note: For security reasons you need to delete the /install/ directory on your hosting server.

And finally, go to the frontend or backend as you want:

2.2 Theme Installation

Note: Before installing theme, you must disable cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> press “Save”.

SP Stationery Layout1 Theme Installation

Note: Here we will only guide you How To Install SP Stationery layout1 Theme, with layout2, 3, 4, 5 do the same.

Firstly, you must EXTRACT the “sp_stationery_layout1_theme_p16_v1.0.0.zip” package and open the extracted folder. Here you will see:

module folder: contain of the smartblog.zip file, smartblogcategories.zip file and themeinstallator.zip file.
override folder: contain of “FrontController.php” file in the folder URL: \override\classes\controller\ .
and the sp_stationery_template_p16_v1.0.0.zip file.

STEP 1: Install “smartblog.zip”, “smartbloghomelatestnews.zip” and“smartblogcategories.zip” Module.

1. Login to your Prestashop admin panel and navigate to MODULES -> Modules. At the top of the page click the Add a new module button.

2. Choose the “smartblog.zip” file and click “Upload this module” button

3. There is a message-box “The module was successfully downloaded.”

4. Please find to the uploaded module and Install it.

5. A pop-up window will display. Please click “Proceed with the installation” button.

6. Finally, Module(s) installed successfully.

Note: The “smartblogcategories.zip” and “smartbloghomelatestnews.zip” module installation steps do the same.

STEP 2: Install “themeinstallator” Module.

1. Login to your Prestashop admin panel and navigate to MODULES -> Modules. At the top of the page click the Add a new module button.

2. Select your module.zip file “themeinstallator.zip” and click “Upload this module” button

3. The uploading process will be started. You will see the message that the module has been successfully downloaded.

4. The new module will be located in the modules list. Search the name of module and Click on the Install button to install the module.

5. Finally, you will see a notice message: “Module(s) installed successfully”.

STEP 3: Install the “sp_stationery_template_p16_v1.0.0.zip” file.

1. In the your Prestashop admin panel and navigate to MODULES -> Modules. Find to the module that you have installed and clicked on Configure button to configure the module.

2. Navigate to “Import from your computer” >> choose the zip theme file as named “sp_stationery_layout1_theme_p16_v1.0.0.zip” >> Next.

3. You will see a message, please click on “Next” button.

4. Select the module that you want to install/disable >> press “Next” to continue the installation process.

5. List of the installed/disabled modules will be showed out and click on “Finish” button to finish the theme installation.

STEP 4: Override folder: copy the “FrontController.php” file into the installation folder with the URL: override\classes\controller.

3SP THEME CONFIGURATION

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the Advanced section, find to the parameter “Keep Menu Top” to set “Yes” and press “Save”.

3. Please check the front-end to view the changes.

3.2 Select Theme Color, Header style, Layout Style

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the Layout section, find to the parameter “Theme Color”, “Header Style”, “Layout Style” and select as you want and press “Save”.

4. Go to the front-end to view the changes.

Please note that when you select (the Color scheme; Layout Box; Body image), remember to “Apply” again and refresh to view the changes.

3.3 Disable Cpanel

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the General section, find to the parameter “Display Cpanel” to set “No” and press “Save”.

3. Please check the front-end to view the changes.

3.4 Setup Logo

2. Please check the front-end to view the changes.

3.5 Image Size Adjustment

In your Prestashop admin dashboard, navigate to: PREFERENCES > Images to configure the image size for category, manufacturer, supplier, product etc that fit your layout best.

1. Image size - You can choose the type of product images that will suit your products the best.

2. Image quality - Set image quality to use on your site.

3.6 Edit Copyright

Frontend Appearance:

To edit Copyright, please the steps following:

1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.

2. In the General section, find to the parameter “Copyright” to edit the test of copyright as you want and press “Save”.

3. Please check the front-end to view the changes.

4MULTISHOP CONFIGURATION

1. In the Administrator Dashboard, navigate to PREFERENCES > General > find to the parameter “Enable Multistore” > click “Yes” to enable multishop and “Save” .

2. Please go to >> ADVANCED PARAMETERS >> Multistore

3. In the Multistore Tree, click “Welcome to SP Atom Layout2“.

multistore-tree

4. After click the link “click here to set URL for this shop” to set URL for SP Atom Layout2

5. Select your “Shop”; set “Virtual URL” and press “Save”.

6. Finally, click the URL to view the changes

5SP TOP HORIZONTAL MENU CONFIGURATION

1. Navigate to Modules -> Modules >> look for SP Top horizontal menu >> Click the Configure button to access the module configuration page.

3. You may also add custom links to the menu list using the Add a new link section.

4. After adding label and link as you want. We will be displayed at Link List.

5. Check the frontend to view the changes.

6EXTENSIONS CONFIGURATION

6.1 SP Stationery Layout 1

6.1.1 DisplayUserInfo Position

SP User Info Block

Frontend Appearance:

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP User Info Block” module >> click “Enable” button to enable this module.

6.1.2 DisplaySearch Position

SP Search Pro

Frontend Appearance:

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Search Pro” module >> click “Configure” button to configure this module.

6.1.3 DisplayTop1 Position

SP Custom HTML: Hotline

Frontend Appearance:

Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Custom HTML” module >> click “Configure” button to configure this module.
Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: The configuration of Module as the illustration.

Copy & Paste the code into your editor:

<ul>
<li class="phone">(420) 608 1345 96</li>
<li class="email"><a href="#">support@yoursite.com</a></li>
</ul>

6.1.4 displayTopNav Position

1. SP Language block

Frontend Appearance:

Backend Settings:

Step 1: To add language as you want. For example: add “Arabic” language, in your Admin Panel >> navigate to LOCALIZATION >> Languages >> click button in the right corner to “ADD NEW”.

Step 2: Fill information into the required field (*) as below:

Step 3: Press “Save” button and view shop to see the changes.

Note: When you add any language as you want, e.x: Arabic language as above. At the frontend , some images will display “?” image as following:

To resolve this error, please make the steps following:

1. In your administator, please find to position of this module. E.x: Position – displayBottom1; Module: SP Custom HTML – Categories Featured

.

2. And click source code to add “../” at before the image url >> Press “OK“.

.

3. Click “Save” button and go to the frontend to view the changes.

2. SP Currency block

Frontend Appearance:

Backend Settings:

Step 1: To add currency as you want. For example: add “Euros” currency, in your Admin Panel >> navigate to LOCALIZATION >> Currencies >> click button in the right corner to “ADD NEW”.

Step 2: Fill information into the required field (*) as below:

Step 3: Press “Save” button and view shop to see the changes.

SP Custom HTML: Custom Social

Frontend Appearance:

Step 3: The configuration of Module as the illustration.

Copy & Paste the code into your editor:

<ul>
<li class="facebook"><a href="YOUR_FACEBOOK_URL" target="_blank">Facebook</a></li>
<li class="Twiter"><a href="YOUR_TWITTER_URL" target="_blank">Twiter</a></li>
<li class="in"><a href="#">In</a></li>
<li class="google"><a href="YOUR_GOOGLE_PLUS_URL" target="_blank">Google+</a></li>
<li class="tumblr"><a href="#">Tumblr</a></li>
</ul>

6.1.6 DisplaySlideShow Position

SP Image slider

Frontend Appearance:

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Image slider” module >> click “Configure” button to configure this module.

6.1.7 DisplayBottom1 Position

1. SP Custom HTML: Categories Featured

Frontend Appearance:

Step 3: The configuration of Module as the illustration.

Copy & Paste the code into your editor:

<div class="all_cate">
<div class="image"><a href="#"><img src="../themes/sp_stationery/img/cms/cate.jpg" alt="#" /></a> <a class="button1" href="#">Paper Products</a></div>
<div class="cate">
<div class="title">Featured
<p class="title_cate">Categories</p>
</div>
<div class="description">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
<div class="button"><a href="#">View All Categories</a></div>
</div>
<div class="image"><a href="#"><img src="../themes/sp_stationery/img/cms/cate1.jpg" alt="#" /></a><a class="button1" href="#">Paper Products</a></div>
</div>
<div class="images">
<ul>
<li><a href="#"><img src="../themes/sp_stationery/img/cms/cate2.jpg" alt="#" /></a><a class="button1" href="#">Paper Products</a></li>
<li><a href="#"><img src="../themes/sp_stationery/img/cms/cate3.jpg" alt="#" /></a><a class="button1" href="#">Paper Products</a></li>
<li><a href="#"><img src="../themes/sp_stationery/img/cms/cate4.jpg" alt="#" /></a><a class="button1" href="#">Paper Products</a></li>
<li><a href="#"><img src="../themes/sp_stationery/img/cms/cate5.jpg" alt="#" /></a><a class="button1" href="#">Paper Products</a></li>
</ul>
</div>

2. SP Super Category

Frontend Appearance:

Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “Sp Super Category” module >> click “Configure” button to configure this module.
Step 2: In the “Sp Super Category” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: The configuration of Module as the illustration.

6.1.8 DisplayBottom Position

SP Custom HTML: Testimonial

Frontend Appearance:

Step 3: The configuration of Module as the illustration.

Copy & Paste the code into your editor:

<div class="container">
<div class="row">
<div class="bg_testimonia col-xs-12">
<div class="bgr_tes">
<ul class="list-content">
<li>
<div class="image"><a href="#"><img src="../themes/sp_stationery/img/cms/author.jpg" alt="#" /></a></div>
<div class="content">
<p class="des">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>
<div class="author_name"><a href="#">Vin Nguyen</a> - Company Name</div>
</div>
<div class="image img-2"><a href="#"><img src="../themes/sp_stationery/img/cms/author2.jpg" alt="#" /></a></div>
</li>
<li>
<div class="image"><a href="#"><img src="../themes/sp_stationery/img/cms/author2.jpg" alt="#" /></a></div>
<div class="content">
<p class="des">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>
<div class="author_name"><a href="#">Vin Nguyen</a> - Company Name</div>
</div>
<div class="image img-2"><a href="#"><img src="../themes/sp_stationery/img/cms/author.jpg" alt="#" /></a></div>
</li>
<li>
<div class="image"><a href="#"><img src="../themes/sp_stationery/img/cms/author.jpg" alt="#" /></a></div>
<div class="content">
<p class="des">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>
<div class="author_name"><a href="#">Vin Nguyen</a> - Company Name</div>
</div>
<div class="image img-2"><a href="#"><img src="../themes/sp_stationery/img/cms/author2.jpg" alt="#" /></a></div>
</li>
<li>
<div class="image"><a href="#"><img src="../themes/sp_stationery/img/cms/author2.jpg" alt="#" /></a></div>
<div class="content">
<p class="des">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>
<div class="author_name"><a href="#">Vin Nguyen</a> - Company Name</div>
</div>
<div class="image img-2"><a href="#"><img src="../themes/sp_stationery/img/cms/author.jpg" alt="#" /></a></div>
</li>
</ul>
</div>
</div>
</div>
</div>

6.1.9 DisplayBottom2 Position

1. SP Deal: Hot Deals

Frontend Appearance:

Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Deal” module >> click “Configure” button to configure this module.
Step 2: In the “SP Deal” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: The configuration of Module as the illustration.

Note: You can go Here to read more How To Set a product To ‘On Sale’ in PrestaShop 1.6

2. SP Extra Slider: Featured Products

Frontend Appearance:

Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Extra Slider” module >> click “Configure” button to configure this module.
Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: The configuration of Module as the illustration.

6.1.10 DisplayBottom3 Position

SmartBlog Home Latest

Frontend Appearance:

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SmartBlog Home Latest” module >> click “Configure” button to configure this module.

6.1.11 DisplayBottom4 Position

SP Manufacture Slider

Frontend Appearance:

Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Manufacture Slider” module >> click “Configure” button to configure this module.
Step 2: In the “SP Manufacture Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: The configuration of Module as the illustration.

6.1.12 DisplayFooter Position

SP Custom HTML: contact footer

Frontend Appearance:

Step 3: The configuration of Module as the illustration.

Copy & Paste the code into your editor:

<div class="socials-wrap">
<ul>
<li class="li-social facebook-social"><a title="Facebook" href="https://www.facebook.com/MagenTech" target="_blank">Facebook<em class="fa fa-facebook icon-social"></em> </a></li>
<li class="li-social twitter-social"><a title="Twitter" href="https://twitter.com/smartaddons" target="_blank"> Twitter<em class="fa fa-twitter icon-social"></em> </a></li>
<li class="li-social google-social"><a title="Google+" href="https://plus.google.com/u/0/+Smartaddons/posts" target="_blank">Google+<em class="fa fa-google-plus icon-social"> </em> </a></li>
<li class="li-social linkedin-social"><a title="Linkedin" href="#" target="_blank"> Linkedin<em class="fa fa-linkedin icon-social"></em> </a></li>
<li class="li-social pinterest-social"><a title="Pinterest" href="#" target="_blank">Pinterest<em class="fa fa-pinterest icon-social"></em> </a></li>
</ul>
</div>
<div class="contact-us">
<h2 class="footer-logo"><a title="Stationery - Responsive Prestashop Multipurpose Theme" href="#"> logo</a></h2>
<div class="footer-block-contact">
<ul>
<li><em class="fa fa-home"> </em>Lorem ipsum dolor sit amet - Your Street<br />Your Country</li>
<li><em class="fa fa-phone"> </em> (420) 123 4567 89 - (420) 123 4567 80</li>
<li><em class="fa fa-envelope"> </em><a title="Hotline" href="#">support@yourmain.com</a></li>
</ul>
<a class="button-footer" href="index.php?controller=contact">Leave us a message</a></div>
</div>

6.1.13 DisplayFooter2 Position

SP Custom HTML: About Us footer

Frontend Appearance:

Step 3: The configuration of Module as the illustration.

Copy & Paste the code into your editor:

<div class="about-footer">
<div class="footer-block-about">
<div class="footer-block-title">
<h2>About Us</h2>
</div>
<div class="img-about"><a href="#">images</a></div>
<div class="des-about">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..<a class="more" href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_stationery/en/content/4-about-us">[more]</a></div>
</div>
</div>

6.1.14 DisplayFooter3 Position

SP Custom HTML: menu footer

Frontend Appearance:

Step 3: The configuration of Module as the illustration.

Copy & Paste the code into your editor:

<div class="column-footer">
<div class="row">
<div class="col-lg-4  col-sm-4  col-xs-12">
<div class="footer-block-column">
<h2>Categories</h2>
<ul>
<li><a title="Cards & Wrap" href="#">Cards & Wrap</a></li>
<li><a title="Note Books" href="#">Note Books</a></li>
<li><a title="Photo Album" href="#">Photo Album</a></li>
<li><a title="Scrapbooks" href="#">Scrapbooks</a></li>
<li><a title="Stationery Essentials" href="#">Stationery Essentials</a></li>
<li><a title="Organisers" href="#">Organisers</a></li>
<li><a title="Paper Work" href="#">Paper Work</a></li>
<li><a title="Pens & Pencils" href="#">Pens & Pencils</a></li>
</ul>
</div>
</div>
<div class="col-lg-4  col-sm-4  col-xs-12">
<div class="footer-block-column">
<h2>Information</h2>
<ul>
<li><a title="About Us" href="#">About Us</a></li>
<li><a title="Customer Service" href="#">Customer Service</a></li>
<li><a title="Blog" href="#">Blog</a></li>
<li><a title="Orders & Returns" href="#">Orders & Returns</a></li>
<li><a title="Deliver Policy" href="#">Deliver Policy</a></li>
<li><a title="FAQs" href="#">FAQs</a></li>
<li><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li><a title="Terms & Conditions" href="#">Terms & Conditions</a></li>
</ul>
</div>
</div>
<div class="col-lg-4  col-sm-4  col-xs-12">
<div class="footer-block-column">
<h2>Customer Service</h2>
<ul>
<li><a title="Help Centre" href="#">Help Centre</a></li>
<li><a title="My Account" href="#">My Account</a></li>
<li><a title="Wishlist" href="#">Wishlist</a></li>
<li><a title="Products Recalls" href="#">Products Recalls</a></li>
<li><a title="Customer Feedback" href="#">Customer Feedback</a></li>
<li><a title="Track Your Order" href="#">Track Your Order</a></li>
<li><a title="Password Reset" href="#">Password Reset</a></li>
<li><a title="Store Location" href="#">Store Location</a></li>
</ul>
</div>
</div>
</div>
</div>

↧

SM Handmade

September 23, 2015, 8:55 am

≫ Next: SM Carousel

≪ Previous: SP Stationery

View demo More detail

This guide will help you install SM Handmade 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 and 1.9.x ( latest version 1.9.2.0 ) (require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION – Back to top

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation (include of Theme Installation).

2.1 Quickstart Installation:

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. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Do not use "localhost" in URL, otherwise you could not log in to your Admin area (you should use your local IP in case of installing on your computer).
- Leave Tables prefix field blank.

Step 7: Create Admin Account. Please fill fully into Required Fields (“First Name; Last Name; Email; Username; password and confirm password”.)

Step 8: Finish Installation and now you can Go to Frontend or Go to Backend.

2.2 Manual Installation

Step 1: Extract “sm_handmade_theme.zip” file and Copy folders skin; app; media, lib to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/). Log out and log in back.
Step 3: Navigate to System >> Cache Management, Select all the cache types, take Action as Disable and Submit.

Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header.

Step 7: You can also change the settings for Footer.

2.3 Theme Setting

Configure SM Handmade General Setting Theme In Magento admin panel, navigate to SM Handmade Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background … for any store.
Configure Theme Layout with Layout style, Header style& Homepage style ( depend on Default pages on Web tab), Layout Group 1,2,3,4,5,6 to configure
Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns, Product Shows Effect On Hover, etc.

Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc..

Note:You also show your brands’ information like the following image in the frontend.

Copy and paste the following code chain into “Custom Tab Content”:

<table class="data-table" style="width: 100%;" border="1">
		<tbody>
		<tr>
		<td>Brand</td>
		<td><img title="brand" alt="brand" src="{{media url="wysiwyg/custom-tab/logo-client.jpg"}}" /></td>
		</tr>
		<tr>
		<td>History</td>
		lt;td>Color sit amet, consectetur adipiscing elit. In gravida pellentesque ligula, vel eleifend turpis blandit vel. Nam quis lorem ut mi mattis ullamcorper ac quis dui. Vestibulum et scelerisque ante, eu sodales mi. Nunc tincidunt tempus varius. Integer ante dolor, suscipit non faucibus a, scelerisque vitae sapien.</td>
		</tr>
		</tbody>
		</table>

Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Insatallation

Note:To import data of Static Blocks and Pages, you don’t need navigate to CMS and create each static block or each page step by step. Please notice “Theme Installation”tab, and pay attention that after clicking“Import Static Block” or “Import Pages”, the below notification will appear to announce that you have just imported data successfully.

However, you have to come back CMS >> Static Block ( or Pages) to configure and select Store View for each Block or Page.

Configure Extensions In SM handmade Setting area, below the General and Catalog fields, navigate toMagentech.com field in the left hand column to configure extensions as you want.

SM Quickview
SM Shop By
SM Search Box Pro
SM Cart Pro
SM Hot Colection Module
SM Deal
SM Listing Tabs
SM Megamenu
SM Basic Products
SM Handmade Setting
SM Camera Slide

2.4 Blog

Configure Blog We are using Aheadworks Blog free extension from Aheadworks, so that it is not including in the quickstart package. You can download free version of Aheadworks Blog Here and follow Its Guide to install. After installing this extension, please go to the admin of blog, navigate to Blog >> Settings to configure it like our configuration and your desire.

3CONFIGURATION – Back to top

Note: Set Default Page

To set a default page for your Magento Site, in the Admin Panel you go to System>>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.

You will have to change to the website / store view that you want to change (the dropdown menu in the upper left corner). You will probably have to create a new CMS page if you want to have something different from your default home page.

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section. Here are list of configuration process for this style:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code chain into the parameter “Layout Update XML”:

<reference name="camera-slide">
    <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>
<reference name="shoppolicy-home1">
   <block type="cms/block" name="shoppolicy-home">
            <action method="setBlockId"><block_id>shoppolicy-home</block_id></action>
    </block>
</reference>

<!--GROUP 1-->

<reference name="group1_col1">
       <block type="hotcollections/list" name="hotcollections.list.default" template="sm/hotcollections/default.phtml"> </block>      
</reference>


<!--GROUP 2-->
<reference name="group2_col1">
<block type="basicproducts/list" name="basicproducts.list" template="sm/basicproducts/default.phtml">
    <action method="_setConfig">
	    <values>            
	        <basicproducts_title_text>New items</basicproducts_title_text>
	        <product_order_by>created_at</product_order_by>
	        <nb_column1>4</nb_column1>
	        <nb_column2>3</nb_column2>
	        <nb_column3>2</nb_column3>
	        <nb_column4>1</nb_column4>
	        <product_limitation>8</product_limitation>
	        <pretext>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</pretext>              
	    </values>
	</action>  
</block>
</reference>

<reference name="group2_col2">
          <block type="cms/block" name="banner-home1">
            <action method="setBlockId"><block_id>banner-home1</block_id></action>
         </block>
</reference>

<!--GROUP 3-->
<reference name="group3_col1">
       <block type="basicproducts/list" name="basicproducts.list1" template="sm/basicproducts/product-slider.phtml">
                 <action method="_setConfig">
            <values>            
                <basicproducts_title_text>Recommended for you</basicproducts_title_text>
                <product_order_by>most_reviewed</product_order_by>
             
                <nb_column1>3</nb_column1>
                <nb_column2>3</nb_column2>
                <nb_column3>2</nb_column3>
                <nb_column4>1</nb_column4>
                <product_limitation>10</product_limitation>
                <imgcfg_width>350</imgcfg_width>
                <imgcfg_height>347</imgcfg_height>
                <pretext>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</pretext>         
            </values>
        </action>  
     </block>
</reference>

<!--GROUP 4-->
<reference name="group4_col1">
        <block type="cms/block" name="testimonial">
            <action method="setBlockId"><block_id>slider-testimonials</block_id></action>
         </block>
</reference>

<!--GROUP 5-->
<reference name="group5_col1">
        <block type="blog/menu_sidebar" name="latest_post">
            <action method="setTemplate" >
                <template>aw_blog/latest_post.phtml</template>
            </action>
        </block>       
</reference>

<!--GROUP 6-->

<reference name="group6_col1">
          <block type="cms/block" name="top_brand">
            <action method="setBlockId"><block_id>Static Block: Top Brand</block_id></action>
         </block>
</reference>

3.1.2 Homepage Style 2

Frontend of Homepage-2 Layout Position

To configure this Homepage Style 2, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section, including 3 tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code chain into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
         <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col2">
       <block type="cms/block" name="banner-home-id2">
            <action method="setBlockId"><block_id>banner-home-id2</block_id></action>
         </block>
</reference>


<!--GROUP 2-->
<reference name="group2_col1">
           <block type="cms/block" name="shoppolicy-home">
                <action method="setBlockId"><block_id>shoppolicy-home</block_id></action>
          </block>
</reference>


<!--GROUP 3-->
<reference name="group3_col1">
         <block type="megamenu/list" name="megamenu.list.theme.content" as="megaMenuLeft" template="sm/megamenu/megamenu-left.phtml">
		<action method="setConfig">
			<values>
                                <title> All Categories</title>  
			        <group_id>3</group_id>
				<theme>2</theme>
			</values>
		</action>
	</block>
</reference>

<reference name="group3_col2">
         <block type="deal/list" name="deal.list.default" template="sm/deal/deal-slider.phtml"></block>
</reference>


<!--GROUP 4-->
<reference name="group4_col1">
        <block type="cms/block" name="banner-left-id2">
            <action method="setBlockId"><block_id>banner-left-id2</block_id></action>
         </block>
         
         <block type="cms/block" name="product-sidebar">
            <action method="setBlockId"><block_id>product-sidebar</block_id></action>
          </block>

         <block type="cms/block" name="testimonial-id2">
            <action method="setBlockId"><block_id>slider-testimonials-id2</block_id></action>
          </block>
</reference>

<reference name="group4_col2">
      <block type="cms/block" name="banner-center-id2">
            <action method="setBlockId"><block_id>banner-center-id2</block_id></action>
       </block>

       <block type="basicproducts/list" name="basicproducts.list" template="sm/basicproducts/default.phtml">
            <action method="_setConfig">
	    <values>            
	           <basicproducts_title_text>New items</basicproducts_title_text>
	           <product_order_by>created_at</product_order_by>
	           <nb_column1>3</nb_column1>
	           <nb_column2>3</nb_column2>
	           <nb_column3>2</nb_column3>
	           <nb_column4>1</nb_column4>
	           <product_limitation>6</product_limitation>
	           <pretext>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</pretext>              
	       </values>
	    </action>  
      </block> 

       <block type="cms/block" name="banner-bottom-id2">
            <action method="setBlockId"><block_id>banner-bottom-id2</block_id></action>
       </block>
</reference>


<!--GROUP 5-->
<reference name="group5_col1">
	 <block type="blog/menu_sidebar" name="latest_post">
            <action method="setTemplate" >
                <template>aw_blog/latest_post.phtml</template>
            </action>
        </block>  
</reference>



<!--GROUP 6-->
<reference name="group6_col1">
        <block type="cms/block" name="top_brand">
            <action method="setBlockId"><block_id>Static Block: Top Brand</block_id></action>
         </block>
</reference>

3.1.3 Homepage Style 3

Frontend of Homepage-3 Layout Position

Similarly to Homepage style 2, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code chain into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
	<block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
</reference>

<reference name="group1_col2">
	<block type="cms/block" name="banner-top-id3">
            <action method="setBlockId"><block_id>banner-top-id3</block_id></action>
         </block>
</reference>



<!--GROUP 2-->
<reference name="group2_col1">
       <block type="listingtabs/list" name="listingtabs_list_default_1" template="sm/listingtabs/default-home3.phtml"></block>
</reference>

<reference name="group2_col2">
         
         <block type="cms/block" name="banner-center-id3">
            <action method="setBlockId"><block_id>banner-center-id3</block_id></action>
         </block>
</reference>





<!--GROUP 4-->
<reference name="group4_col1">
    
</reference>

<reference name="group4_col2">
	<block type="listingtabs/list" name="listingtabs_list_default_2" template="sm/listingtabs/default.phtml">
           <action method="_setConfig">
	    <values>            
	        <listingtabs_title_text>All products</listingtabs_title_text>
	        <product_limitation>8</product_limitation>
                <nbi_column2>3</nbi_column2>
	    </values>
	</action>  
        </block>
</reference>

<reference name="group4_col3">

</reference>

<reference name="group4_col4">
          <block type="cms/block" name="slider-testimonials-id3">
            <action method="setBlockId"><block_id>slider-testimonials-id3</block_id></action>
         </block>
</reference>

<reference name="group4_col5">
         <block type="cms/block" name="about-id3">
            <action method="setBlockId"><block_id>about-id3</block_id></action>
         </block>
</reference>

<reference name="group4_col6">
     <block type="cms/block" name="sevices-id3">
            <action method="setBlockId"><block_id>sevices-id3</block_id></action>
      </block>
</reference>

<!--GROUP 5-->
<reference name="group5_col1">
    <block type="blog/menu_sidebar" name="latest_post_index3">
        <action method="setTemplate" >
            <template>aw_blog/latest_post_index3.phtml</template>
        </action>
    </block>	
</reference>

<reference name="group5_col2">

</reference>


<!--GROUP 6-->
<reference name="group6_col1">
        <block type="cms/block" name="top_brand">
            <action method="setBlockId"><block_id>Static Block: Top Brand</block_id></action>
         </block>
</reference>

<reference name="group6_col2">

</reference>

3.1.4 Homepage Style 4

Frontend of Homepage-4 Layout Position

Similarly to Homepage style 3, to configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section with the following tabs:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.
Design Tab: Please click to see the Backend Settings.

Copy and paste the following code chain into the parameter “Layout Update XML”:

<!--GROUP 1-->
<reference name="group1_col1">
       <block type="megamenu/list" name="megamenu.list.theme.content" as="megaMenuLeft" template="sm/megamenu/megamenu-left-home4.phtml">
		<action method="setConfig">
			<values>
                                <title> All Categories</title>  
			        <group_id>3</group_id>
				<theme>2</theme>
			</values>
		</action>
	</block>
</reference>

<reference name="group1_col2">
      
         <block type="sm_cameraslide/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>

        <block type="cms/block" name="banner-top-home4">
            <action method="setBlockId"><block_id>banner-top-home4</block_id></action>
         </block>

</reference>


<!--GROUP 2-->
<reference name="group2_col1">
         <block type="cms/block" name="block-wellcome">
             <action method="setBlockId"><block_id>block-wellcome</block_id></action>
         </block>
       
        <block type="basicproducts/list" name="basicproducts.list1" template="sm/basicproducts/product-slider-home4.phtml">
                 <action method="_setConfig">
            <values>            
                <basicproducts_title_text>Best sales</basicproducts_title_text>
                <product_order_by>most_reviewed</product_order_by>
                <product_reviews_count>1</product_reviews_count>
                <nb_column1>3</nb_column1>
                <nb_column2>2</nb_column2>
                <nb_column3>3</nb_column3>
                <product_limitation>6</product_limitation>
                <imgcfg_width>350</imgcfg_width>
                <imgcfg_height>350</imgcfg_height>
                <pretext>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </pretext>         
             </values>
          </action>  
        </block>        
      
        <block type="cms/block" name="banner-center-home4">
            <action method="setBlockId"><block_id>banner-center-home4</block_id></action>
       </block>

       <block type="basicproducts/list" name="basicproducts.list2" template="sm/basicproducts/default.phtml">
          <action method="_setConfig">
	     <values>            
	        <basicproducts_title_text>New items</basicproducts_title_text>
	        <product_order_by>created_at</product_order_by>
                <product_reviews_count>1</product_reviews_count>
	        <nb_column1>3</nb_column1>
	        <nb_column2>3</nb_column2>
	        <nb_column3>2</nb_column3>
	        <nb_column4>1</nb_column4>
	        <product_limitation>6</product_limitation>
	        <pretext>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </pretext>              
	     </values>
	  </action>  
      </block>

      <block type="cms/block" name="banner-bottom-home4">
            <action method="setBlockId"><block_id>banner-bottom-home4</block_id></action>
       </block>
</reference>
<reference name="group2_col2">
        

       <block type="cms/block" name="product-sidebar">
            <action method="setBlockId"><block_id>product-sidebar</block_id></action>
       </block>
       
        <block type="cms/block" name="banner-right2-home4">
            <action method="setBlockId"><block_id>banner-right2-home4</block_id></action>
        </block>
       
        <block type="cms/block" name="testimonial-home4">
            <action method="setBlockId"><block_id>slider-testimonials-home4</block_id></action>
         </block>

        <block type="blog/menu_sidebar" name="latest_post_index4">
            <action method="setTemplate" >
                <template>aw_blog/latest_post_index4.phtml</template>
            </action>
        </block>	       

       <block type="cms/block" name="banner-right-home4">
            <action method="setBlockId"><block_id>banner-right-home4</block_id></action>
       </block>
</reference>

<!--GROUP 6-->
<reference name="group6_col1">
        <block type="cms/block" name="top_brand">
            <action method="setBlockId"><block_id>Static Block: Top Brand</block_id></action>
         </block>
</reference>

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” – have id 1 and “Group – Vertical” – have id 3), Two id will be shown in Configuration of SM Mega Menu.

Step 2: Navigate to SM Mega Menu >> Configuration & fill the id number for two above groups in step 1

Step 3: In order to add menu items, Go to SM Mega Menu >> Menu items Manager to add items as you want.

3.2.1 Horizontal Mega Menu:

Horizontal-mega-menu
Horizontal Mega Menu’s backend
Home
Frontend Appearance

Link shows Home’s backend. Please click Here to view.

Featured Menu
Frontend Appearance

Link shows Featured Menu’s backend. Please click Here to view.

Link shows Dropdown Features’ backend. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="home-menu-dropdown">
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Layouts</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}">Home Style 1</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=belgium&___from_store=default"}}">Home Style 2</a></li>
		<li><a title="Home Style 3" href="{{store url="?___store=somaliland&___from_store=default"}}">Home Style 3</a></li>
		<li><a title="Home Style 4" href="{{store url="?___store=bolivia&___from_store=default"}}">Home Style 4</a></li>
	    <li><a title="Layout Boxed" href="{{store url="?___store=benin&___from_store=default"}}">Layout Boxed</a></li>
	</ul>
	
	<ul class="item-home-store header-home">
		<li class="title-menu-home">Headers</li>
		<li><a title="Header Type 1" href="{{store url="?___store=default&___from_store=french"}}">Header Type 1</a></li>
		<li><a title="Header Type 2" href="{{store url="?___store=belgium&___from_store=default"}}">Header Type 2</a></li>
		<li><a title="Header Type 3" href="{{store url="?___store=somaliland&___from_store=default"}}">Header Type 3</a></li>
		<li><a title="Header Type 4" href="{{store url="?___store=bolivia&___from_store=default"}}">Header Type 4</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Detail Layouts</li>
		<li><a title="Product Detail - Full" href="{{store url="dumas-kremas.html"}}">Product Detail - Full</a></li>
		<li><a title="Product Detail - Left Sidebar" href="{{store url="dumas-kremas.html?___store=french&detail_style=2"}}">Product Detail - Left Sidebar</a></li>
		<li><a title="Product Detail - Right Sidebar" href="{{store url="dumas-kremas.html?___store=german&detail_style=3"}}">Product Detail - Right Sidebar</a></li>
		<li><a title="Thumbnail  - Horizontal" href="{{store url="dumas-kremas.html"}}">Thumbnail  - Horizontal</a></li>
		<li><a title="Thumbnail - Vertical" href="{{store url="dumas-kremas.html?___store=german&detail_style=3"}}">Thumbnail - Vertical</a></li>
	</ul>
	
	<ul class="item-home-store theme-menu">
		<li class="title-menu-home">Menu Styles</li>
		<li><a title="mega" href="{{store url="?___store=default&___from_store=french"}}">Mega Menu</a></li>
		<li><a title="Css" href="{{store url="?___store=barbados&___from_store=default"}}">Css Menu</a></li>

	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Zoom Types</li>
		<li><a title="Product Page Inner Zoom" href="{{store url="dumas-kremas.html/?___store=default&___from_store=argentina"}}">Product Page Inner Zoom</a></li>
		<li><a title="Product Page Outer Zoom" href="{{store url="dumas-kremas.html/?___store=bolivia&___from_store=default"}}">Product Page Outer Zoom</a></li>
		<li><a title="Product Page Lens Zoom" href="{{store url="dumas-kremas.html/?___store=andorra&___from_store=default"}}">Product Page Lens Zoom</a></li>
	</ul>
	
	<div style="clear:both; height:15px;"> </div>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Listing Layouts</li>
		<li><a title="Without Sidebar" href="{{store url="accessories.html/?___store=belgium&___from_store=default"}}">Without Sidebar</a></li>
		<li><a title="Left Sidebar" href="{{store url="fashion-accesories/women.html/?___store=default&___from_store=french"}}">Left Sidebar</a></li>
		<li><a title="Right Sidebar" href="{{store url="fashion-accesories/women.html/?___store=belgium&___from_store=default"}}">Right Sidebar</a></li>
		<li><a title="Left - Right Sidebar" href="{{store url="craft-supplies.html/?___store=barbados&___from_store=default"}}">Left - Right Sidebar</a></li>
		
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">About Us Layouts</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Effect Hover Product</li>
		<li><a title="Simple" href="{{store url="?___store=andorra&___from_store=french"}}">Simple</a></li>
		<li><a title="Display Slider Image" href="{{store url="?___store=benin&___from_store=default"}}">Display Slider Image</a></li>
		<li><a title="Display Second Image" href="{{store url="?___store=barbados&___from_store=default"}}">Display Second Image</a></li>
	</ul>

</div>

Shop Menu

Frontend Appearance

Link shows Shop Menu’s backend. Please click Here to view.

Link shows Item Swimwear’s backend. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="home-menu-dropdown style1">
	<ul class="item-home-store layout-home">
		<li class="title-menu">Categories</li>
		<li><a title="Beauty" href="fashion-accesories.html">Fashion & Accesories</a></li>
		<li><a title="Toys" href="fashion-accesories/women.html">Women</a></li>
		<li><a title="Mobile" href="fashion-accesories.html">Mobile Accessories</a></li>
		<li><a title="Rings" href="fashion-accesories/children-babies.html">Children & Babies</a></li>
		<li><a title="Short" href="fashion-accesories/accesories.html">Accesories</a></li>
		
	</ul>
	
	<ul class="item-home-store product-type">
		<li class="title-menu">Product Types</li>
		<li><a title="Simple product" href="rimas-pitema.html">Simple product</a></li>
		<li><a title="Configurable product" href="configurable-product.html">Configurable product</a></li>
		<li><a title="Grouped product" href="grouped-product.html">Grouped product</a></li>
		<li><a title="Bundle product" href="bundle-product.html">Bundle product</a></li>
		<li><a title="Downloadable product" href="downloadable-product.html">Downloadable product</a></li>
		
	</ul>

	<ul class="item-home-store layout-home">
		<li class="title-menu">Shop pages</li>
		<li><a title="Account" href="customer/account">My Account</a></li>
		<li><a title="Order" href="customer/account">My dowload</a></li>
		<li><a title="pages" href="#">Cart pages</a></li>
		<li><a title="Wishlist" href="customer/wishlist">My Wishlist</a></li>
	</ul>
	
	
	<ul class="item-home-store detail-home">
		<li class="title-menu">Product Details</li>
		<li><a title="Product Detail - Full" href="{{store url="dumas-kremas.html"}}">Full width</a></li>
		<li><a title="Product Detail - Left Sidebar" href="{{store url="dumas-kremas.html?detail_style=2"}}"> Left Sidebar</a></li>
		<li><a title="Product Detail - Right Sidebar" href="{{store url="dumas-kremas.html?detail_style=3"}}"> Right Sidebar</a></li>				
	</ul>

</div>

Products Menu

Frontend Appearance

Link shows Products Menu’s backend. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="home-menu-dropdown style2">
	<div class="content">
		<div class="product">
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Beauty & Women</li>
					<li><a href="#">Bags & Purses</a></li>
					<li><a href="#">Dresses</a></li>
					<li><a href="#">Swimwear</a></li>
					<li><a href="#">Shoes</a></li>
					<li><a href="#">Sleepwear</a></li>
				</ul>
			</div>
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Mobile accessories</li>
					<li><a href="#">Decals</a></li>
					<li><a href="#">Flash Drives</a></li>
					<li><a href="#">Flash Drives</a></li>
					<li><a href="#">Gear for Kindle</a></li>
					<li><a href="#">Keyboard Accessories</a></li>
				</ul>
			</div>
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Jewelry & rings</li>
					<li><a href="#">For Women</a></li>
					<li><a href="#">For Men</a></li>
					<li><a href="#">For Kids</a></li>
					<li><a href="#">Rings</a></li>
					<li><a href="#">Wedding</a></li>
				</ul>
			</div>
			<div class="clear"></div>

			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Shorts & Capris</li>
					<li><a href="#">Bags & Purses</a></li>
					<li><a href="#">Dresses</a></li>
					<li><a href="#">Swimwear</a></li>
					<li><a href="#">Shoes</a></li>
					<li><a href="#">Sleepwear</a></li>
				</ul>
			</div>
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Toys & Game for Kids</li>
					<li><a href="#">Baby Shoes</a></li>
					<li><a href="#">Hair Accessories</a></li>
					<li><a href="#">Game & Puzzles</a></li>
					<li><a href="#">Lighting</a></li>
					<li><a href="#">Gyms</a></li>
				</ul>
			</div>
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Weddings</li>
					<li><a href="#">Flowers</a></li>
					<li><a href="#">Craft Supplies</a></li>
					<li><a href="#">Dresses</a></li>
					<li><a href="#">Invitations</a></li>
					<li><a href="#">Signage</a></li>
				</ul>
			</div>


		</div>
		<div class="banner-mennu">
			<a href="#" class="banner-menu style1">
				<img src="{{media url="wysiwyg/menu/001.jpg"}}" alt="" />
			</a>
			<a href="#" class="banner-menu style1">
				<img src="{{media url="wysiwyg/menu/002.jpg"}}" alt="" />
			</a>
			<a href="#" class="banner-menu style1">
				<img src="{{media url="wysiwyg/menu/003.jpg"}}" alt="" />
			</a>
			
		</div>
	</div>
</div>

Accessories Menu
Frontend Appearance

Link shows Accessories Menu’s backend. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="home-menu-dropdown style3">
	<div class="content">
		<div class="product">
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Beauty & Women</li>
					<li><a href="#">Bags & Purses</a></li>
					<li><a href="#">Dresses</a></li>
					<li><a href="#">Swimwear</a></li>
					<li><a href="#">Shoes</a></li>
					<li><a href="#">Sleepwear</a></li>
				</ul>
			</div>
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Mobile accessories</li>
					<li><a href="#">Decals</a></li>
					<li><a href="#">Flash Drives</a></li>
					<li><a href="#">Gear for Android</a></li>
					<li><a href="#">Gear for Kindle</a></li>
					<li><a href="#">Keyboard Accessories</a></li>
					<li><a href="#">Phone Cover</a></li>
				</ul>
			</div>
			<div class="item">
				<ul class="item-home-store layout-home">
					<li class="title-menu">Jewelry & rings</li>
					<li><a href="#">For Women</a></li>
					<li><a href="#">For Men</a></li>
					<li><a href="#">For Kid</a></li>
					<li><a href="#">Rings</a></li>
					<li><a href="#">Wedding</a></li>
				</ul>
			</div>
			<div class="clear"></div>
			<div class="banner-nemu">
				<a href="#" class="banner-menu style1">
					<img src="{{media url="wysiwyg/menu/004.jpg"}}" alt="" />
				</a>
			</div>

		</div>

		<div class="block-product">

{{block type="basicproducts/list" name="basicproducts.menu" template="sm/basicproducts/product-slider-menu.phtml" 
                                product_limitation="1"
				product_title_display="1"
				product_price_display="1"
				product_reviews_count="1"
				product_addcart_display="0"
				product_addwishlist_display="0"
				product_addcompare_display="0"
				product_readmore_display="0"
				product_description_display="0"
                              
}}
		</div>		
	</div>
</div>

Craft Supplies Menu
Frontend Appearance

Link shows Craft Supplies Menu’s backend. Please click Here to view.

Copy and paste the following code chain into the content:

{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default-mega.phtml"
                                nbi_column1="3"
				listingtabs_title_text="Popular Items"
                                product_category="11,12,13,16,17"
                                product_limitation="3"
				product_title_display="1"
				product_price_display="1"
				product_reviews_count="1"
				product_addcart_display="0"
				product_addwishlist_display="0"
				product_addcompare_display="0"
				product_readmore_display="0"
				product_description_display="0"
                                imgcfg_width="200"
                                imgcfg_height="200"
}}

About Us
Frontend Appearance

Backend Settings of About Us Menu Please click Here to view.

Item Dropdown About’s backend. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="home-menu-dropdown">
<ul class="item-home-store layout-home">
		<li class="title-menu-home" style="display:none">About Us Layouts</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>
</div>

Contact Us
Frontend Appearance

Backend Settings of Contact Us Menu Please click Here to view.

Item Dropdown Contact’s Backend. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="home-menu-dropdown">
<ul class="item-home-store layout-home">
		<li class="title-menu-home" style="display:none">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>
</div>

3.2.2 Vertical Mega Menu ( In The Homepage 2)

Vertical Mega Menu includes 10 items:

Electronics
Auto & Bike
Apparel
Home & Kitchens
Beauty & Health
Fashion & Accesories
Sport & Fitness
Outdoor adventure
Toys & Game for Kids
Weddings

Frontend Appearance

Backend Appearance

Electronics
Frontend Appearance

Tree of Electronics:

Backend Settings of Electronics

Note: To configure these sub-items inside this category, we do as following tasks:

Item: “Column 1″– Menu Backend Settings
Item: “Column 1 1″– Menu Backend Settings
Item: “Cross-body Bags”– Menu Backend Settings
Item: “Banner 1″– Menu Backend Settings

Note: Copy & paste the following code chain chain into tab “content”:

<div class="static-content-menu hover-img">
<a class="banner-home" href="#" title="Static Image"><img src="{{media url="wysiwyg/image-cat/mega-1.jpg"}}" alt="Static Image" /></a>
</div>

Auto & Bike
Frontend Appearance

Tree of Auto & Bike:

Backend Settings of Auto & Bike

Item: “Pickup”– Menu Backend Settings

Apparel
Frontend Appearance

Backend Settings of Apparel

Note: Copy & paste the following code chain chain into tab “content”:

{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default-mega.phtml"
                                nbi_column1="3"
				listingtabs_title_text="Popular Items"
                                product_category="12,11,13,16,17"
                                product_limitation="3"
				product_title_display="1"
				product_price_display="1"
				product_reviews_count="1"
				product_addcart_display="0"
				product_addwishlist_display="0"
				product_addcompare_display="0"
				product_readmore_display="0"
				product_description_display="0"
                                imgcfg_width="200"
                                imgcfg_height="200"
}}

Other items in Vertical Menu are configured the same as above items.

3.3 Configure Extensions

The SM Handmade front-page has been integrated with extensions in the Theme as following list:

I. SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

II. SM Mega Menu

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu: Click Here
Go Here to readmore about the SM Mega Menu module.

III. SM Mega Menu 2

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu: Click Here
Go Here to readmore about the SM Mega Menu module.

IV. SM Camera Slide

Position: SM Camera Slide
Frontend Appearance

Backend of SM Camera Slide: Click Here
Go Here to readmore about the SM Camera Slide module.

V. SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Go Here to readmore about the SM Deal module.

VI. SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here
Go Here to readmore about the SM Basic Products module.

VII. SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of Listing Tabs : Click Here
Go Here to readmore about the SM Listing Tabs module.

3.4 Configure Static Blocks

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

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

1. Static Block: Shoppolicy Home

To create the static block, go to CMS >> Static Blocks with Identifier * : “shoppolicy-home”

Frontend

Backend Setting

Copy & paste the code chain for Content of Shoppolicy Home:

<div id="shopolicy" >
	
			<div class="item item1">
				<div class='item-inner'>
					<div class="icon">
						<img src="{{media url="wysiwyg/policy/001.png"}}" alt="" />
					</div>
					<div class="info-item">
						<h3>Support online</h3>
						<span>Call us: ( +123 ) 456 789</span>
					</div>
				</div>
			</div>
			<div class="item item2">
				<div class='item-inner'>
					<div class="icon">
						<img src="{{media url="wysiwyg/policy/002.png"}}" alt="" />
					</div>
					<div class="info-item">
						<h3>Free shiping</h3>
						<span>On order over $69</span>
					</div>
				</div>
			</div>
			<div class="item item3">
				<div class='item-inner'>
					<div class="icon">
						<img src="{{media url="wysiwyg/policy/003.png"}}" alt="" />
					</div>
					<div class="info-item">
						<h3>Discount</h3>
						<span>10% on order over $129</span>
					</div>
				</div>
			</div>
			<div class="item item4">
				<div class='item-inner'>
					<div class="icon">
						<img src="{{media url="wysiwyg/policy/004.png"}}" alt="" />
					</div>
					<div class="info-item">
						<h3>Money back</h3>
						<span>Guarantee</span>
					</div>
				</div>
			</div>
		</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “banner-home1″

Frontend

Backend Setting

Copy & paste the code chain for Content of Static Block: Banner Home 1:

<div class="banner-home-page1">
	<div class="col-1">
		<div class="pull-left hover-img hidden-sm">
			<a href="#" class="banner-home">
				<img src="{{media url="wysiwyg/banner/001.jpg"}}" alt="" />
			</a>
		</div>
		<div class="pull-right hover-img">
			<a href="#" class="banner-home">
				<img src="{{media url="wysiwyg/banner/002.jpg"}}" alt="" />
			</a>
		</div>
	</div>
	<div class="clear"></div>
	<div class="col-2">
		<div class="pull-left hover-img">
			<a href="#" class="banner-home">
				<img src="{{media url="wysiwyg/banner/003.jpg"}}" alt="" />
			</a>
		</div>
		<div class="pull-right hover-img hidden-sm">
			<a href="#" class="banner-home">
				<img src="{{media url="wysiwyg/banner/004.jpg"}}" alt="" />
			</a>
		</div>
	</div>
</div>

3. Static Block: Testimonials

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “slider-testimonials”

Frontend

Backend Setting

Copy & paste the code chain for Content of Static Block: Testimonials:

<div class="overflow-slider testimonials block">
	<div class="title-home">
		<h2>What customers say</h2>
	</div>
	
	<div class="margin-slider">
		<div class="testimonials-slider">

			<div class="item">
				<div class="image-client">
					<img src="{{media url="wysiwyg/testimonial/client-1.png"}}" alt="Venus" />
				</div>

				<div class="info-client">
					<h2 class="client-name">Venus</h2>
					<div class="client-site"><a href="#">www.domain.com</a></div>
				</div>

				<div class="comment">
					 <span class="before"> </span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernaturvoluptatem<span class="after"> </span>
				</div>
			</div>
			<div class="item">
				<div class="image-client">
					<img src="{{media url="wysiwyg/testimonial/client-2.jpg"}}" alt="Venus" />
				</div>

				<div class="info-client">
					<h2 class="client-name">Orianna</h2>
					<div class="client-site"><a href="#">www.domain.com</a></div>
				</div>

				 <div class="comment">
					 <span class="before"> </span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernaturvoluptatem<span class="after"> </span>
				</div>
				
			</div>
			<div class="item">
				<div class="image-client">
					<img src="{{media url="wysiwyg/testimonial/client-3.jpg"}}" alt="Venus" />
				</div>

				<div class="info-client">
					<h2 class="client-name">Mater Yi</h2>
					<div class="client-site"><a href="#">www.domain.com</a></div>
				</div>

				<div class="comment">
					 <span class="before"> </span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernaturvoluptatem<span class="after"> </span>
				</div>
			</div>			

		</div>
	</div>
	
	<script>
		jQuery(document).ready(function($) {
			var owl_testimonial = $(".testimonials-slider");
			owl_testimonial.owlCarousel({
				responsive:{
					0:{
						items:1
					},
					480:{
						items:1
					},
					768:{
						items:1
					},
					992:{
						items:1
					},
					1200:{
						items:1
					}
				},
				
				autoplay:false,
				loop:false,
				nav : true, // Show next and prev buttons
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:0,
			
			});
	

		});

	</script>
</div>

4. Static Block: Top Brand

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “static-top-brand”

Frontend

Backend Setting

Copy & paste the code chain for Content of Static Block: Top Brand:

<div class=" top-brand block-slider block">
	<div class="title-home">
		<h2>Top brands</h2>


	</div>

	 <div class="navslider">
			<a class="prev" title="prev" href="#"></a>
			<a class="next" title="next" href="#"></a>
		</div>
	
	<div class="top-brand-slider">

		

		<div class="item">
			
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.png"}}" alt="Brand" /></a></div>
				
			
		</div>
		
		<div class="item">
			
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.png"}}" alt="Brand" /></a></div>
			
		</div>
		
		<div class="item">
			
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.png"}}" alt="Brand" /></a></div>
			
		</div>
		
		<div class="item">
			
				<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.png"}}" alt="Brand" /></a></div>
			
		</div>
		
		<div class="item">
			<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.png"}}" alt="Brand" /></a></div>
		</div>
		
		<div class="item">
			<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-6.png"}}" alt="Brand" /></a></div>
		</div>
		<div class="item">
			<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-7.png"}}" alt="Brand" /></a></div>
		</div>
		<div class="item">
			<div><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-8.png"}}" alt="Brand" /></a></div>
		</div>
	</div>
</div>

<script>
	jQuery(document).ready(function($) {
		var owl_topbrand = $(".top-brand-slider");
		owl_topbrand.owlCarousel({

			responsive:{
				0:{
					items:2
				},
				480:{
					items:2
				},
				768:{
					items:4
				},
				992:{
					items:5
				},
				1200:{
					items:6
				}
			},
				
			autoplay:false,
			loop:false,
			nav : false, // Show next and prev buttons
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:30,
			onInitialized: callback
		});

		function callback(event) {
   			if(this._items.length > this.options.items){
			        $('.block-slider .navslider').show();
			    }else{
			        $('.block-slider .navslider').hide();
			    }
		}
		$('.block-slider .navslider .prev').on('click', function(e){
			e.preventDefault();
			$('.top-brand-slider').trigger('prev.owl.carousel');
		});
		$('.block-slider .navslider .next').on('click', function(e){
			e.preventDefault();
			$('.top-brand-slider ').trigger('next.owl.carousel');
		});
	});

</script>

5. Static Block: Footer About

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-about”

Frontend

Backend Setting

Copy & paste the code chain for Content of footer-about:

<div class="footer-block-content">
	<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>

	<div class="time">
		Opening: <span>10:00am - 8:00pm</span>
	</div>
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-infomation”

Frontend

Backend Setting

Copy & paste the code chain for Content of footer-infomation:

<div class="footer-block-title">
	<h2>information</h2> 
</div>


<div class="footer-block-content">
	<ul>
		<li><a href="#" title="Subscribe">Subscribe</a></li>
		<li><a href="#" title="Unsubscribe">Unsubscribe</a></li>
		<li><a href="#" title="Help">Help</a></li>
		<li><a href="#" title="How to Uninstall">How to Uninstall</a></li>
		<li><a href="{{store url="about-us.html"}}" title="About Company">About Company</a></li>
		<li><a href="{{store url="contact-us.html"}}" title="Contact Us">Contact Us</a></li>
	</ul>
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-myaccount”

Frontend

Backend Setting

Copy & paste the code chain for Content of Static Block: My Account:

<div class="footer-block-title">
	<h2>My Account</h2> 
</div>

<div class="footer-block-content">
	<ul>
		<li><a href="#" title="Sitemap">Sitemap</a></li>
		<li><a href="#" title="Privacy Policy">Privacy Policy</a></li>
		<li><a href="#" title="Your Account">Your Account</a></li>
		<li><a href="#" title="Advanced Search">Advanced Search</a></li>
		<li><a href="{{store url="contact-us.html"}}" title="Contact Us ">Contact Us </a></li>
		<li><a href="#" title="Help">Help & FAQs</a></li>
	</ul>
</div>

To add this static block, first go to CMS then click Static Blocks and create a new one with Identifier * : “footer-contact-us”

Frontend

Backend Setting

Copy & paste the code chain for Content of Static Block: Footer Contact Us:

<div class="footer-block-title">
									<h2>Contact us</h2>
								</div>
								
								<div class="footer-block-content">
									<ul>
										<li><span class="label-footer">Add:</span> Lafayette has a great customer service</li>
										<li><span class="label-footer">Tel:</span>  <a href="tel:+842800011800" title="Telephone">02 8000 11 800</a></li>
										<li><span class="label-footer">Email:</span> <a href="mailto:name@email.com" title="Mail to: hr@handmadeshop.com">hr@handmadeshop.com</a></li>
										<li><span class="label-footer">Hotline:</span> <a href="tel:+846475071376" title="Hotline">647-507-1376</a></li>
									</ul>
								</div>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM handmade Setting Module to configure the “Custom Copyright” parameter as image below:

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

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, Please navigate to System >> Configuration >>; find SM handmade Setting Module to configure the “Social style” parameter as image below:

4SUPPORT – 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 a bunch!

↧

SM Carousel

September 29, 2015, 9:36 pm

≫ Next: SW Love Fashion v2.0.0

≪ Previous: SM Handmade

View demo More detail

This guide will help you install SM Carousel – Version 1.0.0 step by step.

1REQUIREMENT – Back to top

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

Support Magento 1.9.x
Responsive Magento Extension

2INSTALLATION – Back to top

2.1 Extension Installation

There are two ways to install extension:

Step 1: Download and unzip extension contents on your computer and navigate inside the extracted folder.
Step 2: 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 3: Login your Magento Admin
Step 4: Navigate to System => Configuration => find SM Carousel module (in the left of column) to configure this module

Step 5: You will see installed extension, click extension’s name tab to go to extension configuration page.

OR you also install the steps as following:

Step 1: In the Administrator page, Navigate to System >> Magento Connect >> Magento Connect Management

Step 2: Click Browse and Upload package file

Important Note:

After installing extension, you should logout first and then login Admin Panel to ensure all functions work normally.

You should disable all caches in cache management in the installation and configuration process.

2.2 Page Configuration

If you want to display this module on any page that you want, Please go to CMS > Page > Edit SM Carousel > Tab Content and add this code:

<reference name="content">
			<block type="carousel/list" name="carousel.list.default" template="sm/carousel/default.phtml">
			</block>
		</reference>

3EXTENSION CONFIGURATION – Back to top

3.1 Below is module layout

This module is responsive for different screens, thus it can display the item number in the two columns, the left column shows the number, title, description and price of products, and the right one displays the images of products.

3.2 Module Configuration

Note:We used the images of module’s installtion on Magento 1.9.x to illustrate

After installing, go to System -> Configuration and find SM Carousel (in the left of column) to configure.
The parameters are divided into the following groups:

General settings
Source Options
Product Options
Image Options
Effect Options
Advanced Options

Let’s look at the parameters in detail:

General Options

Enable/Disable – Allow you display title category or NOT.
Title of Carousel – You can enter title of module here.
Link target – Target to open links:
- New window – Open the link in the new window/tab.
- Same window – Open the link in the same window/tab.
- Popup window – Open links in new pop-up window.
# Column – Set # column for Product’s images:
- For devices have screen width from 1200px up to greater.
- For devices have screen width from 768px up to 1199px.
- For devices have screen width from 480px up to 767px.
- For devices have screen width less than or equal 479px.

Source Options

Product Source – Allow choose type of Product Source: Catalog/Media/Product IDs to Exclude.
Select Category – Allow you to select Category for showing products.
Child Category Products – Allow to include/exclude Child Category Products .
Category Depth – Allow to enter the number of child category levels to return.
Featured Products – Allow to Show/Hide/Only Featured Products.
Product Field to Order By – Set Product Field to Order By.
Ordering Direction – Allow to order ascending/descending direction.
Products Limitation – Allow to set product limitation.

Product Options
Product title

Display – Allow to display title of product OR not.
Max Length – The limited number of characters on product title.

Product Description

Display – Allow to display description of product OR not..
Max Length – The limited number of characters on product description.

Others

Display Price – Allow to display Price of product OR not.
Display Reviews Summary – Allow to show Review Summary or not.
Display Add To Cart – Allow to display Add To Cart OR not.
Display Add Wishlist – Allow to show Add Wishlist or not.
Display Add Compare – Allow to display Add Compare OR not.
Display Readmore Link – Allow to show Readmore Link or not.
Readmore Text – Show readmore by ” Detail + “.

Image Options

Image Options Products
Get Image from Product Image
- Product Image – Allow to display Image of product or NOT.
Get Image from Product Description
- Product Description – Allow to display description of Products or NOT.
- Order to Get – Allow to order to get image with options such as category_image, category_thumbnail, category_description.
- Resize – Allow you resize category image or NOT.
- Placeholder: show where to take the photo. If items do not have image, it will get image nophoto.
- Set Width, Height for Odd Number Image
- Image Width – Allow to set image width.
- Image Height – Allow to set image height.
- Set Width, Height for Even Number Image
- Image Width – Allow to set image width.
- Image Height – Allow to set image height.

Effect Options

Start – Allow to set page that is displayed at first when you run slideshow.
Auto Play – Allow to Enable/Disable auto play mode.
Interval – The duration to change to next slide.
Pause/Hover – Allow to Stop effects when users hover Or not.
Effect – Allow to effect or not.
Swipe – Allow to swipe or not.

Advanced Options

Include jQuery – Use jQuery from this module or not.
Pre-text – The content to show at the top of module.
Post-text – The content to show at the end of module.
Caching – Select whether to cache the content of this module.
Cache Time – The time (in seconds) before the module is recached.

4SUPPORT – Back to top

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

Thanks so much!

↧

SW Love Fashion v2.0.0

September 30, 2015, 12:43 am

≫ Next: SM Supershop

≪ Previous: SM Carousel

View demo More detail

1GETTING STARTED

1.1 Introduction

1.2 System Requirements

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

Apache 2.x or Microsoft IIS 7
PHP 5.3.x
MySQL 5.0.4 or higher
WordPress 3.9+, 4.0+

Recommended PHP Configuration Limits: Many issues you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can contact with your web host and ask them to increase those limits to a minimum or You can do this on your own by finding php.ini file in your root directory as follows:

max_execution_time 360

memory_limit 128M

post_max_size 32M

upload_max_filesize 32M

2INSTALLATION

2.1 Files Structure

At first, you need to download the package about my computer and then unzip the package. The Main Files Gives You All The Content Listed Below

Data folder - Contains the “slide-1.zip” file, “slide-2.zip” and “slide-3.zip” file.
Theme installation package – Contains the sw_lovefashion_theme_version2.0.0.zip (the newest version) file and sw_lovefashion-child-theme.zip WordPress Theme. The child theme is only for users who make code changes.

2.2 Theme Installation

You can install the theme in two ways: through WordPress, or via FTP.

Note: If the theme file size is larger than 8M, please upload to FTP (File Transfer Protocol).

2.2.1 Theme Via FTP Installation

Extract themename_version.zip.
Load your FTP client, such as FileZilla.
Upload the themename_version folder to the /wp-content/themes directory.
In the left menu sidebar, go to Appearance >> Themes.
Click Activate underneath the theme’s named section.

2.2.2 Theme Via WordPress Admin Panel Installation

Step 1 – Open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g (www.your_domain.com/wp-admin/).

Step 2 – Login to your WordPress Dashboard and navigate to Appearance >> Themes. At the top of the page click the Add New button.

Step 3 – Click the Upload Theme button >> Choose File in Import from your computer section. Navigate to previously zipped theme package and open theme installator folder: Select your “ sw_lovefashion_theme_v2.0.0.zip” file and click Install Now.

Step 4 – The uploading process will be started. You will see the message that Theme installed successfully.

Step 5 – After the installation you will be able to activate the theme to do this click the “blue” activation link.

Step 6 – Press “Save Changes” to complete the theme activation.

Once theme is installed, you need to install Required Plugins to get full features working.

2.3 Required Plugins Installation

Note: If the plugins installation process could have a notice some plugins unsuccessful installation, please go to these plugins to install one by one. This case usually occurs as you select all plugins installation at once.

2.4 Import Demo Data

Step 1 - In the Administrator page, please navigate to Appearance >> Import Demo Data.

Step 2 - Please click “Import Demo Data” button.

The process will take a while. After importing all done! Please import “media.xml” file.

2.5 Import Media file

Step 1 - In the Administrator page, please navigate to Tools >> Import.

import

Step 2 - Please choose “WordPress” to import.

wordpress

Step 3 - In Import WordPress page, click “choose file” button to select file “media.xml” to upload.

import-media-file

2.6 Import Revolution Slider

Step 1 – In the Administrator page, please navigate to Revolution Slider >> Click “Import Slider” button .

Step 2 – The “Import Slider” pop-up window, please choose the “slide-1.zip” file (in the folder “revslider”) and press “Import Slider“ button.

Note: Import “slide-2” file & “slider-3” file do the same.

2.7 Change Product Image Sizes

You can change the image size in “Woocommerce > Settings > Products > Display” section.

woocommerce

After change the images sizes, you should regenerate all the thumbnails. For this, you should install and activate “Regenerate Thumbnails” plugin.

4MEGA MENU

In your Administrator Page, please navigate to Appearance > Menus to configure the menu structure.

The Frontend Appearance:

The Backend Settings:

1. We call Parent Level Menu Level 0. Then, next levels are Level 1, Level 2…

2. Click on a Menu Level 0 (Parent Level Menu ) item and select Dropdown Size = “6″ in selectbox.

3. Click “Save”

The parameter explanation in Advanced Menu Config:

Active mega menu: Allow to activate/inactivate Mega Menu

Icon: Using icon-* class to display Icon for any menu item with Font Awesome intergrated. Refercence Font Awesome for details

Dropdown Size: Set the width of dropdown menu. (ex: min = 1 (= 150px); max = 6 (= 900px)).

Dropdown Align

- Only for menu items level 0 – If you want dropdown (if have) align by right direction, config it to ‘Right’ instead of ‘Left’ or ‘Default’ – ‘Default’: no class be add to dropdown, everything are nature by default css. – ‘Left’ / ‘Right’: add to dropdown an utility class for float it left/ right. Make it align as you want.

Show Description as Subtitle

- Mean as the name. – Description is core attribute of menu item. You may need check to show it in the metabox screen.

Hide Title

- Sometime you need hide the title of menu, select ‘Yes’ value please. In this case, Icon or Subtitle or Advanced Content are need to show as replacer.

Disable Link: Allow to disable link.

Advanced:

- Some advanced functions are placed here. – ‘Default’: NOOP, do nothing. Sure, it is not advanced – ‘Use as Divider’: Show any icon, title, subtitle, content. Divider style only. – ‘Append Advanced Content’: Append content after menu title block (icon+title+subtitle) – ‘Append Advanced Content with Shortcode’: as above, but ‘do_shortcode’ with this before append.

Advanced content: Insert content follow Advanced ( input HTML, image… not included js & css)

Menu Thumbnail: Allow to upload thumbnail for menu

5PAGES

5.1 How To Set your Homepage

Step 1 - Go to Settings > Reading in your WordPress Dasrdoard panel.

Step 2 - Set “Front page displays” to a “Static Page”.

Step 3 - In the drop down menu for “Front Page” choose a page which will be your home page.

Step 4 - Leave the drop down menu for “Posts page” empty, as this is not used by the theme.

Step 5 - Save changes.

reading

5.2 Plugin Visual Composer

SW Love Fashion v2.0.0 uses the Visual Composer Page Builder plugin so that you have a demo site completely when you view site.

Note: Please go Here to get more info about this plugin.

↧

SM Supershop

September 30, 2015, 11:41 pm

≫ Next: SM Supershop

≪ Previous: SW Love Fashion v2.0.0

View demo More detail

This guide will help you install SM Super Shop 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 and 1.9.x (the latest version : 1.9.2.1 , require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION – Back to top

There are two ways to install a Magento Theme:

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation (include of Theme Installation and Extension Installation): You will need only be using the zipped files in “Extensions” and “Theme” folders.

2.1 Quickstart Installation :

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. Please follow each step of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill fully into Required Fields (“Locale; Time Zone and Default Currency”.)

Step 6: In the Configuration step, input the required fields as below.
- Do not use “localhost” in URL, otherwise you could not log in to your Admin area (you should use your local IP in case of installing on your computer).
- Leave Tables prefix field blank.

Step 7: Create Admin Account. Please fill fully into Required Fields (“First Name; Last Name; Email; Username; password and confirm password”.)

Step 8: Finish Installation and now you can Go to Frontend or Go to Backend.

2.2 Manual Installation

Step 1: Extract “sm_supershop_theme.zip” file and Copy folders skin; app; images; media to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/). Log out and log in back.
Step 3: Navigate to System >> Cache Management, Sellect All the cache types, take Action as Disable and Submit.

Step 4: Navigate to System >> Configuration >> Design.

Step 5: In Package tab of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header .

Step 7: You can also change the settings for Footer .

2.3 Theme Setting

Configure SM Supershop General Setting Theme In the Administrator page, Please navigate to SM Supershop Setting and configure theme as you want.

Configure General with Theme color, Font size, color for the link, hover buttons, page, text, title, background, etc for any store.
Configure Theme Layout with Layout style, Header style& Homepage style (depend on Default pages on Web tab)
Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns, Product Shows Effect On Hover, etc.

Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.

Note:You also show your brands’ information like the following image in the frontend.

Copy and paste the following code chain into “Custom Tab Content”:

<table class="data-table" style="width: 100%;" border="1">
		<tbody>
		<tr>
		<td>Brand</td>
		<td><img title="brand" alt="brand" src="{{media url="wysiwyg/custom-tab/logo-client.jpg"}}" /></td>
		</tr>
		<tr>
		<td>History</td>
		<td>Color sit amet, consectetur adipiscing elit. In gravida pellentesque ligula, vel eleifend turpis blandit vel. Nam quis lorem ut mi mattis ullamcorper ac quis dui. Vestibulum et scelerisque ante, eu sodales mi. Nunc tincidunt tempus varius. Integer ante dolor, suscipit non faucibus a, scelerisque vitae sapien.</td>
		</tr>
		</tbody>
		</table>

Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Installation

Note:To import data of Static Blocks and Pages, you don’t need navigate to CMS and create each static block or each page step by step. Please notice “Theme Installation”tab, and pay attention that after clicking“Import Static Block” or “Import Pages”, the below notification will appear to announce that you have just imported data successfully.

However, you have to come back CMS >> Static Block ( or Pages) to configure and select Store View for each Block or Page.

Configure Extensions In SM handmade Setting area, below the General and Catalog fields, navigate toMagentech.com field in the left hand column to configure extensions as you want.

SM Shop By
SM Quickview
SM Cart Pro
SM Deal
SM Basic Products
SM Custom
SM Megamenu
SM Listing Tabs
SM Twitter
SM Supershop Setting
SM Instagram Gallery
SM Camera Slider

2.4 Blog

3CONFIGURATION – Back to top

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section.

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

<div class="home-default homestyle1">
	<div class="wow fadeInUp">
		<div class="static-image-1">
			{{block type="cms/block" block_id="static-image-1"}}
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="slider-basic-wrapper box-content">
			{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="box-content listingtab-wrapper">
			{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml"}}
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-image center">
			<div class="full-content">
				{{block type="cms/block" block_id="static-image-2"}}
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="box-content listingtab-wrapper">
			{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml"
				listingtabs_title_text="Bed Room" 
				product_category="241,242,243,244,245,246,247,248,249"
			}}
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-custom center">
			<div class="full-content">
				{{block type="custom/list" template="sm/custom/default.phtml"}}
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="full-wrapper full-block box-content latest-post-wrapper">
			<div class="container">
				<div class="slider-latest-blog">
					{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}
				</div>
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-counter">
			<div class="container">
				{{block type="cms/block" block_id="counter-block"}}
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="full-wrapper full-block box-content contact-full">
			<div class="container">
				{{block type="cms/block" block_id="contact-homepage"}}
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="brand-wrapper">
			{{block type="cms/block" block_id="brand-block"}}
		</div>
	</div>

</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field:

<reference name="full_top">
	<block type="sm_cameraslider/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
	</reference>

3.1.2 Homepage Style 2

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section.

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

<div class="home-default homestyle2">
	<div class="row">
		<div class="col-lg-3 col-md-3 col-sidebar-home">
			<div class="wow bounceInLeft">
				{{block type="megamenu/list" template="sm/megamenu/megamenu-vertical.phtml"
					title="Categories" 
					group_id="5" 
					theme="2"
				}}
			</div>

			<div class="wow bounceInLeft">
				{{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}
			</div>

			<div class="wow bounceInLeft">
			{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post-index2.phtml"}}
			</div>

			<div class="wow bounceInLeft">
				{{block type="cms/block" block_id="static-image-4"}}
			</div>

			<div class="wow bounceInLeft">
				{{block type="twitterslider/list" template="sm/twitterslider/default.phtml"}}
			</div>

			<div class="wow bounceInLeft">
				{{block type="instagramgallery/instagramusers_viewlist" name="instagramgallery" as="instagramgallery"}}
			</div>

			<div class="wow bounceInLeft">
				{{block type="cms/block" block_id="what-client-say"}}
			</div>
		</div>

		<div class="col-lg-9 col-md-9 col-main-home">
			<div class="wow bounceInRight">
				<div class="slider-basic-wrapper box-content">
					{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
				</div>
			</div>

			<div class="wow bounceInRight">
				<div class="box-content listingtab-wrapper">
					{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default_index2.phtml"}}
				</div>
			</div>

			<div class="wow bounceInRight">
				<div class="box-content listingtab-wrapper">
					{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default_index2.phtml"
						listingtabs_title_text="Bed Room" 
						product_category="241,242,243,244,246"
					}}
				</div>
			</div>

			<div class="wow bounceInRight">
				<div class="static-iamge-3">
					{{block type="cms/block" block_id="static-image-3"}}
				</div>
			</div>

			<div class="wow bounceInRight">
				<div class="slider-deal-home">
					{{block type="deal/list" name="deal.list.default" template="sm/deal/slider-deal.phtml"}}
				</div>
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-counter">
			<div class="container">
				{{block type="cms/block" block_id="counter-block"}}
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="full-wrapper full-block box-content contact-full">
			<div class="container">
				{{block type="cms/block" block_id="contact-homepage"}}
			</div>
		</div>
	</div>

	<div class="wow fadeInUp">
		<div class="brand-wrapper">
			{{block type="cms/block" block_id="brand-block"}}
		</div>
	</div>

</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field:

<reference name="full_top">
	<block type="sm_cameraslider/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>

        <block type="cms/block" name="static-categories">
		<action method="setBlockId"><block_id>static-categories</block_id></action>
	</block>
</reference>

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” and “Group – Vertical” ), Two ID of these groups will be shown in Configuration of SM Mega Menu.

Step 2: Navigate to SM Mega Menu >> Configuration & fill the ID number for two above groups in step 1

Step 3: In order to add menu items, Go to SM Mega Menu >> Menu Items Manager to add items as you want.

3.2.1 Horizontal Mega Menu:

Horizontal-mega-menu
Horizontal Mega Menu’s backend
Home
Frontend Appearance

Link shows Home’s backend. Please click Here to view.

Features
Frontend Appearance

Link shows Features Menu’s backend. Please click Here to view.

Link shows Dropdown Features’ backend. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="home-menu-dropdown">
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Layouts</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}">Home Style 1</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}">Home Style 2</a></li>
		<li><a title="Boxed Layout" href="{{store url="?___store=somaliland&___from_store=default"}}">Boxed Layout</a></li>
	</ul>

	<ul class="item-home-store theme-color">
		<li class="title-menu-home">Color Styles</li>
		<li class="green"><a title="Green" href="{{store url="?___store=german&___from_store=default"}}">Green</a></li>
		<li class="cyan"><a title="Cyan" href="{{store url="?___store=argentina&___from_store=default"}}">Cyan</a></li>
		<li class="orange"><a title="Orange" href="{{store url="?___store=bolivia&___from_store=default"}}">Orange</a></li>
	</ul>

	<ul class="item-home-store header-home">
		<li class="title-menu-home">Headers</li>
		<li><a title="Header Type 1" href="{{store url="?___store=default&___from_store=french"}}">Header Type 1</a></li>
		<li><a title="Header Type 2" href="{{store url="?___store=french&___from_store=default"}}">Header Type 2</a></li>
		<li><a title="Megamenu" href="{{store url="?___store=default&___from_store=french"}}">Megamenu</a></li>
		<li><a title="Css Menu" href="{{store url="?___store=barbados&___from_store=french"}}">Css Menu</a></li>
	</ul>

	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Product Detail Layouts</li>
		<li><a title="Product Detail - Full" href="{{store url="shop/sazen-kutemas.html"}}">Product Detail - Full</a></li>
		<li><a title="Product Detail - Left Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=2&thumbstyle=1"}}">Product Detail - Left Sidebar</a></li>
		<li><a title="Product Detail - Right Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=3&thumbstyle=1"}}">Product Detail - Right Sidebar</a></li>
		<li><a title="Thumbnail  - Horizontal" href="{{store url="shop/sazen-kutemas.html?thumbstyle=1"}}">Thumbnail  - Horizontal</a></li>
		<li><a title="Thumbnail - Vertical" href="{{store url="shop/sazen-kutemas.html?thumbstyle=2"}}">Thumbnail - Vertical</a></li>
	</ul>

	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Zoom Types</li>
		<li><a title="Product Page Inner Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=default&___from_store=argentina"}}">Product Page Inner Zoom</a></li>
		<li><a title="Product Page Outer Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=andorra&___from_store=default"}}">Product Page Outer Zoom</a></li>
		<li><a title="Product Page Lens Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=bolivia&___from_store=default"}}">Product Page Lens Zoom</a></li>
	</ul>

	<div style="clear:both;"></div>

	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Listing Layouts</li>
		<li><a title="Without Sidebar" href="{{store url="shop.html?___store=german&___from_store=default&mode=grid"}}">Without Sidebar</a></li>
		<li><a title="Left Sidebar" href="{{store url="shop.html?___store=default&___from_store=german&mode=grid"}}">Left Sidebar</a></li>
		<li><a title="Right Sidebar" href="{{store url="shop.html?___store=argentina&___from_store=default&mode=grid"}}">Right Sidebar</a></li>
		<li><a title="Left - Right Sidebar" href="{{store url="shop.html?___store=bolivia&___from_store=default&mode=grid""}}">Left - Right Sidebar</a></li>
		<li><a title="2 Product Columns" href="{{store url="shop.html?___store=andorra&___from_store=default&mode=grid"}}">2 Product Columns</a></li>
		<li><a title="3 Product Columns" href="{{store url="shop.html?___store=default&___from_store=benin&mode=grid"}}">3 Product Columns</a></li>
		<li><a title="4 Product Columns" href="{{store url="shop.html?___store=belgium&___from_store=default&mode=grid"}}">4 Product Columns</a></li>
		<li><a title="5 Product Columns" href="{{store url="shop.html?___store=benin&___from_store=default&mode=grid"}}">5 Product Columns</a></li>
		<li><a title="6 Product Columns" href="{{store url="shop.html?___store=german&___from_store=default&mode=grid"}}">6 Product Columns</a></li>
	</ul>

	<ul class="item-home-store layout-home">
		<li class="title-menu-home">About Us Layouts</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>

	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>

	<ul class="item-home-store layout-home">
		<li class="title-menu-home">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>

	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Effect Hover Product</li>
		<li><a title="Simple" href="{{store url="shop.html?___store=default&___from_store=german&mode=grid"}}">Simple</a></li>
		<li><a title="Display Second Image" href="{{store url="shop.html?___store=benin&___from_store=german&mode=grid"}}">Display Second Image</a></li>
		<li><a title="Display Slider Image" href="{{store url="shop.html?___store=barbados&___from_store=german&mode=grid"}}">Display Slider Image</a></li>
	</ul>

</div>

Shop Menu

Frontend Appearance

Link shows Shop Menu’s backend. Please click Here to view.

Link shows Backend of Group 1 in Shop Menu. Please click Here to view.

Link shows Backend of Item Accesories in Group 1 Please click Here to view.

Link shows Backend of Item named ‘Image Bottom’ in Shop Menu Please click Here to view.

Copy and paste the following code chain into the content:

<div class="static-bottom-link">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-1.jpg"}}" alt="Static Image" /></a>
</div>

Note: Other items in Shop Menu are configured the same as above items.

Bedrooms Menu

Frontend Appearance

Link shows Bedrooms Menu’s backend. Please click Here to view.

Link shows Backend of Item ‘Categories’ in Bedrooms Menu. Please click Here to view.

Link shows Backend of Item ‘Beds Category’ in ‘Categories’. Please click Here to view.

Link shows Backend of Item ‘Beds’ in ‘Beds Category’. Please click Here to view.

Link shows Backend of Item named ‘Image Bottom’ in ‘Categories’. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="static-bottom-link static-bottom-link-2">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-2.jpg"}}" alt="Static Image" /></a>
</div>

Note: Other items in ‘Categories’ are configured the same as above items.

Link shows Backend of Item ‘Featured Products’ in Bedrooms Menu. Please click Here to view.

Copy and paste the following code chain into the content:

<div class="basicproduct-content-menu">
{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="208"
	product_order_by="best_sales"
	product_limitation="1"
	product_addcart_display="1"
	product_addwishlist_display="1"
	product_addcompare_display="1"
}}
</div>

About Us
Frontend Appearance

Backend Settings of About Us Menu Please click Here to view.

Item Dropdown About’s backend. Please click Here to view.

Copy and paste the following code chain into the content:

<ul class="item-about-contact">
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>

Contact Us
Frontend Appearance

Backend Settings of Contact Us Menu Please click Here to view.

Item Dropdown Contact’s Backend. Please click Here to view.

Copy and paste the following code chain into the content:

<ul class="item-about-contact">
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>

3.2.2 Vertical Mega Menu (Only in Hompage Style 2)

Vertical Mega Menu includes 9 items:

Daybeds
Sectionals
Sleeper Sofas
Dining Chairs
Gliders & Rocking Chairs
High Chairs & Boosters
Infant Chairs
Living Room
Kitchen

Frontend Appearance

Backend Appearance

Daybeds
Frontend Appearance
Backend Settings of Item ‘Daybeds’ Please click Here to view.

Sectionals

Tree of Sectionals:

Backend Settings of Sectionals

Note: To configure sub-items inside this category, we do as following tasks:

Item ‘Categories Group’– Menu Backend Settings
Item ‘Category 1′– Menu Backend Settings
Item ‘Beds’– Menu Backend Settings
Item ‘Image’ – Menu Backend Settings

Note: Copy & paste the following code chain into ‘Content’ tab of Item ‘Image’:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/image-menu-5.jpg"}}" alt="Static Image" />
</a>
</div>

Sleeper Sofas

Tree of Sleeper Sofas:

Backend Settings of Sleeper Sofas

Note: To configure sub-items inside this category, we do as following tasks:

Item ‘Categories Group’– Menu Backend Settings
Item ‘Chairs & Sofas’– Menu Backend Settings
Item ‘Image’ – Menu Backend Settings

Note: Copy & paste the following code chain into ‘Content’ tab of Item ‘Image’:

<ul class="image-list">
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-1.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-2.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-3.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-4.jpg"}}" alt="Static Image" /></a></li>
</ul>

Dining Chairs

Backend Settings of Dining Chairs
Popular Products Menu Backend Settings

Note: Copy & paste the following code chain into ‘Content’ tab of ‘Popular Products’:

<div class="basicproduct-content-menu">
{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="202"
	product_order_by="lastest_product"
	product_limitation="3"
}}
</div>

High Chairs & Boosters

Tree of High Chairs & Boosters:

Backend Settings of High Chairs & Boosters

Note: To configure sub-items inside this category, we do as following tasks:

Item ‘Categories – Product’– Menu Backend Settings
Item ‘Category 1′– Menu Backend Settings
Item ‘Accesories’ – Menu Backend Settings
Item ‘Best Seller’ – Menu Backend Settings
Item ‘Image’ – Menu Backend Settings

Note: Copy & paste the following code chain into ‘Content’ tab of Item ‘Best Seller’:

{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="230"
	product_limitation="1"
}}

Note: Copy & paste the following code chain into ‘Content’ tab of Item’Image’:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/image-menu-6.jpg"}}" alt="Static Image" />
</a>
</div>

Infant Chairs

Backend Settings of Infant Chairs
Dropdown Menu Backend Settings

Note: Copy & paste the following code chain into ‘Content’ tab of Item ‘Dropdown’:

<div class="static-categories">
	<div class="row">
		<div class="col-lg-4 col-md-4 item-category">
			<div class="img-category">
				<a title="Category" title="View Category" href="#">
					<img src="{{media url="wysiwyg/image-megamenu/img-cat-1.jpg"}}" alt="Category" />
					<span class="view-cat"><span>View Category</span></span>
				</a>
			</div>

			<div class="info-category">
				<h3 class="name-category">
					<a title="Duis aute irure dolor in reprehen" href="#">Duis aute irure dolor in reprehen</a>
				</h3>
			</div>
		</div>

		<div class="col-lg-4 col-md-4 item-category">
			<div class="img-category">
				<a title="Category" title="View Category" href="#">
					<img src="{{media url="wysiwyg/image-megamenu/img-cat-2.jpg"}}" alt="Category" />
					<span class="view-cat"><span>View Category</span></span>
				</a>
			</div>

			<div class="info-category">
				<h3 class="name-category">
					<a title="Duis aute irure dolor in reprehen" href="#">Duis aute irure dolor in reprehen</a>
				</h3>
			</div>
		</div>

		<div class="col-lg-4 col-md-4 item-category">
			<div class="img-category">
				<a title="Category" title="View Category" href="#">
					<img src="{{media url="wysiwyg/image-megamenu/img-cat-3.jpg"}}" alt="Category" />
					<span class="view-cat"><span>View Category</span></span>
				</a>
			</div>

			<div class="info-category">
				<h3 class="name-category">
					<a title="Duis aute irure dolor in reprehen" href="#">Duis aute irure dolor in reprehen</a>
				</h3>
			</div>
		</div>
	</div>
</div>

Note: Other items in Vertical Menu are configured the same as above items.

3.3 Configure Extensions

The SM Supershop front-page has been integrated with extensions in the Theme as following list:

I. SM Custom

Position: SM Custom
Frontend Appearance

Backend of SM Custom: Click Here

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu: Click Here

III. SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

IV. SM Camera Slider

Position: SM Camera Slider
Frontend Appearance

Backend of SM Camera Slider: Click Here
Go Here to readmore about the SM Camera Slide module.

V. SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here

VI. SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of Listing Tabs : Click Here
Go Here to readmore about the SM Listing Tabs module.

VII. SM Twitter

Position: SM Twitter
Frontend Appearance

Backend of SM Twitter: Click Here
Go Here to readmore about the SM Twitter module.

VIII. SM Instagram Gallery

Position: SM Instagram Gallery
Frontend Appearance

Backend of SM Instagram Gallery: Click Here
Go Here to readmore about the SM Instagram Gallery module.

IX. SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Note: Choose ‘French’ as your Store View in Backend to get Frontend like our demo in Homepage Style 2.
Go Here to readmore about the SM Deal module.

3.4 Configure Static Blocks

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

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

1.Static Block: static-image-1

To create the static block, go to CMS >> Static Blocks with Identifier * : “static-image-1″

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<div class="col-static-image col-image-1">
			<a class="first-image" title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a>
			<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a>
		</div>

		<div class="col-static-image col-image-2">
			<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-3.jpg"}}" alt="Static Image" /></a>
		</div>

		<div class="col-static-image col-image-3">
			<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-4.jpg"}}" alt="Static Image" /></a>
		</div>

2.Static Block: static-image-2

To create the static block, go to CMS >> Static Blocks with Identifier * : “static-image-2″

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<a href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/home-1/image-5.jpg"}}" alt="Static Image" /></a>

3.Static Block: counter-block

To create the static block, go to CMS >> Static Blocks with Identifier * : “counter-block”

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<div class="count-up">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-customer">
								<span>Happy Customers</span>
							</div>

							<div class="numscroller"><span class="counter">12686</span></div>

							<p>Happy Customers</p>
						</div>
					</div>

					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-item">
								<span>Items</span>
							</div>

							<div class='numscroller'><span class="counter">2686</span></div>

							<p>Items</p>
						</div>
					</div>

					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-view">
								<span>Views</span>
							</div>

							<div class='numscroller'><span class="counter">1808</span></div>

							<p>Views</p>
						</div>
					</div>

					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-sale">
								<span>Sales</span>
							</div>

							<div class='numscroller'><span class="counter">14560</span></div>

							<p>Sales</p>
						</div>
					</div>
				</div>

				<script>
					jQuery(document).ready(function( $ ) {
						$('.counter').counterUp({
							delay: 10,
							time: 1500
						});
					});
				</script>
			</div>

4.Static Block: contact-homepage

To create the static block, go to CMS >> Static Blocks with Identifier * : “contact-homepage”

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<div class="contact-form-wrapper">
				<div class="contact-content">
					<div class="title-contact-index">
						<h2>Contact Us</h2>
						<p>We Will Give You the Answer You Expect.</p>
					</div>

					<div class="contact-form-add">
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-6 add-contact">
								<ul class="list-contact-info">
									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-map-marker"><span class="hidden">Address</span></div>
										</div>

										<div class="info-contact-item">
											<h3>Address</h3>
											<p>10700 World Trade Blvd, Raleigh City, North Carolina </p>
										</div>
									</li>

									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-phone"><span class="hidden">Address</span></div>
										</div>

										<div class="info-contact-item">
											<h3>Phone / Fax</h3>
											<p>+1 325 1152 325 - +1 325 1152 325</p>
										</div>
									</li>

									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-envelope-o"><span class="hidden">Address</span></div>
										</div>

										<div class="info-contact-item">
											<h3>Email</h3>
											<p>Contact@supershop.com /  Sales@supershop.com</p>
										</div>
									</li>

									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-clock-o"><span class="hidden">Address</span></div>
										</div>

										<div class="info-contact-item">
											<h3>Office Hours</h3>
											<p>Mon / Friday 09:00 - 13.00 / 14:00 - 18:00</p>
										</div>
									</li>
								</ul>
							</div>

							<div class="col-lg-6 col-md-6 col-sm-6 form-contact">
								{{block type="core/template" name="contactForm" template="contacts/form-home.phtml"}}
							</div>
						</div>
					</div>
				</div>

			</div>

5.Static Block: brand-block

To create the static block, go to CMS >> Static Blocks with Identifier * : “brand-block”

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<div class="title-home">
			<h2>Shop Brands</h2>
			<a href="#" title="View all Brands">View all Brands</a>
		</div>

		<div class="brand-content">
			<ul class="list-brands row">
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-6.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-7.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-8.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-9.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-10.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-11.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-12.jpg"}}" alt="Brand" /></a></li>
			</ul>
		</div>

To create the static block, go to CMS >> Static Blocks with Identifier * : “about-us-footer”

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<img src="{{media url="wysiwyg/footer/footer-logo.png"}}" alt="Supershop - Responsive Magento Theme for Multipurpose" />
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut<br>perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>

7.Static Block: support-links

To create the static block, go to CMS >> Static Blocks with Identifier * : “support-links”

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<ul class="list-support">
						<li><a href="#" title="Information">Information</a></li>
						<li><a href="#" title="Support Center">Support Center</a></li>
						<li><a href="#" title="Shipping Info ">Shipping Info </a></li>
						<li><a href="#" title="My Account">My Account</a></li>
					</ul>

8.Static Block: fatured-categories

To create the static block, go to CMS >> Static Blocks with Identifier * : “fatured-categories”

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<ul class="list-categories">
<li class="category-name">Living Room:</li>
<li><a title="Mattresses" href="#">Mattresses</a></li>
<li><a title="Bedroom Mirrors" href="#">Bedroom Mirrors</a></li>
<li><a title="Dressers" href="#">Dressers</a></li>
<li><a title="Dining Sets" href="#">Dining Sets</a></li>
<li><a title="Kitchen Furniture" href="#">Kitchen Furniture</a></li>
<li><a title="Commercial Office" href="#">Commercial Office</a></li>
<li><a title="Bathroom Shelving" href="#">Bathroom Shelving</a></li>
<li><a title="Dining Chairs" href="#">Dining Chairs</a></li>
<li><a title="Chests & Dressers" href="#">Chests & Dressers</a></li>
<li><a title="Chairs" href="#">Chairs</a></li>
<li><a title="Living Room" href="#">Living Room</a></li>
<li><a title="Bedroom" href="#">Bedroom</a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
<ul class="list-categories">
<li class="category-name">Bedroom:</li>
<li><a title="Air Beds" href="#">Air Beds</a></li>
<li><a title="Armoires" href="#">Armoires</a></li>
<li><a title="Headboards" href="#">Headboards</a></li>
<li><a title="Chests & Dressers" href="#">Chests & Dressers</a></li>
<li><a title="Mattresses" href="#">Mattresses</a></li>
<li><a title="Sofa" href="#">Sofa</a></li>
<li><a title="Lamps" href="#">Lamps</a></li>
<li><a title="Offices" href="#">Offices</a></li>
<li><a title="Furniture" href="#">Furniture</a></li>
<li><a title="Interior" href="#">Interior</a></li>
<li><a title="Tables & Chairs" href="#">Tables & Chairs</a></li>
<li><a title="Bookshelves" href="#">Bookshelves</a></li>
<li><a title="Coffee & Accent Tables" href="#">Coffee & Accent Tables</a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>

To create the static block, go to CMS >> Static Blocks with Identifier * : “payment-footer”

Frontend

Backend Setting

Copy & paste the code chain in Content Tab:

<img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" />

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In the Administrator page, Please navigate to SM Supershop Setting; find SM Supershop Setting Module to configure the “Custom Copyright” parameter as image below:

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

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, Please navigate to SM Supershop Setting; find SM Supershop Setting Module to configure the “Social Style” parameter as image below:

4SUPPORT – 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 a bunch!

↧

SM Supershop

October 4, 2015, 10:06 pm

≫ Next: SP Home Slider

≪ Previous: SM Supershop

View demo More detail

This guide will help you install SM Super Shop theme step by step.

1 SYSTEM REQUIREMENT

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 : 1.9.2.1 , require: php 5.4 and Memory_limit no less than 256Mb)

2INSTALLATION

There are two ways to install a Magento Theme:

Quickstart Installation
Manual Installation

2.1 Quickstart Installation :

Please follow these steps:

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 including all sample data.
Step 3: Create a Database for your Magento site

Step 4: Open browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installation page. As an example, the URL path is localhost/sm-supershop-quickstart/index.php/install

Please follow these steps of the Installer so that the installation process can be set.

Step 5: Locale Settings. Please fill out Required Fields(Locale; Time Zone and Default Currency) completely.

Step 6: In the Configuration step, fill out the required fields as below.
- Database Name : sm-supershop-quickstart (Exact name of database you have just created)
- User name : root
- User password : no need to fill
- Do not use "localhost" in the URL path, otherwise you could not log in to your Admin area (you should use your local IP when setting up your website hosted entirely on your own computer).

Step 7: Create Admin Account

Please fill out Required Fields (First Name; Last Name; Email; Username; Password and Confirm Password) completely.

Step 8: Finish Installation and now you can click Go to Frontend to open Homepage or click Go to Backend to open Admin Panel.

2.2 Manual Installation

Step 1: Extract “sm_supershop_theme.zip” file and Copy folders skin; app; images; media to your site root folder.
Step 2: Log in to your Admin Panel (e.g. Access Magento Admin area: http://yourdomain/index.php/admin/).

Note: If you are using the Admin Panel when copying folders in step 1, you need to log out and log in back.
Step 3: Disable Cache Go to System >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

Step 4: Go to System >> Configuration >> Design.

Step 5: In tab ‘Package’ of Design Section, input the parameter Current Package Name with the actual theme name.

Step 6: You can also change the settings for Header .

Step 7: You can also change the settings for Footer .

2.3 Theme Setting

Configure SM Supershop General Setting Theme

In the Administrator page, please open SM Supershop Setting and configure theme as you want.

Configure General Settings with Theme color, Font size, color for the link, hover buttons, page, text, title, background, etc for any store.
Configure Theme Layout with Layout style, Header style& Homepage style (depend on Default pages on Web tab)
Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns, Product Shows Effect On Hover, etc.

Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.

Note:You also show your brands’ information like the following image in the frontend.

Copy and paste the following code into “Custom Tab Content”:

<table class="data-table" style="width: 100%;" border="1">
		<tbody>
		<tr>
		<td>Brand</td>
		<td><img title="brand" alt="brand" src="{{media url="wysiwyg/custom-tab/logo-client.jpg"}}" /></td>
		</tr>
		<tr>
		<td>History</td>
		<td>Color sit amet, consectetur adipiscing elit. In gravida pellentesque ligula, vel eleifend turpis blandit vel. Nam quis lorem ut mi mattis ullamcorper ac quis dui. Vestibulum et scelerisque ante, eu sodales mi. Nunc tincidunt tempus varius. Integer ante dolor, suscipit non faucibus a, scelerisque vitae sapien.</td>
		</tr>
		</tbody>
		</table>

Configure Rich Snippets
Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin
Configure Advanced : To show popup, Cpanel, use “Add to cart, Add to wishlist, Add to Compare
Configure Theme Installation

Note: Click the “Import Static Blocks” and “CMS Pages” button to import all static blocks and CMS pages provided with this theme. The following notification will appear to announce that you have just imported static blocks or pages successfully.

After importing, you need to go to CMS >> Static Block ( or Pages) to configure and select Store View for each block or page.

2.4 Blog

Configure Blog We are using Aheadworks Blog free extension from Aheadworks, so that it is not included in the quickstart package. You need to download free version of Aheadworks Blog Here and follow Its Guide to install. After installing this extension, please go to the admin panel of blog, navigate to Blog >> Settings to configure it like our configuration and your desire.

3CONFIGURATION

Note: Set Default Page

To set a default page for your Magento Site, in the Admin Panel you need to go to System>>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.

You will have to change to the website/ store view that you want to change (the dropdown menu in the upper left corner). You will probably have to create a new CMS page if you want to have something different for your default home page.

3.1 Page Configuration

3.1.1 Homepage Style 1

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages and create a new page in Page Management section. Here is a list of configuration process for this style:

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

<div class="home-default homestyle1">
	<div class="wow fadeInUp">
		<div class="static-image-1">
			{{block type="cms/block" block_id="static-image-1"}}
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="slider-basic-wrapper box-content">
			{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="box-content listingtab-wrapper">
			{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml"}}
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-image center">
			<div class="full-content">
				{{block type="cms/block" block_id="static-image-2"}}
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="box-content listingtab-wrapper">
			{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default.phtml"
				listingtabs_title_text="Bed Room" 
				product_category="241,242,243,244,245,246,247,248,249"
			}}
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-custom center">
			<div class="full-content">
				{{block type="custom/list" template="sm/custom/default.phtml"}}
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="full-wrapper full-block box-content latest-post-wrapper">
			<div class="container">
				<div class="slider-latest-blog">
					{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post.phtml"}}
				</div>
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-counter">
			<div class="container">
				{{block type="cms/block" block_id="counter-block"}}
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="full-wrapper full-block box-content contact-full">
			<div class="container">
				{{block type="cms/block" block_id="contact-homepage"}}
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="brand-wrapper">
			{{block type="cms/block" block_id="brand-block"}}
		</div>
	</div>

</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field:

<reference name="full_top">
	<block type="sm_cameraslider/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>
	</reference>

3.1.2 Homepage Style 2

Frontend of Homepage-1 Layout Position

To configure this page, in the Admin Panel, navigate to CMS >> Pages. Create a new page in Page Management section.

Page Information Tab: Please click to see the Backend Settings.
Content Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

<div class="home-default homestyle2">
	<div class="row">
		<div class="col-lg-3 col-md-3 col-sidebar-home">
			<div class="wow bounceInLeft">
				{{block type="megamenu/list" template="sm/megamenu/megamenu-vertical.phtml"
					title="Categories" 
					group_id="5" 
					theme="2"
				}}
			</div>
			
			<div class="wow bounceInLeft">
				{{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}
			</div>
			
			<div class="wow bounceInLeft">
			{{block type="blog/blog" name="latest_post" template="aw_blog/latest-post-index2.phtml"}}
			</div>
			
			<div class="wow bounceInLeft">
				{{block type="cms/block" block_id="static-image-4"}}
			</div>
			
			<div class="wow bounceInLeft">
				{{block type="twitterslider/list" template="sm/twitterslider/default.phtml"}}
			</div>
			
			<div class="wow bounceInLeft">
				{{block type="instagramgallery/instagramusers_viewlist" name="instagramgallery" as="instagramgallery"}}
			</div>
			
			<div class="wow bounceInLeft">
				{{block type="cms/block" block_id="what-client-say"}}
			</div>
		</div>
		
		<div class="col-lg-9 col-md-9 col-main-home">
			<div class="wow bounceInRight">
				<div class="slider-basic-wrapper box-content">
					{{block type="basicproducts/list" name="basicproducts.slider.home" template="sm/basicproducts/basic-slider-home.phtml"}}
				</div>
			</div>
			
			<div class="wow bounceInRight">
				<div class="box-content listingtab-wrapper">
					{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default_index2.phtml"}}
				</div>
			</div>
			
			<div class="wow bounceInRight">
				<div class="box-content listingtab-wrapper">
					{{block type="listingtabs/list" name="listingtabs.list.default" template="sm/listingtabs/default_index2.phtml"
						listingtabs_title_text="Bed Room" 
						product_category="241,242,243,244,246"
					}}
				</div>
			</div>
			
			<div class="wow bounceInRight">
				<div class="static-iamge-3">
					{{block type="cms/block" block_id="static-image-3"}}
				</div>
			</div>
			
			<div class="wow bounceInRight">
				<div class="slider-deal-home">
					{{block type="deal/list" name="deal.list.default" template="sm/deal/slider-deal.phtml"}}
				</div>
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="full-wrapper full-wrapper-counter">
			<div class="container">
				{{block type="cms/block" block_id="counter-block"}}
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="full-wrapper full-block box-content contact-full">
			<div class="container">
				{{block type="cms/block" block_id="contact-homepage"}}
			</div>
		</div>
	</div>
	
	<div class="wow fadeInUp">
		<div class="brand-wrapper">
			{{block type="cms/block" block_id="brand-block"}}
		</div>
	</div>
	
</div>

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Design field:

<reference name="full_top">
	<block type="sm_cameraslider/slide_preview" name="sm_cameraslide" as="cameraslide" ></block>

        <block type="cms/block" name="static-categories">
		<action method="setBlockId"><block_id>static-categories</block_id></action>
	</block>
</reference>

3.2 Configure Mega Menu

Step 1: You need to create Menu group. In Admin Panel, navigate to SM Mega Menu >> Menu Manager >> Add group (add 2 groups: “Group – Horizontal” and “Group – Vertical” ). Two ID of these groups will be shown in Configuration of SM Mega Menu.

Step 2: Navigate to SM Mega Menu >> Configuration & fill the ID number for two above groups in step 1

Step 3: In order to add menu items, go to SM Mega Menu >> Menu Items Manager to add items as you want.

3.2.1 Horizontal Mega Menu:

Horizontal-mega-menu
Horizontal Mega Menu’s backend
Home
Frontend Appearance

Link shows Home’s backend. Please click Here to view.

Features
Frontend Appearance

Link shows Features Menu’s backend. Please click Here to view.

Link shows Dropdown Features’ backend. Please click Here to view.

Copy and paste the following code into the content:

<div class="home-menu-dropdown">
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Layouts</li>
		<li><a title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}">Home Style 1</a></li>
		<li><a title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}">Home Style 2</a></li>
		<li><a title="Boxed Layout" href="{{store url="?___store=somaliland&___from_store=default"}}">Boxed Layout</a></li>
	</ul>
	
	<ul class="item-home-store theme-color">
		<li class="title-menu-home">Color Styles</li>
		<li class="green"><a title="Green" href="{{store url="?___store=german&___from_store=default"}}">Green</a></li>
		<li class="cyan"><a title="Cyan" href="{{store url="?___store=argentina&___from_store=default"}}">Cyan</a></li>
		<li class="orange"><a title="Orange" href="{{store url="?___store=bolivia&___from_store=default"}}">Orange</a></li>
	</ul>
	
	<ul class="item-home-store header-home">
		<li class="title-menu-home">Headers</li>
		<li><a title="Header Type 1" href="{{store url="?___store=default&___from_store=french"}}">Header Type 1</a></li>
		<li><a title="Header Type 2" href="{{store url="?___store=french&___from_store=default"}}">Header Type 2</a></li>
		<li><a title="Megamenu" href="{{store url="?___store=default&___from_store=french"}}">Megamenu</a></li>
		<li><a title="Css Menu" href="{{store url="?___store=barbados&___from_store=french"}}">Css Menu</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Product Detail Layouts</li>
		<li><a title="Product Detail - Full" href="{{store url="shop/sazen-kutemas.html"}}">Product Detail - Full</a></li>
		<li><a title="Product Detail - Left Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=2&thumbstyle=1"}}">Product Detail - Left Sidebar</a></li>
		<li><a title="Product Detail - Right Sidebar" href="{{store url="shop/sazen-kutemas.html?detail_style=3&thumbstyle=1"}}">Product Detail - Right Sidebar</a></li>
		<li><a title="Thumbnail  - Horizontal" href="{{store url="shop/sazen-kutemas.html?thumbstyle=1"}}">Thumbnail  - Horizontal</a></li>
		<li><a title="Thumbnail - Vertical" href="{{store url="shop/sazen-kutemas.html?thumbstyle=2"}}">Thumbnail - Vertical</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Zoom Types</li>
		<li><a title="Product Page Inner Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=default&___from_store=argentina"}}">Product Page Inner Zoom</a></li>
		<li><a title="Product Page Outer Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=andorra&___from_store=default"}}">Product Page Outer Zoom</a></li>
		<li><a title="Product Page Lens Zoom" href="{{store url="shop/sazen-kutemas.html/?___store=bolivia&___from_store=default"}}">Product Page Lens Zoom</a></li>
	</ul>
	
	<div style="clear:both;"></div>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Listing Layouts</li>
		<li><a title="Without Sidebar" href="{{store url="shop.html?___store=german&___from_store=default&mode=grid"}}">Without Sidebar</a></li>
		<li><a title="Left Sidebar" href="{{store url="shop.html?___store=default&___from_store=german&mode=grid"}}">Left Sidebar</a></li>
		<li><a title="Right Sidebar" href="{{store url="shop.html?___store=argentina&___from_store=default&mode=grid"}}">Right Sidebar</a></li>
		<li><a title="Left - Right Sidebar" href="{{store url="shop.html?___store=bolivia&___from_store=default&mode=grid""}}">Left - Right Sidebar</a></li>
		<li><a title="2 Product Columns" href="{{store url="shop.html?___store=andorra&___from_store=default&mode=grid"}}">2 Product Columns</a></li>
		<li><a title="3 Product Columns" href="{{store url="shop.html?___store=default&___from_store=benin&mode=grid"}}">3 Product Columns</a></li>
		<li><a title="4 Product Columns" href="{{store url="shop.html?___store=belgium&___from_store=default&mode=grid"}}">4 Product Columns</a></li>
		<li><a title="5 Product Columns" href="{{store url="shop.html?___store=benin&___from_store=default&mode=grid"}}">5 Product Columns</a></li>
		<li><a title="6 Product Columns" href="{{store url="shop.html?___store=german&___from_store=default&mode=grid"}}">6 Product Columns</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">About Us Layouts</li>
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">Contact Us Layouts</li>
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>
	
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>
	
	<ul class="item-home-store detail-home">
		<li class="title-menu-home">Effect Hover Product</li>
		<li><a title="Simple" href="{{store url="shop.html?___store=default&___from_store=german&mode=grid"}}">Simple</a></li>
		<li><a title="Display Second Image" href="{{store url="shop.html?___store=benin&___from_store=german&mode=grid"}}">Display Second Image</a></li>
		<li><a title="Display Slider Image" href="{{store url="shop.html?___store=barbados&___from_store=german&mode=grid"}}">Display Slider Image</a></li>
	</ul>

</div>

Shop Menu

Frontend Appearance

Link shows Shop Menu’s backend. Please click Here to view.

Link shows Backend of Group 1 in Shop Menu. Please click Here to view.

Link shows Backend of Item Accesories in Group 1 Please click Here to view.

Link shows Backend of Item named ‘Image Bottom’ in Shop Menu Please click Here to view.

Copy and paste the following code into the content:

<div class="static-bottom-link">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-1.jpg"}}" alt="Static Image" /></a>
</div>

Note: Other items in Shop Menu are configured the same as above items.

Bedrooms Menu

Frontend Appearance

Link shows Bedrooms Menu’s backend. Please click Here to view.

Link shows Backend of Item ‘Categories’ in Bedrooms Menu. Please click Here to view.

Link shows Backend of Item ‘Beds Category’ in ‘Categories’. Please click Here to view.

Link shows Backend of Item ‘Beds’ in ‘Beds Category’. Please click Here to view.

Link shows Backend of Item named ‘Image Bottom’ in ‘Categories’. Please click Here to view.

Copy and paste the following code into the content:

<div class="static-bottom-link static-bottom-link-2">
<a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-2.jpg"}}" alt="Static Image" /></a>
</div>

Note: Other items in ‘Categories’ are configured the same as above items.

Link shows Backend of Item ‘Featured Products’ in Bedrooms Menu. Please click Here to view.

Copy and paste the following code into the content:

<div class="basicproduct-content-menu">
{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="208"
	product_order_by="best_sales"
	product_limitation="1"
	product_addcart_display="1"
	product_addwishlist_display="1"
	product_addcompare_display="1"
}}
</div>

About Us
Frontend Appearance

Backend Settings of About Us Menu Please click Here to view.

Item Dropdown About’s backend. Please click Here to view.

Copy and paste the following code into the content:

<ul class="item-about-contact">
		<li><a title="About Us Style 1" href="{{store url="about-us.html/?___store=default&___from_store=argentina"}}">About Us Style 1</a></li>
		<li><a title="About Us Style 2" href="{{store url="about-us.html/?___store=french&___from_store=default"}}">About Us Style 2</a></li>
		<li><a title="About Us Style 3" href="{{store url="about-us.html/?___store=german&___from_store=default"}}">About Us Style 3</a></li>
		<li><a title="About Us Style 4" href="{{store url="about-us.html/?___store=argentina&___from_store=default"}}">About Us Style 4</a></li>
	</ul>

Contact Us
Frontend Appearance

Backend Settings of Contact Us Menu Please click Here to view.

Item Dropdown Contact’s Backend. Please click Here to view.

Copy and paste the following code into the content:

<ul class="item-about-contact">
		<li><a title="Contact Us Style 1" href="{{store url="contact-us.html/?___store=default&___from_store=argentina"}}">Contact Us Style 1</a></li>
		<li><a title="Contact Us Style 2" href="{{store url="contact-us.html/?___store=french&___from_store=default"}}">Contact Us Style 2</a></li>
		<li><a title="Contact Us Style 3" href="{{store url="contact-us.html/?___store=german&___from_store=default"}}">Contact Us Style 3</a></li>
		<li><a title="Contact Us Style 4" href="{{store url="contact-us.html/?___store=argentina&___from_store=default"}}">Contact Us Style 4</a></li>
	</ul>

3.2.2 Vertical Mega Menu (Only in Hompage Style 2)

Vertical Mega Menu includes 9 items:

Daybeds
Sectionals
Sleeper Sofas
Dining Chairs
Gliders & Rocking Chairs
High Chairs & Boosters
Infant Chairs
Living Room
Kitchen

Frontend Appearance

Backend Appearance

Daybeds
Frontend Appearance
Backend Settings of Item ‘Daybeds’ Please click Here to view.

Sectionals
Frontend Appearance

Tree of Sectionals:

Backend Settings of Sectionals

Note: To configure sub-items inside this category, we do these following tasks:

Item ‘Categories Group’– Menu Backend Settings
Item ‘Category 1′– Menu Backend Settings
Item ‘Beds’– Menu Backend Settings
Item ‘Image’ – Menu Backend Settings

Note: Copy & paste the following code into ‘Content’ tab of Item ‘Image’:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/image-menu-5.jpg"}}" alt="Static Image" />
</a>
</div>

Sleeper Sofas
Frontend Appearance

Tree of Sleeper Sofas:

Backend Settings of Sleeper Sofas

Note: To configure sub-items inside this category, we do these following tasks:

Item ‘Categories Group’– Menu Backend Settings
Item ‘Chairs & Sofas’– Menu Backend Settings
Item ‘Image’ – Menu Backend Settings

Note: Copy & paste the following code into ‘Content’ tab of Item ‘Image’:

<ul class="image-list">
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-1.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-2.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-3.jpg"}}" alt="Static Image" /></a></li>
<li><a title="Static Image" href="#"><img src="{{media url="wysiwyg/image-megamenu/image-menu-4.jpg"}}" alt="Static Image" /></a></li>
</ul>

Dining Chairs
Frontend Appearance

Backend Settings of Dining Chairs
Popular Products Menu Backend Settings

Note: Copy & paste the following code into ‘Content’ tab of ‘Popular Products’:

<div class="basicproduct-content-menu">
{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="202"
	product_order_by="lastest_product"
	product_limitation="3"
}}
</div>

High Chairs & Boosters
Frontend Appearance

Tree of High Chairs & Boosters:

Backend Settings of High Chairs & Boosters

Note: To configure sub-items inside this category, we do as following tasks:

Item ‘Categories – Product’– Menu Backend Settings
Item ‘Category 1′– Menu Backend Settings
Item ‘Accesories’ – Menu Backend Settings
Item ‘Best Seller’ – Menu Backend Settings
Item ‘Image’ – Menu Backend Settings

Note: Copy & paste the following code into ‘Content’ tab of Item ‘Best Seller’:

{{block type="basicproducts/list" name="basicproducts.list.default" template="sm/basicproducts/basic-megamenu.phtml"
	product_source="catalog"
	product_category="230"
	product_limitation="1"
}}

Note: Copy & paste the following code chain into ‘Content’ tab of Item’Image’:

<div class="static-image-menu">
<a title="Static Image" href="#">
<img src="{{media url="wysiwyg/image-megamenu/image-menu-6.jpg"}}" alt="Static Image" />
</a>
</div>

Infant Chairs
Frontend Appearance

Backend Settings of Infant Chairs
Dropdown Menu Backend Settings

Note: Copy & paste the following code into ‘Content’ tab of Item ‘Dropdown’:

<div class="static-categories">
	<div class="row">
		<div class="col-lg-4 col-md-4 item-category">
			<div class="img-category">
				<a title="Category" title="View Category" href="#">
					<img src="{{media url="wysiwyg/image-megamenu/img-cat-1.jpg"}}" alt="Category" />
					<span class="view-cat"><span>View Category</span></span>
				</a>
			</div>
			
			<div class="info-category">
				<h3 class="name-category">
					<a title="Duis aute irure dolor in reprehen" href="#">Duis aute irure dolor in reprehen</a>
				</h3>
			</div>
		</div>
		
		<div class="col-lg-4 col-md-4 item-category">
			<div class="img-category">
				<a title="Category" title="View Category" href="#">
					<img src="{{media url="wysiwyg/image-megamenu/img-cat-2.jpg"}}" alt="Category" />
					<span class="view-cat"><span>View Category</span></span>
				</a>
			</div>
			
			<div class="info-category">
				<h3 class="name-category">
					<a title="Duis aute irure dolor in reprehen" href="#">Duis aute irure dolor in reprehen</a>
				</h3>
			</div>
		</div>
		
		<div class="col-lg-4 col-md-4 item-category">
			<div class="img-category">
				<a title="Category" title="View Category" href="#">
					<img src="{{media url="wysiwyg/image-megamenu/img-cat-3.jpg"}}" alt="Category" />
					<span class="view-cat"><span>View Category</span></span>
				</a>
			</div>
			
			<div class="info-category">
				<h3 class="name-category">
					<a title="Duis aute irure dolor in reprehen" href="#">Duis aute irure dolor in reprehen</a>
				</h3>
			</div>
		</div>
	</div>
</div>

Note: Other items in Vertical Menu are configured the same as above items.

3.3 Configure Extensions

The SM Supershop front-page has been integrated with extensions in the Theme as following list:

I. SM Custom

Position: SM Custom
Frontend Appearance

Backend of SM Custom: Click Here

Position: SM Mega Menu
Frontend Appearance

Backend of SM Mega Menu: Click Here

III. SM CartPro

Position: SM CartPro
Frontend Appearance

Backend of SM CartPro: Click Here
Go Here to readmore about the SM CartPro module.

IV. SM Camera Slider

Position: SM Camera Slider
Frontend Appearance

Backend of SM Camera Slider: Click Here
Go Here to readmore about the SM Camera Slide module.

V. SM Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here

VI. SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of Listing Tabs : Click Here
Go Here to readmore about the SM Listing Tabs module.

VII. SM Twitter

Position: SM Twitter
Frontend Appearance

Backend of SM Twitter: Click Here
Go Here to readmore about the SM Twitter module.

VIII. SM Instagram Gallery

Position: SM Instagram Gallery
Frontend Appearance

Backend of SM Instagram Gallery: Click Here
Go Here to readmore about the SM Instagram Gallery module.

IX. SM Deal

Position: SM Deal
Frontend Appearance

Backend of SM Deal: Click Here
Note: In backend, choose ‘French’ as your store view to get Frontend like our demo in Homepage Style 2.
Go Here to readmore about the SM Deal module.

3.4 Configure Static Blocks

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

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

1.Static Block: static-image-1

To create the static block, go to CMS >> Static Blocks with Identifier * : “static-image-1″

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<div class="col-static-image col-image-1">
			<a class="first-image" title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a>
			<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a>
		</div>
		
		<div class="col-static-image col-image-2">
			<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-3.jpg"}}" alt="Static Image" /></a>
		</div>
		
		<div class="col-static-image col-image-3">
			<a title="Static Image" href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/image-4.jpg"}}" alt="Static Image" /></a>
		</div>

2.Static Block: static-image-2

To create the static block, go to CMS >> Static Blocks with Identifier * : “static-image-2″

Frontend

Backend Setting

Copy & paste the following code in Content Tab:

<a href="#" title="Static Image"><img src="{{media url="wysiwyg/home-page-image/home-1/image-5.jpg"}}" alt="Static Image" /></a>

3.Static Block: counter-block

To create the static block, go to CMS >> Static Blocks with Identifier * : “counter-block”

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<div class="count-up">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-customer">
								<span>Happy Customers</span>
							</div>
							
							<div class="numscroller"><span class="counter">12686</span></div>
							
							<p>Happy Customers</p>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-item">
								<span>Items</span>
							</div>
								
							<div class='numscroller'><span class="counter">2686</span></div>
							
							<p>Items</p>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-view">
								<span>Views</span>
							</div>
							
							<div class='numscroller'><span class="counter">1808</span></div>
							
							<p>Views</p>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
						<div class="count-up-item">
							<div class="icon-count-up icon-sale">
								<span>Sales</span>
							</div>
								
							<div class='numscroller'><span class="counter">14560</span></div>
							
							<p>Sales</p>
						</div>
					</div>
				</div>
				
				<script>
					jQuery(document).ready(function( $ ) {
						$('.counter').counterUp({
							delay: 10,
							time: 1500
						});
					});
				</script>
			</div>

4.Static Block: contact-homepage

To create the static block, go to CMS >> Static Blocks with Identifier * : “contact-homepage”

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<div class="contact-form-wrapper">
				<div class="contact-content">
					<div class="title-contact-index">
						<h2>Contact Us</h2>
						<p>We Will Give You the Answer You Expect.</p>
					</div>
					
					<div class="contact-form-add">
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-6 add-contact">
								<ul class="list-contact-info">
									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-map-marker"><span class="hidden">Address</span></div>
										</div>
										
										<div class="info-contact-item">
											<h3>Address</h3>
											<p>10700 World Trade Blvd, Raleigh City, North Carolina </p>
										</div>
									</li>
									
									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-phone"><span class="hidden">Address</span></div>
										</div>
										
										<div class="info-contact-item">
											<h3>Phone / Fax</h3>
											<p>+1 325 1152 325 - +1 325 1152 325</p>
										</div>
									</li>
									
									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-envelope-o"><span class="hidden">Address</span></div>
										</div>
										
										<div class="info-contact-item">
											<h3>Email</h3>
											<p>Contact@supershop.com /  Sales@supershop.com</p>
										</div>
									</li>
									
									<li class="item-contact-info">
										<div class="icon-contact-info">
											<div class="fa fa-clock-o"><span class="hidden">Address</span></div>
										</div>
										
										<div class="info-contact-item">
											<h3>Office Hours</h3>
											<p>Mon / Friday 09:00 - 13.00 / 14:00 - 18:00</p>
										</div>
									</li>
								</ul>
							</div>
							
							<div class="col-lg-6 col-md-6 col-sm-6 form-contact">
								{{block type="core/template" name="contactForm" template="contacts/form-home.phtml"}}
							</div>
						</div>
					</div>
				</div>
				
			</div>

5.Static Block: brand-block

To create the static block, go to CMS >> Static Blocks with Identifier * : “brand-block”

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<div class="title-home">
			<h2>Shop Brands</h2>
			<a href="#" title="View all Brands">View all Brands</a>
		</div>
		
		<div class="brand-content">
			<ul class="list-brands row">
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-1.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-2.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-3.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-4.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-5.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-6.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-7.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-8.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-9.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-10.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-11.jpg"}}" alt="Brand" /></a></li>
				<li class="col-lg-2 col-md-2 col-sm-3"><a href="#" title="Brand"><img src="{{media url="wysiwyg/brand/brand-12.jpg"}}" alt="Brand" /></a></li>
			</ul>
		</div>

To create the static block, go to CMS >> Static Blocks with Identifier * : “about-us-footer”

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<img src="{{media url="wysiwyg/footer/footer-logo.png"}}" alt="Supershop - Responsive Magento Theme for Multipurpose" />
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut<br>perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>

7.Static Block: support-links

To create the static block, go to CMS >> Static Blocks with Identifier * : “support-links”

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<ul class="list-support">
						<li><a href="#" title="Information">Information</a></li>
						<li><a href="#" title="Support Center">Support Center</a></li>
						<li><a href="#" title="Shipping Info ">Shipping Info </a></li>
						<li><a href="#" title="My Account">My Account</a></li>
					</ul>

8.Static Block: fatured-categories

To create the static block, go to CMS >> Static Blocks with Identifier * : “fatured-categories”

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<ul class="list-categories">
<li class="category-name">Living Room:</li>
<li><a title="Mattresses" href="#">Mattresses</a></li>
<li><a title="Bedroom Mirrors" href="#">Bedroom Mirrors</a></li>
<li><a title="Dressers" href="#">Dressers</a></li>
<li><a title="Dining Sets" href="#">Dining Sets</a></li>
<li><a title="Kitchen Furniture" href="#">Kitchen Furniture</a></li>
<li><a title="Commercial Office" href="#">Commercial Office</a></li>
<li><a title="Bathroom Shelving" href="#">Bathroom Shelving</a></li>
<li><a title="Dining Chairs" href="#">Dining Chairs</a></li>
<li><a title="Chests & Dressers" href="#">Chests & Dressers</a></li>
<li><a title="Chairs" href="#">Chairs</a></li>
<li><a title="Living Room" href="#">Living Room</a></li>
<li><a title="Bedroom" href="#">Bedroom</a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
<ul class="list-categories">
<li class="category-name">Bedroom:</li>
<li><a title="Air Beds" href="#">Air Beds</a></li>
<li><a title="Armoires" href="#">Armoires</a></li>
<li><a title="Headboards" href="#">Headboards</a></li>
<li><a title="Chests & Dressers" href="#">Chests & Dressers</a></li>
<li><a title="Mattresses" href="#">Mattresses</a></li>
<li><a title="Sofa" href="#">Sofa</a></li>
<li><a title="Lamps" href="#">Lamps</a></li>
<li><a title="Offices" href="#">Offices</a></li>
<li><a title="Furniture" href="#">Furniture</a></li>
<li><a title="Interior" href="#">Interior</a></li>
<li><a title="Tables & Chairs" href="#">Tables & Chairs</a></li>
<li><a title="Bookshelves" href="#">Bookshelves</a></li>
<li><a title="Coffee & Accent Tables" href="#">Coffee & Accent Tables</a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>

To create the static block, go to CMS >> Static Blocks with Identifier * : “payment-footer”

Frontend

Backend Setting

Copy & paste the code in Content Tab:

<img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" />

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In the Administrator page, Please navigate to SM Supershop Setting; find SM Supershop Setting Module to configure the “Custom Copyright” parameter as image below:

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

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In the Administrator page, please go to SM Supershop Setting; find SM Supershop Setting Module to configure the “Social Style” parameter as image below:

4SUPPORT

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

Thanks a bunch!

↧

SP Home Slider

October 13, 2015, 2:43 am

≫ Next: Sp Countdown Timer

≪ Previous: SM Supershop

View demo More detail

This guide will help you install Sp Home Slider module step by step.

1 Installation – Back to top

Firstly, you must install Prestashop version 1.6.x. Please Click Here to read more about How To Install Prestashop version 1.6.x
Secondly, prepare for installing the Sp Home Slider. The installation contains 5 steps as following:

Step 1: Login to your Prestashop admin panel and Go to Back Office >> Modules >> Modules. At the top of the page, click the Add a new module button.

Step 2: Click “Choose a file” button to select your module .zip file “sp_homeslider_p1.6-res_v1.0.0.zip” that you have downloaded and then click “Upload this module” button.

Step 3: The new module will be located in the module list. Search the name of module and Click on the Install button to install the module.

Step 4:You will see a notification messages, please click “Proceed with the installation” button to finish the installation process.

Step 5: The uploading process will be started. You will see the message “the module was successfully downloaded”.

2 Configuration – Back to top

Below is a complete interface of SP Home Slider module

Please find to the module that you have completely installed to configure this module.

The parameters are divided into the following groups:

SETTINGS
SLIDES LIST

Let’s look at the parameters in detail:

SETTINGS

Title – Input title for the module.
Active Title Module – Enable/Disable title of module.
Hook – Select Hook into in list box. Please click Here to read more How To Create Custom CMS Hook Page.
Module Class Suffix – A suffix is applied to the CSS class of module. This allows for individual module styling.
Auto Play – Allow to Enable/Disable autoplay mode.
Auto Interval Timeout – Allow to set the speed of timer. Larger = Slower.
Auto Play Speed – Allow to set speed of auto play.
Auto Play Hover Pause – Allow slideshow effect stop when hover OR NOT.
Start Position Item – Allow to Start position or URL Hash string like #id.
Mouse Drag – Allow to Enable/Disable the mouse drag OR not.
Touch Drag – Allow to set the touch drag on the smart devices OR not.
Pull Drag – Allow to set the pull drag on the smart devices OR not.
Show Pagination – Allow to show/hide pagination for module.
Show Navigation – Allow to show/hide Navigation for module.
Select Effect Animate Out – Allow to choose Animate Out for the module.
Select Effect Animate In – Allow to choose Animate Out for the module.
Loop – Infinity loop. Duplicate last and first items to get loop illusion.
Active – Set status enable/disable for the module.

SLIDES LIST

Button Add – Allow to add new slider .
Button Enable – Set status enable/disable for the slider.
Button Edit – Allow to edit information of the slider.
Button Delete – Allow to delete slider.

3SUPPORT – Back to top

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

Thanks so much!

↧

1.1 Introduction

1.2 System Requirements

1.3 PrestaShop Guide

2.1 Quickstart Installation

2.2 Theme Installation

SP Atom Default Theme Installation

3.1 Keep Menu Bar on Top

3.2 Select Theme Color, Font, Box Layout

3.3 Setup Logo

3.4 Image Size Adjustment

3.5 Edit Copyright

1.1 Introduction

1.2 System Requirements

2.1 Files Structure

2.2 Theme Installation

2.3 Required Plugins Installation

2.4 Sample Data Installation

2.5 Widget Installation

2.6 Change Product Image Sizes

3.1 General

3.2 Layout

3.3 Navbar Options

3.4 Product Options

3.5 Portfolio Options

3.6 Typography

3.7 Social Share

3.8 Advanced

2.1 Quickstart Installation :

2.2 Manual Installation

2.3 Theme Setting

3.1 Page Configuration

3.2 Configure Mega Menu

3.2.1 With Horizontal Mega Menu:

3.2.2 With Vertical Mega Menu:

3.3 Configure Extensions

3.4 Configure Static Blocks

1. Static-Theme Right Static Image

2. Static-Theme Home Centre 1

3. Static-Theme Home Centre 2

4. Static-Theme Home Centre 3

5. Static-Theme Home Centre 4

6. Static-Theme Home Centre 5

7. Static-Theme Top Brand

8. Static-Theme Collection

9. Static-Testimonials

10. Static-Why Choose Us

11. Static-Payment System

12. Static-Footer: About Us + Help Center + Services + Contact Us

About Us

Help Center

Services

Contact Us

3.5 How To Edit Copyright in admin

3.6 How To Customize the Social symbols in admin panel

2.1 Quickstart Installation :

2.2 Manual Installation

2.3 Theme Setting

3.1 Page Configuration

3.2 Configure Mega Menu

3.2.1 With Horizontal Mega Menu:

3.3 Configure Extensions

3.4 Configure Static Blocks

1. Static: Theme-service-homepage1

2. Content-home-static-image-Index1

3. Static: Content-home-static-image-V1

4.Static: service-bottom-index1

5. Static: Footer: Info-logo + Information + Why Choose Us + Contact Us

Info-logo

Information

Why Choose Us

Contact Us

3.5 How To Edit Copyright in admin

2.1 Quickstart Installation :

2.2 Manual Installation

2.3 Theme Setting

3.1 Page Configuration

3.2 Configure Mega Menu

3.2.1 With Horizontal Mega Menu:

3.2.2 With Vertical Mega Menu ( In The Homepage 2)

3.5 How To Edit Copyright in admin