Quantcast
Channel: MagenTech Documentation Area
Viewing all 239 articles
Browse latest View live
↧

SM Hot Collections Magento 2

April 21, 2016, 7:25 pm
$
0
0
View demoMore detail
This guide will help you install SM Hot Collections – Version 2.x step by step.
1REQUIREMENT

At the basic level, this module will require the following condition:

  • Compatible with Magento Community Edition 2.0.x: Please follow Magento 2.0 Installation Guide to install if you do not have one.
  • Composer (latest stable version)
  • Apache 2.2 or late
  • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

  • In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

  • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
  • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
  • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt

    • 1. Please type the following command into the dialog to clear the compiled code and cache:
      php bin\magento setup:upgrade
    • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
      php bin/magento setup:static-content:deploy
  • Step 4: Go to Administration page to configure the extension

    • 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 Module Demo

This module is responsive for different screens, thus it can display the item number in the collection of category

3.2 Module Configuration

Note:We used the images of module’s installtion on Magento 2.x to illustrate

After installing, go to Stores -> Configuration and find SM Hot Collections (in the left of column) to configure.
The parameters are divided into the following groups:

  • General settings
  • Source Options
  • Categories Options
  • Product Options
  • Advanced Options

Let’s look at the parameters in detail:

General settings

  • Enable Extensions – Allow to enable/disable the extension.
  • Display Title – Allow to enable/disable the title.
  • Title – Enter the title of the module.
  • Target - Allow to display the target link in Same Window/ New Window/ Popup Window
  • Select Layout For Product – Allow to choose vertical OR horizon layout for product.
  • Config Column For Category – Set the number of columns for devices:
    • 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 from 480px up to 767px.
    • For devices have screen width less than or equal 479px.
  • Config Column For Product – Set the number of column for product:
    • 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 from 480px up to 767px.
    • For devices have screen width less than or equal 479px.

Source Options

  • Select Category – Allow you to select Category. The SM Amazing Slideshow is added for showing product
  • 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.
  • Product Limitation: Allow to set product limitation.

Categories Options

  • Display Title Category – Allow you display title category or NOT.
  • Title Maxlength – Allow to set the max length of title.
  • Categories Order By – Set Categories Order By: Name/Position/Random.
  • Ordering Direction – Allow to order ASC(ascending)/ DESC(descending) direction.
  • Display Total Item Category – Allow to display icon or NOT.
  • Display Min Price Product – Allow to display the min price of product or NOT.
  • Display Description Category – Allow to display description of category or NOT.
  • Description Category Maxlength – Allow to set maxlength of description category.
  • Display Readmore Category – Allow to display readmore category or NOT.
  • Readmore Category – Allow to readmore category by phrase “View All” or other phrase.
  • Image Options
  • Get Image from Category Image
    • Category Image – Allow to display Image of Category or NOT.
  • Get Image from Category Description
    • Category Description – Allow to display Description of Category 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.
    • Image Width – Allow to set image width.
    • Image Height – Allow to set image height.
    • Background Color – Allow to set background color.
    • Image Replacement – Only when the product has no image, the module will take photos from placeholder to replace.

Products Options

  • Display Slider Product – Allow to display the slider of product OR not.
  • Display Navigation – Allow to set the Navigation for the Product.
  • Show Type Navigation – Allow to set “Show” or ” Hover” button navigation.
  • Image Options Product
  • 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 product or NOT.
    • Order to Get – Allow to order to get image with options such as product_image, product_thumbnail, product_description.
    • Resize – Allow you resize product image or NOT.
    • Image Width – Allow to set image width.
    • Image Height – Allow to set image height.
    • Background Color – Allow to set background color.
    • Image Replacement – Only when the product has no image, the module will take photos from placeholder to replace.

Advanced Options

  • Pre-text – The content to show at the top of module.
  • Post-text – The content to show at the end of module.
  • Caching – Allow to choose to cache the content of module.
  • Cache Time – Allow to choose the time (in seconds) before the module is recached.

3.3 Page Configuration

    • If you want to display this module on any page that you want, Please go to Content > Pages > Edit Hot Collections > Content and add this code:
      {{block class="Sm\HotCollections\Block\HotCollections" name="HotCollections" template="Sm_HotCollections::default.phtml"}}

       

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!

↧
Search

SM Basic Products Magento 2

April 22, 2016, 12:54 am
$
0
0
View demoMore detail
This guide will help you install SM Basic Products step by step.
1REQUIREMENT

At the basic level, this module will require the following condition:

  • Compatible with Magento Community Edition 2.0.x: Please follow Magento 2.0 Installation Guide to install if you do not have one.
  • Composer (latest stable version)
  • Apache 2.2 or late
  • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

  • In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

  • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
  • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
  • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt

    • 1. Please type the following command into the dialog to clear the compiled code and cache:
      php bin\magento setup:upgrade
    • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
      php bin/magento setup:static-content:deploy
  • Step 4: Go to Administration page to configure the extension

    • 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 Layout module

3.2 Module Configuration

Note:We used the images of module’s installtion on Magento 2.x to illustrate

After installing, go to Stores -> Configuration and find SM Basic Products (in the left of column) to configure.
The parameters are divided into the following groups:

    • General settings
    • Source Options
    • Categories Options
    • Products Options
    • Image Options
    • Advanced Options

Let’s look at the parameters in detail:

General settings

  • Enable Extensions – Allow to enable/disable the module.
  • Display Title – Allow to enable/disable the title.
  • Title – Enter the title of the module.
  • Target - Allow to display the target link in Same Window/ New Window/ Popup Window
  • Column – Set the number of columns for devices:
    • 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 from 480px up to 767px.
    • For devices have screen width less than or equal 479px.

    • Source Options

    • Select Source – Allow you to select source: catalog/ media or Product IDs.
    • Select Category – Allow you to select Category.
    • Child Category Products: Include or Exclude Products from Child Categories.
    • Category Depth: Allow to select 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.
    • Product Limitation: Allow to set product limitation.

    Categories Options

    • Categories Title Display – Allow to display title of categories OR not.
    • Title Max Chars – Allow to enter max chars of category title. 0 to unlimit length.

    Products Options
    Product Title

      • Display – Allow to display title of product OR not.
      • Max Length – Allow to set the max length of title.

    Product Description

      • Display – Allow to display title of description OR not.
      • Max Length – Allow to set the max length of description.

    Others

    • Display Price – Allow to display price OR not.
    • Display Reviews Summary – Allow to display reviews summary OR not.
    • Display Add To Cart – Allow to display Add To Cart OR not
    • Display Add Wishlist – Allow to display Wishlist OR not.
    • Display Add Compare – Allow to display Add Compare OR not
    • Display Readmore Link – Allow to display Readmore link not.
    • Readmore Text – Allow to input name of Readmore text. For example: Details.
    Image Options
  • Get Image from Product Image
    • Get From Product Image – Allow to display Image of Product or NOT.
  • Get Image from Product Description
    • Get From Product Description – Allow to display Description of Product or NOT.
    • Order to Get – Allow to order to get image with options such as product_image, product_description.
    • Resize – Allow you resize category image or NOT.
    • Image Width – Allow to set image width.
    • Image Height – Allow to set image height.
    • Background Color – Allow to set background color.
    • Image Replacement – Only when the product has no image, the module will take photos from placeholder to replace.

    • Advanced Options

    • Pre-text – The content to show at the top of module.
    • Post-text – The content to show at the end of module.
    • Caching – Allow to choose to cache the content of module.
    • Cache Time – Allow to choose the time (in seconds) before the module is recached.

    3.3 Page Configuration

    • If you want to display this module on any page that you want, Please go to CMS > Page > Edit SM Basic Products > Tab Content and add this code:
    {{block type="basicproducts/list" name="basicproduct.list.default" template="sm/basicproduct/default.phtml"}}

    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!

    ↧
    ↧

    SM Super Categories 2

    April 27, 2016, 2:36 am
    $
    0
    0
    View demoMore detail
    This guide will help you install SM Super Categories step by step.

    1REQUIREMENT

    At the basic level, this module will require the following condition:

    • Compatible with Magento Community Edition 2.0: Please follow Magento 2.0 Installation Guide to install if you do not have one.
    • Composer (latest stable version)
    • Apache 2.2 or late
    • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

    • In the future if the conditions change, please check the Magento 2 documentation

    2INSTALLATION

    • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
    • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
    • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt

      • 1. Please type the following command into the dialog to clear the compiled code and cache:
        php bin\magento setup:upgrade
      • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
        php bin/magento setup:static-content:deploy
    • Step 4: Go to Administration page to configure the extension

      • 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 installtion on Magento 2.x to illustrate

    After installing, go to Stores -> Configuration and find SM Super Categories (in the left of column) to configure.
    The parameters are divided into the following groups:

    • General settings
    • Source Options
    • Categories Options
    • Product Options
    • Advanced Options

    Let’s look at the parameters in detail:

    General settings

    • Enable Extensions Choose to enable/disable the extensions.
    • Display Title Allow to show/hide title of the module.
    • Title Enter the title of the module.
    • Target Allow to display the target link in Same Window/ New Window/ Popup Window

    Source Options

    • Select Category – Allow you to select Category.
    • Product Field to Order By: Set Product Field to Order By.
    • Child Category Products: Include or Exclude Products from Child Categories.
    • Featured Products: Allow to Show/Hide/Only Featured Products.
    • Ordering Direction: Allow to order ascending/descending direction.
    • Product Limitation: Allow to set product limitation.

    Categories Options

    • Category title max length – Allow to set the max length of category title
    • Resize – Allow you resize category or NOT.
    • Image Width – Allow to set image width of category
    • Image Height – Allow to set image height of category
    • Background Color – Allow to set background color
    • Placeholder – Only when the product has no image, the module will take photos from placeholder to replace
    • Column – Allow to set the number of column for devices
      • 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 from 480px up to 767px.
      • For devices have screen width less than or equal 479px.
        • Column – Allow to set the number of column for devices.
        • Center – Allow to choose Center position or NOT.
        • Display Navigation – Allow to Display Navigation OR Not.
        • Display Loop – Allow to Display to Loop OR Not.
        • Margin Item – Allow to set margin of the image.
        • Slide By – Allow to choose the number of products displayed when clicking “Next” button.
        • Auto Play – Allow you to set for slideshow auto play OR NOT.
        • Pause On Hover: Allow to Pause effects when users hover Or not.
        • Auto Play Speed: Allow to set speed of timer (larger = slower).
        • Navigation Speed: Allow to set the speed of Navigation.
        • Start Position Item: Allow to choose the first item by position number.
        • Mouse Drag: Allow to Enable/Disable Mouse Drag.
        • Touch Drag: Allow to Enable/Disable Touch Drag.
    Products Options
  • 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.

    Product Title

      • Display – Allow to display title of product OR not.
      • Max Length – Allow to set the max length of title.

    Product Description

      • Display – Allow to display title of description OR not.
      • Max Length – Allow to set the max length of description.

    Others

    • Display Price – Allow to display price OR not.
    • Display Reviews Summary – Allow to display reviews summary OR not.
    • Display Add To Cart – Allow to display Add To Cart OR not
    • Display Add Wishlist – Allow to display Wishlist OR not.
    • Display Add Compare – Allow to display Add Compare OR not
    • Display Readmore Link – Allow to display Readmore link not.
    • Readmore Text – Allow to input name of Readmore text. For example: Details.
    • Speed – Allow to set speed
    • Interval – The duration to change to next slide.
    • Effect – Allow to choose Effect for products

    3.3 Page Configuration

    • If you want to use this module , please go to Content -> Page -> Edit Home page item ->Tab Content, add this code to a position:
    {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml"}}

    • 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!

    ↧

    SM Countdown Product Slider 2

    April 28, 2016, 8:37 pm
    $
    0
    0
    View demoMore detail
    This guide will help you install SM Countdown Product Slider step by step.

    1REQUIREMENT

    At the basic level, this module will require the following condition:

    • Compatible with Magento Community Edition 2.0: Please follow Magento 2.0 Installation Guide to install if you do not have one.
    • Composer (latest stable version)
    • Apache 2.2 or late
    • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

    • In the future if the conditions change, please check the Magento 2 documentation

    2INSTALLATION

    • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
    • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
    • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt

      • 1. Please type the following command into the dialog to clear the compiled code and cache:
        php bin\magento setup:upgrade
      • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
        php bin/magento setup:static-content:deploy
    • Step 4: Go to Administration page to configure the extension

      • 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.

    3CONFIGURATION

    3.1 Module Demo

    You could see the appearance of SM Countdown Product Slider module as following:

    3.2 Module Configuration

    Notes: We used the images of module’s installation on Magento 2.0.x to illustrate

    In the Administrator Page, navigate to Stores -> Settings -> Configuration and find SM Countdown Product Slider 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 settings

    • Enable Extensions – Allow to enable/disable the module.
    • Display Title – Allow to enable/disable the title.
    • Title – Enter the title of the module.
    • Target - Allow to display the target link in Same Window/ New Window/ Popup Window
    • Class Suffix – Allow uses to add suffix for class.
  • Column – Set the number of columns for devices:
    • 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 from 480px up to 767px.
    • For devices have screen width less than or equal 479px.

    • Source Options

    • Date From – Allow to enter the date with the format: yyy/mm/dd.
    • 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.
    • Product Limitation: Allow to set product limitation.

    Product Options


    Product Title

      • Display – Allow to display title of product OR not.
      • Max Length – Allow to set the max length of title.

    Product Description

      • Display – Allow to display title of description OR not.
      • Max Length – Allow to set the max length of description.

    Others

      • Display Price – Allow to display price OR not.
      • Display Reviews Summary – Allow to display reviews summary OR not.
      • Display Add To Cart – Allow to display Add To Cart OR not.
      • Display Add Wishlist – Allow to display Wishlist OR not.
      • Display Add Compare – Allow to display Add Compare OR not.
      • Display Readmore Link – Allow to display Readmore link OR not.
      • Readmore Text – Allow to input name of Readmore text. For example: Details.

    Image Options


    Get Image from Product Image  

    • Get From Product Image – Allow to display image of product or NOT.

    Get Image from Product Description  

    • Get Image from Product Description – Allow to display Product Description or NOT.
    • Order to Get – Allow to order to get image with options such as “product_image, product_description”.
    • Resize – Allow you resize product image or NOT.
    • Image Width – Allow to set image width.
    • Image Height – Allow to set image height.
    • Background Color: Allow to set background color.
    • Image Replacement: Only when the product has no image, the module will take photos from placeholder to replace.

    Effect Options

    • Effect – Allow to select effect.
    • Speed – Allow to set speed of slide.
    • Interval – Allow to set interval timer.
    • Display Navigation – Allow to Display Navigation OR Not.
    • Display Loop – Allow to Display to Loop OR Not.
    • Margin Item – Allow to set margin of the image.
    • Slide By – Allow to choose the number of products displayed when clicking “Next” button.
    • Auto Play – Allow you to set for slideshow auto play OR NOT.
    • Pause On Hover: Allow to Pause effects when users hover Or not.
    • Auto Play Timeout – Allow you to set time for slideshow auto play.
    • Auto Play Speed: Allow to set speed of timer (larger = slower).
    • Navigation Speed: Allow to set the speed of Navigation.
    • Start Position Item: Allow to choose the first item by position number.
    • Mouse Drag: Allow to Enable/Disable Mouse Drag.
    • Touch Drag: Allow to Enable/Disable Touch Drag.

    Advanced Options

    • Pre-text - The content to show at the top of module
    • Post-text - The content to show at the end of module
    • Caching - Allow to choose to cache the content of module

    3.3 Page Configuration

    To display this module on front page, go to Content >>Elements >> Pages.


    Create a new page in Page Management section, go to Content>> Elements>> Pages

    Copy and paste the following code into the Content field:

    {{block class="Sm\CountdownProductSlider\Block\CountdownProductSlider" name="countdownproductslider.default" as="countdownproductslider_default" template="Sm_CountdownProductSlider::sm/countdownproductslider/default.phtml"}}
    

    {{block class="Sm\CountdownProductSlider\Block\CountdownProductSlider" use_slider="1"name="countdownproductslider.default" as="countdownproductslider_default" title="SM Countdown Product Slider- Demo 2" }}

    4SUPPORT

    Thank you so much for using this module, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our Support Tickets System

    ↧

    SP Bizstore

    April 29, 2016, 1:57 am
    $
    0
    0
    View demoMore detail
    1GETTING STARTED

    1.1 Introduction

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.

    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 import the theme/module file to your server due to the maximum upload and PHP memory limit, 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 not familiar with Prestashop, please read its guide first: http://doc.prestashop.com/display/PS16/Getting+Started

    2INSTALLATION

    There are two ways to install SP Bizstore Theme

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

    2.1 Quickstart Installation

    We provide 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 of SP Bizstore theme
    • Step 2: Extract the downloaded package named “sp_bizstore_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting) folder. 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 these steps 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. 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 click “Create” button.

    When the database is created successfully, copy and paste its name into the “Database name” field, then click the “Test your database connection now!” button to make sure that the entered settings are correct. If they are, you will see a Database is connected message. After that, you could click the “Next” button to move to next steps.

      • Finish installation: This process could take a few minutes

    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 the cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.

    SP Bizstore Layout1 Theme Installation

    Note: Here we will introduce you How To Install SP Bizstore Layout 1 Theme, with Layout 2, Layout 3, Layout 4, and Layout 5 do the same.

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

    • module folder: contain of the smartblog.zip file, smartblogarchive.zip file, smartblogcategories.zip file, smartbloghomelatestnews.zip file, smartblogrecentposts.zip file, smartblogtag.zip file
    • and the sp_bizstore_template_p16_v1.0.0.zip file.

    STEP 1: Install smartblog.zip , smartblogarchive.zip , smartblogcategories.zip , smartbloghomelatestnews.zip , smartblogrecentposts.zip , smartblogtag.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 “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 click “Install” button to run it.

    5. When a pop-up window displays, please click “Proceed with the installation” button.

    6. Finally, Module(s) installed successfully.

    Note: Do the same with the others.

    STEP 2: Install the “sp_bizstore_template_p16_v1.0.0.zip” file.

    1. Login to your Prestashop admin panel and navigate to Preferences -> Themes. At the top of the page click the Add a new theme button.

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


    3. When your choice is successfully validated , a notice will be showed like the following image:


    4. In the section named as Select a theme for your “[name]” shop, move your mouse cursor over SP Bizstore‘s thumbnail and select Use this theme to replace your current theme with SP Bizstore theme.

    5. After that, a list of the installed/disabled modules will be showed out, please click “Save” to install modules that were imported along with the theme.

    6. Finally, please click “Finish” to end the process.

    3SP THEME CONFIGURATION

    3.1 General Settings

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

    2. In the SP Theme Settings, choose “General” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    3.2 Layout Settings

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

    2. In the SP Theme Settings, choose “Layout” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    3.3 Fonts

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

    2. In the SP Theme Settings, choose “Fonts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    Note: Please copy and paste the following line into Font Selector tab:
    1. 

    body, .price-box, #attributes .attribute_list select

    2. 

    .faqs .tab-menu .nav-tabs li a, .b-left #accordion .panel-heading h4 a, #smartblogcat .articleContent .sdsarticleHeader .sdstitle_block a, #smartblogcat .articleContent .more, #smartblogcat .articleContent .date_added, #sdsblogArticle .articleContent .date_added, #layered_block_left #layered_form .layered_subtitle_heading, .product_list.list .product-container .button-container .cart_button, .old-price, .price,   .new-box, .sale-box, .price-percent-reduction, .box-cart-bottom .buttons_bottom_block button, .sp-extraslider  .item-title a, div.lastestnews .articleContent .date_added .day_add, div.sp-sp-cat .spcat-tabs-container .spcat-tabs .spcat-tab span, .cart_special .cart_button span, .spcat-loadmore-btn , div.categories_tabs ul li a, div.lastestnews .articleContent .date_added, div.lastestnews .articleContent .more, #layered_block_left #layered_form #enabled_filters .layered_subtitle, .sp-mostviewed .spmostviewed-item .content-item .item .item-info .item-title a, #newsletter_block_home .form-group .button

    3.4 Category Pages

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

    2. In the SP Theme Settings, choose “Category Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    3.5 Product Pages

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

    2. In the SP Theme Settings, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    3.6 Bonus Pages

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

    2. In the SP Theme Settings, choose “Bonus Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    3.7 Advanced Settings

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

    2. In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    3.8 Social Accounts

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

    2. In the SP Theme Settings, choose “Social Accounts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

    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.10 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 image size types that suit your products best.

    2. Image quality - You can set image quality in 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 used in your site. Select option then click Regenerate thumbnails button.

    Frontend Appearance:

    To edit Copyright, please follow these steps:
    1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Copyright”in this section. After finishing, you could go to the front-end to see the changes.

    3.12 Edit Payment

    Frontend Appearance:

    To edit Payment, please follow these steps:
    1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Upload your own payment image” in this section. After finishing, you could go to the front-end to see the changes.

    3.13 Edit Pop-up

    Frontend Appearance:

    To edit this pop-up, please follow these steps:
    1. Change the image:
    In your Website’s Directory, go to themes\sp_bizstore\css\modules\spblocknewsletter\img folder. To change the image in this pop-up, you could replace our sample image named bg_popup.jpg by your image with the same name as our sample image.

    2. Change the text:
    In your Website’s Directory, go to themes\sp_bizstore\modules\spblocknewsletter folder. To change the text in this pop-up, in this folder, you could open the file named blocknewsletterpopup.tpl by your editor program.
    Find and change the following text in this file as you want:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua


    3. After finishing, you could go to the front-end to see the changes.

    4SP MEGA MENU CONFIGURATION

    displayMenu: SP Mega Menu


    1. Navigate to Modules -> Modules >> look for SP Mega Menu >> Click the Configure button to access the module configuration page.

    2. In the SP Mega Menu Panel, you could configure Add New Module by click on the button like the following image:

    3. In the configuration page of new module, you could configure General Options as follows

    4. In the configuration page of new module, you could configure Menu Information as follows

    5. In order to add menu items, to add items as you want, you need to click this button.

    6. Menu list of Mega Menu You need to look at the menu list to configure easily.

    7. To configure each item, you need to click “Edit” button as follows:

    Go Here to readmore about the SP Mega Menu module.

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.

    Category
    Frontend Appearance

    • Backend Settings : Please click Here to view.
    • Backend Settings of Item ‘Categories’: Please click Here to view.
    • Backend Settings of Item ‘Accessories’: Please click Here to view.
    • Backend Settings of Item ‘Brands’: Please click Here to view.

    Shop
    Frontend Appearance

    • Backend Settings : Please click Here to view.
    • Backend Settings of Item ‘Categories’: Please click Here to view.
    • Backend Settings of Item ‘Shop Sport’: Please click Here to view.
    • Backend Settings of Item ‘Shop Game’: Please click Here to view.
    • Backend Settings of Item ‘Shop Bicycle’: Please click Here to view.

    Occasion
    Frontend Appearance

    • Backend Settings : Please click Here to view.
    • Backend Settings of Item ‘Lips Submenu 1′: Please click Here to view.

    Note: The items named ‘Lips Submenu 2′, ‘Lips Submenu 3′, ‘Lips Submenu 4′ having same menu level as item Lips Submenu 1′could have same configuration

    Blog
    Frontend Appearance

    • Backend Settings : Please click Here to view.

    Copy and paste the following code into the URL Tab:

    index.php?fc=module&module=smartblog&controller=category

    About Us
    Frontend Appearance

    • Backend Settings : Please click Here to view.

    Contact Us
    Frontend Appearance

    • Backend Settings : Please click Here to view.

      • Copy and paste the following code into the URL Tab:

    index.php?controller=contact

    • Backend Settings of Item ‘Contact Page 1′ : Please click Here to view.

      • Copy and paste the following code into the URL Tab:

    index.php?controller=contact?SP_contactStyle=contact-v1

    Note: You could do the same with these items having same level in this menu: Contact Page 2, Contact Page 3, Contact Page 4. However, the items’ URLs are different.

    • Copy and paste the following code into the URL Tab of Contact Page 2:
      index.php?controller=contact?SP_contactStyle=contact-v2
    • Copy and paste the following code into the URL Tab of Contact Page 3:
      index.php?controller=contact?SP_contactStyle=contact-v3
    • Copy and paste the following code into the URL Tab of Contact Page 4:
      index.php?controller=contact?SP_contactStyle=contact-v4

    5SP VERTICAL MEGA MENU CONFIGURATION

    displayVerticalMenu: SP Vertical MegaMenu

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

    2. In the SP Vertical Megamenu Panel, you could configure Settings as follows

    3. In the SP Vertical Megamenu Panel, you could configure Menu Information as follows

    4. In order to add menu items, to add items as you want, you need to click this button.

    5. Menu list of Vertical Megamenu You need to look at the menu list to configure easily.

    6. To configure each item, you need to click “Edit” button as follows:

    Go Here to readmore about the SP Vertical Megamenu module.

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.

    Men Wear
    Frontend Appearance

    • Backend Settings : Please click Here to view.
    • Backend Settings of Item ‘Feature Items’: Please click Here to view.

    Helmets
    Frontend Appearance

    • Backend Settings : Please click Here to view.
    • Backend Settings of Item ‘Wedding’: Please click Here to view.

    Note: Other items having same menu level as item ‘Wedding’ in the menu could have same configuration

    • Backend Settings of Item ‘Offical Cosme-decom’ in ‘Wedding’: Please click Here to view.

    Note: Other items having same menu level as item ‘Offical Cosme-decom’ in the menu could have same configuration

    Gloves
    Frontend Appearance

    • Backend Settings : Please click Here to view.
    • Backend Settings of Item ‘Categories 1′: Please click Here to view.

    Note: Other items having same menu level as item ‘Categories 1′ in the menu could have same configuration

    • Backend Settings of Item ‘Boot Accessories’ in ‘Categories 1′: Please click Here to view.

    Note: Other items having same menu level as item ‘Boot Accessories’ in the menu could have same configuration

    • Backend Settings of Item ‘Poroduct Feature’: Please click Here to view.

    Anniversary Flower
    Frontend Appearance

    • Backend Settings : Please click Here to view.

    Note: Other items having same menu level as ‘Anniversary Flower’ in the menu list could have same configuration

    6EXTENSIONS CONFIGURATION

    6.1 SP Bizstore Layout 1

    home-default

    display CustomHTML1

    SP Custom HTML – Contact Html
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

    Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    Copy and paste the following code into the content: 

    <p>Welcome visitor, you can <a href="../login">Login</a> or <a href="../login">Register</a></p>

    displayUserinfo

    SP User Info Block

    Frontend Appearance:

    Backend Settings:

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.

    displayTopNav

    1. SP Block Currencies

    Frontend Appearance:

    Backend Settings:

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.

    2. SP Block Languages

    Frontend Appearance:

    Backend Settings:

    Step 1: To add language as you want. For example: To 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: Click “Save” button and view shop to see the changes.

    Note: When you add any language as you want, for example: 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, for example: Position – displayCustomhtml2: Banner Layout1; Module: SP Custom HTML.

    .

    2. And click source code to add “../” at before the image url >> Click “OK”.

    .

    3. Click “Save” button and go to the frontend to view the changes.

    button-header.tpl

    Frontend Appearance:

    Backend Settings:

    This dropdown menu has the components : displayTopNav, displayUserinfo. To re-order their position in the menu, please go to themes\sp_bizstore folder and find a file named button-header.tpl in your Website’s Directory

    displayCart

    SP Cart Block

    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure.

    Step 2: In the “SP Cart Block” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    SP Search Block

    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.

    Step 2: In the “SP Search Pro” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    displaySlideShow1

    Sp slider for your homepage

    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.

    Step 2: In the “SP Slider For Your Homepage” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    Step 4: In the last part named Slides List of this configuration page, click button in the right corner to add new slide and edit slide’s information as follows:

    • Sample 1: Please click Here to view
      Copy and paste the following code into the source code field: 
      <div class="container">
<div class="slide-1">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>running shoes</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
    • Sample 2: Please click Here to view
      Copy and paste the following code into the source code field: 
      <div class="container">
<div class="slide-2">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>Home<span> Fitness</span></h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
    • Sample 3: Please click Here to view
      Copy and paste the following code into the source code field: 
      <div class="container">
<div class="slide-3">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>Yoga for women</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>

    displayOurCollection

    SP Collection – Our Collection
    Frontend Appearance:


    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Collection” module.

    Step 2: In the “SP Deal” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    displayCountdownSlider

    SP Countdown Slider for your homepage- Today deals
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Countdown Slider for your homepage” module.

    Step 2: In the “SP Countdown Slider for your homepage” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    Step 4: In the last part named Slides List of this configuration page, click button in the right corner to add new slide and edit slide’s information as follows:

    • Sample 1: Please click Here to view
      Copy and paste the following code into the source code field: 
      <h3>Lorem Ipsum Dolor</h3>
<p>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.</p>
<h5><a href="#">Shop now</a></h5>
    • Sample 2: Please click Here to view
      Copy and paste the following code into the source code field: 
      <h3>Aliquam gravida quis diam</h3>
<p>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.</p>
<h5><a href="#">Shop now</a></h5>
    • Sample 3: Please click Here to view
      Copy and paste the following code into the source code field: 
      <h3>Lorem Ipsum Dolor</h3>
<p>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.</p>
<h5><a href="#">Shop now</a></h5>

    displayExtraSlider

    SP Extra Slider – New Arrivals
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

    Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    You could copy and paste the following code into the Title field: 

    <span class="one">New Arrivals</span> <span class="icon"> <span class="icon-left"></span>  <span class="icon-icon"></span>  <span class="icon-right"></span> </span> <span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt</span>

    display Customhtml2

    SP Custom HTML – Banner Layout1
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

    Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    Copy and paste the following code into the content: 

    <div class="banner1">
<ul>
<li class="item-img img1 list-image-static"><a href="#"><img src="../themes/sp_bizstore/img/cms/banner1-1.jpg" alt="#" /></a></li>
<li class="item-img img2 list-image-static"><a href="#"><img src="../themes/sp_bizstore/img/cms/banner1-2.jpg" alt="#" /></a></li>
<li class="item-img img2 list-image-static"><a class="item-img img3" href="#"><img src="../themes/sp_bizstore/img/cms/banner1-3.jpg" alt="#" /></a></li>
<li class="item-img img2 list-image-static"><a class="item-img img4" href="#"><img src="../themes/sp_bizstore/img/cms/banner1-4.jpg" alt="#" /></a></li>
</ul>
</div>

    displayExtraSlider2

    1. SP Extra Slider – Best Sellers
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

    Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    2. SP Extra Slider – Feature Items
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

    Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    3. SP Extra Slider – Top SaleOff
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

    Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    display Customhtml3

    SP Custom HTML – Testimonial
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

    Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    Copy and paste the following code into the content: 

    <div class="our_clients">
<ul class="say_list">
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
<div class="icon">
<div class="icon-left"></div>
<div class="icon-icon"></div>
<div class="icon-right"></div>
</div>
</div>
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
<h4 class="cus">User - ADDMIN</h4>
</div>
</div>
</li>
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
<div class="icon">
<div class="icon-left"></div>
<div class="icon-icon"></div>
<div class="icon-right"></div>
</div>
</div>
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
<h4 class="cus">Super User - CEO</h4>
</div>
</div>
</li>
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
<div class="icon">
<div class="icon-left"></div>
<div class="icon-icon"></div>
<div class="icon-right"></div>
</div>
</div>
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
<h4 class="cus">User - MOD</h4>
</div>
</div>
</li>
</ul>
</div>

    displayHomeNews

    SmartBlog Home Lastest
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.

    Step 2: You could configure this module like the following image.

    displayBottom2

    SP Manufacture Slider – Shop Brands
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.

    Step 2: In the “SP Manufacture Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    display Newsletter

    SP Newsletter Block
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.

    Step 2: You could configure its settings like the following image.


    To edit the text in this module, please follow these steps:
    In your Website’s Directory, go to themes\sp_bizstore\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter.tpl by your editor program.
    Find and change the text you want to edit, such as: Subscribe to our newsletter, Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt, Enter your email…

    display Customhtml4

    SP Custom HTML – Bonus Menu
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

    Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    Copy and paste the following code into the content: 

    <div class="item-item">
<div class="col-xs-4">
<div class="item shipping">
<div class="icon"><a href="#"><img alt="shipping" src="../themes/sp_bizstore/img/cms/free-deli.png" /></a></div>
<div class="text">
<h4><a href="#">Free Delivery</a></h4>
<p>On the World oder over $48.86</p>
</div>
<!--end text--></div>
<!--end item--></div>
<!--end col-xs-4-->
<div class="col-xs-4">
<div class="item money">
<div class="icon"><a href="#"><img alt="money" src="../themes/sp_bizstore/img/cms/suppor24-7.png" /></a></div>
<div class="text">
<h4><a href="#">Support 24/7</a></h4>
<p>Just an Email or Phone call away</p>
</div>
</div>
<!--end item--></div>
<!--end col-sm-4-->
<div class="col-xs-4">
<div class="item order">
<div class="icon"><a href="#"><img alt="order" src="../themes/sp_bizstore/img/cms/safe-pay.png" /></a></div>
<div class="text">
<h4><a href="#">Safe Payment</a></h4>
<p>You transaction are Secure with SSL</p>
</div>
</div>
</div>
<!--end col-xs-4--></div>
<!--end item-item-->
<h3>Looking for a quality and affodable for your next project?</h3>
<h5><a href="#" class="more">Get a Quote</a></h5>

    Contact Information Block
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “Contact Information Block” module.

    Step 2: You could configure this module like the following image.

    SP Custom HTML – Information
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

    Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    Copy and paste the following code into the content: 

    <div class="footer-links">
<h3 class="title_block">Information</h3>
<ul>
<li><a href="../content/4-about-us">About Us</a></li>
<li><a href="#">Our Service</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="index.php?fc=module&module=smartblog&controller=category">Our Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="index.php?controller=contact">Contact Us</a></li>
<li><a href="../my-account">My Account</a></li>
<li><a href="#">Delivery Information</a></li>
</ul>
</div>

    displayrecentblog

    Smart Blog Recent Posts
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “Smart Blog Recent Posts” module.

    Step 2: You could configure this module like the following image.

    SP Twitter Slider – hot deals
    Frontend Appearance:


    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Twitter Slider” module.

    Step 2: In the “SP Twitter Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    6.2 SP Bizstore Layout 2

    home-layout2

    Logo2 header-v2.tpl

    Frontend Appearance:

    Backend Settings:

    To configure the logo in this hompage, please go to themes\sp_bizstore folder, find and open a file named header-v2.tpl in your Website’s Directory to change it as you want.

    displaySlideShow2

    Sp slider for your homepage

    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.

    Step 2: In the “SP Slider For Your Homepage” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    Step 4: In the last part named Slides List of this configuration page, click button in the right corner to add new slide and edit slide’s information as follows:

    • Sample 4: Please click Here to view
      Copy and paste the following code into the source code field: 
      <div class="container">
<div class="slide-1">
<div class="box-text">
<div class="title-top">
<h4>Sport Collection 2015</h4>
</div>
<h3>ride a cycling</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
    • Sample 5: Please click Here to view
      Copy and paste the following code into the source code field: 
      <div class="container">
<div class="slide-3">
<div class="box-text">
<div class="title-top">
<h4>Sport Collection 2015</h4>
</div>
<h3>ride a cycling</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
    • Sample 6: Please click Here to view
      Copy and paste the following code into the source code field: 
      <div class="container">
<div class="slide-3">
<div class="box-text">
<div class="title-top">
<h4>Sport Collection 2015</h4>
</div>
<h3>ride a cycling</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>

    displayExtraSlider4

    SP Extra Slider – Our Collection
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

    Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    You could copy and paste the following code into the Title field: 

    <span class="one">our collections</span> <span class="icon"> <span class="icon-left"></span>  <span class="icon-icon"></span>  <span class="icon-right"></span> </span> <span class="text">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</span>

    displayCountdownSlider2

    SP Countdown Slider for your homepage- Today deals
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Countdown Slider for your homepage” module.

    Step 2: In the “SP Countdown Slider for your homepage” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    Step 4: In the last part named Slides List of this configuration page, click button in the right corner to add new slide and edit slide’s information as follows:

    • Sample 4: Please click Here to view
      Copy and paste the following code into the source code field: 
      <h5><a href="#">Shop now</a></h5>

    displayExtraSlider3

    SP Extra Slider – New Arrivals
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

    Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    You could copy and paste the following code into the Title field: 

    <span class="one">New Arrivals</span> <span class="icon"> <span class="icon-left"></span>  <span class="icon-icon"></span>  <span class="icon-right"></span> </span> <span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt</span>

    display Customhtml5

    SP Custom HTML – Count
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

    Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    Copy and paste the following code into the content: 

    <div class="count clearfix">
<div class="item col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count happy-customers">
<div class="text">
<h3>Cyles Sold</h3>
</div>
<div class="line"></div>
<div class="start-count"><span class="counter">8,236</span></div>
</div>
</div>
<div class="item col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count items">
<div class="text">
<h3>cyles hired</h3>
</div>
<div class="line"></div>
<div class="start-count"><span class="counter">10,369</span></div>
</div>
</div>
<div class="item col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count views">
<div class="text">
<h3>happy customers</h3>
</div>
<div class="line"></div>
<div class="start-count"><span class="counter">26,369</span></div>
</div>
</div>
<div class="item col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count sales">
<div class="text">
<h3>working time</h3>
</div>
<div class="line"></div>
<div class="start-count"><span class="counter">68,369</span></div>
</div>
</div>
</div>

    displayExtraSlider5

    SP Extra Slider – Best Sellers
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.

    Step 2: In the “SP Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    display Customhtml6

    SP Custom HTML – Logo Bottom
    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.

    Step 2: In the “SP Custom HTML” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.


    Copy and paste the following code into the content: 

    <div class="container">
<div class="logo-bottom"><a href="#">logo</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

    6.3 SP Bizstore Layout 3

    home-layout3

    button-wishlist.tpl

    Frontend Appearance:

    Backend Settings:

    To configure the position in this hompage, please go to themes\sp_bizstore folder, find and open a file named hbutton-wishlist.tpl in your Website’s Directory to change it as you want.

    Logo3 header-v3.tpl

    Frontend Appearance:

    Backend Settings:

    To configure the logo in this hompage, please go to themes\sp_bizstore folder, find and open a file named header-v2.tpl in your Website’s Directory to change it as you want.

    displaySlideShow3

    Sp slider for your homepage

    Frontend Appearance:

    Backend Settings:

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.

    Step 2: In the “SP Slider For Your Homepage” configuration page, click button in the right corner to “ADD NEW MODULE”.

    Step 3: You could configure this module like the following image.

    Step 4: In the last part named Slides List of this configuration page, click button in the right corner to add new slide and edit slide’s information as follows:

    • Sample 7: Please click Here to view
      Copy and paste the following code into the source code field: 
      <div class="container">
<div class="slide-1">
<div class="box-text">
<div class="title-top">
<h4>Sport Collection 2015</h4>
</div>
<h3>Motorcycle</h3>
</div>
<div class="link">
<div class="discover">
<h5><a href="#">Discover</a></h5>
</div>
</div>
<!--end link--></div>
</div>
    • Sample 8: Please click Here to view
      Copy and paste the following code into the source code field: 
      
		
      • 

    • Sample 9: Please click Here to view
      

      Note: The code in the source code field of sample 9 could be the same as that of the sample 8
      

      • 

    • Sample 10: Please click Here to view
      

      Note: The code in the source code field of sample 10 could be the same as that of the sample 8
      

      • 

    

    displayDeal
    

    

    SP Deal – Today Deals
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Customhtml9
    

    

    SP Custom HTML – Banner Top Layout 3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner2">
<ul>
<li class="item-img img1 list-image-static"><a href="#"><img src="../themes/sp_bizstore/img/cms/banner3-1.jpg" alt="#" /></a></li>
<li class="item-img img2 list-image-static"><a href="#"><img src="../themes/sp_bizstore/img/cms/banner3-2.jpg" alt="#" /></a></li>
<li class="item-img img2 list-image-static"><a class="item-img img3" href="#"><img src="../themes/sp_bizstore/img/cms/banner3-3.jpg" alt="#" /></a></li>
</ul>
</div>
    

    displaySuperCat
    

    

    SP Super Category – Sp Super Category Slider1
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml7
    

    

    SP Custom HTML – Image Left
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner4 list-image-static"><a href="#"><img src="../themes/sp_bizstore/img/cms/left-image-blog.jpg" alt="" /></a></div>
    

    display Customhtml10
    

    

    SP Custom HTML – Banner Bottom Layout 3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner3 list-image-static"><a href="#"><img src="../themes/sp_bizstore/img/cms/banner3-4.jpg" alt="" /></a></div>
    

    displayNewsletter2
    

    

    SP Newsletter Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
    

    

    Step 2: You could configure its settings like the following image.
    


    
To edit the text in this module, please follow these steps:
    
In your Website’s Directory, go to themes\sp_bizstore\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter_v2.tpl by your editor program.
    
Find and change the text you want to edit, such as: Newsletter, Sign up for our Newsletter!
    

    displayExtraSlider7
    

    

    SP Extra Slider – Bestseller
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displayMostViewed1
    

    

    SP Most Viewed Products Slider- Bestseller
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Most Viewed Products Slider” module.
    

    
Step 2: In the “SP Most Viewed Products Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: To display this module in the frontend, you have to enable the module called Data mining for statistics
    

    

    Step 5: You could configure this module like the following image.
    

    

    displayExtraSlider6
    

    

    SP Extra Slider – Featured Items
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml8
    

    

    SP Custom HTML – Gallery
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="galerry">
<h3 class="title_block">Gallerry</h3>
<div class="row">
<ul>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="../themes/sp_bizstore/img/cms/1_s.jpg" alt="" /></a></li>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="../themes/sp_bizstore/img/cms/2_s.jpg" alt="" /></a></li>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="../themes/sp_bizstore/img/cms/3_s.jpg" alt="" /></a></li>
</ul>
<ul>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="../themes/sp_bizstore/img/cms/4_s.jpg" alt="" /></a></li>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/5_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="../themes/sp_bizstore/img/cms/5_s.jpg" alt="" /></a></li>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/6_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="../themes/sp_bizstore/img/cms/6_s.jpg" alt="" /></a></li>
</ul>
<ul>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/7_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="../themes/sp_bizstore/img/cms/7_s.jpg" alt="" /></a></li>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/8_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="../themes/sp_bizstore/img/cms/8_s.jpg" alt="" /></a></li>
<li class="col-sm-4 col-xs-2 item"><a class="fancybox" href="../themes/sp_bizstore/img/cms/9_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="../themes/sp_bizstore/img/cms/9_s.jpg" alt="" /></a></li>
</ul>
</div>
</div>
    

    

    6.4 SP Bizstore Layout 4
    

    

    home-layout4
    

    displaySlideShow4
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 11: Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <div class="container">
<div class="slide-3">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>Motorcycle</h3>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br />ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
      
		
      • 

      Note: You could do the same with other slides
      

    

    displayExtraSlider8
    

    

    SP Extra Slider – Bestseller
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    You could copy and paste the following code into the Title field: 
    <span class="one">Best Sellers</span> <span class="icon"> <span class="icon-left"></span>  <span class="icon-icon"></span>  <span class="icon-right"></span> </span> <span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt</span>
    

    display Customhtml12
    

    

    SP Custom HTML – Banner Top Layout4
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner5 clearfix">
<div class="container">
<div class="row">
<ul>
<li class="item item-1 list-image-static col-sm-6 col-xs-12"><a class="first" href="#"> <img src="../themes/sp_bizstore/img/cms/banner4-1.jpg" alt="image" /> </a></li>
<li class="item item-2 list-image-static  col-sm-6 col-xs-12"><a class="last" href="#"> <img src="../themes/sp_bizstore/img/cms/banner4-2.jpg" alt="image" /> </a></li>
</ul>
</div>
</div>
</div>
    

    displayExtraSlider9
    

    

    SP Extra Slider – Feature Items
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    You could copy and paste the following code into the Title field: 
    <span class="one">Feature Items</span>				<span class="text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    

    displayCountdownSlider3
    

    

    SP Countdown Slider for your homepage- Today deals
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Countdown Slider for your homepage” module.
    

    
Step 2: In the “SP Countdown Slider for your homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 5:  Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <h5><a href="#">Shop now</a></h5>
      
		
      • 

    

    display Customhtml13
    

    

    SP Custom HTML – Testimonials 2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="our_clients  our_clients_2 col-md-6 col-sm-12">
<ul class="say_list">
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
</div>
<div class="main-content">
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<h4 class="cus">User - ADDMIN</h4>
</div>
<!--end main-con-tent--></div>
</div>
</li>
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
</div>
<div class="main-content">
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<h4 class="cus">User - ADDMIN</h4>
</div>
<!--end main-con-tent--></div>
</div>
</li>
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
</div>
<div class="main-content">
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<h4 class="cus">User - ADDMIN</h4>
</div>
<!--end main-con-tent--></div>
</div>
</li>
</ul>
</div>
    

    displayBottom3
    

    

    SP Manufacture Slider – Our Brands
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    

    6.5 SP Bizstore Layout 5
    

    

    home-layout5
    

    displaySlideShow5
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 15:  Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <div class="container">
<div class="slide-3">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>breakdancing</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
      
		
      • 

    • Sample 16: Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <div class="container">
<div class="slide-2">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>women yoga</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
      
		
      • 

    • Sample 17: Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <div class="container">
<div class="slide-2">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>Gym Exercises</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
      
		
      • 

    • Sample 18: Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <div class="container">
<div class="slide-2">
<div class="box-text">
<div class="title-top">
<h4>Welcome to Sports & Life</h4>
</div>
<h3>Yoga Pose</h3>
</div>
<div class="link">
<div class="discover">
<h5><a class="active" href="#">Discover</a></h5>
</div>
<div class="now">
<h5><a href="#">Get Now</a></h5>
</div>
</div>
<!--end link--></div>
<p class="icon-down list_diemneo"><a class="neo1">icon</a></p>
</div>
      
		
      • 

    

    display Customhtml14
    

    

    SP Custom HTML – Banner Top layout5
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner6">
<div class="row">
<ul>
<li class="item-1 col-xs-4 list-image-static"><a class="img1" href="#"><img src="../themes/sp_bizstore/img/cms/banner5-1.jpg" alt="#" /></a></li>
<li class="item-2 col-xs-4 list-image-static"><a class="img2" href="#"><img src="../themes/sp_bizstore/img/cms/banner5-2.jpg" alt="#" /></a></li>
<li class="item-3 col-xs-4 list-image-static"><a class="img3" href="#"><img src="../themes/sp_bizstore/img/cms/banner5-3.jpg" alt="#" /></a></li>
</ul>
</div>
</div>
    		
    

    displaySuperCat2
    

    

    SP Super Category – What’s Hot
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml15
    

    

    SP Custom HTML – Testimonials 3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="our_clients">
<ul class="say_list">
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
<div class="icon">
<div class="icon-left"></div>
<div class="icon-icon"></div>
<div class="icon-right"></div>
</div>
</div>
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
<h4 class="cus">User - ADDMIN</h4>
</div>
</div>
</li>
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
<div class="icon">
<div class="icon-left"></div>
<div class="icon-icon"></div>
<div class="icon-right"></div>
</div>
</div>
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
<h4 class="cus">Super User - CEO</h4>
</div>
</div>
</li>
<li>
<div class="content">
<div class="title">
<h3>What our clients say</h3>
<div class="icon">
<div class="icon-left"></div>
<div class="icon-icon"></div>
<div class="icon-right"></div>
</div>
</div>
<div class="image"><a href="#"><img src="../themes/sp_bizstore/img/cms/test.jpg" alt="" height="80" width="80" /></a></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. </p>
<h4 class="cus">User - MOD</h4>
</div>
</div>
</li>
</ul>
</div>
    	
    

    displayCollection2
    

    

    SP Collection – Products
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Collection” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    

    

    

    7SUPPORT
    

    

    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

    
                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                                        
    
                       
    
                         
                
    

                       
    
                     
    
                     
    ↧
    
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SP Topshop
    
                     
    
                                              May 4, 2016, 9:01 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    

    1GETTING STARTED 
    

    

    

    1.1 Introduction
    

    

    

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
    

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.
    

    

    

    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 import the theme/module file to your server due to the maximum upload and PHP memory limit, 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 not familiar with Prestashop, please read its guide first: http://doc.prestashop.com/display/PS16/Getting+Started

    

    

    

    2INSTALLATION 
    

    

    

    There are two ways to install SP Topshop Theme
    

      

    • Quickstart Installation: sp_topshop_quickstart_p16_v3.0.0.zip . By using this package, you will set the theme exactly like our Demo with sample data.
      • 

    • Manual Installation : Include of Theme layout Installation Packages. Please unzip the package and you would see the following folders:

        

      • module folder
        • 

      • sp_topshop_template_p16_v3.0.0.zip file
        

        • 

      

      • 

    

    

    

    2.1 Quickstart Installation
    

    

    We provide 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 of SP Topshop theme
      • 

    • Step 2: Extract the downloaded package named “sp_topshop_quickstart_p16_v3.0.0.zip” in your localhost (or your hosting) folder. 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 these steps 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. 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 click “Create” button.
    

    

    When the database is created successfully, copy and paste its name into the “Database name” field, then click the “Test your database connection now!” button to make sure that the entered settings are correct. If they are, you will see a Database is connected message. After that, you could click the “Next” button to move to next steps.
    

    

      

        

      • Finish installation: This process could take a few minutes
        • 

      

    

    

    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 the cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.
    

    

    

    SP Topshop Layout1 Theme Installation
    

    

    Note: Here we will introduce you How To Install SP Topshop Layout 1 Theme, with Layout 2, Layout 3, Layout 4,Layout 5 and Layout 6 do the same.
    

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

      

    • module folder: contain of the smartblog.zip file, smartblogarchive.zip file, smartblogcategories.zip file, smartbloghomelatestnews.zip file, smartblogrecentposts.zip file, smartblogtag.zip file
      

      • 

    • and the sp_topshop_template_p16_v3.0.0.zip file.
      • 

    

    STEP 1: Install smartblog.zip , smartblogarchive.zip , smartblogcategories.zip , smartbloghomelatestnews.zip , smartblogrecentposts.zip , smartblogtag.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  “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 click “Install” button to run it.
    

    

    5. When a pop-up window displays, please click “Proceed with the installation” button.
    

    

    6. Finally, Module(s) installed successfully.
    

    Note: Do the same with the others.
    

    STEP 2: Install the “sp_topshop_template_p16_v3.0.0.zip” file. 
    

    1. Login to your Prestashop admin panel and navigate to Preferences -> Themes. At the top of the page click the Add a new theme button.
    

    

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


    
3.  When your choice is successfully validated , a notice will be showed like the following image:
    


    
4.  In the section named as Select a theme for your “[name]” shop, move your mouse cursor over SP Topshop‘s thumbnail and select Use this themeto replace your current theme with SP Topshop theme.
    

    
5. After that, a list of the installed/disabled modules will be showed out, please click “Save” to install modules that were imported along with the theme.
    

    

    6. Finally, please click “Finish” to end the process.
    

    

    

    

    

    3SP THEME CONFIGURATION 
    

    

    

    3.1 General Settings
    

    

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

    

    2. In the SP Theme Settings, choose “General” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.2 Layout Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Layout” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.3 Fonts
    

    

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

    

    2. In the SP Theme Settings, choose “Fonts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    Note: Please copy and paste the following line into Font Selector tab:
    
1. 
    body, h5.product-name, .price-box, #attributes .attribute_list select, h1.product_name
    
2. 
    div.hot-deal h3.title_block,.product_list .price-box .price, .product_lists .price-box .price,.sphomepage-slider .owl-item.active .sphomeslider-description h2, .sphomepage-slider .owl-item.active .sphomeslider-description h3, .sphomepage-slider .owl-item.active .sphomeslider-description h4,#newsletter_block_popup .block_content .content-inner h3.title,.about-text h1,#smartblogcat .articleContent .sdsarticleHeader .bg_date,.block .title_block, .moduletable .title_block,.block .title_block, .moduletable .title_block,.ig-title-module,#layered_block_left #layered_form .layered_price .layered_filter_ul label, #layered_block_left #layered_form .layered_price .layered_filter_ul #layered_price_range,#layered_block_left #layered_form span.layered_subtitle,.breadcrumb a, .breadcrumb span,#newsletter_block_home .title,div.sp-sp-cat .spcat-tabs-container .spcat-tabs .spcat-tab span,div.lastestnews .post .post_content .post-date,div.lastestnews .post .post_content .post_title a,.footer-container #footer h3,.content_v2 #newsletter_block_home h3.title_block,.spcountdownproductslider-time .item-timer .time-item,.spcountdownproductslider-heading .spcountdownproductslider-time .title-time,.content_prices .our_price_display,.content_prices .old_price,div.upsell_product .price-box .price
    

    

    

    3.4 Category Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Category Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.5 Product Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.6 Bonus Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Bonus Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.7 Advanced Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.8 Social Accounts
    

    

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

    

    2. In the SP Theme Settings, choose “Social Accounts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    


    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.10 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 image size types that suit your products best.
    

    

    2. Image quality - You can set image quality in 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 used in your site. Select option then click Regenerate thumbnails button.
    

    


    Frontend Appearance:
    

    

    To edit Copyright, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Copyright”in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    3.12 Edit Payment
    

    

    Frontend Appearance:
    

    

    To edit Payment, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Upload your own payment image”  in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    3.13 Edit Pop-up
    

    

    Frontend Appearance:
    

    

    To edit this pop-up, please follow these steps:
    
1. Change the image:
    
In your Website’s Directory, go to themes\sp_topshop\img\icon folder. To change the image in this pop-up, you could replace our sample image named bg_popup.jpg by your image with the same name as our sample image.
    

    
2. Change the text:
    
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this pop-up, in this folder, you could open the file named spblocknewsletterpopup.tpl by your editor program.
    
Find and change the following text in this file as you want:
    Subscribe to the Topshop mailing list to receive updates on new arrivals, special offers and other discount information.
    

    
3.  After finishing, you could go to the front-end to see the changes.
    

    

    3.14 Edit Pop-up in Layout 6
    

    

    Frontend Appearance:
    

    

    To edit this pop-up, please follow these steps:
    
1. Change the image:
    
In your Website’s Directory, go to themes\sp_topshop\img\icon folder. To change the image in this pop-up, you could replace our sample image named bg_popup2.jpg by your image with the same name as our sample image.
    

    
2. Change the text:
    
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this pop-up, in this folder, you could open the file named spblocknewsletterpopup2.tpl by your editor program.
    
Find and change the following text in this file as you want:
    NO THANK !
    

    I AM NOT INTERESTED IN THIS PROMOTION.
    

    Entering your email also subscribe you to the latest
    

    
3.  After finishing, you could go to the front-end to see the changes.

    

    

    

    4SP MEGA MENU CONFIGURATION 
    

    

    

    4.1 displayMenu: SP Mega Menu
    

    


    
1. Navigate to Modules -> Modules >> look for SP Mega Menu >> Click the Configure button to access the module configuration page.
    

    
2. In the SP Mega Menu Panel, you could configure  Add New Module by click on the button like the following image:
    

    
3. In the configuration page of new module, you could configure  General Options as follows
    

    
4. In the configuration page of new module, you could configure  Menu Information as follows
    

    
5.  In order to add menu items, to add items as you want, you need to click this button.
    

    
6. Menu list of Mega Menu You need to look at the menu list to configure easily.
    

    
7.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Mega Menu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Shop 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Bags’: Please click Here to view.
      • 

    

    Note: The items named ‘Smartphones’, ‘Chairs’, ‘Light’ having same menu level  as item ‘Bags’could have same configuration
    

    Women
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Bags’: Please click Here to view.
      • 

    

    Note: The items named ‘Jackets’, ‘Accessories’ having same menu level  as item ‘Bags’ could have same configuration
    

      

    • Backend Settings of Item ‘Featured product’: Please click Here to view.
      • 

    

    Men 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Bags’: Please click Here to view.
      • 

    

    Note: The items named ‘Shoes’ having same menu level  as item ‘Bags’ could have same configuration
    

      

    • Backend Settings of Item ‘Images cat’: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="img-cat"><a href="#"><img src="../themes/sp_topshop/img/cms/img-m1.jpg" alt="" /></a></div>
    

    Kitchen 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Blog
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    	Copy and paste the following code into the URL Tab:
    index.php?fc=module&module=smartblog&controller=category
    

    About Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Contact Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab:
    index.php?controller=contact
    
	

      

    • Backend Settings of Item ‘Contact Page 1′ : Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab:
    index.php?controller=contact?SP_contactStyle=contact-v1
    
	

    Note: You could do the same with these items having same level in this menu: Contact Page 2, Contact Page 3, Contact Page 4. However, the items’ URLs are different.
    

      

    • Copy and paste the following code into the URL Tab of Contact Page 2:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v2
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 3:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v3
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 4:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v4
      

    

    

    

    4.2 displayMenu2: SP Mega Menu (Only in Layout 6)
    

    


    
1. Navigate to Modules -> Modules >> look for SP Mega Menu >> Click the Configure button to access the module configuration page.
    

    
2. In the SP Mega Menu Panel, you could configure  Add New Module by click on the button like the following image:
    

    
3. In the configuration page of new module, you could configure  General Options as follows
    

    
4. In the configuration page of new module, you could configure  Menu Information as follows
    

    
5.  In order to add menu items, to add items as you want, you need to click this button.
    

    
6. Menu list of Mega Menu You need to look at the menu list to configure easily.
    

    
7.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Mega Menu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Shop 
    
Frontend Appearance  
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Image Cate’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Bags’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Smartphone’: Please click Here to view.
      • 

    

    Note: The items named ‘Shirt & T-Shirt’,'Jackets’ having same menu level  as item ‘Smartphone’ could have same configuration
    

    Women
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Bags’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Featured product’: Please click Here to view.
      • 

    

    Blog
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    	Copy and paste the following code into the URL Tab:
    index.php?fc=module&module=smartblog&controller=category
    

    About
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Contact Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab:
    index.php?controller=contact
    
	

      

    • Backend Settings of Item ‘Contact Page 1′ : Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab:
    index.php?controller=contact?SP_contactStyle=contact-v1
    
	

    Note: You could do the same with these items having same level in this menu: Contact Page 2, Contact Page 3, Contact Page 4. However, the items’ URLs are different.
    

      

    • Copy and paste the following code into the URL Tab of Contact Page 2:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v2
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 3:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v3
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 4:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v4
      

    

    

    

    

    

    5SP VERTICAL MEGA MENU CONFIGURATION 
    

    

    

    displayVerticalMenu: SP Vertical MegaMenu
    

    

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

    
2. In the SP Vertical Megamenu Panel, you could configure General Options as follows
    

    
3. In the SP Vertical Megamenu Panel, you could configure  Menu Information as follows
    

    
4.  In order to add menu items, to add items as you want, you need to click this button.
    

    
5. Menu list of Vertical Megamenu You need to look at the menu list to configure easily.
    

    
6.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Vertical Megamenu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Fashion
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Sub cate’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘T-shirts’ in ‘Sub cate’: Please click Here to view.
      • 

    

    Note: The items named ‘Accessories’, ‘Bags’, ‘Jackets’, ‘Eyes’ , ‘Cras imperdiet’ having same menu level  as item ‘T-shirts’ could have same configuration
    

      

    • Backend Settings of Item ‘Image Category’: Please click Here to view.
      • 

      Copy and paste the following code into the content: 
    <div class="img-cat"><a href="#"><img src="../themes/sp_topshop/img/cms/img-cat1.jpg" alt="" /></a></div>
    
	

    Computers
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Smartphones’: Please click Here to view.
      • 

    

    Note: The items named ‘Computer Screen’, ‘Laptop’, ‘Notebook’ having same menu level  as item ‘Smartphone’ could have same configuration
    

      

    • Backend Settings of Item ‘Poroduct Feature’: Please click Here to view.
      • 

    

    Furniture
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Bags’: Please click Here to view.
      • 

    

    Note: The items named ‘Shoes’, ‘T-shirt’, ‘Jackets’ having same menu level  as item ‘Bags’ could have same configuration
    

      

    • Backend Settings of Item ‘Image cate’: Please click Here to view.
      • 

      Copy and paste the following code into the content: 
    <div class="images_cat"><a class="img img1" href="#"><img src="../themes/sp_topshop/img/cms/image_cat1.jpg" alt="" /> </a><a class="img img2" href="#"><img src="../themes/sp_topshop/img/cms/image_cat2.jpg" alt="" /> </a></div>
    
	

    Smartphone
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Sub cate’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘T-Shirt’ in ‘Sub cate’: Please click Here to view.
      • 

    

    Note: The other items having same menu level  as item ‘T-Shirt’ could have same configuration
    

    Health & Beauty
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Sport Clothing
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Note: The other items having same menu level  as item ‘Sport Clothing’ could have same configuration
    

    

    

    

    6EXTENSIONS CONFIGURATION 
    

    

    

    6.1 SP Topshop Layout 1
    

    

    home-default
    

    display CustomHTML1
    

    

    SP Custom HTML – Call Support
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="call_sp">
<p>Call Support for Free : (044) 6789 839</p>
</div>
    	
    

    displayUserinfo
    

    

    SP User Info Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.
    

    

    displayTopNav
    

    

    1. SP Block Currencies
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.
    

    

    2. SP Block Languages
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: To add language as you want. For example: To 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: Click “Save” button and view shop to see the changes.
    

    Note: When you add any language as you want, for example: 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, for example: Position – displayHtml4: Fashion; Module: SP Custom HTML.
    

    .
    

    2. And click source code to add “../” at before the image url >> Click “OK”.
    

    .
    

    3. Click “Save” button and go to the frontend to view the changes.
    

    

    display Customhtml2
    

    

    SP Custom HTML – Banner Top
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner_adv"><a href="#"><img class="mfvwivdixpanpwoszxls" src="http://your-website.yourdomain/themes/sp_topshop/img/cms/adv1.jpg" alt="" /></a></div>
    

    

    SP Search Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Search Pro” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

     displayCart
    

    

    SP Cart Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Cart Block” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayDeal
    

    

    SP Deal – hot deals
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Customhtml3
    

    

    SP Custom HTML – Icon deal
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="deal-posttext">
<ul>
<li><a href="#"><img src="../themes/sp_topshop/img/cms/plicy-1.png" alt="" /></a></li>
<li><a href="#"><img src="../themes/sp_topshop/img/cms/plicy-2.png" alt="" /></a></li>
<li><a href="#"><img src="../themes/sp_topshop/img/cms/plicy-3.png" alt="" /></a></li>
</ul>
</div>
    

    displaySlideShow1
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 1:  Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <h3>THE new</h3>
<h2>handbags <em> shapes</em></h2>
<h4>FREE SHIPPING FOR THIS PRODUCT</h4>
<div class="button-slider"><a href="#">shop new handbag</a></div>
      
		
      • 

    • Sample 2: Please click Here to view
      

      Note: The code in the source code field of sample 2 could be the same as that of the sample 1
      

      • 

    • Sample 3: Please click Here to view
      

      Note: The code in the source code field of sample 3 could be the same as that of the sample 1
      

      • 

    

    display Customhtml4
    

    

    SP Custom HTML – Icon deal
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="trending"><a href="#"><img src="../themes/sp_topshop/img/cms/banner01.jpg" alt="" /></a></div>
    

    display Customhtml5
    

    

    SP Custom HTML – Fashion2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="trending2"><a href="#"><img src="../themes/sp_topshop/img/cms/banner02.jpg" alt="" /></a></div>
    

    display Newsletter
    

    

    SP Newsletter Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
    

    

    Step 2: You could configure its settings like the following image.
    


    
To edit the text in this module, please follow these steps:
    
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter.tpl by your editor program.
    
Find and change the text you want to edit, such as: SUBCRIBE EMAIL, Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy, Enter your email address …
    

    display Customhtml6
    

    

    SP Custom HTML – Fashion3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="trending3"><a href="#"><img src="../themes/sp_topshop/img/cms/banner03.jpg" alt="" /></a></div>
    

    displaySuperCategory1
    

    

    SP Super Category – Super layout1 (1)
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml7
    

    

    SP Custom HTML – Banner Center
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner_center"><a href="#"><img src="../themes/sp_topshop/img/cms/banner04.jpg" alt="" /></a></div>
    

    display Customhtml12
    

    

    SP Custom HTML – Banner Super 1 left
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/cate_left_1.jpg" alt="Static Image" /></a></div>
<div class="brand">
<ul>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-1.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-2.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-3.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-4.jpg" alt="Static Image" /></a></li>
</ul>
</div>
</div>
    

    display Customhtml11
    

    

    SP Custom HTML – Banner Super 1 center
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="image"><a href="#"><img src="../themes/sp_topshop/img/cms/cate01.jpg" alt="" /></a></div>
    

    displaySuperCategory2
    

    

    SP Super Category – Fashion & accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml13
    

    

    SP Custom HTML – Banner Super 2 left
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/cate_left_2.jpg" alt="Static Image" /></a></div>
<div class="brand">
<ul>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-1.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-2.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-3.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-4.jpg" alt="Static Image" /></a></li>
</ul>
</div>
</div>
    

    display Customhtml14
    

    

    SP Custom HTML – Banner Super 2 center
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="image"><a href="#"><img src="../themes/sp_topshop/img/cms/cate02.jpg" alt="" /></a></div>
    

    displaySuperCategory3
    

    

    SP Super Category – Furniture
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml15
    

    

    SP Custom HTML – Banner Super 3 left
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/cate_left_3.jpg" alt="Static Image" /></a></div>
<div class="brand">
<ul>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-1.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-2.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-3.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-4.jpg" alt="Static Image" /></a></li>
</ul>
</div>
</div>
    

    display Customhtml16
    

    

    SP Custom HTML – Banner Super 3 center
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="image"><a href="#"><img src="../themes/sp_topshop/img/cms/cate03.jpg" alt="" /></a></div>
    

    displaySuperCategory4
    

    

    SP Super Category – Computer & Accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml17
    

    

    SP Custom HTML – Banner Super 4 left
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/cate_left_4.jpg" alt="Static Image" /></a></div>
<div class="brand">
<ul>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-1.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-2.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-3.jpg" alt="Static Image" /></a></li>
<li><a class="first-image" title="Static Image" href="#"><img class="img-static" src="../themes/sp_topshop/img/cms/brand-c-4.jpg" alt="Static Image" /></a></li>
</ul>
</div>
</div>
    

    display Customhtml18
    

    

    SP Custom HTML – Banner Super 4 center
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="image"><a href="#"><img src="../themes/sp_topshop/img/cms/cate04.jpg" alt="" /></a></div>
    

    displaySuperCategory5
    

    

    SP Super Category – Computer & Accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Home News
    

    

    SP SmartBlog Home Lastest
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.
    

    

    Step 2: You could configure this module like the following image.
    

    	
    

    displayManufacturer
    

    

    SP Manufacture Slider – Manufacturers
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    display Customhtml8
    

    

    SP Custom HTML – Logo info footer
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="logo_bgr">
<div class="img_logo"></div>
<div class="pre_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which dont look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isnt anything embarrassing hidden in the middle of text.</div>
</div>
    

    

    SP Theme Configuration 
    

    Frontend Appearance:
    

    

    Backend Settings: Go Here to see the backend settings.
    


    Contact Information Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “Contact Information Block” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    display Customhtml9
    

    

    SP Custom HTML – Information
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Delivery Information</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Term and Conditions</a></li>
</ul>
    

    display Customhtml10
    

    

    SP Custom HTML – My Account
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Log in</a></li>
<li><a href="#">My Cart</a></li>
<li><a href="#">My Wishlist</a></li>
<li><a href="#">My Compare</a></li>
</ul>
    

    displayTag
    

    

    SP Tags Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Tags Block” module.
    

    

    Step 2: You could configure this module like the following image.
    

    


    SP Custom HTML – Menu Footer
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="menu-footer"><a class="titile_cate" href="#">WATCHES :</a>
<ul>
<li><a href="#">Watches</a></li>
<li><a href="#">Titan Watches</a></li>
<li><a href="#">Casio Watches</a></li>
<li><a href="#">Fastrack Watches</a></li>
<li><a href="#">Timex Watches</a></li>
<li><a href="#">Fossil Watches</a></li>
<li><a href="#">Diesel Watches </a></li>
<li><a href="#">Luxury Watches</a></li>
<li><a href="#">View all</a></li>
</ul>
</div>
<div class="menu-footer"><a class="titile_cate" href="#">CLOTHING :</a>
<ul>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">T shirts</a></li>
<li><a href="#">Kurtis</a></li>
<li><a href="#">Sarees</a></li>
<li><a href="#">Levis Jeans </a></li>
<li><a href="#">Killer Jeans</a></li>
<li><a href="#">Pepe Jeans</a></li>
<li><a href="#">Arrow Shirts</a></li>
<li><a href="#">Ethnic Wear</a></li>
<li><a href="#">Formal Shirts</a></li>
<li><a href="#">Peter England Shirts</a></li>
<li><a href="#">View all</a></li>
</ul>
</div>
<div class="menu-footer"><a class="titile_cate" href="#">FOOTWEAR :</a>
<ul>
<li><a href="#">Shoes</a></li>
<li><a href="#">Casual Shoes</a></li>
<li><a href="#">Adidas Shoes</a></li>
<li><a href="#">Gas Shoes</a></li>
<li><a href="#">Puma Shoes</a></li>
<li><a href="#">Reebok Shoes</a></li>
<li><a href="#">Woodland Shoes</a></li>
<li><a href="#">Red tape Shoes</a></li>
<li><a href="#">Nike Shoes</a></li>
<li><a href="#">View all</a></li>
</ul>
</div>
    

    

    6.2 SP Topshop Layout 2
    

    

    home-layout2	
    

    displaySlideShow2
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 4:  Please click Here to view
		
      • 

    • Sample 5: Please click Here to view
		
      • 

    • Sample 6: Please click Here to view
		
      • 

    

    display CustomHTML19
    

    

    SP Custom HTML – Fashion4 layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="trending2"><a href="#"><img src="../themes/sp_topshop/img/cms/banner05.jpg" alt="" /></a></div>
    

    

    6.3 SP Topshop Layout 3
    

    

    home-layout3
    

    displaySlideShow3
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 7:  Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      
		
      • 

    • Sample 8: Please click Here to view
      

      Note: The code in the source code field of sample 8 could be the same as that of the sample 7
      

      • 

    • Sample 9: Please click Here to view
      

      Note: The code in the source code field of sample 9 could be the same as that of the sample 7
      

      • 

    

    display CustomHTML20
    

    

    SP Custom HTML – Banner right slider layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner-slider">
<div class="img1"><a href="#"><img src="../themes/sp_topshop/img/cms/banner06.jpg" alt="" /></a></div>
<div class="img2"><a href="#"><img src="../themes/sp_topshop/img/cms/banner07.jpg" alt="" /></a></div>
</div>
    	
    

    displayExtraSlider
    

    

    SP Extra Slider – Featured Products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    displayDeal2
    

    

    SP Deal – hot deals
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider2
    

    

    SP Extra Slider – Bestseller
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displaySuperCategory6
    

    

    SP Super Category – Fashion & accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML21
    

    

    SP Custom HTML – Banner left layout3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner-left"><a href="#"><img src="../themes/sp_topshop/img/cms/banner08.jpg" alt="" /></a></div>
    	
    

    displaySuperCategory7
    

    

    SP Super Category – Furniture
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    displayExtraSlider3
    

    

    SP Extra Slider – New Products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML21
    

    

    SP Custom HTML – Banner left 2 layout3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner-left"><a href="#"><img src="../themes/sp_topshop/img/cms/banner09.jpg" alt="" /></a></div>
    		
    

    displaySuperCategory8
    

    

    SP Super Category – Furniture
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    displayManufacturer
    

    

    SP Manufacture Slider – Manufacturers
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    

    6.4 SP Topshop Layout 4
    

    

    home-layout4
    

    display CustomHTML23
    

    

    SP Custom HTML – Banner Top layout4
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner_adv"><a href="#"><img class="mfvwivdixpanpwoszxls" src="http://www.your-website.yourdomain/themes/sp_topshop/img/cms/adv2.jpg" alt="" /></a></div>
    	
    

    displaySlideShow4
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 10:  Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      <h3>THE new</h3>
<h2>handbags <em> shapes</em></h2>
<h4>FREE SHIPPING FOR THIS PRODUCT</h4>
<div class="button-slider"><a href="#">shop new handbag</a></div>
      
		
      • 

    • Sample 11: Please click Here to view
      

      Note: The code in the source code field of sample 11 could be the same as that of the sample 10
      

      • 

    • Sample 12: Please click Here to view
      

      Note: The code in the source code field of sample 12 could be the same as that of the sample 10
      

      • 

    

    display CustomHTML24
    

    

    SP Custom HTML – Fashion3 layout4
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="trending3"><a href="#"><img src="../themes/sp_topshop/img/cms/banner10.jpg" alt="" /></a></div>
    	
    

    displayCountdownProduct
    

    

    SP Countdown Products Slider – Hot deals
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Countdown Products Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display CustomHTML25
    

    

    SP Custom HTML – Adv Women
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="adv_content"><a href="#"><img src="../themes/sp_topshop/img/cms/cate05.jpg" alt="" /></a></div>
    	
    

    displaySuperCategory9
    

    

    SP Super Category – Women
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displaySuperCategory10
    

    

    SP Super Category – Men
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML26
    

    

    SP Custom HTML – Adv Men
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="adv_content"><a href="#"><img src="../themes/sp_topshop/img/cms/cate06.jpg" alt="" /></a></div>
    	
    

    display CustomHTML27
    

    

    SP Custom HTML – Shoe & Accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="adv_content"><a href="#"><img src="../themes/sp_topshop/img/cms/cate07.jpg" alt="" /></a></div>
    	
    

    displaySuperCategory11
    

    

    SP Super Category – Shoe & Accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML28
    

    

    SP Custom HTML – banner bottom layout4
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="bannerbottom">
<div class="col-sm-6"><a href="#"><img src="../themes/sp_topshop/img/cms/banner11.jpg" alt="" /></a></div>
<div class="col-sm-6"><a href="#"><img src="../themes/sp_topshop/img/cms/banner12.jpg" alt="" /></a></div>
</div>
    	
    

    

    6.5 SP Topshop Layout 5
    

    

    home-layout5
    

    displaySlideShow5
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 13:  Please click Here to view
		
      • 

    • Sample 14: Please click Here to view
		
      • 

    • Sample 15: Please click Here to view
		
      • 

    

    display CustomHTML29
    

    

    SP Custom HTML – banner slider layout5
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banerslider"><a href="#"><img src="../themes/sp_topshop/img/cms/banner13.jpg" alt="" /></a></div>
    		
    

    display CustomHTML30
    

    

    SP Custom HTML – Custom service layout5
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="static-service-1-index5">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-service">
<div class="icon1"></div>
<div class="info">
<p class="title">Free Shipping</p>
<p class="desc">On orders over $99.99</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4  item-service">
<div class="icon2"></div>
<div class="info">
<p class="title">Money Back 100%</p>
<p class="desc">Within 30 Days after delivery</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4  item-service">
<div class="icon3"></div>
<div class="info">
<p class="title">Support 24/7</p>
<p class="desc">Support 100%</p>
</div>
</div>
</div>
</div>
    	
    

    display CustomHTML32
    

    

    SP Custom HTML – banner layout5 (1)
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <p><a href="#"><img src="../themes/sp_topshop/img/cms/banner15.jpg" alt="" /></a></p>
    	
    

    display CustomHTML33
    

    

    SP Custom HTML – banner layout5 (2)
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <p><a href="#"><img src="../themes/sp_topshop/img/cms/banner16.jpg" alt="" /></a></p>
    				
    

    display CustomHTML31
    

    

    SP Custom HTML – banner layout5
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <p><a href="#"><img src="../themes/sp_topshop/img/cms/banner14.jpg" alt="" /></a></p>
    		
    

    displaySuperCategory12
    

    

    SP Super Category – Women
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displaySuperCategory13
    

    

    SP Super Category – Men
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    displaySuperCategory14
    

    

    SP Super Category – Shoe & Accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    			
    

    

    6.6 SP Topshop Layout 6
    

    

    home-default
    

     displaySearch
    

    

    SP Search Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Search Pro” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

     displayCart
    

    

    SP Cart Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Cart Block” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayUserinfo
    

    

    SP User Info Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.
    

    

    displayTopNav
    

    

    1. SP Block Currencies
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.
    

    

    2. SP Block Languages
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: To add language as you want. For example: To 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: Click “Save” button and view shop to see the changes.
    

    Note: When you add any language as you want, for example: 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, for example: Position – displayHtml35: banner slider layout6; Module: SP Custom HTML.
    

    .
    

    2. And click source code to add “../” at before the image url >> Click “OK”.
    

    .
    

    3. Click “Save” button and go to the frontend to view the changes.
    

    

    displaySlideShow6
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 13:  Please click Here to view
		
      • 

    • Sample 14: Please click Here to view
		
      • 

    

    display CustomHTML35
    

    

    SP Custom HTML – banner slider layout6
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="banner_l6"><a href="#" class="img1"><img src="../themes/sp_topshop/img/cms/banner_l6_1.jpg" alt="" /></a> <a href="#" class="img2"><img src="../themes/sp_topshop/img/cms/banner_l6_2.jpg" alt="" /></a></div>
    	
    

    display CustomHTML36
    

    

    SP Custom HTML – Weve confident
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="custom_confident">
<div class="logo1 col-md-3 col-sm-3"><a href="#"><img src="../themes/sp_topshop/img/cms/logo_valenci_1.png" alt="" /></a></div>
<div class="text_custom col-md-9 col-sm-9">
<p>Weve confident weve provided all the best for you. Stay connect with us. <span>Thank so much!</span></p>
</div>
</div>
    	
    

     displayListingtab
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    display CustomHTML37
    

    

    SP Custom HTML – Banner Left layout6
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="bgr_img"><a href="#"><img src="../themes/sp_topshop/img/cms/cate09.jpg" alt="" /></a></div>
    

     displayInstagram
    

    

    SP Instagram Gallery 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Instagram Gallery” module.
    

    
Step 2: In the “SP Instagram Gallery” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    display CustomHTML38
    

    

    SP Custom HTML – Banner center layout6
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="hotline_l6">
<div class="box box1">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box1.jpg" alt="" /></a></div>
<div class="content"><span class="icon">icon</span>
<h5>We support</h5>
<p>Online store 24/7</p>
</div>
</div>
<div class="box box2">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box2.jpg" alt="" /></a></div>
<div class="content"><span class="icon2">icon</span>
<h5>Free shipping</h5>
<p>Delivery world wide</p>
</div>
</div>
<div class="box box3">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box3.jpg" alt="" /></a></div>
<div class="content"><span class="icon3">icon</span>
<h5>Hotline</h5>
<p>(+084) 666 78901</p>
</div>
</div>
<div class="box box4 last">
<div class="images"><a href="#"><img src="../themes/sp_topshop/img/cms/box5.jpg" alt="" /></a></div>
<div class="content"><span class="icon4">icon</span>
<h5>Money back</h5>
<p>While not exactly line</p>
</div>
</div>
</div>
    

     displayListingtab2
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    display CustomHTML39
    

    

    SP Custom HTML – Banner bottom layout6
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <div class="img1 col-sm-3 col-md-3 col-lg-3"<<a href="#"<<img src="../themes/sp_topshop/img/cms/banner_l6_3.jpg" alt="" /<</a<</div<
<div class="img2 col-sm-3 col-md-3 col-lg-3"<<a href="#"<<img src="../themes/sp_topshop/img/cms/banner_l6_4.jpg" alt="" /<</a<</div<
<div class="img3 col-sm-6 col-md-6 col-lg-6"<<a href="#"<<img src="../themes/sp_topshop/img/cms/banner_l6_5.jpg" alt="" /<</a<</div<
    

    displayExtraSlider4
    

    

    SP Extra Slider – Hot Sale
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displayExtraSlider5
    

    

    SP Extra Slider – Recent
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displayDeal3
    

    

    SP Deal – hot deals
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayHomeNews4
    

    

    SP SmartBlog Home Lastest
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.
    

    

    Step 2: You could configure this module like the following image.
    

    	
    

    displayManufacturer3
    

    

    SP Manufacture Slider – Our Brands layout6
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML40
    

    

    SP Custom HTML – Logo bottom l6
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <p><a href="#"><img src="http://yourstore.com/themes/sp_topshop/img/logovalenci_footer.png" alt="" /></a></p>
    

    

    Contact Information Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “Contact Information Block” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    display CustomHTML41
    

    

    SP Custom HTML – MY ACCOUNT
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <ul>
<li><a href="http://yourstore.com/en/my-account">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="http://yourstore.com/en/module/blockwishlist/mywishlist">Wish List</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Specials</a></li>
</ul>
    

    display CustomHTML42
    

    

    SP Custom HTML – OUR SERVICES
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <ul>
<li><a href="http://yourstore.com/en/contact-us">Contact Us</a></li>
<li><a href="#">Discount</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="http://yourstore.com/en/content/4-about-us">About Us</a></li>
<li><a href="#">Custom Service</a></li>
</ul>
    

    display CustomHTML43
    

    

    SP Custom HTML – SUPPORT
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    <ul>
<li><a href="http://yourstore.com/en/content/4-about-us">About us</a></li>
<li><a href="#">Deliveru information</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms & conditions</a></li>
</ul>
    

    

    SP Theme Configuration 
    

    Frontend Appearance:
    

    

    Backend Settings: Go Here to see the backend settings.
    

    displayNewsletter
    

    

    SP Newsletter Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
    

    

    Step 2: You could configure its settings like the following image.
    


    
To edit the text in this module, please follow these steps:
    
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter3.tpl by your editor program.
    

    You could find and change the text you want to edit, such as: Subscribe to receive inspiration, ideas and news in your inbox.
    

    

    

    

    

    7SUPPORT
    

    

    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SM Mega Menu
    
                     
    
                                              May 4, 2016, 9:48 pm
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    This guide will help you install SM Mega Menu  step by step.

    

    

    1REQUIREMENT
    

    

    At the basic level, this module will require the following condition:
    

      

    • Compatible with Magento Community Edition 2.0: Please follow Magento 2.0 Installation Guide to install if you do not have one.
      • 

    • Composer (latest stable version)
      • 

    • Apache 2.2 or late
      • 

    • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)
      • 

      

    • In the future if the conditions change, please check the Magento 2 documentation
      • 

    

    

    

    

    2INSTALLATION
    

    

      

    • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
      • 

    • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server

    • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt
      • 

      	
      

        

      • 1. Please type the following command into the dialog to clear the compiled code and cache:
        
		
        php bin\magento setup:upgrade
        
		
        • 

      • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
        
		
        php bin/magento setup:static-content:deploy
        
		
        • 

      

    • Step 4: Go to Administration page to configure the extension
      • 

       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.
        • 

      

    

    

    

    3CONFIGURATION
    

    

    3.1 SET UP
    

    Log in to Admin, go to SM Mega Menu then create list Menu Items. The following guide is step by step to create list Menu Items for your menu:
    

    

  • STEP 1: ADD MENU GROUP
    • 

    

  • STEP 2: CREATE MENU ITEMS IN THE GROUP
    • 

    To creat menu items in the group, In the Admin Panel you go to Menu Manager>> Mega Menu Demo 1 >>Edit.
    

    

    Go to Menu Items to create Item
    

    

    You can refer case of Menu which likes as our demo
    

    3.2 HORIZONTAL MEGA MENU
    

    3.2.1 Horizontal Megamenu:
    

    

      

    •  Sortable Categories Items Please click Here to view.
      • 

    

    All Mega Menu
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 1′: Please click Here to view.
      • 

    

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′
    

      

    • Backend of ‘Add Contents Video’ in the ‘Column 1′: Please click Here to view.
      • 

    

    Note: The item named ‘Add Media Element’, ‘Add Google Map’, ‘Text 1′, ‘Text 2′, ‘Text 3′ having same menu level (Level 3) as item ‘Add Contents Video’  could have the same configuration. However, you should be aware that the Parent Item of them is different. 
    

      

    • Backend of ‘Video 1′ in the ‘Column 1′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="video_megamenu" style=""><iframe src="http://player.vimeo.com/video/41286259?title=0&byline=0&portrait=0" id="fitvid402488"></iframe></div>
    

      

    • Backend of ‘Media Element 1′ in the ‘Column 2′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="media_elements">      <div class="media_detail1">              <ul class="media-list">                                            <li class="media"><a href="#" class="pull-right"><img src="{{media url="sm/megamenu/images/01_menu.jpg"}}" alt="" width="70" class="img-thumbnail media-object"></a>                                                <div class="media-body">                                                    <p>Lorem Ipsum beschikbaar heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde</p>                                                </div>                                            </li>                                            <li class="media"><a href="#" class="pull-right"><img src="{{media url="sm/megamenu/images/02_menu.jpg"}}" alt="" width="70" class="img-thumbnail media-object"></a>                                                <div class="media-body">                                                    <p>Er zijn vele variaties van passages maar van in een of andere vorm, door ingevoegde humor of willekeu seloofwaardig ogen.</p>                                                </div>                                            </li>                                        </ul>       </div></div>
    

      

    • Backend of ‘Google Map’ in the ‘Column 3′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="google_map_1"><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:202px;width:370px;"><div id="gmap_canvas" style="height:202px;width:370px;"></div><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:16,center:new google.maps.LatLng(21.0277644,105.83415979999995),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(21.0277644, 105.83415979999995)});infowindow = new google.maps.InfoWindow({content:"<b>Ha Noi</b><br/>Thai Ha Street<br/> Ha Noi City" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window,"load", init_map);</script></div>
    

      

    • Backend of ‘Element Text 1′ in the ‘Column 4′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="element_text_1"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged, ...</p></div>
    

      

    • Backend of ‘Element Text 2′ in the ‘Column 5′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="element_text_2"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, ...</p></div>
    

      

    • Backend of ‘Element Text 3′ in the ‘Column 6′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="element_text_1"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, ...</p></div>
    

    Features
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    Copy and paste the following code into the content editor:
    <div class="megamenu-dropdown"><ul class="item-home-megamenu layout"><li class="title-megamenu-home">Layouts</li><li><a title="Layout 1" href="#">Layout 1</a></li><li><a title="Layout 2" href="#">Layout 2</a></li><li><a title="Layout 3" href="#">Layout 3</a></li>                <li><a title="Layout 4" href="#">Layout 4</a></li>                <li><a title="Layout 5" href="#">Layout 5</a></li>                <li><a title="Layout 6" href="#">Layout 6</a></li></ul> <ul class="item-home-megamenu color"><li class="title-megamenu-home">Color Styles</li><li class="pink"><a title="Pink" href="#"><img src="{{media url="sm/megamenu/images/color/pink.png"}}" alt="Pink" />Pink</a></li>                <li class="orange"><a title="Orange" href="#"><img src="{{media url="sm/megamenu/images/color/orange.png"}}" alt="Orange" />Orange</a></li>                <li class="purple"><a title="Purple" href="#"><img src="{{media url="sm/megamenu/images/color/purple.png"}}" alt="Purple" />Purple</a></li>                 <li class="red"><a title="Red" href="#"><img src="{{media url="sm/megamenu/images/color/red.png"}}" alt="Red" />Red</a></li>                <li class="royal-blue"><a title="Royal Blue" href="#"><img src="{{media url="sm/megamenu/images/color/royal-blue.png"}}" alt="Royal Blue" />Royal Blue</a></li>                <li class="salmon"><a title="Salmon" href="#"><img src="{{media url="sm/megamenu/images/color/salmon.png"}}" alt="Salmon" />Salmon</a></li>                <li class="silver"><a title="Silver" href="#"><img src="{{media url="sm/megamenu/images/color/silver.png"}}" alt="Silver" />Silver</a></li>               <li class="taupe"><a title="Taupe" href="#"><img src="{{media url="sm/megamenu/images/color/taupe.png"}}" alt="Taupe" />Taupe</a></li>               <li class="white"><a title="White" href="#"><img src="{{media url="sm/megamenu/images/color/white.png"}}" alt="White" />White</a></li>               <li class="yellow"><a title="Yellow" href="#"><img src="{{media url="sm/megamenu/images/color/yellow.png"}}" alt="Yellow" />Yellow</a></li></ul><ul class="item-home-megamenu header"><li class="title-megamenu-home">Headers</li><li><a title="Header Type 1" href="#">Header Type 1</a></li><li><a title="Header Type 2" href="#">Header Type 2</a></li><li><a title="Header Type 3" href="#">Header Type 3</a></li></ul><ul class="item-home-megamenu detail"><li class="title-megamenu-home">Product Detail Layouts</li><li><a title="Product Detail - Full" href="#">Product Detail - Full</a></li><li><a title="Product Detail - Left Sidebar" href="#">Product Detail - Left Sidebar</a></li><li><a title="Product Detail - Right Sidebar" href="#">Product Detail - Right Sidebar</a></li><li><a title="Thumbnail  - Vertical" href="#">Thumbnail  - Vertical</a></li><li><a title="Thumbnail - Horizontal" href="#">Thumbnail - Horizontal</a></li></ul><ul class="item-home-megamenu detail"><li class="title-megamenu-home">Zoom Types</li><li><a title="Product Page Inner Zoom" href="#">Product Page Inner Zoom</a></li><li><a title="Product Page Outer Zoom" href="#">Product Page Outer Zoom</a></li><li><a title="Product Page Lens Zoom" href="#">Product Page Lens Zoom</a></li></ul><div style="clear:both;"></div><ul class="item-home-megamenu layout"><li class="title-megamenu-home">Listing Layouts</li><li><a title="Without Sidebar" href="#">Without Sidebar</a></li><li><a title="Left Sidebar" href="#">Left Sidebar</a></li><li><a title="Right Sidebar" href="#">Right Sidebar</a></li><li><a title="Left - Right Sidebar" href="#">Left - Right Sidebar</a></li><li><a title="2 Columns Products" href="#">2 Columns Products</a></li><li><a title="3 Columns Products" href="#">3 Columns Products</a></li><li><a title="4 Columns Products" href="#">4 Columns Products</a></li><li><a title="5 Columns Products" href="#">5 Columns Products</a></li><li><a title="6 Columns Products" href="#">6 Columns Products</a></li></ul><ul class="item-home-megamenu layout"><li class="title-megamenu-home">About Us Layouts</li><li><a title="About Us Style 1" href="#">About Us Style 1</a></li><li><a title="About Us Style 2" href="#">About Us Style 2</a></li><li><a title="About Us Style 3" href="#">About Us Style 3</a></li><li><a title="About Us Style 4" href="#">About Us Style 4</a></li></ul><ul class="item-home-megamenu layout"><li class="title-megamenu-home">Contact Us Layouts</li><li><a title="Contact Us Style 1" href="#">Contact Us Style 1</a></li><li><a title="Contact Us Style 2" href="#">Contact Us Style 2</a></li><li><a title="Contact Us Style 3" href="#">Contact Us Style 3</a></li><li><a title="Contact Us Style 4" href="#">Contact Us Style 4</a></li></ul><ul class="item-home-megamenu layout"><li class="title-megamenu-home">404 Page Layout</li><li><a title="404 Page Style 1" href="#">404 Page Style 1</a></li></ul><ul class="item-home-megamenu detail"><li class="title-megamenu-home">Effect Hover Product</li><li><a title="Simple" href="#">Simple</a></li><li><a title="Display Second Image" href="#">Display Second Image</a></li><li><a title="Display Slider Image" href="#">Display Slider Image</a></li></ul></div>
    

    All Category
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 1′: Please click Here to view.
      • 

    

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′
    

      

    • Backend of ‘Women’ in the ‘Column 1′: Please click Here to view.
      • 

    

    Note: The item named ‘Men’, ‘Accessories’, ‘Home & Decor’, ‘Sale’, ‘Vip’ having same menu level (Level 4) as item ‘Women’  could have the same configuration. However, you should be aware that the Parent Item of them is different. 
    

      

    • Backend of ‘New Arrivals’ in the ‘Women’: Please click Here to view.
      • 

    

    Note: The item named ‘Tops & Blouses’, ‘Pants & Denim’, ‘Dresses & Skirts’ in ‘Column 1′, ‘Shirts’, ‘Tea, Knits and Polos’, ‘Pants & Denim’, ‘Blazers’ in ‘Column 2′, ‘Eyewear’, ‘Jewelry’, ‘Shoes’, ‘Bags & Luggage’ in ‘Column 3′, ‘Books & Music’, ‘Bed & Bath’, ‘Electronics’, ‘Decorative Accents’ in ‘Column 4′, ‘Women’, ‘Men’, ‘Accessories’, ‘Home & Decor’ in ‘Column 5′, ‘Beauty & Health’, ‘Mind & Body’, ‘Yoga & Pilates’, ‘Hair & Makeup’, ‘Lose Weight’ in ‘Column 6′ having same menu level (Level 4) as item ‘Women’  could have the same configuration. However, you should be aware that the Parent Item of them is different. 
    

    Best Seller
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 1′: Please click Here to view.
      • 

    

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′
    

      

    • Backend of ‘Static Men’ in the ‘Column 1′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="static-category">     <div class="image-cat-st">          <a title="Men" href="#"><img src="{{media url="sm/megamenu/images/men-image-menu.jpg"}}" alt="Men" /></a>     </div>     <div class="title-cat-st">          <h2><a title="Men" href="#">Men</a></h2>     </div>     <div class="des-cat-st">         <p>Veritatis officia expedita excepteur labore etiam leo class</p>     </div></div>
    

      

    • Backend of ‘Static Women’ in the ‘Column 2′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="static-category"><div class="image-cat-st"><a title="Women & Accessories" href="#"><img src="{{media url="sm/megamenu/images/women-image-menu.jpg"}}" alt="Women & Accessories" /></a></div><div class="title-cat-st"><h2><a title="Women & Accessories" href="#">Women & Accessories</a></h2></div><div class="des-cat-st"><p>Morbi laboriosam recusandae iure</p></div></div>
    

      

    • Backend of ‘Static Out Door & Sports’ in the ‘Column 3′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="static-category"><div class="image-cat-st"><a title="Out Door & Sports" href="#"><img src="{{media url="sm/megamenu/images/sport-image-menu.jpg"}}" alt="Out Door & Sports" /></a></div><div class="title-cat-st"><h2><a title="Out Door & Sports" href="#">Out Door & Sports</a></h2></div><div class="des-cat-st"><p>Veritatis officia expedita excepteur labore etiam leo class</p></div></div>
    

      

    • Backend of ‘Health Care Devices’ in the ‘Column 4′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="static-category"><div class="image-cat-st"><a title="Health Care Devices" href="#"><img src="{{media url="sm/megamenu/images/health-image-menu.jpg"}}" alt="Health Care Devices" /></a></div><div class="title-cat-st"><h2><a title="Health Care Devices" href="#">Health Care Devices</a></h2></div><div class="des-cat-st"><p>Phasellus semper quaerat nullam vulputate phasellus augue modi</p></div></div>
    

      

    • Backend of ‘Home & Kitchen’ in the ‘Column 5′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="static-category"><div class="image-cat-st"><a title="Home & Kitchen" href="#"><img src="{{media url="sm/megamenu/images/home-kitchen-image-menu.jpg"}}" alt="Home & Kitchen" /></a></div><div class="title-cat-st"><h2><a title="Home & Kitchen" href="#">Home & Kitchen</a></h2></div><div class="des-cat-st"><p>Semper quaerat nullam vulputate phasellus augue modi</p></div></div>
    

      

    • Backend of ‘Fishing’ in the ‘Column 6′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="static-category"><div class="image-cat-st"><a title="Fishing" href="#"><img src="{{media url="sm/megamenu/images/fishing-image-menu.jpg"}}" alt="Fishing" /></a></div><div class="title-cat-st"><h2><a title="Fishing" href="#">Fishing</a></h2></div><div class="des-cat-st"><p>Phasellus semper quaerat nullam vulputate phasellus augue modi</p></div></div>
    

    		Flyout
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘ThemeForest’: Please click Here to view.
      • 

    

    Note: Do the same with item ‘GraphicRiver’, ‘PhotoDune’, ‘Creattica’, ‘MicroLancer’, ‘ActiveDen’
    

      

    • Backend of ‘Column 1′ in the ‘EnvatoSites’: Please click Here to view.
      • 

    

      

    • Backend of ‘Tuts+’ in the ‘Column 1′: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="envato-sublv-3"><ul><li class="psd-tuts">PSD Tuts</li><li class="code-tuts">CODE Tuts</li></ul></div>
    

      

    • Backend of ‘We are Envato’ in the ‘Column 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Support Center’ in the ‘Column 1′: Please click Here to view.
      • 

    

    		Grid
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 1′: Please click Here to view.
      • 

    

      

    • Backend of ’1 column’ in the ‘Column 1′: Please click Here to view.
      • 

    

      

    • Backend of ’5 column’ in the ‘Column 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 2′: Please click Here to view.
      • 

    

      

    • Backend of ’2 column’ in the ‘Column 2′: Please click Here to view.
      • 

    

      

    • Backend of ’4 column’ in the ‘Column 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 3′: Please click Here to view.
      • 

    

      

    • Backend of ’3 column’ in the ‘Column 3′: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 4′: Please click Here to view.
      • 

    

      

    • Backend of ’4 column’ in the ‘Column 4′: Please click Here to view.
      • 

    

    Note: Do the same with item ’2 Column’
    

      

    • Backend of ‘Column 5′: Please click Here to view.
      • 

    

      

    • Backend of ’5 column’ in the ‘Column 5′: Please click Here to view.
      • 

    

    Note: Do the same with item 1 Column’
    

      

    • Backend of ‘Column 6′: Please click Here to view.
      • 

    

      

    • Backend of ’2 column’ in the ‘Column 6′: Please click Here to view.
      • 

    

      

    • Backend of ‘Column 7′: Please click Here to view.
      • 

    

      

    • Backend of ’1 column’ in the ‘Column 7′: Please click Here to view.
      • 

    

    		Contact Form
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <ul class="dropdown-menu">
                            <li>
                                <form id="contact1" action="#" name="contactform" method="post">
                                    <div class="field_input contact_field-1">
                                        <input type="text" name="name" id="name1" class="form-control" placeholder="Name">
                                        <input type="text" name="email" id="email1" class="form-control" placeholder="Email">
                                    </div>
                                    <div class="field_input contact_field-2">
                                        <input type="text" name="phone" id="phone1" class="form-control" placeholder="Phone">
                                        <input type="text" name="subject" id="subject1" class="form-control" placeholder="Subject">
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="field_input contact_field-3">
                                        <textarea class="form-control" name="comments" id="comments1" rows="6" placeholder="Your Message ..."></textarea>
                                    </div>
                                    <div class="field_input contact_field-4">
                                        <div class="pull-right-contact send">
                                            <input type="submit" value="SEND" id="submit1" class="btn btn-primary small">
                                        </div>
                                    </div>
                                </form>
                            </li>
                        </ul>
    

    	Shop By Product
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    Copy and paste the following code into the content: 
    <div class="megamenu-dropdown-2">
<ul class="item-home-megamenu icon">
<li><a title="Desktop Icon" href="#"><i class="fa fa-desktop"></i>Desktop Icon</a></li>
<li><a title="Laptop Icon" href="#"><i class="fa fa-laptop"></i>Laptop Icon</a></li>
<li><a title="Tablet Icon" href="#"><i class="fa fa-tablet"></i>Tablet Icon</a></li>
<li><a title="Mobile Icon" href="#"><i class="fa fa-mobile"></i>Mobile Icon</a></li>
<li><a title="Android Icon" href="#"><i class="fa fa-android"></i>Android Icon</a></li>
<li><a title="Apple Icon" href="#"><i class="fa fa-apple"></i>Apple Icon</a></li>
<li><a title="Windows Icon" href="#"><i class="fa fa-windows"></i>Windows Icon</a></li>
<li><a title="Linux Icon" href="#"><i class="fa fa-linux"></i>Linux Icon</a></li>
</ul>
<ul class="item-home-megamenu icon"><li>
<a title="Leaf Icon" href="#"><i class="fa fa-leaf"></i>Leaf Icon</a></li>
<li><a title="Hear Icon" href="#"><i class="fa fa-heart-o"></i>Hear Icon</a></li>
<li><a title="Sun Icon" href="#"><i class="fa fa-sun-o"></i>Sun Icon</a></li>
<li><a title="Moon Icon" href="#"><i class="fa fa-moon-o"></i>Moon Icon</a></li>
<li><a title="Camera Icon" href="#"><i class="fa fa-camera-retro"></i>Camera Icon</a></li>
<li><a title="Bars Icon" href="#"><i class="fa fa-bars"></i>Bars Icon</a></li>
<li><a title="Pagelines Icon" href="#"><i class="fa fa-pagelines"></i>Pagelines Icon</a></li>
<li><a title="Ambulance Icon" href="#"><i class="fa fa-ambulance"></i>Ambulance Icon</a></li>
</ul>
<ul class="item-home-megamenu icon">
<li><a title="Beer Icon" href="#"><i class="fa fa-beer"></i>Beer Icon</a></li>
<li><a title="Code Icon" href="#"><i class="fa fa-code"></i>Code Icon</a></li>
<li><a title="Envelope Icon" href="#"><i class="fa fa-envelope-o"></i>Envelope Icon</a></li>
<li><a title="Bitbucket Icon" href="#"><i class="fa fa-bitbucket-square"></i>Bitbucket Icon</a></li>
<li><a title="Globe Icon" href="#"><i class="fa fa-globe"></i>Globe Icon</a></li>
<li><a title="Skype Icon" href="#"><i class="fa fa-skype"></i>Skype Icon</a></li>
<li><a title="Github Icon" href="#"><i class="fa fa-github"></i>Github Icon</a></li>
<li><a title="Renren Icon" href="#"><i class="fa fa-renren"></i>Renren Icon</a></li>
</ul>
<div class="clear_item_megamenu"></div>
<div class="element_shop_product-1"><p>Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.</p></div>
<div class="element_shop_product-2"><p>Font Awesome font licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a> Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a> Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p></div>
</div>
    

    3.2.2 Configuration:
    

    The parameters are divided into the following groups:
     
    

      

    • General Settings
      • 

    • Advanced Settings
      • 

    

    

     General settings 
    

    

      

    • Enable Extensions – Allow to enable/disable the module.
      • 

    • Select Mega Menu  – Allow to choose Mega Menu
      • 

    • Select Template – We support 2 templates for presenting of menu (Horizontal and Vertical)
      • 

    • Select Effect – We support effects for Mega menu (CSS/Animation/Toggle)
      • 

    • Start Level – Level to start rendering the Menu at
      • 

    • End Level – Level to end rendering the Menu at
      • 

    

     ADVANCE SETTING 
    

    

      

    • Caching - Allow to choose to cache the content of module.
      • 

    

    

    4SUPPORT
    

    

    Thank you so much for using this module, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our  Support Tickets System
    

    

    

    
                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    Why my website is slow?
    
                     
    
                                              May 5, 2016, 1:56 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    There are dozens of possible reasons why this could be the case. Below are some steps you can take to speed up your site or decrease load time:
    

      

    1. Better hosting = faster server – The most common reason for slow sites is a slow server. If you are on cheap shared hosting, it’s likely that your host has many thousands of other sites on the same server. Since all those sites share the same server resources, there’s not much you can do to offset the lack of speed.
      2. 

    2. Plugins – Lower number of plugins. Many plugins load several files, are poorly coded, or simply have broken links which cause slower sites. Deactivate all your plugins and retest your site to see if any plugins are causing slowness.
      3. 

    3. Cache – Install a cache plugin such as W3 Total Cache. Furthermore, try Cloudflare if you’re really tech-savvy.
      4. 

    4. Ads – Lower number of ads which results in less external requests for data. Each ad is served by an ad network which has to deliver that ad to your site (i.e., takes time)
      5. 

    5. HTTP Requests – Lower number of http requests to site by reducing the number of posts visible on your homepage.
      6. 

    6. Social Networks – Remove any third-party scripts taking too long to load (example: facebook, twitter, youtube, etc.)
      7. 

    7. Images – Lower the number of images displayed on your homepage
      8. 

    8. Images – Optimize your images for the web (save for web). Unoptimized images will slow down sites.
      9. 

    9. Images – Do not use very large images
      10. 

    10. Broken Links – make sure there are no broken images or links on your site
      11. 

    11. Redirects – Avoid redirects on site
      12. 

    12. Videos – Lower number of videos to see if that improves site speed.
      13. 

    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                                        
    
                                                                                                                                          
                
    
                  
    
                    
                    
    
                      Search
                                          
    
                  
    
                                    
                  
                
    
                     
    
                     
    
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    How do I update my theme?
    
                     
    
                                              May 5, 2016, 2:01 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    The first thing you need to read the Changelog. It will give you an overview of new features, improvements, bug fixes or any other changes in the new version. If you find these changes irrelevant or unimportant, you can skip the update.
    

    The update process is similar to the theme installation process. You will need to replace the old theme using the FTP instructions, or delete the old theme from theAppearance > Themes screen, then follow the installation instructions to upload the latest version of the theme.
    

    Please Note: If you have made any custom changes to the theme code, make a backup of your existing theme and save it to your computer before updating.
    

    To update WordPress theme safely without losing your customization, it’s best to use a WordPress child theme. Should you have any difficulty in updating theme, feel free to raise your questions at our Support page.
    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                                        
    
                       
    
                         
                
    

                       
    
                     
    
                     
    ↧
    
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    How to translate WordPress website with PoEdit?
    
                     
    
                                              May 5, 2016, 8:56 pm
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    Poedit is a common program which you can use to translate the theme. It’s available for free on poedit.net.
    

    In this tutorial, I want to show how to translate your WordPress site use PoEdit plugin.
    

    After you have installed Poedit, you can open it and select File > New Catalog from POT file. Then select the .pot file from the theme you wish to translate which you can find in the /includes/lang/ or /languages/ folder of your theme.
    

    Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example es_ES.po). Normally Poedit automatically creates the .mo file and saves it, too.
    

    The last step you have to do is to upload your created language files to the language folder of your theme using FTP.
    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SM Search Box Magento 2
    
                     
    
                                              May 10, 2016, 12:34 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    This guide will help you install SM Search Box  step by step.

    

    

    1REQUIREMENT
    

    

    At the basic level, this module will require the following condition:
    

      

    • Compatible with Magento Community Edition 2.0: Please follow Magento 2.0 Installation Guide to install if you do not have one.
      • 

    • Composer (latest stable version)
      • 

    • Apache 2.2 or late
      • 

    • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)
      • 

      

    • In the future if the conditions change, please check the Magento 2 documentation
      • 

    

    

    

    

    2INSTALLATION
    

    

      

    • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
      • 

    • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server

    • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt
      • 

      	
      

        

      • 1. Please type the following command into the dialog to clear the compiled code and cache:
        
		
        php bin\magento setup:upgrade
        
		
        • 

      • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
        
		
        php bin/magento setup:static-content:deploy
        
		
        • 

      

    • Step 4: Go to Administration page to configure the extension
      • 

       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.
        • 

      

    

    

    

    3CONFIGURATION
    

    

    3.1 Module Demo
    

    You could see the appearance of SM Search Box module as following:
    

    

    3.2 Module Configuration
    

    Notes: We used the images of module’s installation on Magento 2.0.x to illustrate
    

    In the Administrator Page, navigate to Stores -> Settings -> Configuration and find SM Search Box  to configure.
    
The parameters are divided into the following group:
    

      

    • General settings
      • 

    

    Let’s look at the parameters in detail:
    

    

     General settings 
    

    

      

    • Enable Extensions: Allow to enable/disable the module.
      • 

    • Root Catalog Id: Allow to choose root catalog which SM Search Pro uses.
      • 

    • Max Level: The number of child category levels to return.
      • 

    • Show Popular Search: Allow to show popular search.
      • 

    • Limit Popular: Limit number popular search.
      • 

    • Show More Popular Search: Allow to show advanced search.
      • 

    • Text Show More: Allow to set text for showing more.
      • 

    • Show Advanced Search: Allow to show advanced search.
      • 

    • Pre-text: Set the text that is showed above an instance of module.
      • 

    • Post-text: Set the text that is showed under an instance of module.
      • 

    

    3.3 Page Configuration
    

      

    • If you want to use this module , please go to Content -> Page -> Edit Home page item ->Tab Content, add this code to a position:
      • 

    

    {{block class="Sm\SearchBox\Block\SearchBox" name="searchbox" as="searchbox" template="Sm_SearchBox::searchbox.form.mini.phtml" }}
    


    

    

    

    4SUPPORT
    

    

    Thank you so much for using this module, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our  Support Tickets System
    

    

    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SP Furnicom
    
                     
    
                                              May 17, 2016, 12:12 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    

    1GETTING STARTED 
    

    

    

    1.1 Introduction
    

    

    

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
    

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.
    

    

    

    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 import the theme/module file to your server due to the maximum upload and PHP memory limit, 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 not familiar with Prestashop, please read its guide first: http://doc.prestashop.com/display/PS16/Getting+Started

    

    

    

    2INSTALLATION 
    

    

    

    There are two ways to install SP Furnicom Theme
    

      

    • Quickstart Installation: sp_furnicom_quickstart_p16_v1.0.0.zip . By using this package, you will set the theme exactly like our Demo with sample data.
      • 

    • Manual Installation : Include of Theme layout Installation Packages. Please unzip the package and you would see the following folders:

        

      • module folder
        • 

      • sp_furnicom_template_p16_v1.0.0.zip file
        

        • 

      

      • 

    

    

    

    2.1 Quickstart Installation
    

    

    We provide 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 of SP Furnicom theme
      • 

    • Step 2: Extract the downloaded package named “sp_furnicom_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting) folder. 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 these steps 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. 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 click “Create” button.
    

    

    When the database is created successfully, copy and paste its name into the “Database name” field, then click the “Test your database connection now!” button to make sure that the entered settings are correct. If they are, you will see a Database is connected message. After that, you could click the “Next” button to move to next steps.
    

    

      

        

      • Finish installation: This process could take a few minutes
        • 

      

    

    

    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 the cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.
    

    

    

    SP Furnicom Layout1 Theme Installation
    

    

    Note: Here we will introduce you How To Install SP Furnicom Layout 1 Theme, with Layout 2, Layout 3, Layout 4 and Layout 5 do the same.
    

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

      

    • module folder: contain of the smartblog.zip file, smartblogarchive.zip file, smartblogcategories.zip file, smartbloghomelatestnews.zip file, smartblogrecentposts.zip file, smartblogtag.zip file
      

      • 

    • and the sp_furnicom_template_p16_v1.0.0.zip file.
      • 

    

    STEP 1: Install smartblog.zip , smartblogarchive.zip , smartblogcategories.zip , smartbloghomelatestnews.zip , smartblogrecentposts.zip , smartblogtag.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  “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 click “Install” button to run it.
    

    

    5. When a pop-up window displays, please click “Proceed with the installation” button.
    

    

    6. Finally, Module(s) installed successfully.
    

    Note: Do the same with the others.
    

    STEP 2: Install the “sp_furnicom_template_p16_v1.0.0.zip” file. 
    

    1. Login to your Prestashop admin panel and navigate to Preferences -> Themes. At the top of the page click the Add a new theme button.
    

    

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


    
3.  When your choice is successfully validated , a notice will be showed like the following image:
    


    
4.  In the section named as Select a theme for your “[name]” shop, move your mouse cursor over SP furnicom‘s thumbnail and select  Use this themeto replace your current theme with SP furnicom theme.
    
5. After that, a list of the installed/disabled modules will be showed out, please click “Save” to install modules that were imported along with the theme.
    

    

    6. Finally, please click “Finish” to end the process.
    

    

    

    

    

    3SP THEME CONFIGURATION 
    

    

    

    3.1 General Settings
    

    

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

    

    2. In the SP Theme Settings, choose “General” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.2 Layout Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Layout” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.3 Fonts
    

    

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

    

    2. In the SP Theme Settings, choose “Fonts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    Note: Please copy and paste the following line into Font Selector tab:
    
1. 
    .sp-megamenu .navbar-nav  li li a,
    
2. 
    .content_sortPagiBar_top label, .content_sortPagiBar_bottom label,.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span
    

    

    

    3.4 Category Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Category Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.5 Product Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.6 Bonus Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Bonus Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.7 Advanced Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.8 Social Accounts
    

    

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

    

    2. In the SP Theme Settings, choose “Social Accounts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    


    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.10 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 image size types that suit your products best.
    

    

    2. Image quality - You can set image quality in 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 used in your site. Select option then click Regenerate thumbnails button.
    

    


    Frontend Appearance:
    

    

    To edit Copyright, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Copyright”in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    3.12 Edit Payment
    

    

    Frontend Appearance:
    

    

    To edit Payment, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Upload your own payment image”  in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    4SP MEGA MENU CONFIGURATION 
    

    

    

    4.1 displayMenu: SP Mega Menu
    

    


    
1. Navigate to Modules -> Modules >> look for SP Mega Menu >> Click the Configure button to access the module configuration page.
    

    
2. In the SP Mega Menu Panel, you could configure  Add New Module by click on the button like the following image:
    

    
3. In the configuration page of new module, you could configure  General Options as follows
    

    
4. In the configuration page of new module, you could configure  Menu Information as follows
    

    
5.  In order to add menu items, to add items as you want, you need to click this button.
    

    
6. Menu list of Mega Menu You need to look at the menu list to configure easily.
    

    
7.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Mega Menu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Living Room 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Living Room’: Please click Here to view.
      • 

    

    Note: The items named ‘Bed Room’, ‘Chairs’ having same menu level  as item ‘Living Room’could have same configuration
    

      

    • Backend Settings of Item ‘Category Image’: Please click Here to view.
      • 

    

    Copy and paste the following code into the URL Tab: 
    <div class="images_cat"><a href="#"><img src="../themes/sp_furnicom/img/cms/image_cat1.jpg" alt="" /> </a></div>
    
Bedroom
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Bags’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Featured product’: Please click Here to view.
      • 

    

    Dining 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Dining Submenu 1′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Dining Submenu 2′: Please click Here to view.
      • 

    

    Note: The items named ‘Dining Submenu 3′ and ‘Dining Submenu 4′, having same menu level  as item ‘Dining Submenu 2′ could have same configuration
    

    Blog
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Copy and paste the following code into the URL Tab:
    index.php?fc=module&module=smartblog&controller=category
    
About Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Contact Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    	Copy and paste the following code into the URL Tab:
    index.php?controller=contact
    

      

    • Backend Settings of Item ‘Contact Page 1′ : Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab:
    index.php?controller=contact?SP_contactStyle=contact-v1
    
	

    Note: You could do the same with these items having same level in this menu: Contact Page 2, Contact Page 3, Contact Page 4. However, the items’ URLs are different.
    

      

    • Copy and paste the following code into the URL Tab of Contact Page 2:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v2
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 3:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v3
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 4:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v4
      

    

    

    

    

    

    5EXTENSIONS CONFIGURATION 
    

    

    

    5.1 SP Furnicom Layout 1
    

    

    home-default
    

    displayTopNav
    

    

    1. SP Block Currencies
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.
    

    

    2. SP Block Languages
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: To add language as you want. For example: To 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: Click “Save” button and view shop to see the changes.
    

    Note: When you add any language as you want, for example: 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, for example: Position – displayHtml4: Banner Top; Module: SP Custom HTML.
    

    .
    

    2. And click source code to add “../” at before the image url >> Click “OK”.
    

    .
    

    3. Click “Save” button and go to the frontend to view the changes.
    

    

    displayUserinfo
    

    

    SP User Info Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.
    

    

    display CustomHTML1
    

    

    SP Custom HTML – Custom Support
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="support-info"&gt
&ltul&gt
&ltli class="live-chat"&gt&lta href="#"&gtStart &ltstrong&gtlive chat&lt/strong&gt&lt/a&gt&lt/li&gt
&ltli class="phone-support"&gtCall our customer service at:&ltstrong&gt 096-999-8386&lt/strong&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    	
    


    SP Search Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Search Pro” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Customhtml2
    

    

    SP Custom HTML – Fee Shipping
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="icon-shipping"&gt&ltimg title="shipping" src="../themes/sp_furnicom/img/cms/icon-shipping.png" alt="shipping" /&gt&lt/div&gt
    

     displayCart
    

    

    SP Cart Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Cart Block” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    


    SP Theme Configuration 
    

    Frontend Appearance:
    

    

    Backend Settings: Go Here to see the backend settings.
    

    displaySlideShow1
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 1:  Please click Here to view
		
      • 

    • Sample 2: Please click Here to view
		
      • 

    • Sample 3: Please click Here to view
		
      • 

    

    display CustomHTML3
    

    

    SP Custom HTML – Deals Of The Day
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="box-deal-html"&gt
&ltdiv class="box-title"&gt
&ltdiv class="title"&gt
&lth2&gt&ltstrong&gtDeals Of&lt/strong&gt The Day&lt/h2&gt
&lt/div&gt
&ltp&gtMauris ut tincidunt nisi, id auctor libero. Etiam aliquet felis et consectetur faucibus. Praesent aliquam, lec tempus consequat, felis quam venenatis ligula&lt/p&gt
&lt/div&gt
&ltdiv class="box-categories"&gt
&ltdiv class="categories-in active"&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cate01.jpg" alt="" /&gt&lt/a&gt
&lth3&gtLiving Room&lt/h3&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cate02.jpg" alt="" /&gt&lt/a&gt
&lth3&gtKitchen&lt/h3&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cate03.jpg" alt="" /&gt&lt/a&gt
&lth3&gtWork Place&lt/h3&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/cate04.jpg" alt="" /&gt&lt/a&gt
&lth3&gtWardrobe&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    	
    

    displayDeal
    

    

    SP Deal – hot deals
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider
    

    

    SP Extra Slider – Product Product
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display CustomHTML4
    

    

    SP Custom HTML – Banner Top
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner01.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner02.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner03.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
    	
    

    displayExtraSlider2
    

    

    SP Extra Slider – Featured Product
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display CustomHTML5
    

    

    SP Custom HTML – Free Shipping
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="bgr_shipping"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/shiping.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
    	
    

    displayExtraSlider3
    

    

    SP Extra Slider – Best Sellers
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display CustomHTML6
    

    

    SP Custom HTML – Testimonial
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="bg_testimonia"&gt
&ltdiv class="item"&gt
&ltdiv class="images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/tes1.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="bg_content"&gt
&ltp class="des"&gtFusce lorem ante, condimentum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus. Pellentesque commodo posuere maximus. Phasellus pellentesque pellentesque facilisis.&lt/p&gt
&lta href="#"&gt&ltstrong&gtJOHN DOE&lt/strong&gt - Designer&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/tes1.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="bg_content"&gt
&ltp class="des"&gtFusce lorem ante, condimentum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus. Pellentesque commodo posuere maximus. Phasellus pellentesque pellentesque facilisis.&lt/p&gt
&lta href="#"&gt&ltstrong&gtJOHN DOE&lt/strong&gt - Designer&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/tes1.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="bg_content"&gt
&ltp class="des"&gtFusce lorem ante, condimentum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus. Pellentesque commodo posuere maximus. Phasellus pellentesque pellentesque facilisis.&lt/p&gt
&lta href="#"&gt&ltstrong&gtJOHN DOE&lt/strong&gt - Designer&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/tes1.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="bg_content"&gt
&ltp class="des"&gtFusce lorem ante, condimentum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus. Pellentesque commodo posuere maximus. Phasellus pellentesque pellentesque facilisis.&lt/p&gt
&lta href="#"&gt&ltstrong&gtJOHN DOE&lt/strong&gt - Designer&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    display CustomHTML7
    

    

    SP Custom HTML – Hot Category
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="hot-category"&gt
&ltdiv class="list-category"&gt
&ltdiv class="row"&gt
&ltdiv class="item item1 col-lg-4 col-md-4 col-sm-4 col-xs-12"&gt
&ltdiv class="room dining-room active"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner04.jpg" alt="" /&gt&lt/a&gt
&ltdiv class="wrap"&gt
&lth3&gtDINING ROOM&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtLarge Coffee Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtSmall Coffee Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtCoffee Table sets&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtConsole Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtSet Of Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtEnd Tables&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="room living-room"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner05.jpg" alt="" /&gt&lt/a&gt
&ltdiv class="wrap"&gt
&lth3&gtLiving room&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtCoffee Table sets&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtEnd Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtConsole Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtSet Of Tables&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item2 col-lg-4 col-md-4 col-sm-4 col-xs-12"&gt
&ltdiv class="view-category"&gt
&ltdiv class="box-slider-title"&gt
&lth2&gt&ltstrong&gtHot&lt/strong&gt Categories&lt/h2&gt
&lt/div&gt
&ltdiv class="content-category"&gtDuis euismod eu nibh at pharetra. Vivamus placerat ac metus et placerat. Nulla molestie massa id est posuere, maximus hendrerit est rhoncus.&lt/div&gt
&lta href="#"&gtview all categories&lt/a&gt&lt/div&gt
&ltdiv class="room bed-room"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner06.jpg" alt="" /&gt&lt/a&gt
&ltdiv class="wrap"&gt
&lth3&gtBed room&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtNightstands&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtBeds&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtHeadboards&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtChests & Dressers&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtNightstands&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtBedroom Sets&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item3 col-lg-4 col-md-4 col-sm-4 col-xs-12"&gt
&ltdiv class="room kit-chen"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner07.jpg" alt="" /&gt&lt/a&gt
&ltdiv class="wrap"&gt
&lth3&gtReading room&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtSmall Coffee Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtCoffee Table sets&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtEnd Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtConsole Tables&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtSet Of Tables&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="room bath-room"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner08.jpg" alt="" /&gt&lt/a&gt
&ltdiv class="wrap"&gt
&lth3&gtBathroom&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtBathroom Faucets&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtBathroom Mirrors&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtBathroom Sinks&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtBathroom Vanities&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtShowers&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    display Home News
    

    

    SP SmartBlog Home Lastest
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    display CustomHTML8
    

    

    SP Custom HTML – Brand
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="category-tab-content clearfix"&gt
&ltul class="nav nav-tabs tab-left"&gt
&ltli class="block-title"&gt
&lth3&gt&ltstrong&gtFeatured&lt/strong&gt Brands&lt/h3&gt
&lt/li&gt
&lt!-- Tab Content --&gt
&ltli class="active"&gt&lta title="Brands" href="#category_tab_45" data-toggle="tab"&gt &ltimg src="../themes/sp_furnicom/img/cms/br1.jpg" alt="br1" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brands1" href="#category_tab_46" data-toggle="tab"&gt &ltimg src="../themes/sp_furnicom/img/cms/br3.jpg" alt="br1" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brands2" href="#category_tab_47" data-toggle="tab"&gt &ltimg src="../themes/sp_furnicom/img/cms/br4.jpg" alt="br1" /&gt &lt/a&gt&lt/li&gt
&lt/ul&gt
&ltdiv class="tab-content"&gt
&ltdiv id="category_tab_45" class="tab-pane fade in active"&gt
&ltdiv class="tab-pane-inner"&gt&ltimg class="category-image" src="../themes/sp_furnicom/img/cms/brand1.jpg" alt="brand1" /&gt
&ltdiv class="item-description"&gt
&ltp&gtNokia Corporation is a Finnish multinational communications and information technology company. Nokia is headquartered in Espoo, Uusimaa, in the greater Helsinki metropolitan area.&lt/p&gt
&lta title="Brands" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv id="category_tab_46" class="tab-pane fade"&gt
&ltdiv class="tab-pane-inner"&gt&ltimg class="category-image" src="../themes/sp_furnicom/img/cms/brand2.jpg" alt="brand1" /&gt
&ltdiv class="item-description"&gt
&ltp&gtNokia Corporation is a Finnish multinational communications and information technology company. Nokia is headquartered in Espoo, Uusimaa, in the greater Helsinki metropolitan area.&lt/p&gt
&lta title="Brands1" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv id="category_tab_47" class="tab-pane fade"&gt
&ltdiv class="tab-pane-inner"&gt&ltimg class="category-image" src="../themes/sp_furnicom/img/cms/brand3.jpg" alt="brand1" /&gt
&ltdiv class="item-description"&gt
&ltp&gtNokia Corporation is a Finnish multinational communications and information technology company. Nokia is headquartered in Espoo, Uusimaa, in the greater Helsinki metropolitan area.&lt/p&gt
&lta title="Brands2" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv id="category_tab_48" class="tab-pane fade"&gt
&ltdiv class="tab-pane-inner"&gt&ltimg class="category-image" src="../themes/sp_furnicom/img/cms/brand4.jpg" alt="brand1" /&gt
&ltdiv class="item-description"&gt
&ltp&gtNokia Corporation is a Finnish multinational communications and information technology company. Nokia is headquartered in Espoo, Uusimaa, in the greater Helsinki metropolitan area.&lt/p&gt
&lta title="Brands2" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv id="category_tab_49" class="tab-pane fade"&gt
&ltdiv class="tab-pane-inner"&gt&ltimg class="category-image" src="../themes/sp_furnicom/img/cms/brand5.jpg" alt="brand1" /&gt
&ltdiv class="item-description"&gt
&ltp&gtNokia Corporation is a Finnish multinational communications and information technology company. Nokia is headquartered in Espoo, Uusimaa, in the greater Helsinki metropolitan area.&lt/p&gt
&lta title="Brands2" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv id="category_tab_50" class="tab-pane fade"&gt
&ltdiv class="tab-pane-inner"&gt&ltimg class="category-image" src="../themes/sp_furnicom/img/cms/brand6.jpg" alt="brand1" /&gt
&ltdiv class="item-description"&gt
&ltp&gtNokia Corporation is a Finnish multinational communications and information technology company. Nokia is headquartered in Espoo, Uusimaa, in the greater Helsinki metropolitan area.&lt/p&gt
&lta title="Brands2" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltul class="nav nav-tabs tab-right"&gt
&ltli&gt&lta title="Brands3" href="#category_tab_48" data-toggle="tab"&gt &ltimg src="../themes/sp_furnicom/img/cms/br2.jpg" alt="br2" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brands4" href="#category_tab_49" data-toggle="tab"&gt &ltimg src="../themes/sp_furnicom/img/cms/br5.jpg" alt="br5" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brands5" href="#category_tab_50" data-toggle="tab"&gt &ltimg src="../themes/sp_furnicom/img/cms/br6.jpg" alt="br6" /&gt &lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    display CustomHTML9
    

    

    SP Custom HTML – Need Help
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="box-newsletter"&gt
&lth3&gtNEED HELP? CALL OUR AWARD-WINNING&lt/h3&gt
&ltp&gtSUPPORT TEAM 24/7 AT (844) 555-8386&lt/p&gt
&lt/div&gt
    

    display Newsletter
    

    

    SP Newsletter Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
    

    

    Step 2: You could configure its settings like the following image.
    


    
To edit the text in this module, please follow these steps:
    
In your Website’s Directory, go to themes\sp_furnicom\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter.tpl by your editor program.
    
Find and change the text you want to edit, such as: SUBCRIBE
    

    display CustomHTML10
    

    

    SP Custom HTML – Our Services
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltul&gt
&ltli&gt&lta href="#"&gtDelivery Information&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtReturns&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtTerms & Conditions&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtShipping & Refund&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtSpecials&lt/a&gt&lt/li&gt
&lt/ul&gt
    

    display CustomHTML10
    

    

    SP Custom HTML – Extras
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltul&gt
&ltli&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/contact-us"&gtContact us&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtReturns&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtSpecials&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtBrands&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtGift Voucher&lt/a&gt&lt/li&gt
&lt/ul&gt
    

    display CustomHTML10
    

    

    SP Custom HTML – My account
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltul&gt
&ltli&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/order"&gtMy orders&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtMy credit slips&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtMy addresses&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtMy personal info&lt/a&gt&lt/li&gt
&lt/ul&gt
    

    

    Contact Information Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “Contact Information Block” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    display CustomHTML11
    

    

    SP Custom HTML – Download Our App
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltp&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/app.png" alt="" /&gt&lt/a&gt&lt/p&gt
    

    

    6.2 SP Furnicom Layout 2
    

    

    home-layout2	
    

    displaySlideShow2
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 1:  Please click Here to view
		
      • 

    • Sample 2: Please click Here to view
		
      • 

    • Sample 3: Please click Here to view
		
      • 

    

    display CustomHTML12
    

    

    SP Custom HTML – Banner Top layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner09.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner10.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner11.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
    

    displayExtraSlider4
    

    

    SP Extra Slider – NEW ARRIVALS
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    displayExtraSlider5
    

    

    SP Extra Slider – BEST SELLERS
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    			
    

    displaySuperCategory1
    

    

    SP Super Category – Super category layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    display CustomHTML13
    

    

    SP Custom HTML – Banner Center Layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="bgr_shipping"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner-center.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
    	
    

    displayDeal3
    

    

    SP Deal – Daily Deals
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML14
    

    

    SP Custom HTML – Categories Deal
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="top-tab-deal clearfix"&gt
&ltul&gt
&ltli class="active"&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/3-living-room"&gt &ltimg src="../themes/sp_furnicom/img/cms/1.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/3-living-room"&gtLiving room&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/2.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="#"&gtOFFICE&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/3.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="#"&gtArmchair&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/71-dining"&gt &ltimg src="../themes/sp_furnicom/img/cms/4.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/71-dining"&gtDINING room&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/5.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="#"&gtSHELF&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/67-bedroom"&gt &ltimg src="../themes/sp_furnicom/img/cms/6.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="http://dev.ytcvn.com/ytc_templates/prestashop/sp_furnicom/en/67-bedroom"&gtBED ROOM&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/7.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="#"&gtSofa&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/8.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="#"&gtWALL DECOR&lt/a&gt&lt/h3&gt
&lt/li&gt
&ltli&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/9.png" alt="" /&gt&lt/a&gt
&lth3&gt&lta href="#"&gtNightstand&lt/a&gt&lt/h3&gt
&lt/li&gt
&lt/ul&gt
&lt/div&gt
    		
    

    

    6.3 SP Furnicom Layout 3
    

    

    home-layout3
    

    displaySlideShow3
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 1:  Please click Here to view
		
      • 

    • Sample 2: Please click Here to view
		
      • 

    

    display CustomHTML22
    

    

    SP Custom HTML – Deals Of The Days L3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="box-deal-html"&gt
&ltdiv class="box-title"&gt
&ltdiv class="title"&gt
&lth2&gt&ltstrong&gtDeals Of&lt/strong&gt The Day&lt/h2&gt
&lt/div&gt
&ltp&gtMauris ut tincidunt nisi, id auctor libero. Etiam aliquet felis et consectetur faucibus. Praesent aliquam, lec tempus consequat, felis quam venenatis ligula&lt/p&gt
&lt/div&gt
&ltdiv class="box-categories"&gt
&ltdiv class="categories-in active"&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cate05.jpg" alt="" /&gt&lt/a&gt
&lth3&gtLiving Room&lt/h3&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cate06.jpg" alt="" /&gt&lt/a&gt
&lth3&gtKitchen&lt/h3&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cate07.jpg" alt="" /&gt&lt/a&gt
&lth3&gtWork Place&lt/h3&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/cate08.jpg" alt="" /&gt&lt/a&gt
&lth3&gtWardrobe&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

     displayListingtab
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display CustomHTML15
    

    

    SP Custom HTML – Banner Top Center layout3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner01.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner12.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-4 images"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner03.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
    

     displayListingtab
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider7
    

    

    SP Extra Slider – new arrivals
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider7
    

    

    SP Extra Slider – best selling
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider7
    

    

    SP Extra Slider – hot sale
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    

    6.4 SP Furnicom Layout 4
    

    

    home-layout4
    

    displaySlideShow4
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 4: Please click Here to view
		
      • 

    • Sample 2: Please click Here to view
		
      • 

    • Sample 1: Please click Here to view
		
      • 

    

    displayExtraSlider8
    

    

    SP Extra Slider – Sale Products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML16
    

    

    SP Custom HTML – Deals Of The Days layout4
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="box-deal-html"&gt
&ltdiv class="box-title"&gt
&ltdiv class="title"&gt
&lth2&gt&ltstrong&gtDeals&lt/strong&gt Of The Day&lt/h2&gt
&lt/div&gt
&ltp&gtFusce lorem ante, condimentum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus.&lt/p&gt
&lt/div&gt
&ltdiv class="box-categories"&gt
&ltdiv class="categories-in active"&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cat1.png" alt="" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cat2.png" alt="" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt &ltimg src="../themes/sp_furnicom/img/cms/cat3.png" alt="" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="categories-in "&gt
&ltdiv class="item-image"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/cat4.png" alt="" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="custom-link"&gt&lta href="#"&gtview all&lt/a&gt&lt/div&gt
&lt/div&gt
    

    display CustomHTML17
    

    

    SP Custom HTML – Banner Center layout 4
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="images img1"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner13.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="images img2"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner14.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
    

    displaySuperCategory2
    

    

    SP Super Category – Living Room
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displaySuperCategory2
    

    

    SP Super Category – BedRoom
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

     displayListingtab
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    

    6.5 SP Furnicom Layout 5
    

    

    home-layout5
    

    displaySlideShow5
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 12:  Please click Here to view
		
      • 

    • Sample 13: Please click Here to view
		
      • 

    • Sample 14: Please click Here to view
		
      • 

    

    displayExtraSlider9
    

    

    SP Extra Slider – Popular Products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display CustomHTML21
    

    

    SP Custom HTML – Banner Center layout 5
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="images img2"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner15.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="images img1"&gt&lta href="#"&gt&ltimg src="../themes/sp_furnicom/img/cms/banner16.jpg" alt="" /&gt&lt/a&gt&lt/div&gt
    	
    

    displaySuperCategory3
    

    

    SP Super Category – Dining Room
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displaySuperCategory3
    

    

    SP Super Category – Accessories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displaySuperCategory3
    

    

    SP Super Category – Accessories Copy
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
    

    
Step 2: In the “SP Super Category” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    displayManufacturer3
    

    

    SP Manufacture Slider – Our Brands
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    

    6SUPPORT
    

    

    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

    
                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SM Sawyer Magento 2.0
    
                     
    
                                              May 25, 2016, 12:50 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
    

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.
    

    

    

    

    1 SYSTEM REQUIREMENT
    

    

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

      

        

      • Compatible with Magento Community Edition 2.0.4
        • 

      • Composer (latest stable version)
        • 

      • Apache 2.2 or late
        • 

      • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)
        • 

        

      • In the future if the conditions change, please check the Magento 2 documentation
        • 

      

    

    

    

    

    2INSTALLATION
    

    

    There are two ways to install a Magento Theme:
    

      

    • Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
      • 

    • Manual Installation (including Theme Installation): Suitable if your store is full with content that you don’t want to overwrite.
      • 

    

    2.1 Quickstart Installation:
    

    Magentech provides SM Quickstart package for each theme which aims to ease the installation for users. Please note that with Quickstart, all your existing data will be overwritten. Thus, if you plan to start your site from the beginning, it will help you save much time of installing and configuring. 
    

    Note: Follow Magento 2.0 Installation Guide to install the Composer before doing this Quickstart installation.
    

    Please follow steps below: 
    

      

    • Step 1: Download the quickstart package named as sm_sawyer_quickstart_m2.0.0_v2.0.4
      • 

    • 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 site
      • 

      Note: You need to remember the database name to use in the next steps
      

      

        

      • Step 4:Import database sample_data.sql under the folder sm_sawyer_quickstart_m2.0.0_v2.0.4\data_quickstart 
        • 

      

      Note: 
      

      After successful installation DO NOT run magento.
      

      Now we are going to verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks. To perform all above actions, press WINDOWS KEY + R to open RUN dialog and type cmd to open Command Prompt. 
      

      Type cd PATH_TO_YOUR_MAGENTO2_FILES to enter in Magento 2 ROOT directory.
      

        

      • 1. Now to verify Composer installation in above directory, type composer install.
        • 

        If you get any error in this step, please check your Composer installation.
        

      • 2. In this step, we are setting up static content to deploy on our Magento store. To perform this, type php bin/magento setup:static-content:deploy.
        • 

        If you get any error, check your PHP.EXE and PHP.INI Environment Variable
        

      • 

        3. Clear compiled code and the cache by typing php bin/magento setup:upgrade in CMD. Typically, you use magento this command line to update components and each component can require different compiled classes.
        

        • 

      • 

        4. And finally, to Reindex Magento Static Blocks type  php bin/magento indexer:reindex.
        

        • 

      

      

        

      • Step 5: Run installation process by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer and follow each step of the Installer so that the installation process can be set.
        • 

      

      

        

      • Step 6:  Choose Start Readiness Check. After Start Readiness Check is completed, select Next .
        • 

      


      
When you click on “Start Readiness Check”,the error could occur like the below image
      

      
You need to open your php.ini file and set always_populate_raw_post_data to -1.
      

      

        

      • Step 7: Enter server and database in step 2 and then click on Next.
        • 

      

      

        

      • Step 8: Put your website link and continue to click on Next.
        • 

      

      

        

      • Step 9: Customize your store: you can choose Time Zone, Currency and Languages.
        • 

      

      

        

      • Step 10:  You need to Create Admin Account. Enter your information and move to the next step.
        • 

      

      

        

      • Step 11: In this step, you should click on the button: Install Now.
        • 

      


      
It will take some minutes to complete this installation process. If your window is the same as below, CONGRAT! You install this quickstart package successfully
      

      
 After clicking on the button, the Admin Login screen will be opened and you can use admin credentials to login on this screen. It will open Admin panel after successful authentication.
      

      

      2.2 Manual Installation
      

        

          

        • Step 1: Please unzip ‘sm_sawyer_theme_m2.0.0_v2.0.4′ file and upload folders app; pub from the theme package to the root of your Magento site folder on your server.
          

          Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database.

          To verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks before configuring your site, please go Here to follow
          

          • 

        • Step 2: Log in to your Admin Panel (e.g. http://yourdomain.com/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 >> Tools >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.
          • 

          	
          

        • Step 4: Navigate to Stores>> Settings>> Configuration >> Design. In Design tab, select Design Theme field with the Sm Sawyer.
          • 

          

        

      

        

      • Step 5: Click “Save Config” button to save your changes.
        • 

      

      2.3 Theme Setting
      

      In Magento admin panel, navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Sawyer and configure its settings as you want.
      

      

        

      • Configure General Options with Color (of theme), Body Font, Elements Google Font, Menu for any store.
        • 

      • Configure Theme Layout with Layout style
        • 

      • Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns
        • 

      • Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.
        • 

      • Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin, Pinterest
        • 

      • Configure Advanced : To Show Go to Top, Add to Cart, Add to Wishlist, Add to Compare… 
        • 

      

       

    

    

    
3CONFIGURATION

    

    3.1 Page Configuration
    

    3.1.1 Home Style 1
    

     Frontend of Home Style 1 – Layout Position
    
home-layout1
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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::
    &ltdiv class="home-style-1 homepage-wrapper"&gt
&ltdiv class="wrapper-fulltop-conent col-md-offset-3"&gt
&ltdiv class="row"&gt
&ltdiv class="col-md-8"&gt{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}&lt/div&gt
&ltdiv class="col-md-4"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="banner-img1"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="row"&gt
&ltdiv id="ytech_left" class="col-md-3"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar"}} {{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-index1.phtml"}} {{block class="Magento\\Cms\\Block\\Block" block_id="image-sidebar"}} {{block class="Magento\\Cms\\Block\\Block" block_id="testimonials-layout1"}} {{block class="Magento\\Cms\\Block\\Block" block_id="product-onsale"}} {{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1"}} {{block class="Magento\\Cms\\Block\\Block" block_id="policyshop-layout1"}} {{block class="Magento\\Cms\\Block\\Block" block_id="blog-block-index1"}}&lt/div&gt
&ltdiv class="col-md-9"&gt
&ltdiv class="wrapper-listting1"&gt
&ltdiv class="listting-home1"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs1" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="gift & parties" product_category="77" pretext="static-1f-layout1" posttext="1F"}}&lt/div&gt
&lt/div&gt
&ltdiv class="wrapper-listting2"&gt
&ltdiv class="listting-home1"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs2" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="mobile & Accessories" product_category="75" pretext="static-2f-layout1" posttext="2F"}}&lt/div&gt
&lt/div&gt
&ltdiv class="wrapper-listting3"&gt
&ltdiv class="listting-home1"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs3" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="fashion & clothes" product_category="80" pretext="static-3f-layout1" posttext="3F"}}&lt/div&gt
&lt/div&gt
&ltdiv class="wrapper-listting4"&gt
&ltdiv class="listting-home1"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs4" template="Sm_ListingTabs::sm/listingtabs/default-style2.phtml" title="home & interior" product_category="74" pretext="static-4f-layout1" posttext="4F" style2="style2" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="1" nb_column5="1"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

  •  Meta Data Tab: Please click to see the  Backend Settings.
    • 

  •  Page View Optimization Tab: Please click to see the  Backend Settings.
    • 


    3.1.2 Home Style 2
    

     Frontend of Home Style 2 – Layout Position
    
home-layout2
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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::
    &ltdiv class="homepage-wrapper home-style-2"&gt
&ltdiv class="full-wrapper"&gt
&ltdiv class="container"&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="policy-shop2"}}
{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts" template="Sm_BasicProducts::sm/basicproducts/basic-top-home2.phtml" title="best sellers" product_order_by="best_sales" product_limitation="6" posttext="posttext-bstop"}}
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index2"}}
&ltdiv class="product-basic1"&gt
&ltdiv class="product-basic-home2"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts1" template="Sm_BasicProducts::sm/basicproducts/basicgird-home2.phtml" title="" product_category="78" product_limitation="4" pretext="pretext-mobiles" posttext="brand-basicproduct2" row_items="1" nb_column1="4" nb_column2="4" nb_column3="3" nb_column4="2" nb_column5="1"}}&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index2"}}
&ltdiv class="product-basic2"&gt
&ltdiv class="product-basic-home2"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts2" template="Sm_BasicProducts::sm/basicproducts/basicgird-home2.phtml" title="" product_category="76" product_limitation="4" pretext="pretext-gift" posttext="" row_items="2" nb_column1="2" nb_column2="2" nb_column3="2" nb_column4="1" nb_column5="1"}}&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-3-index2"}}
&ltdiv class="product-basic3"&gt
&ltdiv class="product-basic-home2"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts3" template="Sm_BasicProducts::sm/basicproducts/basicgird-home2.phtml" title="" product_category="80" product_limitation="4" pretext="pretext-fashion" posttext="brand-basicproduct2" row_items="1" nb_column1="4" nb_column2="4" nb_column3="3" nb_column4="2" nb_column5="1"}}&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-4-index2"}}
&ltdiv class="product-basic4"&gt
&ltdiv class="product-basic-home2"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts4" template="Sm_BasicProducts::sm/basicproducts/basicgird-home2.phtml" title="" product_category="74" product_limitation="4" pretext="pretext-furniture" posttext="" row_items="2" nb_column1="2" nb_column2="2" nb_column3="2" nb_column4="1" nb_column5="1"}}&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-5-index2"}}
{{block class="Magento\\Cms\\Block\\Block" block_id="blog-home-index2"}} {{block class="Magento\\Cms\\Block\\Block" block_id="brand-slider-home2"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

    	Copy and paste the following code into the Content field::
    &ltreferenceContainer name="main.content"&gt
&ltblock class="Magento\Cms\Block\Block" name="slideshow-home2" before="-" &gt
&ltarguments&gt
	&ltargument name="block_id" xsi:type="string"&gtslideshow-home2&lt/argument&gt
&lt/arguments&gt
&lt/block&gt
&lt/referenceContainer&gt
    

  •  Meta Data Tab: Please click to see the  Backend Settings.
    • 

  •  Page View Optimization Tab: Please click to see the  Backend Settings.
    • 


    3.1.3 Home Style 3
    

     Frontend of Home Style 3 – Layout Position
    
home-layout3
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

    &ltreferenceContainer name="main.content"&gt
&ltblock class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml" before="-"&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="static-image-1-index3"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtstatic-image-1-index3&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="sm-deal-index3"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtsm-deal-index3&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="blog-home3"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtblog-home3&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="block-newletter-brand"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtblock-newletter-brand&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt

&lt/referenceContainer&gt
    

  •  Meta Data Tab: Please click to see the  Backend Settings.
    • 

  •  Page View Optimization Tab: Please click to see the  Backend Settings.
    • 


    3.1.4 Home Style 4
    

     Frontend of Home Style 4 – Layout Position
    
home-layout4
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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::
    &ltdiv class="homepage-wrapper home-style-4"&gt{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml" before="-"}} {{block class="Magento\\Cms\\Block\\Block" block_id="policy-shop4"}} {{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs.home4" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="what's hot" product_category="115" pretext="" posttext="" margin="30"}} {{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index4"}} {{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts2" template="Sm_BasicProducts::sm/basicproducts/basic-home4.phtml" title="FEATURED ITEMS " product_category="115" product_limitation="10" pretext="" posttext="" row_items="2" nb_column1="2" nb_column2="2" nb_column3="2" nb_column4="1" nb_column5="1"}} {{block class="Magento\\Cms\\Block\\Block" block_id="static-testimonials-index4"}}{{block class="Magento\\Cms\\Block\\Block" block_id="block-blog-home4"}} {{block class="Magento\\Cms\\Block\\Block" block_id="brand-slider-home4"}}&lt/div&gt
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

  •  Meta Data Tab: Please click to see the  Backend Settings.
    • 

  •  Page View Optimization Tab: Please click to see the  Backend Settings.
    • 


    3.1.5 Home Style 5
    

     Frontend of Home Style 5 – Layout Position
    
home-layout5
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

    &ltreferenceContainer name="main.content"&gt
&ltblock class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml" before="-"&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="bestseller-home5"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtbestseller-home5&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="featured-home5"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtfeatured-home5&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="static-imgcategory-index5"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtstatic-imgcategory-index5&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt	
&ltblock class="Magento\Cms\Block\Block" name="listtingtabs-home5"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtlisttingtabs-home5&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="static-testimonials-index5"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtstatic-testimonials-index5&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="block-blog-home5"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtblock-blog-home5&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="block-newletter-brand"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtblock-newletter-brand&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&lt/referenceContainer&gt
    

  •  Meta Data Tab: Please click to see the  Backend Settings.
    • 

  •  Page View Optimization Tab: Please click to see the  Backend Settings.
    • 


    Note: Set Default Page 
    

      

    • To set a default page for your Magento Site, in the Admin Panel you go to Stores>> Settings >>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.
      • 

    • You need 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.2 Configure Megamenu 
    


    3.2.1 Horizontal Megamenu:
    

    Horizontal-mega-menu
    

      

    •  Sortable Categories Items Please click Here to view.
      • 

    

    Features
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Dropdown Features’: Please click Here to view.
      • 

      Copy and paste the following code into the Content field::
    &ltdiv class="home-menu-dropdown"&gt
	&ltul class="item-home-store layout-home"&gt
		&ltli class="title-menu-home"&gtLayouts&lt/li&gt
		&ltli&gt&lta title="Home Style 1" href="{{store url="?___store=default&___from_store=french"}}"&gtHome Style 1&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}"&gtHome Style 2&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Home Style 3" href="{{store url="?___store=german&___from_store=default"}}"&gtHome Style 3&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Home Style 4" href="{{store url="?___store=argentina&___from_store=default"}}"&gtHome Style 4&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Home Style 5" href="{{store url="?___store=bolivia&___from_store=default"}}"&gtHome Style 5&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Full Width" href="{{store url="?___store=somaliland&___from_store=default"}}"&gtFull Width&lt/a&gt&lt/li&gt
	&lt/ul&gt

	&ltul class="item-home-store header-home"&gt
		&ltli class="title-menu-home"&gtHeaders&lt/li&gt
		&ltli&gt&lta title="Header Type 1" href="{{store url="?___store=default&___from_store=french"}}"&gtHeader Type 1&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Header Type 2" href="{{store url="?___store=french&___from_store=default"}}"&gtHeader Type 2&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Header Type 3" href="{{store url="?___store=german&___from_store=default"}}"&gtHeader Type 3&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Header Type 4" href="{{store url="?___store=argentina&___from_store=default"}}"&gtHeader Type 4&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Header Type 5" href="{{store url="?___store=bolivia&___from_store=default"}}"&gtHeader Type 5&lt/a&gt&lt/li&gt
	&lt/ul&gt
	
	&ltul class="item-home-store theme-color"&gt
		&ltli class="title-menu-home"&gtColor Styles&lt/li&gt
		&ltli class="blue"&gt&lta title="Blue" href="{{store url="?___store=default&___from_store=french"}}"&gtBlue&lt/a&gt&lt/li&gt
		&ltli class="orange"&gt&lta title="Orange" href="{{store url="?___store=andorra&___from_store=default"}}"&gtOrange&lt/a&gt&lt/li&gt
		&ltli class="brown"&gt&lta title="Brown" href="{{store url="?___store=australia&___from_store=default"}}"&gtBrown&lt/a&gt&lt/li&gt
		&ltli class="red"&gt&lta title="Red" href="{{store url="?___store=barbados&___from_store=default"}}"&gtRed&lt/a&gt&lt/li&gt
		&ltli class="pink"&gt&lta title="bittersweet" href="{{store url="?___store=belgium&___from_store=default"}}"&gtBittersweet&lt/a&gt&lt/li&gt
	&lt/ul&gt	
			
	&ltul class="item-home-store layout-home"&gt
		&ltli class="title-menu-home"&gt404 Page Layout&lt/li&gt
		&ltli&gt&lta title="404 Page Style 1" href="{{store url="404page"}}"&gt404 Page Style 1&lt/a&gt&lt/li&gt
	&lt/ul&gt
	
	&ltdiv style="clear:both;"&gt &lt/div&gt
	
&lt/div&gt
    
	

    Shop
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Accessories – Women’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Tools’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Furniture – Shop’ in ‘Group 1′: Please click Here to view.
      • 

    

    	Collection
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Accessories – Women’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Computer – Shop’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Image 1′ in ‘Group 1′: Please click Here to view.
      • 

      	Copy and paste the following code into the Content field::
    &ltdiv class="static-image-menu"&gt
&lta title="Static Image" href="#"  class="banner-img"&gt
&ltimg src="{{media url="wysiwyg/image-megamenu/img2.jpg"}}" alt="Static Image" /&gt
&lt/a&gt
&lt/div&gt
    
	

    Blog
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    		About Us
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    		Contact
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    3.2.2 Vertical Megamenu:
    

    Horizontal-mega-menu
    

      

    •  Sortable Categories Items Please click Here to view.
      • 

    

    Fashion
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Row 1′ in ‘Fashion’: Please click Here to view.
      • 

      Note: Do the same with item ‘Row 2′
      

    

      

    • Backend of ‘T-shirt’ in ‘Row 1′: Please click Here to view.
      • 

      Note: Do the same with item ‘Dress’ and ‘Shoes’
      

    

      

    • Backend of ‘Bags’ in ‘Row 2′: Please click Here to view.
      • 

      Note: Do the same with item ‘Dress’ and ‘Shoes’
      

    

  •  Sortable Categories Items Please click Here to view.
    • 


    Computer
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Computer Column 1′ in ‘Computer’: Please click Here to view.
      • 

      Note: Do the same with item ‘Computer Column 2′
      

    

      

    • Backend of ‘Col 1′ in ‘Computer Column 1′: Please click Here to view.
      • 

      Note: Other items in Computer Menu having the same menu level (Level 3) would have same configuration. However, you should be aware that the Parent Item of each group is different. 
      

      

    

      

    • Backend of ‘Beds’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Shoes’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Cabinets & Storage’ in ‘Col 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Coat’ in ‘Col 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Shoes’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Bathroom Fixtures’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Jeans’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Banner’ in ‘Col 2′: Please click Here to view.
      • 

      Copy and paste the following code into the Content field::
    &lta title="Static Image" href="#" class="banner-img"&gt
&ltimg src="{{media url="wysiwyg/image-megamenu/img-megamenu.jpg"}}" alt="Static Image" /&gt
&lt/a&gt
    


    Furniture
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Row 1′ in ‘Furniture’: Please click Here to view.
      • 

      Note: Do the same with item ‘Fu.. Row 2′
      

    

      

    • Backend of ‘Fu.. R1 Column 1′ in ‘Row 1′: Please click Here to view.
      • 

      Note: Do the same with item ‘Fu.. R1 Column 2′
      

    

      

    • Backend of ‘Col 1′ in ‘Fu.. R1 Column 1′: Please click Here to view.
      • 

      Note: Do the same with item ‘Col 2′
      

    

      

    • Backend of ‘Chairs & Sofas’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Dress’ in ‘Col 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Col 1′ in ‘Fu.. R1 Column 2′: Please click Here to view.
      • 

      Note: Do the same with item ‘Col 2′
      

    

      

    • Backend of ‘Office Furniture’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘T-shirt’ in ‘Col 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Banner 1′ in ‘Fu.. Row 2′: Please click Here to view.
      • 

      	Copy and paste the following code into the Content field::
    &lta title="Static Image" href="#" class="banner-img"&gt&ltimg src="{{media url="wysiwyg/image-megamenu/img1.jpg"}}" alt="Static Image" /&gt&lt/a&gt
    


    Healthy & Beauty
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Sub List’ in ‘Healthy & Beauty’: Please click Here to view.
      • 

    

    Watch & Jewelry
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Smartphone’ in ‘Watch & Jewelry’: Please click Here to view.
      • 

    

      

    • Backend of ‘Row 1′ in ‘Smartphone’: Please click Here to view.
      • 

    

      

    • Backend of ‘Fu.. R1 Column 1′ in ‘Row 1′: Please click Here to view.
      • 

      Note: Do the same with item ‘Fu.. R1 Column 2′
      

    

      

    • Backend of ‘Col 1′ in ‘Fu.. R1 Column 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘T-shirt’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Col 2′ in ‘Fu.. R1 Column 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Dress’ in ‘Col 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Col 1′ in ‘Fu.. R1 Column 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Hat’ in ‘Col 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Col 2′ in ‘Fu.. R1 Column 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Shoes’ in ‘Col 2′: Please click Here to view.
      • 

    

    Sport Clothing
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    Accessories
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    Shoes & Bags
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    Kids & Mother
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    Kitchen
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    3.3 Configure Extensions
    

    The SM Sawyer front-page has been integrated with the extensions in the following list:
    


    In SM Sawyer Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM  to configure extensions as you want.
    

    3.3.1 SM Image Slider
    

      

        

          

        • Position: SM Image Slider
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Image Slider: Click Here 
          • 

        

      

    

    3.3.2 SM Basic Products 
    

      

        

          

        • Position: SM Basic Products
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Basic Products: Click Here 
          • 

        

      

    

    3.3.3 SM Megamenu
    

      

        

          

        • Position: SM Megamenu
          • 

        • Frontend Appearance
          • 

        

      

    

    Horizontal Megamenu: 
    
Vertical Megamenu: 
    

      

        

          

        • Backend of SM Megamenu: Click Here 
          • 

        

      

    

    3.3.4 SM Instagram Gallery
    

      

        

          

        • Position: SM Instagram Gallery
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Image Slider: Click Here 
          • 

        

      

    

    3.3.5 SM Deals
    

      

        

          

        • Position: SM Deals
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Listing Tabs: Click Here 
          • 

        

      

    

    3.3.6 SM Quick View
    

      

        

          

        • Position: SM Quick View
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Quick View: Click Here 
          • 

        

      

    

    3.4 Configure Static Blocks
    

    The SM Sawyer front-page has the following static blocks in the theme:
    


    To create a new static block, go to Content>> Elements>> Blocks >> Add new block.
    


    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Banner Home1 Slider” and Identifier * : “banner-img1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="banner-home"&gt
&lta class="banner-img mr30" href="#"&gt
&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img2.jpg"}}" alt="" /&gt
&lt/a&gt
&lta class="banner-img mr30" href="#"&gt
&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img3.jpg"}}" alt="" /&gt
&lt/a&gt
&lt/div&gt
    

    

    Static Block: static-1f-layout1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Banner 1F Home 1″ and Identifier * : “static-1f-layout1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="row banner-listtingbas"&gt
&ltdiv class="banner col-sm-6"&gt&lta class="banner-home1" title="Static Image" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img4.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="brand col-sm-6"&gt
&ltul&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: image-sidebar
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Theme – Image Sidebar” and Identifier * : “image-sidebar”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="image-sidebar block"&gt&lta class="banner-img" title="Banner" href="#"&gt&ltimg src="{{media url="wysiwyg/banner/img-sidebar.jpg"}}" alt="Banner" /&gt&lt/a&gt&lt/div&gt
    

    

    Static Block: static-2f-layout1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Banner 2F Home 1″ and Identifier * : “static-2f-layout1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="row banner-listtingbas"&gt
&ltdiv class="brand col-sm-6"&gt
&ltul&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&ltdiv class="banner col-sm-6"&gt
&lta class="banner-home1" title="Static Image" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img5.jpg"}}" alt="" /&gt&lt/a&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: testimonials-layout1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Home 1 testimonials” and Identifier * : “testimonials-layout1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="overflow-slider testimonials"&gt
&ltdiv class="margin-slider"&gt
&ltul class="testimonials-slider"&gt
&ltli class="item"&gt
&ltdiv class="client"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-1.jpg"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="info-client"&gt
&lth2 class="client-name"&gtVanissa Hugo&lt/h2&gt
&ltp class="job"&gtWeb Development&lt/p&gt
&ltp class="comment"&gtLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid...&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="item"&gt
&ltdiv class="client"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-2.jpg"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="info-client"&gt
&lth2 class="client-name"&gtBlack Smith&lt/h2&gt
&ltp class="job"&gtCompany Inc&lt/p&gt
&ltp class="comment"&gtLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi...&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="item"&gt
&ltdiv class="client"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-3.jpg"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="info-client"&gt
&lth2 class="client-name"&gtVenus Markt&lt/h2&gt
&ltp class="job"&gtWeb Development&lt/p&gt
&ltp class="comment"&gtLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inco...&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&lt/ul&gt
&lt/div&gt
&ltscript type="text/javascript"&gt// &lt![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:false,
				nav : false, // Show next and prev buttons
				dots: true,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:30,
			});
		});

	
// ]]&gt&lt/script&gt
&lt/div&gt
    

    

    Static Block: static-3f-layout1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Banner 3F Home 1″ and Identifier * : “static-3f-layout1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="row banner-listtingbas"&gt
&ltdiv class="banner col-sm-6"&gt&lta class="banner-home1" title="Static Image" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img6.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="brand col-sm-6"&gt
&ltul&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: static-image-1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Static Image 1″ and Identifier * : “static-image-1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="banner-img block" title="Static Image" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img1.jpg"}}" alt="" /&gt&lt/a&gt&lt/p&gt
    

    

    Static Block: policyshop-layout1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “” and Identifier * : “policyshop-layout1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block policy-shop"&gt
&ltul&gt
&ltli&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/ic1.jpg"}}" alt="" /&gt
&ltdiv class="content1"&gt
&lth2&gtFree Shipping&lt/h2&gt
Free shipping on all orders over $49.00&lt/div&gt
&lt/li&gt
&ltli&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/ic2.jpg"}}" alt="" /&gt
&ltdiv class="content1"&gt
&lth2&gtSupport 24/7&lt/h2&gt
We support online 24 hours a day&lt/div&gt
&lt/li&gt
&ltli&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/ic3.jpg"}}" alt="" /&gt
&ltdiv class="content1"&gt
&lth2&gtFree return&lt/h2&gt
30 days money back guarantee&lt/div&gt
&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    

    Static Block: static-4f-layout1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Banner 4F Home 1″ and Identifier * : “static-4f-layout1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="banner-center-litting"&gt
&ltdiv class="banner-top"&gt&lta class="banner-home1" title="Static Image" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img7.jpg"}}" alt="" /&gt&lt/a&gt &lta class="banner-home1" title="Static Image" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/img8.jpg"}}" alt="" /&gt&lt/a&gt &ltimg class="icon-center" src="{{media url="wysiwyg/home-page-image/home-1/ic4.png"}}" alt="" /&gt&lt/div&gt
&ltdiv class="brand-bottom"&gt
&ltul&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" alt="Static Image" /&gt&lt/a&gt &lta class="secd-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" alt="Static Image" /&gt&lt/a&gt &lta class="secd-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" alt="Static Image" /&gt&lt/a&gt &lta class="secd-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-contact-us
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Contact us footer” and Identifier * : “ft-contact-us”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-contact-us"&gt
&ltdiv class="title"&gtAbout sawyer&lt/div&gt
&ltdiv class="content"&gt
&ltp class="address"&gt152 Mila Mrest Street, Behansed, Paris, France&lt/p&gt
&ltp class="phone"&gt(+123) 456 7890 - (+122) 561 2183&lt/p&gt
&ltp class="email"&gt&lta title="Mail to: sawyer@co.uk.com" href="mailto:sawyer@co.uk.com"&gtSale@sawyer.com&lt/a&gt - &lta title="Mail to: sawyer@co.uk.com" href="mailto:sawyer@co.uk.com"&gtSale@sawyer.com&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-information
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Information footer” and Identifier * : “ft-information”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-information"&gt
&ltdiv class="title"&gtINFORMATION&lt/div&gt
&ltdiv class="content"&gt
&ltul&gt
&ltli&gt&lta title="Shipping Policy" href="{{store url="privacy-policy-cookie-restriction-mode"}}"&gtShipping Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta title="My Account" href="{{store url="customer/account"}}"&gtMy Account&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Return Policy" href="{{store url="catalog/product_compare/index/"}}"&gtMy Compare&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Contact Usy" href="{{store url="contact-us.html"}}"&gtContact Us&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Advanced Search" href="{{store url="catalogsearch/advanced"}}"&gtAdvanced Search&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-opentime
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Open Time” and Identifier * : “ft-opentime”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-my-account"&gt
&ltdiv class="title"&gtOpening time&lt/div&gt
&ltdiv class="content"&gt
&ltul&gt
&ltli&gtMonday - Friday:&ltspan class="label-bt"&gt8:00 - 18:00&lt/span&gt&lt/li&gt
&ltli&gtSaturday:&ltspan class="label-bt"&gt9:00 - 16:00&lt/span&gt&lt/li&gt
&ltli&gtSunday:&ltspan class="label-bt"&gtClosed&lt/span&gt&lt/li&gt
&ltli&gtEvery 30 day of month Lorem ipsum dolor sit amet, adipiscing elit.&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Theme – Payment Footer” and Identifier * : “payment-footer”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltimg src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /&gt
    

    

    Static Block: page-deals
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Links go to Deals Home 2″ and Identifier * : “page-deals”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="page-daydeals" title="TODAY'S DEALS" href="page-deals"&gt &ltem class="fa fa-gift"&gt&lt/em&gt &ltspan&gtto day deals&lt/span&gt &lt/a&gt&lt/p&gt
    

    

    Static Block: policy-shop2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Policyshop Home 2″ and Identifier * : “policy-shop2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="policy-shop2"&gt
&ltdiv class="row"&gt
&ltdiv class="col-sm-4"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/ico1.jpg"}}" alt="" /&gt
&ltdiv class="wrap-content"&gt
&lth2&gtFree Shipping&lt/h2&gt
&ltp&gtFree shipping on all orders over $49.00&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-4"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/ico2.jpg"}}" alt="" /&gt
&ltdiv class="wrap-content"&gt
&lth2&gtSupport 24/7&lt/h2&gt
&ltp&gtWe support online 24 hours a day&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-4"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/ico3.jpg"}}" alt="" /&gt
&ltdiv class="wrap-content"&gt
&lth2&gtFree return&lt/h2&gt
&ltp&gt30 days money back guarantee&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: postext-bstop
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Banner Basic Product top” and Identifier * : “postext-bstop”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="banner-img" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/banner6.jpg"}}" alt="" /&gt&lt/a&gt&lt/p&gt
    

    

    Static Block: static-image-1-index2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Static image-1 index2″ and Identifier * : “page-deals”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="banner-img block" href="#"&gt &ltimg src="{{media url="wysiwyg/home-page-image/home-2/banner1.jpg"}}" alt="" /&gt &lt/a&gt&lt/p&gt
    

    

    Static Block: pretext-mobiles
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Basic Product Home 2″ and Identifier * : “pretext-mobiles”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="categories-pro"&gt
	&lth2 class="title-cate"&gt&lti class="fa fa-mobile-phone"&gt &lt/i&gt mobiles & Acessories&lt/h2&gt
	&ltul&gt
	&ltli&gt&lta href="{{store url="shopall.html"}}" title="Backup Power"&gtBackup Power&lt/a&gt&lt/li&gt
	&ltli&gt&lta href="{{store url="shopall.html"}}" title="Chargers & Docks"&gtChargers & Docks&lt/a&gt&lt/li&gt
	&ltli&gt&lta href="{{store url="shopall.html"}}" title="Headphones"&gtHeadphones&lt/a&gt&lt/li&gt
	&ltli&gt&lta href="{{store url="shopall.html"}}" title="Screen Protectors"&gtScreen Protectors&lt/a&gt&lt/li&gt
	&ltli&gt&lta href="{{store url="shopall.html"}}" title="Acessories"&gtAcessories&lt/a&gt&lt/li&gt
	&lt/ul&gt
&lt/div&gt
    

    

    Static Block: brand-basicproduct2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Brand Basicproduct Home 2″ and Identifier * : “brand-basicproduct2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="brand-basicproduct2"&gt
&ltdiv class="row"&gt
&ltdiv class="col-md-2 col-sm-4 col-xs-2"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-1.jpg"}}" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-md-2 col-sm-4 col-xs-2"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-2.jpg"}}" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-md-2 col-sm-4 col-xs-2"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-3.jpg"}}" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-md-2 col-sm-4 col-xs-2"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-4.jpg"}}" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-md-2 col-sm-4 col-xs-2"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-5.jpg"}}" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-md-2 col-sm-4 col-xs-2"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" alt="Static Image" src="{{media url="wysiwyg/categories-image/brand-c-6.jpg"}}" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: static-image-2-index2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Static image 2 index2″ and Identifier * : “static-image-2-index2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="banner-img block" href="#"&gt &ltimg src="{{media url="wysiwyg/home-page-image/home-2/banner2.jpg"}}" alt="" /&gt &lt/a&gt&lt/p&gt
    

    

    Static Block: pretext-gift
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Basic Product Home 2-3″ and Identifier * : “pretext-gift”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="categories-pro"&gt
&lth2 class="title-cate"&gt&ltem class="fa fa-gift"&gt &lt/em&gtGift & Parties&lt/h2&gt
&ltul&gt
&ltli&gt&lta title="Anniversary" href="{{store url="shopall.html"}}"&gtAnniversary&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Baby & Expecting" href="{{store url="shopall.html"}}"&gtBaby & Expecting&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Birthday" href="{{store url="shopall.html"}}"&gtBirthday&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Christmas" href="{{store url="shopall.html"}}"&gtChristmas&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Congratulations" href="{{store url="shopall.html"}}"&gtCongratulations&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Acessories" href="{{store url="shopall.html"}}"&gtAcessories&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    

    Static Block: static-image-3-index2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “” and Identifier * : “static-image-3-index2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="banner-img block" href="#"&gt &ltimg src="{{media url="wysiwyg/home-page-image/home-2/banner3.jpg"}}" alt="" /&gt &lt/a&gt&lt/p&gt
    

    

    Static Block: pretext-fashion
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Basic Product Home 2 Pretext 3″ and Identifier * : “pretext-fashion”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="categories-pro"&gt
&lth2 class="title-cate"&gt&ltem class="fa img-fa"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/ico4.png"}}" alt="" /&gt&lt/em&gtFashion & clothes&lt/h2&gt
&ltul&gt
&ltli&gt&lta title="T-Shirts" href="{{store url="shopall.html"}}"&gtT-Shirts&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Fall Jackets" href="{{store url="shopall.html"}}"&gtFall Jackets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Sweaters" href="{{store url="shopall.html"}}"&gtSweaters&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Pants&Legging" href="{{store url="shopall.html"}}"&gtPants&Legging&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Acessories" href="{{store url="shopall.html"}}"&gtAcessories&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    

    Static Block: static-image-4-index2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Static image 4 index2″ and Identifier * : “static-image-4-index2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="banner-img block" href="#"&gt &ltimg src="{{media url="wysiwyg/home-page-image/home-2/banner4.jpg"}}" alt="" /&gt &lt/a&gt&lt/p&gt
    

    

    Static Block: pretext-furniture
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Basic Product Home 2 Pretext 4″ and Identifier * : “pretext-furniture”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="categories-pro"&gt
&lth2 class="title-cate"&gt&lti class="fa img-fa"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/ico5.png"}}" alt="" /&gt&lt/i&gtHome & Interior&lt/h2&gt
&ltul&gt
&ltli&gt&lta title="Anniversary" href="{{store url="shopall.html"}}"&gtAnniversary&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Babvy & Expecting" href="{{store url="shopall.html"}}"&gtBabvy & Expecting&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Birthday" href="{{store url="shopall.html"}}"&gtBirthday&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Christmas" href="{{store url="shopall.html"}}"&gtChristmas&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Congratulations" href="{{store url="shop.html"}}"&gtCongratulations&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Accessories" href="{{store url="shopall.html"}}"&gtAccessories&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    

    Static Block: static-image-5-index2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Static image 5 index2″ and Identifier * : “static-image-5-index2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&lta class="banner-img block" href="#"&gt &ltimg src="{{media url="wysiwyg/home-page-image/home-2/banner5.jpg"}}" alt="" /&gt &lt/a&gt&lt/p&gt
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – V2 Brand Bottom” and Identifier * : “banner-slider-home2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="wrapper-brandsdivde"&gt
&ltul class="brand-slider"&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/br1.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/br2.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/br3.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/br4.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/br5.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/br6.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/br7.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&ltscript&gt
		jQuery(document).ready(function($) {
			var post_sdivder = $(".brand-slider");
			post_sdivder.owlCarousel({	
				animateOut: 'fadeOut',
				animateIn: 'fadeIn',
				responsive:{
					0:{
						items:2
					},
					480:{
						items:4
					},
					768:{
						items:5
					},
					992:{
						items:6

					},
					1200:{
						items:7,
                                              margin:80
					}
				},
				autoplay:false,
				loop:true,
				nav : true,
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				 margin:30,
			});	  
		});	
	&lt/script&gt
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Messager Footer Home 2″ and Identifier * : “mess-footer”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp class="mess-footer"&gtSign Up For Saving and Trends!&lt/p&gt
    

    

    Static Block: static-image-1-index3
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Static image-1 index3″ and Identifier * : “static-image-1-index3″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="static-home31 wow fadeIn"&gt
&ltdiv class="container"&gt
&ltdiv class="block-title-home3"&gt
&lth2&gtDISCOVER &ltstrong&gtOUR COLLECTION&lt/strong&gt&lt/h2&gt
&ltp&gtLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&lt/p&gt
&lt/div&gt
&ltdiv class="block1-content"&gt
&ltdiv class="row"&gt
&ltdiv class="col-xs-3"&gt&lta class="banner3-img mr30" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-3/img1.jpg"}}" alt="" /&gt&lt/a&gt &lta class="banner3-img mr30" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-3/img2.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-xs-6"&gt&lta class="banner3-img mr30" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-3/img3.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-xs-3"&gt&lta class="banner3-img mr30" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-3/img4.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lta class="button-home3" href="#"&gtDiscovery Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: block-newletter-brand
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Newletter Brand Bottom Home 3″ and Identifier * : “block-newletter-brand”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="full-top-block4"&gt
&ltdiv class="container"&gt{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-index3.phtml"}} {{block class="Magento\\Cms\\Block\\Block" block_id="brand-slider-home3"}}&lt/div&gt
&lt/div&gt
    

    

    Static Block: policy-shop4
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – Policyshop Home 4″ and Identifier * : “policy-shop4″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="policy-shop4 wow fadeInUp"&gt
&ltdiv class="row"&gt
&ltdiv class="col-sm-4"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/ico1.png"}}" alt="" /&gt
&ltdiv class="wrap-content"&gt
&lth2&gtFree Shipping&lt/h2&gt
&ltp&gtFree shipping on all orders over $49.00&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-4"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/ico2.png"}}" alt="" /&gt
&ltdiv class="wrap-content"&gt
&lth2&gtSupport 24/7&lt/h2&gt
&ltp&gtWe support online 24 hours a day&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-4"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/ico3.png"}}" alt="" /&gt
&ltdiv class="wrap-content"&gt
&lth2&gtFree return&lt/h2&gt
&ltp&gt30 days money back guarantee&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: static-image-1-index4
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Static image-1 index4″ and Identifier * : “static-image-1-index4″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltul class="wrapper-banner4 wow fadeInUp mr30"&gt
&ltli class="banner-home4 col-sm-4"&gt
&ltdiv class="banner4"&gt&lta href="#"&gt&ltimg alt="" src="{{media url="wysiwyg/home-page-image/home-4/image-1.jpg"}}" /&gt&lt/a&gt
&ltdiv class="content-bn"&gt
&lth3 class="g2font"&gtFurniture&lt/h3&gt
&lth2 class="g2font"&gtOffice interior&lt/h2&gt
&lta class="shop-now" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="banner-home4 col-sm-4 active"&gt
&ltdiv class="banner4"&gt&lta href="#"&gt&ltimg alt="" src="{{media url="wysiwyg/home-page-image/home-4/image-2.jpg"}}" /&gt&lt/a&gt
&ltdiv class="content-bn"&gt
&lth3 class="g2font"&gtFurniture&lt/h3&gt
&lth2 class="g2font"&gtOffice interior&lt/h2&gt
&lta class="shop-now" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="banner-home4 col-sm-4"&gt
&ltdiv class="banner4"&gt&lta href="#"&gt&ltimg alt="" src="{{media url="wysiwyg/home-page-image/home-4/image-3.jpg"}}" /&gt&lt/a&gt
&ltdiv class="content-bn"&gt
&lth3 class="g2font"&gtFurniture&lt/h3&gt
&lth2 class="g2font"&gtOffice interior&lt/h2&gt
&lta class="shop-now" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/li&gt
&lt/ul&gt
    

    

    Static Block: static-testimonials-index4
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Testimonials index 4″ and Identifier * : “static-testimonials-index4″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv id="testimonials-home"  class="testimonials-home wow fadeInUp"&gt
&ltdiv class="navslider"&gt
					&lta class="prev" href="#"&gt&lti class="fa fa-long-arrow-left"&gt&lt/i&gt&lt/a&gt
						&lta class="next" href="#"&gt&lti class="fa fa-long-arrow-right"&gt&lt/i&gt&lt/a&gt
					&lt/div&gt

	&ltdiv class="margin-slider"&gt
		&ltul class="testimonials-slider"&gt
			&ltli class="item"&gt
				&ltdiv class="client-child"&gt
					
					&ltdiv class="image-client"&gt
						&ltimg src="{{media url="wysiwyg/testimonial/client-1.jpg"}}" alt="Kenvin" /&gt
					&lt/div&gt
					&ltdiv class="comment"&gt
						&lth2 class="client-name"&gt Anna &lt/h2&gt
						&lth3 class="client-job"&gtMarket Research &lt/h3&gt
						&ltdiv class="content"&gtLorem ipsum dolor sit amet, consectetur adipisicing 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..
						&lt/div&gt
					&lt/div&gt
					
				&lt/div&gt
			&lt/li&gt
			&ltli class="item"&gt
				&ltdiv class="client-child"&gt
					
					&ltdiv class="image-client"&gt
						&ltimg src="{{media url="wysiwyg/testimonial/client-2.jpg"}}" alt="Venus" /&gt
					&lt/div&gt
					&ltdiv class="comment"&gt	
						&lth2 class="client-name"&gt David &lt/h2&gt
						&lth3 class="client-job"&gtMarket Research &lt/h3&gt
						&ltdiv class="content"&gtLorem ipsum dolor sit amet, consectetur adipisicing 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..
						&lt/div&gt
					&lt/div&gt
				&lt/div&gt
			&lt/li&gt
&ltli class="item"&gt
				&ltdiv class="client-child"&gt
					&ltdiv class="image-client"&gt
						&ltimg src="{{media url="wysiwyg/testimonial/client-3.jpg"}}" alt="Venus" /&gt
					&lt/div&gt
					&ltdiv class="comment"&gt
						&lth2 class="client-name"&gt Venus &lt/h2&gt
						&lth3 class="client-job"&gtDesigner &lt/h3&gt
						&ltdiv class="content"&gtLorem ipsum dolor sit amet, consectetur adipisicing 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..
						&lt/div&gt
					&lt/div&gt
				&lt/div&gt
			&lt/li&gt
	&ltli class="item"&gt
				&ltdiv class="client-child"&gt
					&ltdiv class="image-client"&gt
						&ltimg src="{{media url="wysiwyg/testimonial/client-4.jpg"}}" alt="Venus" /&gt
					&lt/div&gt
					&ltdiv class="comment"&gt
						&lth2 class="client-name"&gtTommy&lt/h2&gt
						&lth3 class="client-job"&gtDeverloper&lt/h3&gt
						&ltdiv class="content"&gtLorem ipsum dolor sit amet, consectetur adipisicing 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..
						&lt/div&gt
					&lt/div&gt
				&lt/div&gt
			&lt/li&gt
		&ltli class="item"&gt
				&ltdiv class="client-child"&gt
					&ltdiv class="image-client"&gt
						&ltimg src="{{media url="wysiwyg/testimonial/client-5.jpg"}}" alt="Venus" /&gt
					&lt/div&gt
					&ltdiv class="comment"&gt
						&lth2 class="client-name"&gt Black Smith &lt/h2&gt
						&lth3 class="client-job"&gtWeb Development&lt/h3&gt
						&ltdiv class="content"&gtLorem ipsum dolor sit amet, consectetur adipisicing 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..
						&lt/div&gt
					&lt/div&gt
				&lt/div&gt
			&lt/li&gt
&ltli class="item"&gt
				&ltdiv class="client-child"&gt
					&ltdiv class="image-client"&gt
						&ltimg src="{{media url="wysiwyg/testimonial/client-6.jpg"}}" alt="Venus" /&gt
					&lt/div&gt
					&ltdiv class="comment"&gt
						&lth2 class="client-name"&gt Kenvin &lt/h2&gt
						&lth3 class="client-job"&gtMarket Research &lt/h3&gt
						&ltdiv class="content"&gtLorem ipsum dolor sit amet, consectetur adipisicing 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..
						&lt/div&gt
					&lt/div&gt
				&lt/div&gt
			&lt/li&gt				
		&lt/ul&gt
	&lt/div&gt
	
	&ltscript&gt
		jQuery(document).ready(function($) {
						$(window).load(function(){
							$('#testimonials-home .testimonials-slider').owlCarousel({
								 items: 3,
								loop:true,
								nav: false,
								dots: true,
								slideSpeed : 1,
								center: true,
								autoplay: true,
		    					autoplayTimeout: 30000,
								autoplayHoverPause: true,
								addClassActive: true,
								margin:30,
								animateOut: 'slideOutDown',
    							animateIn: 'flipInX',
					            onInitialized: callback
							});
							function callback(event) {
					   			if(this._items.length &gt this.options.items){
								        $('#testimonials-home .navslider').show();
								    }else{
								        $('#testimonials-home .navslider').hide();
								    }
							}
							$('#testimonials-home .navslider .prev').on('click', function(e){
								e.preventDefault();
								$('#testimonials-home .testimonials-slider').trigger('prev.owl.carousel');
							});
							$('#testimonials-home .navslider .next').on('click', function(e){
								e.preventDefault();
								$('#testimonials-home .testimonials-slider').trigger('next.owl.carousel');
							});
						});
					});

	&lt/script&gt
&lt/div&gt
    

    

    Static Block: brand-slider-home4
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer – V4 Brand Bottom” and Identifier * : “brand-slider-home4″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="wrapper-brandsdivde"&gt
&ltul class="brand-slider4"&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/br1.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/br2.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/br3.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/br4.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/br5.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/br6.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-4/br7.png"}}" alt="" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&ltscript type="text/javascript"&gt// &lt![CDATA[
		jQuery(document).ready(function($) {
			var post_sdivder = $(".brand-slider4");
			post_sdivder.owlCarousel({	
				animateOut: 'fadeOut',
				animateIn: 'fadeIn',
				responsive:{
					0:{
						items:2
					},
					480:{
						items:4
					},
					768:{
						items:5
					},
					992:{
						items:6

					},
					1200:{
						items:7,
                                              margin:80
					}
				},
				autoplay:false,
				loop:true,
				nav : true,
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				 margin:30,
			});	  
		});	
	
// ]]&gt&lt/script&gt
    

    

    Static Block: static-imgcategory-index5
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Sawyer Static Img Category index 5″ and Identifier * : “static-imgcategory-index5″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="row wow fadeInUp category-img"&gt
&ltdiv class="col-sm-3 col-xs-6"&gt
&ltdiv class="img-category"&gt
&lta href="#" class="box-img"&gt
&ltimg src="{{media url="wysiwyg/home-page-image/home-5/img3.jpg"}}" alt="" /&gt
&lth2 class="g2font"&gtoleva watches&lt/h2&gt
&lt/a&gt
&ltdiv class="conten-cat"&gt
&lth3 class="g2font"&gtSale 45% off&lt/h3&gt
&lth2 class="g2font"&gtoleva watches&lt/h2&gt
&lta href="#" class="button-cate"&gtShop Now&lt/a&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-3 col-xs-6"&gt
&ltdiv class="img-category"&gt
&lta href="#" class="box-img"&gt
&ltimg src="{{media url="wysiwyg/home-page-image/home-5/img4.jpg"}}" alt="" /&gt
&lth2 class="g2font"&gtWear watches&lt/h2&gt
&lt/a&gt
&ltdiv class="conten-cat"&gt
&lth3 class="g2font"&gtSale 40% off&lt/h3&gt
&lth2 class="g2font"&gtWear watches&lt/h2&gt
&lta href="#" class="button-cate"&gtShop Now&lt/a&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-3 col-xs-6"&gt
&ltdiv class="img-category"&gt
&lta href="#" class="box-img"&gt
&ltimg src="{{media url="wysiwyg/home-page-image/home-5/img5.jpg"}}" alt="" /&gt
&lth2 class="g2font"&gtCasio watches&lt/h2&gt
&lt/a&gt
&ltdiv class="conten-cat"&gt
&lth3 class="g2font"&gtSale 41% off&lt/h3&gt
&lth2 class="g2font"&gtCasio watches&lt/h2&gt
&lta href="#" class="button-cate"&gtShop Now&lt/a&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-3 col-xs-6"&gt
&ltdiv class="img-category"&gt
&lta href="#" class="box-img"&gt
&ltimg src="{{media url="wysiwyg/home-page-image/home-5/img6.jpg"}}" alt="" /&gt
&lth2 class="g2font"&gtMen watches&lt/h2&gt
&lt/a&gt
&ltdiv class="conten-cat"&gt
&lth3 class="g2font"&gtSale 40% off&lt/h3&gt
&lth2 class="g2font"&gtMen watches&lt/h2&gt
&lta href="#" class="button-cate"&gtShop Now&lt/a&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    3.5 How To Edit Copyright in Admin Panel
    

    Frontend Appearance
    

    

    In SM Sawyer Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Sawyer >> Advanced to configure this theme’s copyright.
    

    
Edit the code here: 
    Copyrights @ 2016 All Rights Reserved by &lta href="MagenTech.Com"&gtMagenTech.Com&lt/a&gt
    

    3.6 How To Customize the Social symbols in admin panel
    

    Frontend Appearance
    

    

    In SM Sawyer Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM Sawyer >> Socials.
    

    

    

    

    

    4SUPPORT
    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                                        
    
                       
    
                         
                
    

                       
    
                     
    
                     
    ↧
    
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SP Clickboom
    
                     
    
                                              May 28, 2016, 9:12 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    

    1GETTING STARTED 
    

    

    

    1.1 Introduction
    

    

    

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
    

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.
    

    

    

    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 import the theme/module file to your server due to the maximum upload and PHP memory limit, 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 not familiar with Prestashop, please read its guide first: http://doc.prestashop.com/display/PS16/Getting+Started

    

    

    

    2INSTALLATION 
    

    

    

    There are two ways to install SP Clickboom Theme
    

      

    • Quickstart Installation: sp_clickboom_quickstart_p16_v1.0.0.zip . By using this package, you will set the theme exactly like our Demo with sample data.
      • 

    • Manual Installation : Include of Theme layout Installation Packages. Please unzip the package and you would see the following folders:

        

      • module folder
        • 

      • sp_clickboom_template_p16_v1.0.0.zip file
        

        • 

      

      • 

    

    

    

    2.1 Quickstart Installation
    

    

    We provide 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 of SP Clickboom theme
      • 

    • Step 2: Extract the downloaded package named “sp_clickboom_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting) folder. 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 these steps 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. 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 click “Create” button.
    

    

    When the database is created successfully, copy and paste its name into the “Database name” field, then click the “Test your database connection now!” button to make sure that the entered settings are correct. If they are, you will see a Database is connected message. After that, you could click the “Next” button to move to next steps.
    

    

      

        

      • Finish installation: This process could take a few minutes
        • 

      

    

    

    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 the cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.
    

    

    

    SP Clickboom Layout1 Theme Installation
    

    

    Note: Here we will introduce you How To Install SP Clickboom Layout 1 Theme, with Layout 2 do the same.
    

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

      

    • module folder: contain of the smartblog.zip file, smartblogarchive.zip file, smartblogcategories.zip file, smartbloghomelatestnews.zip file, smartblogrecentposts.zip file, smartblogtag.zip file
      

      • 

    • and the sp_clickboom_template_p16_v1.0.0.zip file.
      • 

    

    STEP 1: Install smartblog.zip , smartblogarchive.zip , smartblogcategories.zip , smartbloghomelatestnews.zip , smartblogrecentposts.zip , smartblogtag.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  “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 click “Install” button to run it.
    

    

    5. When a pop-up window displays, please click “Proceed with the installation” button.
    

    

    6. Finally, Module(s) installed successfully.
    

    Note: Do the same with Layout 2.
    

    STEP 2: Install the “sp_clickboom_template_p16_v1.0.0.zip” file. 
    

    1. Login to your Prestashop admin panel and navigate to Preferences -> Themes. At the top of the page click the Add a new theme button.
    

    

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


    
3.  When your choice is successfully validated , a notice will be showed like the following image:
    


    
4.  In the section named as Select a theme for your “[name]” shop, move your mouse cursor over SP Clickboom‘s thumbnail and select  Use this themeto replace your current theme with SP Clickboom theme.
    
5. After that, a list of the installed/disabled modules will be showed out, please click “Save” to install modules that were imported along with the theme.
    

    

    6. Finally, please click “Finish” to end the process.
    

    

    

    

    

    3SP THEME CONFIGURATION 
    

    

    

    3.1 General Settings
    

    

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

    

    2. In the SP Theme Settings, choose “General” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.2 Layout Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Layout” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.3 Fonts
    

    

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

    

    2. In the SP Theme Settings, choose “Fonts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    Note: Please copy and paste the following line into Font Selector tab:
    
1. 
    .body
    
2. 
    h1,h2,h3,h4,h5,h6
    
3. 
    .content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span,.content_sortPagiBar_top label, .content_sortPagiBar_bottom label , .cart_block .buttons a, .content_sortPagiBar_top .view-bottom #pagination ul li span, .content_sortPagiBar_bottom .view-bottom #pagination_bottom ul li span
    

    

    

    3.4 Category Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Category Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.5 Product Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.6 Bonus Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Bonus Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.7 Advanced Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.8 Social Accounts
    

    

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

    

    2. In the SP Theme Settings, choose “Social Accounts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    


    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.10 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 image size types that suit your products best.
    

    

    2. Image quality - You can set image quality in 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 used in your site. Select option then click Regenerate thumbnails button.
    

    


    Frontend Appearance:
    

    

    To edit Copyright, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Copyright”in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    3.12 Edit Payment
    

    

    Frontend Appearance:
    

    

    To edit Payment, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Upload your own payment image”  in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    3.13 Edit Pop-up
    

    

    Frontend Appearance:
    

    

    To edit this pop-up, please follow these steps:
    
1. Change the image:
    
In your Website’s Directory, go to themes\sp_clickboom\css\modules\spblocknewsletter\img folder. To change the image in this pop-up, you could replace our sample image named bg_popup.jpg by your image with the same name as our sample image.
    

    
2. Change the text:
    
In your Website’s Directory, go to themes\sp_clickboom\modules\spblocknewsletter folder. To change the text in this pop-up, in this folder, you could open the file named blocknewsletterpopup.tpl by your editor program.
    
Find and change the following text in this file as you want:
    'Subscribe to our email list and never miss anything from FCSTORE blog.'
    

    
3.  After finishing, you could go to the front-end to see the changes.

    

    

    

    4SP MEGA MENU CONFIGURATION 
    

    

    

    4.1 displayMenu: SP Mega Menu
    

    


    
1. Navigate to Modules -> Modules >> look for SP Mega Menu >> Click the Configure button to access the module configuration page.
    

    
2. In the SP Mega Menu Panel, you could configure  Add New Module by click on the button like the following image:
    

    
3. In the configuration page of new module, you could configure  General Options as follows
    

    
4. In the configuration page of new module, you could configure  Menu Information as follows
    

    
5.  In order to add menu items, to add items as you want, you need to click this button.
    

    
6. Menu list of Mega Menu You need to look at the menu list to configure easily.
    

    
7.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Mega Menu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Shop 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Categories’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘#7 – Categories’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘#8 – Categories’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘#9 – Categories’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Categories 4′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Category Image’: Please click Here to view.
      • 

    

    Copy and paste the following code into the URL Tab: 
    &ltp&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/img/cms/1_1.jpg" alt="image custom" width="226" height="244" /&gt&lt/p&gt
    

      

    • Backend Settings of Item ‘Custom Html’: Please click Here to view.
      • 

    

    Copy and paste the following code into the URL Tab: 
    &ltp&gt&ltstrong&gtQuicklinks: &lt/strong&gt &lta href="#"&gtsony,&lt/a&gt &lta href="#"&gtiphone,&lt/a&gt &lta href="#"&gtelectronics,&lt/a&gt &lta href="#"&gtbag,&lt/a&gt &lta href="#"&gtfashion,&lt/a&gt &lta href="#"&gthot sale,&lt/a&gt &lta href="#"&gtfeatured,&lt/a&gt &lta href="#"&gtgame,&lt/a&gt &lta href="#"&gtdolce gabbana&lt/a&gt&lt/p&gt
    

    Sport
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Cate 1′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Category Html Image’ in ‘Box Cate 1′: Please click Here to view.
      • 

      Copy and paste the following code into the URL Tab: 
    &ltp&gt&lta href="#"&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/categories-1.jpg" alt="image custom" /&gt&lt/a&gt&lt/p&gt
    


      

    • Backend Settings of Item ‘Categories 1′ in ‘Box Cate 1′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Cate 2′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Category Html Image’ in ‘Box Cate 2′: Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab: 
    &ltp&gt&lta href="#"&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/categories-2.jpg" alt="image custom" /&gt&lt/a&gt&lt/p&gt
    


      

    • Backend Settings of Item ‘Categories 2′ in ‘Box Cate 2′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Cate 3′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Category Html Image’ in ‘Box Cate 3′: Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab: 
    &ltp&gt&lta href="#"&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/categories-3.jpg" alt="image custom" /&gt&lt/a&gt&lt/p&gt
    


      

    • Backend Settings of Item ‘Categories 3′ in ‘Box Cate 3′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Cate 4′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Category Html Image’ in ‘Box Cate 4′: Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab: 
    &ltp&gt&lta href="#"&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/categories-4.jpg" alt="image custom" /&gt&lt/a&gt&lt/p&gt
    


      

    • Backend Settings of Item ‘Categories 4′ in ‘Box Cate 4′: Please click Here to view.
      • 

    

    Featured 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Categories 1′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Categories 2′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Categories 3′: Please click Here to view.
      • 

    

    Blog
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Copy and paste the following code into the URL Tab:
    
About Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Contact Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    	Copy and paste the following code into the URL Tab:
    index.php?controller=contact
    

      

    • Backend Settings of Item ‘Contact Page 1′ : Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab:
    index.php?controller=contact?SP_contactStyle=contact-v1
    
	

    Note: You could do the same with these items having same level in this menu: Contact Page 2, Contact Page 3, Contact Page 4. However, the items’ URLs are different.
    

      

    • Copy and paste the following code into the URL Tab of Contact Page 2:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v2
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 3:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v3
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 4:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v4
      

    

    

    

    

    

    

    4.2 displayVerticalMenu: SP Vertical Mega Menu
    

    

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

    
2. In the SP Vertical Megamenu Panel, you could configure General Options as follows
    

    
3. In the SP Vertical Megamenu Panel, you could configure  Menu Information as follows
    

    
4.  In order to add menu items, to add items as you want, you need to click this button.
    

    
5. Menu list of Vertical Megamenu You need to look at the menu list to configure easily.
    

    
6.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Vertical Megamenu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Smartphone
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Category Menu’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Category’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘#8 – categories 1′ in ‘Box Category’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘#9 – categories 2′ in ‘Box Category’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘#11 – categories 3′ in ‘Box Category’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘#10 – categories 4′ in ‘Box Category’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Image’: Please click Here to view.
      • 

      Copy and paste the following code into the content: 
    &ltp&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/verticalmenu01.jpg" alt="custom image" /&gt&lt/p&gt
    
	

      

    • Backend Settings of Item ‘Custom Html’: Please click Here to view.
      • 

      	Copy and paste the following code into the content: 
    &ltp&gt&ltstrong&gtQuicklinks: &lt/strong&gt &lta href="#"&gtsony,&lt/a&gt &lta href="#"&gtiphone,&lt/a&gt &lta href="#"&gtelectronics,&lt/a&gt &lta href="#"&gtbag,&lt/a&gt &lta href="#"&gtfashion,&lt/a&gt &lta href="#"&gthot sale,&lt/a&gt &lta href="#"&gtfeatured,&lt/a&gt &lta href="#"&gtgame&lt/a&gt&lt/p&gt
    


    Computer
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Cat’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Categories 1′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Categories 2′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Box Image’: Please click Here to view.
      • 

      	Copy and paste the following code into the content: 
    &ltp&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/3.jpg" alt="custom image" width="260" height="469" /&gt&lt/p&gt
    


    Laptop & Notebook
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Cameras
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Component
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Smartphone’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Smartphone’ in the ‘Smartphone’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Fashion’ in the ‘Smartphone’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Electronics’ in the ‘Smartphone’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Toys’ in the ‘Smartphone’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Game Box’ in the ‘Smartphone’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Fashion’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Electronics’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Toys’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Game Box’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Headphone’: Please click Here to view.
      • 

    

    Headphone
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Sound Equipment
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Electronics
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Game Box
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    


    

    5EXTENSIONS CONFIGURATION 
    

    

    

    5.1 SP Clickboom Layout 1
    

    

    home-default
    


    SP Theme Configuration 
    

    Frontend Appearance:
    

    

    Backend Settings: Go Here to see the backend settings.
    

    display CustomHTML1
    

    

    SP Custom HTML – Phone
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="phone-custom"&gt&ltstrong&gtCall us: &lt/strong&gt1-888-345_6789&lt/div&gt
    

    displayUserinfo
    

    

    SP User Info Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.
    

    

    displayTopNav
    

    

    1. SP Block Currencies
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.
    

    

    2. SP Block Languages
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: To add language as you want. For example: To 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: Click “Save” button and view shop to see the changes.
    

    Note: When you add any language as you want, for example: 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, for example: Position – displayHtml5: Banner Layout2; Module: SP Custom HTML.
    

    .
    

    2. And click source code to add “../” at before the image url >> Click “OK”.
    

    .
    

    3. Click “Save” button and go to the frontend to view the changes.
    

    


    SP Search Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Search Pro” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

     displayCart
    

    

    SP Cart Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Cart Block” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displaySlideShow1
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 1:  Please click Here to view
		
      • 

    • Sample 2: Please click Here to view
		
      • 

    • Sample 3: Please click Here to view
		
      • 

    

    display Customhtml2
    

    

    SP Custom HTML – Free Shipping
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="col-md-3 col-sm-3 col-xs-6"&gt
&ltdiv class="shipping-item style-01"&gt
&ltdiv class="shipping-thumb"&gt
&ltdiv class="shipping-border"&gt
&ltdiv class="icon"&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="shipping-content"&gt
&lth2 class="shipping-title"&gt&lta href="#"&gtFree Shipping&lt/a&gt&lt/h2&gt
&ltp&gtFree shipping on all UK orders&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-md-3 col-sm-3 col-xs-6"&gt
&ltdiv class="shipping-item style-02"&gt
&ltdiv class="shipping-thumb"&gt
&ltdiv class="shipping-border"&gt
&ltdiv class="icon"&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="shipping-content"&gt
&lth2 class="shipping-title"&gt&lta href="#"&gtMoney Guarantee&lt/a&gt&lt/h2&gt
&ltp&gt30 days money back guarantee&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-md-3 col-sm-3 col-xs-6"&gt
&ltdiv class="shipping-item style-03"&gt
&ltdiv class="shipping-thumb"&gt
&ltdiv class="shipping-border"&gt
&ltdiv class="icon"&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="shipping-content"&gt
&lth2 class="shipping-title"&gt&lta href="#"&gtSafe Shopping&lt/a&gt&lt/h2&gt
&ltp&gtSafe shopping guarantee&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-md-3 col-sm-3 col-xs-6"&gt
&ltdiv class="shipping-item style-04"&gt
&ltdiv class="shipping-thumb"&gt
&ltdiv class="shipping-border"&gt
&ltdiv class="icon"&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="shipping-content"&gt
&lth2 class="shipping-title"&gt&lta href="#"&gtOnline Support&lt/a&gt&lt/h2&gt
&ltp&gtWe support 24 hours a day&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    display CustomHTML6
    

    

    SP Custom HTML – Custom Banner 1
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="col-md-4 col-sm-4 col-xs-12"&gt
&ltdiv class="banner-custom style-01"&gt&lta href="#"&gt&ltimg src="../themes/sp_clickboom/img/cms/5.jpg" alt="image banner" width="370" height="470" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="col-md-8 col-sm-8 col-xs-12"&gt
&ltdiv class="row"&gt
&ltdiv class="col-md-12"&gt
&ltdiv class="banner-custom"&gt&lta href="#"&gt&ltimg src="../themes/sp_clickboom/img/cms/6.jpg" alt="image banner" width="770" height="220" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="row cb-custom-row"&gt
&ltdiv class="col-md-6 col-sm-6 col-xs-12"&gt
&ltdiv class="banner-custom style-01"&gt&lta href="#"&gt &ltimg src="../themes/sp_clickboom/img/cms/7.jpg" alt="image banner" width="370" height="220" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="col-md-6 col-sm-6 col-xs-12"&gt
&ltdiv class="banner-custom style-01"&gt&lta href="#"&gt &ltimg src="../themes/sp_clickboom/img/cms/8.jpg" alt="image banner" width="370" height="220" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    displayExtraSlider2
    

    

    SP Extra Slider – Featured Products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

     displayListingtab
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Home News
    

    

    SP SmartBlog Home Lastest
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    displayManufacturer
    

    

    SP Manufacture Slider – Manufacturers
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider3
    

    

    SP Extra Slider – most viewed
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider3
    

    

    SP Extra Slider – latest products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider3
    

    

    SP Extra Slider – best-selling products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Newsletter
    

    

    SP Newsletter Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
    

    

    Step 2: You could configure its settings like the following image.
    


    
To edit the text in this module, please follow these steps:
    
In your Website’s Directory, go to themes\sp_clickboom\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter.tpl by your editor program.
    
Find and change the text you want to edit, such as: SUBCRIBE
    

    display CustomHTML10
    

    

    SP Custom HTML – My Account
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="footer-links"&gt
&lth3 class="title"&gtMy Account&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtInformation&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../order"&gtOrders History&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../mywishlist"&gtMy Wishlist&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtPrivacy Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../contact-us"&gtSite Map&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    display CustomHTML10
    

    

    SP Custom HTML – Information
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="footer-links"&gt
&lth3 class="title"&gtInformation&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="../blockwishlist/mywishlist"&gtWishlist&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtCustom Services&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../contact-us"&gtContact Us&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtPrivacy Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtInformation&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    display CustomHTML10
    

    

    SP Custom HTML – Our Services
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="footer-links"&gt
&lth3 class="title"&gtOur Services&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtCustom Services&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../blockwishlist/mywishlist"&gtWishlist&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../contact-us"&gtContact Us&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtTerm and Conditions&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtDelivery Information&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    displayFooter
    

    

    Contact Information Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    

    5.2 SP Clickboom Layout 2
    

    

    home-default
    

    displaySlideShow2
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 4:  Please click Here to view
		
      • 

    • Sample 5: Please click Here to view
		
      • 

    • Sample 6: Please click Here to view
		
      • 

    

    displayExtraSlider
    

    

    SP Extra Slider – Hot Products
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display CustomHTML5
    

    

    SP Custom HTML – Banner Layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="col-md-4 col-sm-4 col-xs-12 custom-banner-2"&gt&lta href="#"&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/banner-layout2-01.jpg" alt="image banner" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-md-4 col-sm-4 col-xs-12 custom-banner-2"&gt&lta href="#"&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/banner-layout2-02.jpg" alt="image banner" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-md-4 col-sm-4 col-xs-12 custom-banner-2"&gt&lta href="#"&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom/themes/sp_clickboom/img/cms/banner-layout2-03.jpg" alt="image banner" /&gt&lt/a&gt&lt/div&gt
    	
    

     displayListingtab2
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

     displayListingtab3
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider4
    

    

    SP Extra Slider – NEW ARRIVALS
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Newsletter2
    

    

    SP Newsletter Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
    

    

    Step 2: You could configure its settings like the following image.
    


    
To edit the text in this module, please follow these steps:
    
In your Website’s Directory, go to themes\sp_clickboom\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter.tpl by your editor program.
    
Find and change the text you want to edit, such as: SUBCRIBE
    

    displayExtraSlider5
    

    

    SP Extra Slider – most viewed
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    

    6SUPPORT
    

    

    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

    
                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SM Paco Magento2.0
    
                     
    
                                              May 30, 2016, 8:52 pm
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
    

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.
    

    

    

    

    1 SYSTEM REQUIREMENT
    

    

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

      

        

      • Compatible with Magento Community Edition 2.0.4
        • 

      • Composer (latest stable version)
        • 

      • Apache 2.2 or late
        • 

      • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)
        • 

        

      • In the future if the conditions change, please check the Magento 2 documentation
        • 

      

    

    

    

    

    2INSTALLATION
    

    

    There are two ways to install a Magento Theme:
    

      

    • Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
      • 

    • Manual Installation (including Theme Installation): Suitable if your store is full with content that you don’t want to overwrite.
      • 

    

    2.1 Quickstart Installation:
    

    Magentech provides SM Quickstart package for each theme which aims to ease the installation for users. Please note that with Quickstart, all your existing data will be overwritten. Thus, if you plan to start your site from the beginning, it will help you save much time of installing and configuring. 
    

    Note: Follow Magento 2.0 Installation Guide to install the Composer before doing this Quickstart installation.
    

    Please follow steps below: 
    

      

    • Step 1: Download the quickstart package named as sm_paco_quickstart_m2.0.x_v1.0.0
      • 

    • 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 site
      • 

      Note: You need to remember the database name to use in the next steps
      

      

        

      • Step 4:Import database sample_data.sql under the folder sm_paco_quickstart_m2.0.x_v1.0.0\data_quickstart 
        • 

      

      Note: 
      

      After successful installation DO NOT run magento.
      

      Now we are going to verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks. To perform all above actions, press WINDOWS KEY + R to open RUN dialog and type cmd to open Command Prompt. 
      

      Type cd PATH_TO_YOUR_MAGENTO2_FILES to enter in Magento 2 ROOT directory.
      

        

      • 1. Now to verify Composer installation in above directory, type composer install.
        • 

        If you get any error in this step, please check your Composer installation.
        

      • 2. In this step, we are setting up static content to deploy on our Magento store. To perform this, type php bin/magento setup:static-content:deploy.
        • 

        If you get any error, check your PHP.EXE and PHP.INI Environment Variable
        

      • 

        3. Clear compiled code and the cache by typing php bin/magento setup:upgrade in CMD. Typically, you use magento this command line to update components and each component can require different compiled classes.
        

        • 

      • 

        4. And finally, to Reindex Magento Static Blocks type  php bin/magento indexer:reindex.
        

        • 

      

      

        

      • Step 5: Run installation process by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer and follow each step of the Installer so that the installation process can be set.
        • 

      

      

        

      • Step 6:  Choose Start Readiness Check. After Start Readiness Check is completed, select Next .
        • 

      


      
When you click on “Start Readiness Check”,the error could occur like the below image
      

      
You need to open your php.ini file and set always_populate_raw_post_data to -1.
      

      

        

      • Step 7: Enter server and database in step 2 and then click on Next.
        • 

      

      

        

      • Step 8: Put your website link and continue to click on Next.
        • 

      

      

        

      • Step 9: Customize your store: you can choose Time Zone, Currency and Languages.
        • 

      

      

        

      • Step 10:  You need to Create Admin Account. Enter your information and move to the next step.
        • 

      

      

        

      • Step 11: In this step, you should click on the button: Install Now.
        • 

      


      
It will take some minutes to complete this installation process. If your window is the same as below, CONGRAT! You install this quickstart package successfully
      

      
 After clicking on the button, the Admin Login screen will be opened and you can use admin credentials to login on this screen. It will open Admin panel after successful authentication.
      

      

      2.2 Manual Installation
      

        

          

        • Step 1: Please unzip ‘sm_paco_quickstart_m2.0.x_v1.0.0′ file and upload folders app; pub from the theme package to the root of your Magento site folder on your server.
          

          Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database.

          To verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks before configuring your site, please go Here to follow
          

          • 

        • Step 2: Log in to your Admin Panel (e.g. http://yourdomain.com/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 >> Tools >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.
          • 

          	
          

        • Step 4: Navigate to Stores>> Settings>> Configuration >> Design. In Design tab, select Design Theme field with the Sm Paco.
          • 

          

        

      

        

      • Step 5: Click “Save Config” button to save your changes.
        • 

      

      2.3 Theme Setting
      

      In Magento admin panel, navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Paco and configure its settings as you want.
      

      

        

      • Configure General Options with Color (of theme), Body Font, Elements Google Font, Menu for any store.
        • 

      • Configure Theme Layout with Layout style
        • 

      • Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns
        • 

      • Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.
        • 

      • Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin, Pinterest
        • 

      • Configure Advanced : To Show Go to Top, Add to Cart, Add to Wishlist, Add to Compare… 
        • 

      

       

    

    

    
3CONFIGURATION

    

    3.1 Page Configuration
    

    3.1.1 Home Style 1
    

     Frontend of Home Style 1 – Layout Position
    
home-layout1
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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::
    &ltdiv class="homepage-wrapper home-style-1"&gt
&ltdiv class="full-wrapper"&gt
&ltdiv class="container-full"&gt
&ltdiv class="boxed-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="boxed-container bestsellers-wrap"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-index1.phtml" title="PACO BEST SELLERS" product_order_by="best_sales" product_category="11" product_limitation="6" nb_column1="4" nb_column2="4" nb_column3="3" nb_column4="2" nb_column5="1" pretext="The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here"}}&lt/div&gt
&ltdiv class="full-wrapper best-deal-wrap"&gt
&ltdiv class="container"&gt
&ltdiv class="boxed-container"&gt{{block class="Sm\CountdownProductSlider\Block\CountdownProductSlider" name="countdownproductslider.default" as="countdownproductslider_default" template="Sm_CountdownProductSlider::sm/countdownproductslider/default-index1.phtml" title="Best smartphone 2016" pretext="Get 45% Off Your Order Of $500 And More" posttext="best-smartphone.html"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="boxed-container"&gt{{block class="Sm\ProductsDetailSliders\Block\ProductsDetailSliders" name="productsdetailsliders" template="Sm_ProductsDetailSliders::default.phtml"}}&lt/div&gt
&ltdiv class="full-wrapper client-say-wrap"&gt
&ltdiv class="container"&gt
&ltdiv class="boxed-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="static-testimonial"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="boxed-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}&lt/div&gt
&lt/div&gt
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

    	Copy and paste the following code into the Content field::
    &ltreferenceContainer name="main.content"&gt
	&ltblock class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"/&gt
&lt/referenceContainer&gt
    

  •  Meta Data Tab: Please click to see the  Backend Settings.
    • 


    3.1.2 Home Style 2
    

     Frontend of Home Style 2 – Layout Position
    
home-layout2
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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::
    &ltdiv class="homepage-wrapper home-style-2"&gt
&ltdiv class="full-wrapper"&gt
&ltdiv class="container-full"&gt
&ltdiv class="boxed-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="cb-list"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="boxed-container new-arivals-wrap"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts.new.index2" template="Sm_BasicProducts::sm/basicproducts/slider-index2.phtml" title="New arrivals" product_order_by="lastest_product" product_category="11" product_limitation="8" nb_column1="4" nb_column2="4" nb_column3="3" nb_column4="2" nb_column5="1" pretext="The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here"}}&lt/div&gt
&ltdiv class="full-wrapper"&gt
&ltdiv class="container-full"&gt
&ltdiv class="boxed-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index2"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="full-wrapper"&gt
&ltdiv class="container"&gt
&ltdiv class="boxed-container"&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-4 col-md-5 col-sm-5 deal-week-wrap"&gt{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default-index2.phtml" title="Deals of the week" posttext="" pretext="The point of using Lorem Ipsummore-or-less" nb_column4="2" margin="30"}}&lt/div&gt
&ltdiv class="col-lg-8 col-md-7 col-sm-7 bestseller-wrap"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-list-index2.phtml" title="PACO BEST SELLERS" product_order_by="price" product_category="11" product_limitation="12" nb_column1="2" nb_column2="1" nb_column3="1" nb_column4="1" nb_column5="1" pretext="The point of using Lorem Ipsum is that it" img_width="183" img_height="277"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="full-wrapper client-say-wrap"&gt
&ltdiv class="container"&gt
&ltdiv class="boxed-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="static-testimonial-index2"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="boxed-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}&lt/div&gt
&lt/div&gt
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

    	Copy and paste the following code into the Content field::
    &ltreferenceContainer name="main.content"&gt
	&ltblock class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"/&gt
&lt/referenceContainer&gt
    

  •  Meta Data Tab: Please click to see the  Backend Settings.
    • 


      

    • To set a default page for your Magento Site, in the Admin Panel you go to Stores>> Settings >>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.
      • 

    • You need 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.2 Configure Megamenu 
    


    3.2.1 Horizontal Megamenu:
    

    Horizontal-mega-menu
    

      

    •  Sortable Categories Items Please click Here to view.
      • 

    

    Features
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Dropdown Features’: Please click Here to view.
      • 

      Copy and paste the following code into the Content field::
    &ltdiv class="home-menu-dropdown"&gt
	&ltul class="item-home-store layout-home"&gt
		&ltli class="title-menu-home"&gtLayouts&lt/li&gt
		&ltli&gt&lta title="Home Style 1" href="{{store url="?___store=default&___from_store=default"}}"&gtHome Style 1&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Home Style 2" href="{{store url="?___store=french&___from_store=default"}}"&gtHome Style 2&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Boxed Layout" href="{{store url="?___store=somaliland&___from_store=default"}}"&gtBoxed Layout&lt/a&gt&lt/li&gt
	&lt/ul&gt

	&ltul class="item-home-store header-home"&gt
		&ltli class="title-menu-home"&gtHeaders&lt/li&gt
		&ltli&gt&lta title="Header Type 1" href="{{store url="?___store=default&___from_store=french"}}"&gtHidden Toogle Top Header&lt/a&gt&lt/li&gt
		&ltli&gt&lta title="Header Type 2" href="{{store url="?___store=french&___from_store=default"}}"&gtDisplay Toogle Top Header&lt/a&gt&lt/li&gt
	&lt/ul&gt
	
	&ltul class="item-home-store theme-color"&gt
		&ltli class="title-menu-home"&gtColor Styles&lt/li&gt
		&ltli class="blue"&gt&lta title="Blue" href="{{store url="?___store=belgium&___from_store=default"}}"&gtBlue&lt/a&gt&lt/li&gt
		&ltli class="cyan"&gt&lta title="Cyan" href="{{store url="?___store=japan&___from_store=default"}}"&gtCyan&lt/a&gt&lt/li&gt
		&ltli class="green"&gt&lta title="Green" href="{{store url="?___store=andorra&___from_store=default"}}"&gtGreen&lt/a&gt&lt/li&gt
		&ltli class="orange"&gt&lta title="Orange" href="{{store url="?___store=vietnam&___from_store=default"}}"&gtOrange&lt/a&gt&lt/li&gt
		&ltli class="red"&gt&lta title="Red" href="{{store url="?___store=default&___from_store=default"}}"&gtRed&lt/a&gt&lt/li&gt
	&lt/ul&gt	
			
	&ltul class="item-home-store layout-home"&gt
		&ltli class="title-menu-home"&gt404 Page Layout&lt/li&gt
		&ltli&gt&lta title="404 Page Style 1" href="{{store url="404page"}}"&gt404 Page Style 1&lt/a&gt&lt/li&gt
	&lt/ul&gt
	
	&ltdiv style="clear:both;"&gt &lt/div&gt
	

&lt/div&gt
    
	

    Shop
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Iphone collection’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Banner 1′ in ‘Iphone collection’: Please click Here to view.
      • 

      		Copy and paste the following code into the Content field::
    &ltdiv class="static-image-menu"&gt
&lta title="Static Image" href="#"&gt
&ltimg src="{{media url="wysiwyg/image-megamenu/img-megamenu-1.jpg"}}" alt="Static Image" /&gt
&lt/a&gt
&lt/div&gt
    
	

      

    • Backend of ‘Samsung collection’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Banner 2′ in ‘Samsung collection’: Please click Here to view.
      • 

      		Copy and paste the following code into the Content field::
    &ltdiv class="static-image-menu"&gt
&lta title="Static Image" href="#"&gt
&ltimg src="{{media url="wysiwyg/image-megamenu/img-megamenu-2.jpg"}}" alt="Static Image" /&gt
&lt/a&gt
&lt/div&gt
    
	

      

    • Backend of ‘Group 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Sony collection’ in ‘Group 2′: Please click Here to view.
      • 

    

      

    • Backend of ‘Banner 3′ in ‘Sony collection’: Please click Here to view.
      • 

    

      

    • Backend of ‘Product Slider – Collection’ in ‘Group 2′: Please click Here to view.
      • 

    

    	Collection
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Iphone collection’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Sony collection’ in ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Group 2′ in ‘Collection’: Please click Here to view.
      • 

    

      

    • Backend of ‘Image 1′ in ‘Group 2′: Please click Here to view.
      • 

      	Copy and paste the following code into the Content field::
    &ltdiv class="static-image-menu"&gt
&lta title="Static Image" href="#"&gt
&ltimg src="{{media url="wysiwyg/image-megamenu/img-megamenu-4.jpg"}}" alt="Static Image" /&gt
&lt/a&gt
&lt/div&gt
    
	

      

    • Backend of ‘Image 2′ in ‘Group 2′: Please click Here to view.
      • 

      	Copy and paste the following code into the Content field::
    &ltdiv class="static-image-menu"&gt
&lta title="Static Image" href="#"&gt
&ltimg src="{{media url="wysiwyg/image-megamenu/img-megamenu-5.jpg"}}" alt="Static Image" /&gt
&lt/a&gt
&lt/div&gt
    
	

    Accessories
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Accessories’ in ‘Accessories’: Please click Here to view.
      • 

    

    		About Us
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    		Contact
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    3.3 Configure Extensions
    

    The SM Paco front-page has been integrated with the extensions in the following list:
    


    In SM Paco Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM  to configure extensions as you want.
    

    3.3.1 SM Coundownt Product Slider
    

      

        

          

        • Position: SM Coundownt Product Slider
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Coundownt Product Slider: Click Here 
          • 

        

      

    

    3.3.2 SM Product Detail Sliders 
    

      

        

          

        • Position: SM Product Detail Sliders
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Product Detail Sliders: Click Here 
          • 

        

      

    

    3.3.3 SM Basic Products 
    

      

        

          

        • Position: SM Basic Products
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Basic Products: Click Here 
          • 

        

      

    

    3.3.4 SM Megamenu
    

      

        

          

        • Position: SM Megamenu
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Megamenu: Click Here 
          • 

        

      

    

    3.3.5 SM Image Slider
    

      

        

          

        • Position: SM Image Slider
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Image Slider: Click Here 
          • 

        

      

    

    3.3.6 SM Deals
    

      

        

          

        • Position: SM Deals
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Listing Tabs: Click Here 
          • 

        

      

    

    3.3.7 SM Quick View
    

      

        

          

        • Position: SM Quick View
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Quick View: Click Here 
          • 

        

      

    

    3.4 Configure Static Blocks
    

    The SM paco front-page has the following static blocks in the theme:
    


    To create a new static block, go to Content>> Elements>> Blocks >> Add new block.
    

    

    Static Block: hotline
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco hotline” and Identifier * : “hotline”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gtContact us 24/7: +44 573 222 7439     |     Paradis Store, Portland Street, Manchester City, Manchester&lt/p&gt
    

    

    Static Block: top-social
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Top social” and Identifier * : “top-social”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="top-social"&gt
&ltul&gt
&ltli class="li-social facebook-social"&gt&lta title="Facebook" href="https://www.facebook.com/MagenTech" target="_blank"&gt &ltspan class="name-social"&gtFacebook&lt/span&gt &lt/a&gt&lt/li&gt
&ltli class="li-social twitter-social"&gt&lta title="Twitter" href="https://twitter.com/smartaddons" target="_blank"&gt &ltspan class="name-social"&gtTwitter&lt/span&gt &lt/a&gt&lt/li&gt
&ltli class="li-social google-social"&gt&lta title="Google+" href="https://plus.google.com/u/0/+Smartaddons/posts" target="_blank"&gt &ltspan class="name-social"&gtGoogle+&lt/span&gt &lt/a&gt&lt/li&gt
&ltli class="li-social pinterest-social"&gt&lta title="Pinterest" href="#" target="_blank"&gt &ltspan class="name-social"&gtPinterest&lt/span&gt &lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    

    Static Block: static-image-1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Static Image 1″ and Identifier * : “static-image-1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="row banner-list static-image-1"&gt
&ltdiv class="col-lg-6 col-md-6 col-xs-6"&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-12 col-md-12"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-12 col-md-12"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-6 col-md-6 col-xs-6"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-3.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="row banner-list static-image-1"&gt
&ltdiv class="col-lg-6 col-md-6 col-xs-6"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-4.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-lg-6 col-md-6 col-xs-6"&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-6 col-md-6 col-xs-6"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-5.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-lg-6 col-md-6 col-xs-6"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-6.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: static-testimonials
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Static Testimonial” and Identifier * : “static-testimonials”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv id="testimonials-home" class="testimonials-home"&gt
&ltdiv class="title-home"&gt
&lth2&gtWhat Our Clients Say&lt/h2&gt
&lt/div&gt
&ltdiv class="navslider"&gt &lt/div&gt
&ltdiv class="margin-slider"&gt
&ltul class="testimonials-slider"&gt
&ltli class="item"&gt
&ltdiv class="client-child"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-1.png"}}" alt="Kenvin" /&gt&lt/div&gt
&ltdiv class="comment"&gt
&ltdiv class="content"&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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.."&lt/div&gt
&lth2 class="client-name"&gtDonald Berry&lt/h2&gt
&lth3 class="client-job"&gtWeb Developer&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="item"&gt
&ltdiv class="client-child"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-2.png"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="comment"&gt
&ltdiv class="content"&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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.."&lt/div&gt
&lth2 class="client-name"&gtDavid&lt/h2&gt
&lth3 class="client-job"&gtMarket Research&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="item"&gt
&ltdiv class="client-child"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-3.png"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="comment"&gt
&ltdiv class="content"&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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.."&lt/div&gt
&lth2 class="client-name"&gtVenus&lt/h2&gt
&lth3 class="client-job"&gtDesigner&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="item"&gt
&ltdiv class="client-child"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-4.png"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="comment"&gt
&ltdiv class="content"&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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.."&lt/div&gt
&lth2 class="client-name"&gtAnna&lt/h2&gt
&lth3 class="client-job"&gtMarket Research&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="item"&gt
&ltdiv class="client-child"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-5.png"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="comment"&gt
&ltdiv class="content"&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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.."&lt/div&gt
&lth2 class="client-name"&gtBlack Smith&lt/h2&gt
&lth3 class="client-job"&gtWeb Development&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&ltli class="item"&gt
&ltdiv class="client-child"&gt
&ltdiv class="image-client"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-6.png"}}" alt="Venus" /&gt&lt/div&gt
&ltdiv class="comment"&gt
&ltdiv class="content"&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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.."&lt/div&gt
&lth2 class="client-name"&gtKenvin&lt/h2&gt
&lth3 class="client-job"&gtMarket Research&lt/h3&gt
&lt/div&gt
&lt/div&gt
&lt/li&gt
&lt/ul&gt
&lt/div&gt
&ltscript type="text/javascript"&gt// &lt![CDATA[
		jQuery(document).ready(function($) {
						$(window).load(function(){
							$('#testimonials-home .testimonials-slider').owlCarousel({
								 items: 3,
								loop:true,
								nav: false,
								dots: false,
								slideSpeed : 1,
								center: true,
								autoplay: true,
		    					autoplayTimeout: 30000,
								autoplayHoverPause: true,
								addClassActive: true,
								margin:0,
					            onInitialized: callback
							});
							function callback(event) {
					   			if(this._items.length &gt this.options.items){
								        $('#testimonials-home .navslider').show();
								    }else{
								        $('#testimonials-home .navslider').hide();
								    }
							}
							$('#testimonials-home .navslider .prev').on('click', function(e){
								e.preventDefault();
								$('#testimonials-home .testimonials-slider').trigger('prev.owl.carousel');
							});
							$('#testimonials-home .navslider .next').on('click', function(e){
								e.preventDefault();
								$('#testimonials-home .testimonials-slider').trigger('next.owl.carousel');
							});
						});
					});
// ]]&gt&lt/script&gt
&lt/div&gt
    

    

    Static Block: blog-block
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco Blog” and Identifier * : “blog-block”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="box-content latest-post-block"&gt
&ltdiv class="slider-latest-blog"&gt
&ltdiv class="title-home"&gt
&lth2&gtLatest Blog&lt/h2&gt
&lt/div&gt
&ltdiv class="pretext"&gtThe point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here&lt/div&gt
&ltdiv class="slider-blog latest-post"&gt
&ltdiv class="item"&gt
&ltdiv class="blog-item-content"&gt
&ltdiv class="image-blog"&gt&lta class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/blog/blog-1.jpg"}}" alt="Image Blog" /&gt&lt/a&gt
&ltdiv class="postDate"&gt&ltspan class="date"&gt06&lt/span&gt&ltspan class="month"&gtFeb&lt/span&gt&lt/div&gt
&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="postTitle"&gt
&lth2&gt&lta href="#"&gtStyling Pre-Spring 2016&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postInfo"&gt&ltspan class="post-author"&gtPost by &ltstrong&gtPaco&lt/strong&gt&lt/span&gt&ltspan class="post-comment"&gt16 Comments&lt/span&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="blog-item-content"&gt
&ltdiv class="image-blog"&gt&lta class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/blog/blog-2.jpg"}}" alt="Image Blog" /&gt&lt/a&gt
&ltdiv class="postDate"&gt&ltspan class="date"&gt06&lt/span&gt&ltspan class="month"&gtFeb&lt/span&gt&lt/div&gt
&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="postTitle"&gt
&lth2&gt&lta href="#"&gtStyling Pre-Spring 2016&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postInfo"&gt&ltspan class="post-author"&gtPost by &ltstrong&gtPaco&lt/strong&gt&lt/span&gt&ltspan class="post-comment"&gt16 Comments&lt/span&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="blog-item-content"&gt
&ltdiv class="image-blog"&gt&lta class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /&gt&lt/a&gt
&ltdiv class="postDate"&gt&ltspan class="date"&gt06&lt/span&gt&ltspan class="month"&gtFeb&lt/span&gt&lt/div&gt
&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="postTitle"&gt
&lth2&gt&lta href="#"&gtStyling Pre-Spring 2016&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postInfo"&gt&ltspan class="post-author"&gtPost by &ltstrong&gtPaco&lt/strong&gt&lt/span&gt&ltspan class="post-comment"&gt16 Comments&lt/span&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltscript type="text/javascript"&gt// &lt![CDATA[
		jQuery(document).ready(function($) {
		var post_slider = $(".slider-blog.latest-post");
		post_slider.owlCarousel({				
		responsive:{
			0:{
				items:1
			},
			480:{
				items:1
			},
			768:{
				items:2
			},
			992:{
				items:2
			},
			1200:{
				items:3
			}
		},
		autoplay:false,
		loop:false,
		nav : false,
		dots: false,
		autoplaySpeed : 500,
		navSpeed : 500,
		dotsSpeed : 500,
		autoplayHoverPause: true,
		margin:30,
		});	  
		});
// ]]&gt&lt/script&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: brand-block
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Brands” and Identifier * : “brand-block”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="brand-block"&gt
&ltdiv class="brand-content"&gt
&ltul class="list-brands row"&gt
&ltli class="col-lg-2 col-md-2 col-sm-4"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br01.png"}}" alt="Brand" /&gt&lt/a&gt&lt/li&gt
&ltli class="col-lg-2 col-md-2 col-sm-4"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br02.png"}}" alt="Brand" /&gt&lt/a&gt&lt/li&gt
&ltli class="col-lg-2 col-md-2 col-sm-4"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br03.png"}}" alt="Brand" /&gt&lt/a&gt&lt/li&gt
&ltli class="col-lg-2 col-md-2 col-sm-4"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br04.png"}}" alt="Brand" /&gt&lt/a&gt&lt/li&gt
&ltli class="col-lg-2 col-md-2 col-sm-4"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br05.png"}}" alt="Brand" /&gt&lt/a&gt&lt/li&gt
&ltli class="col-lg-2 col-md-2 col-sm-4"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br06.png"}}" alt="Brand" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-contact-us
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Contact us footer” and Identifier * : “ft-contact-us”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-contact-us"&gt
&ltdiv class="title"&gtStore Information&lt/div&gt
&ltdiv class="content"&gt
&ltp class="address"&gt&ltem class="fa fa-home"&gt&lt/em&gtRanelagh Place, Liverpool, L3 5UL, England&lt/p&gt
&ltp class="phone"&gt&ltem class="fa fa-phone"&gt&lt/em&gt&lta title="Telephone" href="#"&gt8 (495) 989 906 743&lt/a&gt&lt/p&gt
&ltp class="email"&gt&ltem class="fa fa-envelope"&gt&lt/em&gt&lta title="Mail to: topshop@co.uk.com" href="mailto:paco@co.uk.com"&gtpaco@co.uk.com&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-opening-time
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Opening time footer” and Identifier * : “ft-opening-time”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-opening-time"&gt
&ltdiv class="title"&gtOpening time&lt/div&gt
&ltdiv class="content"&gt
&ltp&gtMonday - Friday 2pm - 11pm&lt/p&gt
&ltp&gtSaturday 1pm - 12.30am&lt/p&gt
&ltp&gtSunday 2pm - 10pm&lt/p&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-my-account
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – My accout footer” and Identifier * : “ft-my-account”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-my-account"&gt
&ltdiv class="title"&gtMY ACCOUNT&lt/div&gt
&ltdiv class="content"&gt
&ltul&gt
&ltli&gt&lta title="My account" href="{{config path="web/secure/base_url"}}customer/account/"&gtMy account&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Login" href="{{config path="web/secure/base_url"}}customer/login/"&gtLogin&lt/a&gt&lt/li&gt
&ltli&gt&lta title="My Cart" href="{{config path="web/secure/base_url"}}checkout/cart/"&gtMy Cart&lt/a&gt&lt/li&gt
&ltli&gt&lta title="My Wishlist" href="{{config path="web/secure/base_url"}}wishlist/"&gtMy Wishlist&lt/a&gt&lt/li&gt
&ltli&gt&lta title="My Compare" href="{{config path="web/secure/base_url"}}catalog/product_compare/index/"&gtMy Compare&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-information
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Information footer” and Identifier * : “ft-information”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-information"&gt
&ltdiv class="title"&gtINFORMATION&lt/div&gt
&ltdiv class="content"&gt
&ltul&gt
&ltli&gt&lta title="About Us" href="{{config path="web/secure/base_url"}}about-us.html"&gtAbout Us&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Jobs" href="#"&gtJobs&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Delivery Information" href="#"&gtDelivery Information&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Privacy Policy" href="#"&gtPrivacy Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Term and Conditions" href="#"&gtTerm and Conditions&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-other-pages
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Other pages” and Identifier * : “ft-other-pages”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-other-pages"&gt
&ltdiv class="title"&gtOther pages&lt/div&gt
&ltdiv class="content"&gt
&ltul&gt
&ltli&gt&lta title="Blog" href="#"&gtBlog&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Jobs" href="#"&gtGift Center&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Buying Guides" href="#"&gtBuying Guides&lt/a&gt&lt/li&gt
&ltli&gt&lta title="New Arrivals" href="#"&gtNew Arrivals&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Clearance" href="#"&gtClearance&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: ft-customer-service
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Customer service footer” and Identifier * : “ft-customer-service”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="block ft-customer-service"&gt
&ltdiv class="title"&gtCustomer service&lt/div&gt
&ltdiv class="content"&gt
&ltul&gt
&ltli&gt&lta title="Shipping Policy" href="#"&gtShipping Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Return Policy" href="#"&gtReturn Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Term and Coditions" href="#"&gtTerm and Coditions&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Your Account" href="#"&gtYour Account&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Contact Us" href="#"&gtContact Us&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: intro-coppyright
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco Intro Coppyright” and Identifier * : “intro-coppyright”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gtThere are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum&lt/p&gt
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Theme – Payment Footer” and Identifier * : “payment-footer”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltp&gt&ltimg src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /&gt&lt/p&gt
    

    

    Static Block: header-policy-top
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Header policy” and Identifier * : “header-policy-top”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="row wrap-policy-top"&gt
&ltdiv class="col-lg-4 col-md-4 col-sm-12 policy-item"&gt
&ltdiv class="policy-icon"&gt &lt/div&gt
&ltdiv class="policy-info"&gt
&lth2 class="title"&gtFree Shipping&lt/h2&gt
&ltp class="desc"&gtFree Shipping On Orders Over $35&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-4 col-md-4 col-sm-12 policy-item"&gt
&ltdiv class="policy-icon"&gt &lt/div&gt
&ltdiv class="policy-info"&gt
&lth2 class="title"&gtMoney back 100%&lt/h2&gt
&ltp class="desc"&gtWithin 30 Days after delivery&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-4 col-md-4 col-sm-12 policy-item"&gt
&ltdiv class="policy-icon"&gt &lt/div&gt
&ltdiv class="policy-info"&gt
&lth2 class="title"&gtSecurity Protection&lt/h2&gt
&ltp class="desc"&gt100% Safe Shopping Guarantee&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: cb-list
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Collection Brand” and Identifier * : “cb-list”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="cb-wrap"&gt
&ltdiv class="title-home"&gt
&lth2&gtCollection by brand&lt/h2&gt
&lt/div&gt
&ltdiv class="desc"&gtThe standard chunk of Lorem Ipsum used since the 1500s is reproduced&lt/div&gt
&ltdiv class="row cb-list"&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 cb-item"&gt
&ltdiv class="cb-image"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/cb-1.jpg"}}" alt="Static Image" /&gt&lt/div&gt
&ltdiv class="cb-info"&gt
&ltdiv class="title"&gt
&lth3&gt&lta href="#"&gtSamsung collection&lt/a&gt&lt/h3&gt
&ltp class="desc"&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&ltp class="action"&gt&lta href="#"&gtShop now&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 cb-item"&gt
&ltdiv class="cb-image"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/cb-2.jpg"}}" alt="Static Image" /&gt&lt/div&gt
&ltdiv class="cb-info"&gt
&ltdiv class="title"&gt
&lth3&gt&lta href="#"&gtIphone collection&lt/a&gt&lt/h3&gt
&ltp class="desc"&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&ltp class="action"&gt&lta href="#"&gtShop now&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 cb-item"&gt
&ltdiv class="cb-image"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/cb-3.jpg"}}" alt="Static Image" /&gt&lt/div&gt
&ltdiv class="cb-info"&gt
&ltdiv class="title"&gt
&lth3&gt&lta href="#"&gtLG collection&lt/a&gt&lt/h3&gt
&ltp class="desc"&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&ltp class="action"&gt&lta href="#"&gtShop now&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 cb-item"&gt
&ltdiv class="cb-image"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/cb-4.jpg"}}" alt="Static Image" /&gt&lt/div&gt
&ltdiv class="cb-info"&gt
&ltdiv class="title"&gt
&lth3&gt&lta href="#"&gtSony collection&lt/a&gt&lt/h3&gt
&ltp class="desc"&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&ltp class="action"&gt&lta href="#"&gtShop now&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
    

    

    Static Block: static-testimonials-index2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Paco – Static Testimonial index 2″ and Identifier * : “static-testimonials-index2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    &ltdiv class="row banner-list static-image-1-index2"&gt
&ltdiv class="col-lg-6 col-md-6 col-sm-12"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/image-1.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-lg-6 col-md-6 col-sm-12"&gt&lta class="first-image" title="Static Image" href="#"&gt&ltimg class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/image-2.jpg"}}" alt="Static Image" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
    

    3.5 How To Edit Copyright in Admin Panel
    

    Frontend Appearance
    

    

    In SM Paco Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Paco >> Advanced to configure this theme’s copyright.
    

    
Edit the code here: 
    ©  2016 MAGENTECH Demo Store. All Rights Reserved
    

    3.6 How To Customize the Social symbols in admin panel
    

    Frontend Appearance
    

    

    In SM paco Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM Paco >> Socials.
    

    

    3.7 Newsletter pop-up
    

    Frontend Appearance 
    

    In your Website’s Directory, go to app/design/frontend/Sm/paco/Magento_Newsletter/templates folder. To change the text SUBMIT in the red button, in this folder, you could open the file named subscribe-popup.phtml by your editor program, and find the word Submit to change.
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    

    

    

    4SUPPORT
    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                                        
    
                                                                                                                                          
                
    
                  
    
                    
                    
    
                      Search
                                          
    
                  
    
                                    
                  
                
    
                     
    
                     
    
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SP Product Detail Sliders
    
                     
    
                                              June 6, 2016, 12:12 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    This guide will help you install SP Product Detail Sliders  – Ver 1.0.0 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, when you are ready to install SP Product Detail Sliders , please follow 5 steps as following:
      • 

    

    Step 1: Login to your Prestashop admin panel and go to Back Office >> Modules and Services >> Modules and Services . 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 named as "sp_product_detail_sliders_p1.6-res_v1.0.0.zip" that you have downloaded, then click "Upload this module" button.
    

    

    Step 3: The new module will be located in the module list. Please search the name of module and click on the Install button to install the module.
    

    

    Step 4:When seeing a notification message as following, please click "Proceed with the installation" button to finish the installation process:
    

    

    Step 5: When the uploading process is done, you will see the message denoting that:"Module(s) installed successfully". Please click "Edit"  button to configure this module.
    

     
    

    

    

    

    2 Configuration - Back to top
    

    

     
    

    You could see the appearance of SP Product Detail Sliders   module as following:
    

    

    To configure  this module, please find the module that you have completely installed in the module list and start setting its options.
    
 


    Let's look at the parameters in detail:
    

    

      

    • Title - Enter the title of the module.
      • 

    • Display Title Module - Allow to show/hide title of the module.
      • 

    • Module Class Suffix - Enter the suffix which is applied to the CSS class of module. This allows to style an individual module easily.
      • 

    • Status - Allow to enable/disable the status of the module.
      • 

    • Hook into - Select Hook into in the list box. Please click Here to read more How To Create Custom CMS Hook Page.
      • 

    • Column  - Enter the quantity of columns you want to display
      • 

    • Open Link – Allow to choose one of three:

        

      • Same window.
        • 

      • New window.
        • 

      • Popup window.
        • 

      

      • 

    

    

      

    • Source – Allow to select: Categories/Product.
      • 

    • Select Categories – Allow you to select Category.
      • 

    • Product Field to Order By – Set Product Field to Order By: “Name/ID/Date Add/Price/Sell/Position/Random”.
      • 

    • Ordering Direction – Allow to order ascending/descending direction for field.
      • 

    • Count Product – Allow to set the number of product to be displayed in this block.
      • 

    

    	
    

      

    • View image (W x H) – Allow to sellect the size image from the dropdown menu.
      • 

    

    

      

    • Size image (W x H)  - Allow to sellect the size image from the dropdown menu.
      • 

    • Display Name - Allow to display the product names in the module
      • 

    • Name Maxleghth - Allow to set the maximum number of characters allowed in the name area
      • 

    • Display Description - Allow to display the description of each product.
      • 

    • Description Maxlength - Allow to set the maximum number of characters allowed in the description area
      • 

    • Display Price - Allow to display the product price.
      • 

    • Display Add to Cart Button - Allow to display Add to Cart Button button
      • 

    • Display Add to Wishlist Button - Allow to display Add to Wishlist button
      • 

    • Display Add to Compare Button - Allow to display Add to Compare button
      • 

    • Display Detail Link - Allow to display Detail Link of each product
      • 

    • Display New - Allow to show/hide image new
      • 

    • Display Sale - Allow to show/hide image sale
      • 

    

    

      

    • Auto Play – Allow to enable/disable auto play for slider.
      • 

    • Auto Play Speed – Allow to set transition speed of slider with unit of milisecond.
      • 

    • Speed – Allow to set speed of module. Large = Slower.
      • 

    • Auto Play Hover Pause –  Allow slideshow effect stop when hover OR NOT.
      • 

    • Start Position Item – Allow to set item that is displayed at first when you run slider.
      • 

    • Slide By – Allow to run slide from sub category.
      • 

    • Mouse Drag – Allow to Show Mouse Drag or not
      • 

    • Touch Drag – Allow to Show Touch Drag or not.
      • 

    • Show Navigation  – Allow to Show Navigation or not.
      • 

    • Loop – Allow to Show Loop or not..
      • 

    

    

    

    

    3SUPPORT - Back to top
    

    

    Thank you so much for using this extension, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our  Support Tickets System
    

    

    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SM Furnicom Magento 2.0.x
    
                     
    
                                              June 6, 2016, 3:28 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
    

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.
    

    

    

    

    1 SYSTEM REQUIREMENT
    

    

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

      

        

      • Compatible with Magento Community Edition 2.0.4
        • 

      • Composer (latest stable version)
        • 

      • Apache 2.2 or late
        • 

      • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)
        • 

        

      • In the future if the conditions change, please check the Magento 2 documentation
        • 

      

    

    

    

    

    2INSTALLATION
    

    

    There are two ways to install a Magento Theme:
    

      

    • Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
      • 

    • Manual Installation (including Theme Installation): Suitable if your store is full with content that you don’t want to overwrite.
      • 

    

    2.1 Quickstart Installation:
    

    Magentech provides SM Quickstart package for each theme which aims to ease the installation for users. Please note that with Quickstart, all your existing data will be overwritten. Thus, if you plan to start your site from the beginning, it will help you save much time of installing and configuring. 
    

    Note: Follow Magento 2.0 Installation Guide to install the Composer before doing this Quickstart installation.
    

    Please follow steps below: 
    

      

    • Step 1: Download the quickstart package named as sm_furnicom_quickstart_m2.0.x_v1.0.0
      • 

    • 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 site
      • 

      Note: You need to remember the database name to use in the next steps
      

      

        

      • Step 4:Import database sample_data.sql under the folder sm_furnicom_quickstart_m2.0.x_v1.0.0\data_quickstart 
        • 

      

      Note: 
      

      After successful installation DO NOT run magento.
      

      Now we are going to verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks. To perform all above actions, press WINDOWS KEY + R to open RUN dialog and type cmd to open Command Prompt. 
      

      Type cd PATH_TO_YOUR_MAGENTO2_FILES to enter in Magento 2 ROOT directory.
      

        

      • 1. Now to verify Composer installation in above directory, type composer install.
        • 

        If you get any error in this step, please check your Composer installation.
        

      • 2. In this step, we are setting up static content to deploy on our Magento store. To perform this, type php bin/magento setup:static-content:deploy.
        • 

        If you get any error, check your PHP.EXE and PHP.INI Environment Variable
        

      • 

        3. Clear compiled code and the cache by typing php bin/magento setup:upgrade in CMD. Typically, you use magento this command line to update components and each component can require different compiled classes.
        

        • 

      • 

        4. And finally, to Reindex Magento Static Blocks type  php bin/magento indexer:reindex.
        

        • 

      

      

        

      • Step 5: Run installation process by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Magento installer and follow each step of the Installer so that the installation process can be set.
        • 

      

      

        

      • Step 6:  Choose Start Readiness Check. After Start Readiness Check is completed, select Next .
        • 

      


      
When you click on “Start Readiness Check”,the error could occur like the below image
      

      
You need to open your php.ini file and set always_populate_raw_post_data to -1.
      

      

        

      • Step 7: Enter server and database in step 2 and then click on Next.
        • 

      

      

        

      • Step 8: Put your website link and continue to click on Next.
        • 

      

      

        

      • Step 9: Customize your store: you can choose Time Zone, Currency and Languages.
        • 

      

      

        

      • Step 10:  You need to Create Admin Account. Enter your information and move to the next step.
        • 

      

      

        

      • Step 11: In this step, you should click on the button: Install Now.
        • 

      


      
It will take some minutes to complete this installation process. If your window is the same as below, CONGRAT! You install this quickstart package successfully
      

      
 After clicking on the button, the Admin Login screen will be opened and you can use admin credentials to login on this screen. It will open Admin panel after successful authentication.
      

      

      2.2 Manual Installation
      

        

          

        • Step 1: Please unzip ‘sm_furnicom_quickstart_m2.0.x_v1.0.0′ file and upload folders app; pub from the theme package to the root of your Magento site folder on your server.
          

          Note: You could change the name of this folder. However, if you want your website run correctly, it need to have the same name as the database.

          To verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks before configuring your site, please go Here to follow
          

          • 

        • Step 2: Log in to your Admin Panel (e.g. http://yourdomain.com/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 >> Tools >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.
          • 

          	
          

        • Step 4: Navigate to Stores>> Settings>> Configuration >> Design. In Design tab, select Design Theme field with the SM Furnicom.
          • 

          

        

      

        

      • Step 5: Click “Save Config” button to save your changes.
        • 

      

      2.3 Theme Setting
      

      In Magento admin panel, navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Furnicom and configure its settings as you want.
      

      

        

      • Configure General Options with Color (of theme), Body Font, Elements Google Font, Menu for any store.
        • 

      • Configure Theme Layout with Layout style
        • 

      • Configure the Product Listing with Layout 1 Column, Layout 2 Columns, Layout 3 Columns
        • 

      • Configure the Product Detail To zoom image of product, adjust Zoom Mode, Custom tab, and content, etc.
        • 

      • Configure Socials : To connect with social networks such as Facebook, Twitter, Google Plus, Linkedin, Pinterest
        • 

      • Configure Advanced : To Show Go to Top, Add to Cart, Add to Wishlist, Add to Compare… 
        • 

      

      

    

    

    
3CONFIGURATION

    

    3.1 Page Configuration
    

    3.1.1 Home Style 1
    

     Frontend of Home Style 1 – Layout Position
    
home-layout1
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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="wrap-content1">
<div class="wow fadeInUp">
<div class="row">
<div class="slider-deal-w col-lg-9 col-md-9">{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default.phtml"}}</div>
<div class="products-w col-lg-3 col-md-3">{{block class="Magento\\Cms\\Block\\Block" block_id="products-popular"}}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="banner1-1"}}</div>
</div>
</div>
<div class="wrap-content2 full-wrapper">
<div class="container">
<div class="slider-basic-wrapper content-box">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-home.phtml"}}</div>
<div class="content-box hm">{{block class="Magento\\Cms\\Block\\Block" block_id="banner-infos"}}</div>
<div class="slider-basic-wrapper content-box">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-home.phtml" title="<strong>Best</strong> Sellers" product_order_by="best_sales" }}</div>
</div>
</div>
<div class="testimonial-wrap full-wrapper">
<div class="container">{{block class="Magento\\Cms\\Block\\Block" block_id="testimonials"}}</div>
</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="static-content"}}
<div class="wrap-content3 full-wrapper">
<div class="container">{{block class="Magento\\Cms\\Block\\Block" block_id="block-blog"}} {{block class="Magento\\Cms\\Block\\Block" block_id="brands-tab"}}</div>
</div>
</div>
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

    	Copy and paste the following code into the Layout Update XML field::
    <referenceContainer name="columns.top_container">
	<block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"/>
</referenceContainer>
    
	

    3.1.2 Home Style 2
    

     Frontend of Home Style 2 – Layout Position
    
home-layout2
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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="homestyle2">
<div class="full-wrapper full-wrapper-image center">
<div class="full-content">{{block class="Magento\\Cms\\Block\\Block" block_id="banner2-1"}}</div>
</div>
<div class="content-box slider-basic-w">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-home2.phtml" title="New Arrivals" product_order_by="created_at" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="1" nb_column5="1" product_limitation="16" nb_rows="8" }}</div>
<div class="list-basic-w full-wrapper">
<div class="container">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/product-list.phtml" product_limitation="6" basicproducts_title_text="Best Sellers" product_order_dir="ASC" product_order_by="best_sales" 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" img_width="100" img_height="100" }}</div>
</div>
<div class="box-content listingtab-wrapper">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="banner2-2"}}
<div class="dailydeal-wrap">
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-12 col-sx-12">{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default-index2.phtml" product_description_display="1" }}</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-sx-12">{{block class="Magento\\Cms\\Block\\Block" block_id="static-categories2"}}</div>
</div>
</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="blog-home2"}}</div>
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

    	Copy and paste the following code into the Layout Update XML field::
    <referenceContainer name="columns.top_container">
	<block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml" />
</referenceContainer>
    
	

    3.1.3 Home Style 3
    

     Frontend of Home Style 3 – Layout Position
    
home-layout3
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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="homestyle3">{{block class="Magento\\Cms\\Block\\Block" block_id="banner-infos"}}
<div class="wrap-content1">
<div class="row">
<div class="slider-deal-w col-lg-9 col-md-9">{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default.phtml"}}</div>
<div class="products-w col-lg-3 col-md-3">{{block class="Magento\\Cms\\Block\\Block" block_id="products-popular"}}</div>
</div>
</div>
<div class="listingtab-wrapper">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml" filter_type="categories" product_category="20,118,129" category_preload="129" margin="30" nb_rows=" 1" }}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="banner1-1"}}
<div class="listingtab-wrapper2">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="<strong>product</strong> categories" display_title="1" filter_type="categories" product_category="82,84,85,86" category_preload="82" }}</div>
<div class="testimonial-wrap full-wrapper">
<div class="container">{{block class="Magento\\Cms\\Block\\Block" block_id="testimonials"}}</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-home3.phtml" title="<strong>New</strong> Arrivals" product_order_by="created_at" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="1" }}</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-home3.phtml" title="<strong>Best</strong> Selling" product_order_by="best_sales" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="1" }}</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 phl-last">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/slider-home3.phtml" title="<strong>Hot</strong> Sale" product_order_by="most_viewed" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="1" }}</div>
</div>
<div class="wrap-content3 full-wrapper">
<div class="container">{{block class="Magento\\Cms\\Block\\Block" block_id="block-blog"}}</div>
</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="brands-tab"}}</div>
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 

    	Copy and paste the following code into the Layout Update XML field::
    <referenceContainer name="columns.top_container">
	<block class="Magento\Cms\Block\Block" name="custom-slider-img">
		<arguments>
			<argument name="block_id" xsi:type="string">custom-slider-img</argument>
		</arguments>
	</block>
</referenceContainer>
    
	

    3.1.4 Home Style 4
    

     Frontend of Home Style 4 – Layout Position
    
home-layout4
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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="homestyle4">
<div class="row">
<div class="content-wrap1">
<div class="slider-images-w col-lg-9 col-md-8">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}</div>
<div class="products-w col-lg-3 col-md-4">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/sidebar-product.phtml" product_limitation="4" title="<strong>Popular</strong> Products" 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" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0" product_readmore_display="0" product_description_display="0" img_width="90" img_height="90" }}</div>
</div>
</div>
<div class="content-wrap2">
<div class="row">
<div class="products-w col-lg-3 col-md-4">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/sidebar-product.phtml" product_limitation="3" title="<strong>Sale</strong> Products" product_order_dir="ASC" product_order_by="best_sales" product_title_maxlength="50" 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" img_width="92" img_height="92" }}</div>
<div class="slider-deal-w">{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default4.phtml" title="<strong>Deals</strong> of the day"}}</div>
</div>
</div>
<div class="box-content">{{block class="Magento\\Cms\\Block\\Block" block_id="banner4-1"}}</div>
<div class="box-content">{{block class="Sm\SuperCategories\Block\SuperCategories" template="Sm_SuperCategories::sm/supercategories/default_home4.phtml"}}</div>
<div class="box-content super-cate-2">{{block class="Sm\SuperCategories\Block\SuperCategories" template="Sm_SuperCategories::sm/supercategories/default_home4.phtml" product_category="129" }}</div>
<div class="testimonial-wrap full-wrapper ">
<div class="container">{{block class="Magento\\Cms\\Block\\Block" block_id="testimonials"}}</div>
</div>
<div class="listingtab-wrapper">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default_index4.phtml" display_title="1" title="<strong>Best</strong> sellers" filter_type="categories" product_category="82,84,85,86" category_preload="82" margin="30" product_limitation="12" nb_column1="3" nb_column2="2" nb_column3="2"}}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-infos"}}
<div class="content-wrap3 full-wrapper">
<div class="container">
<div class="latest-blog-wrap">{{block class="Magento\\Cms\\Block\\Block" block_id="block-blog"}}</div>
</div>
</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="brands-tab"}}</div>
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 


    3.1.5 Home Style 5
    

     Frontend of Home Style 5 – Layout Position
    
home-layout5
    
In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section. Here is the list of steps in this style’s configuration process:
    

      

    • 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="homestyle5">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}
<div class="content-wrap1">
<div class="row">
<div class="col-product1 col-lg-3 col-md-3">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/sidebar-product.phtml" product_limitation="3" title="<strong>Sale</strong> Products" product_order_dir="ASC" product_order_by="best_sales" product_title_maxlength="50" 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" img_width="92" img_height="92" }}</div>
<div class="col-deal col-lg-6 col-md-6">
<div class="slider-deal-w">{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default5.phtml"}}</div>
</div>
<div class="col-product2 col-lg-3 col-md-3">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/sidebar-product.phtml" product_limitation="3" title="<strong>Popular</strong> Products" 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" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0" product_readmore_display="0" product_description_display="0" img_width="92" img_height="92" }}</div>
</div>
</div>
<div class="box-content">{{block class="Magento\\Cms\\Block\\Block" block_id="banner5-1"}}</div>
<div class="box-content super-cate1">{{block class="Sm\SuperCategories\Block\SuperCategories" template="Sm_SuperCategories::sm/supercategories/default_home4.phtml" product_category="20" nbi_column1="3" product_limitation="12" nbi_rows="2" }}</div>
<div class="box-content super-cate2">{{block class="Sm\SuperCategories\Block\SuperCategories" template="Sm_SuperCategories::sm/supercategories/default_home4.phtml" product_category="118" nbi_column1="3" product_limitation="12" nbi_rows="2" }}</div>
<div class="box-content super-cate3">{{block class="Sm\SuperCategories\Block\SuperCategories" template="Sm_SuperCategories::sm/supercategories/default_home4.phtml" product_category="129" nbi_column1="3" product_limitation="12" nbi_rows="2" }}</div>
<div class="box-content">
<div class="testimonial-wrap full-wrapper ">
<div class="container">{{block class="Magento\\Cms\\Block\\Block" block_id="testimonials"}}</div>
</div>
</div>
<div class="listingtab-wrapper">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default_index4.phtml" display_title="1" title="<strong>Top</strong> selling" filter_type="categories" product_category="82,84,85,86" category_preload="82" margin="30" product_limitation="12" nb_column1="3" nb_column2="2" nb_column3="2" }}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-infos"}}
<div class="content-wrap3 full-wrapper">
<div class="container">
<div class="latest-blog-wrap">{{block class="Magento\\Cms\\Block\\Block" block_id="block-blog"}}</div>
</div>
</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="slider-brands"}}</div>
    

  •  Design Tab: Please click to see the  Backend Settings.
    • 


    

      

    • To set a default page for your Magento Site, in the Admin Panel you go to Stores>> Settings >>Configuration>>Web>>Default Pages. Please click to see the Backend Settings.
      • 

    • You need 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.2 Configure Megamenu 
    


    3.2.1 Horizontal Megamenu:
    

    Horizontal-mega-menu
    

      

    •  Sortable Categories Items Please click Here to view.
      • 

    

    Features
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Dropdown Features’: Please click Here to view.
      • 

      Copy and paste the following code into the Content field::
    <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="Home Style 3" href="{{store url="?___store=german&___from_store=default"}}">Home Style 3</a></li>
		<li><a title="Home Style 4" href="{{store url="?___store=argentina&___from_store=default"}}">Home Style 4</a></li>
		<li><a title="Home Style 5" href="{{store url="?___store=bolivia&___from_store=default"}}">Home Style 5</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 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="Header Type 3" href="{{store url="?___store=german&___from_store=default"}}">Header Type 3</a></li>
		<li><a title="Header Type 4" href="{{store url="?___store=argentina&___from_store=default"}}">Header Type 4</a></li>
		<li><a title="Header Type 5" href="{{store url="?___store=bolivia&___from_store=default"}}">Header Type 5</a></li>
	</ul>
	
	<ul class="item-home-store theme-color">
		<li class="title-menu-home">Color Styles</li>
		<li class="brown"><a title="Brown" href="{{store url="?___store=default&___from_store=french"}}">Brown</a></li>
		<li class="blue"><a title="Blue" href="{{store url="?___store=belgium&___from_store=default"}}">Blue</a></li>
		<li class="red"><a title="Red" href="{{store url="?___store=barbados&___from_store=default"}}">Red</a></li>
		<li class="orange"><a title="Orange" href="{{store url="?___store=vietnam&___from_store=default"}}">Orange</a></li>
		<li class="green"><a title="Green" href="{{store url="?___store=andorra&___from_store=default"}}">Green</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</a></li>
	</ul>
</div>
    
	

    Shop
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Group 1′: Please click Here to view.
      • 

    

      

    • Backend of ‘Accessories’ in ‘Group 1′: Please click Here to view.
      • 

    

    Note:The item named Categories having same level as Accessories could have same configuration.
    

      

    • Backend of ‘Group 2′: Please click Here to view.
      • 

      		Copy and paste the following code into the Content field::
    <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>
    
	

    Bedrooms
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

      

    • Backend of ‘Group 1- Categories’: Please click Here to view.
      • 

    

      

    • Backend of ‘Categories’ in ‘Group 1- Categories’: Please click Here to view.
      • 

    

      

    • Backend of ‘Featured Products’: Please click Here to view.
      • 

    

    		About Us
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    		Contact Us
    
Frontend Appearance 
    

      

    • Backend Settings: Please click Here to view.
      • 

    

    3.3 Configure Extensions
    

    The SM Furnicom front-page has been integrated with the extensions in the following list:
    


    In SM Furnicom Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM  to configure extensions as you want.
    

    3.3.1 SM Megamenu
    

      

        

          

        • Position: SM Megamenu
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Megamenu: Click Here 
          • 

        

      

    

    3.3.2 SM Image Slider
    

      

        

          

        • Position: SM Image Slider
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Image Slider: Click Here 
          • 

        

      

    

    3.3.3 SM Deals
    

      

        

          

        • Position: SM Deals
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Deals: Click Here 
          • 

        

      

    

    3.3.4 SM Basic Products 
    

      

        

          

        • Position: SM Basic Products
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Basic Products: Click Here 
          • 

        

      

    

    3.3.5 SM Listing Tabs
    

      

        

          

        • Position: SM Listing Tabs
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Listing Tabs: Click Here 
          • 

        

      

    

    3.3.5 SM Super Categories
    

      

        

          

        • Position: SM Super Categories
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Super Categories: Click Here 
          • 

        

      

    

    3.3.7 SM Quick View
    

      

        

          

        • Position: SM Quick View
          • 

        • Frontend Appearance
          • 

        

      

    

    

      

        

          

        • Backend of SM Quick View: Click Here 
          • 

        

      

    

    3.4 Configure Static Blocks
    

    The SM Furnicom front-page has the following static blocks in the theme:
    


    To create a new static block, go to Content>> Elements>> Blocks >> Add new block.
    

    

    Static Block: header-livechat
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Header Live chat” and Identifier * : “header-livechat”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="livechat"><a href="#"><img src="{{media url="wysiwyg/header-img/livechat.png"}}" alt="" /></a></div>
    

    

    Static Block: header-hotline
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Header hotline” and Identifier * : “header-hotline”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="hotline">
<p>Call our customer service at: <span>096-999-8386</span></p>
</div>
    

    

    Static Block: header-shipping
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Header Shipping” and Identifier * : “header-shipping”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="shipping"><em class="fa fa-truck"></em>
<div class="inner">
<p>Everyday Free Shipping</p>
& No Sales Tax</div>
</div>
    

    

    Static Block: header-socials
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Header Socials” and Identifier * : “header-socials”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="socials-wrap">	
	<ul>		
			<li class="li-social facebook-social">
				<a title="Facebook" href="https://www.facebook.com/MagenTech" target="_blank">
					<span class="fa fa-facebook icon-social"></span>					
				</a>
			</li>
			<li class="li-social twitter-social">
				<a title="Twitter" href="https://twitter.com/smartaddons" target="_blank">
					<span class="fa fa-twitter icon-social"></span>					
				</a>
			</li>
			<li class="li-social linkedin-social">
				<a title="Linkedin" href="#" target="_blank">
					<span class="fa fa-linkedin icon-social"></span>					
				</a>
			</li>
			<li class="li-social google-social">
				<a title="Google" href="#" target="_blank">
					<span class="fa fa-google-plus icon-social"></span>					
				</a>
			</li>
			<li class="li-social pinterest-social">
				<a title="Pinterest" href="#" target="_blank">
					<span class="fa fa-pinterest icon-social"></span>					
				</a>
			</li>				
	</ul>
</div>
    

    

    Static Block: pretext-deal
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Pretex Deal custom “ and Identifier * : “pretext-deal”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="pretext-inner">
<p>Mauris ut tincidunt nisi, id auctor libero. Etiam aliquet felis et consectetur faucibus. Praesent aliquam, lec tempus consequat,deserunt jowl prosciutto boudin.</p>
<div class="top-categories"><a href="#"><img src="{{media url="wysiwyg/home-page-image/cat1.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/home-page-image/cat2.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/home-page-image/cat3.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/home-page-image/cat4.png"}}" alt="" /></a></div>
</div>
    

    

    Static Block: banner1-1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 1 – Banner 1″ and Identifier * : “banner1-1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="banner1-w">
<div class="banner banner1-1"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home1/banner1-1.jpg"}}" alt="" /></a></div>
<div class="banner banner1-2"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home1/banner1-2.jpg"}}" alt="" /></a></div>
<div class="banner banner1-3"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home1/banner1-3.jpg"}}" alt="" /></a></div>
</div>
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 1 – banner infomation” and Identifier * : “banner-infos”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="banner-infos">
<div class="banner-info banner-info1"><img src="{{media url="wysiwyg/home-page-image/icon1.png"}}" alt="" />
<div class="banner-cont"><a href="#" data-hover="FREE SHIPPING">FREE SHIPPING</a>
<p>Vestibulum dolor purus porta</p>
</div>
</div>
<div class="banner-info banner-info2">
<div class="inner"><img src="{{media url="wysiwyg/home-page-image/icon2.png"}}" alt="" />
<div class="banner-cont"><a href="#" data-hover="MONEY BACK GUARANTEE">MONEY BACK GUARANTEE</a>
<p>Vestibulum dolor purus porta</p>
</div>
</div>
</div>
<div class="banner-info banner-info3"><img src="{{media url="wysiwyg/home-page-image/icon3.png"}}" alt="" />
<div class="banner-cont"><a href="#" data-hover="24 HOURS SUPPORT">24 HOURS SUPPORT</a>
<p>Vestibulum dolor purus porta</p>
</div>
</div>
</div>
    

    

    Static Block: testimonials
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – testimonials” and Identifier * : “testimonials”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="testimonials">
<div class="testimonial-slider">
<div class="item"><img src="{{media url="wysiwyg/testimonial/client1.png"}}" alt="" />
<div class="item-inner">
<p class="client-des">Fusce lorem ante, condientum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus. Pellentesque commodo posuere maximus. Phasellus pellentesque pellentesque.</p>
<p class="client-name"><strong>Anna Kendrick</strong> - Designer</p>
</div>
</div>
<div class="item"><img src="{{media url="wysiwyg/testimonial/client2.png"}}" alt="" />
<div class="item-inner">
<p class="client-des">Consectetur adipisicing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna. Sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<p class="client-name"><strong>Abraham</strong> - Marketing</p>
</div>
</div>
<div class="item"><img src="{{media url="wysiwyg/testimonial/client3.png"}}" alt="" />
<div class="item-inner">
<p class="client-des">Sed do eiusmod tempor incididunt ut labore et dolore magna, lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<p class="client-name"><strong>Anna Kendrick</strong> - CEO</p>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function($) {
		var owl_testimonial = $(".testimonial-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>
    

    

    Static Block: static-content
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 1 –  Hot categories” and Identifier * : “static-content”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="static-content-wrap">
<div class="static-content static-content1">
<div class="h-cont content1-1 h-margin"><img src="{{media url="wysiwyg/home-page-image/home1/banner2-0.jpg"}}" alt="" />
<div class="inner">
<div class="title-home">
<h2>Dining room</h2>
</div>
<ul>
<li><a href="#">Large Coffee Tables</a></li>
<li><a href="#">Small Coffee Tables</a></li>
<li><a href="#">Coffee Table sets</a></li>
<li><a href="#">End Tables</a></li>
<li><a href="#">Console Tables</a></li>
<li><a href="#">Set Of Tables</a></li>
</ul>
</div>
</div>
<div class="h-cont content1-2"><img src="{{media url="wysiwyg/home-page-image/home1/banner2-1.jpg"}}" alt="" />
<div class="inner">
<div class="title-home">
<h2>Living room</h2>
</div>
<ul>
<li><a href="#">Coffee Table sets</a></li>
<li><a href="#">End Tables</a></li>
<li><a href="#">Console Tables</a></li>
<li><a href="#">Set Of Tables</a></li>
</ul>
</div>
</div>
</div>
<div class="static-content static-content2">
<div class="content2-1 h-margin">
<div class="title-home">
<div class="title-home">
<h2><strong>Hot</strong> Categories</h2>
</div>
<div class="desc">Duis euismod eu nibh at pharetra. Vivamus placerat ac metus et placerat. Nulla molestie massa id est posuere, maximus hendrerit est rhoncus.</div>
<a class="button btn-viewall" href="#"> View all categories </a></div>
</div>
<div class="h-cont content2-2"><img src="{{media url="wysiwyg/home-page-image/home1/banner2-2.jpg"}}" alt="" />
<div class="inner">
<div class="title-home">
<h2>Bed room</h2>
</div>
<ul>
<li><a href="#">Nightstands</a></li>
<li><a href="#">Beds</a></li>
<li><a href="#">Headboards</a></li>
<li><a href="#">Chests & Dressers</a></li>
<li><a href="#">Nightstands</a></li>
<li><a href="#">Bedroom Sets</a></li>
</ul>
</div>
</div>
</div>
<div class="static-content static-content3">
<div class="h-cont content3-1 h-margin"><img src="{{media url="wysiwyg/home-page-image/home1/banner2-3.jpg"}}" alt="" />
<div class="inner">
<div class="title-home">
<h2>Reading room</h2>
</div>
<ul>
<li><a href="#">Small Coffee Tables</a></li>
<li><a href="#">Coffee Table sets</a></li>
<li><a href="#">End Tables</a></li>
<li><a href="#">Console Tables</a></li>
<li><a href="#">Set Of Tables</a></li>
</ul>
</div>
</div>
<div class="h-cont content3-2"><img src="{{media url="wysiwyg/home-page-image/home1/banner2-4.jpg"}}" alt="" />
<div class="inner">
<div class="title-home">
<h2>Bathroom</h2>
</div>
<ul>
<li><a href="#">Bathroom Faucets</a></li>
<li><a href="#">Bathroom Mirrors</a></li>
<li><a href="#">Bathroom Sinks</a></li>
<li><a href="#">Bathroom Vanities</a></li>
<li><a href="#">Showers</a></li>
</ul>
</div>
</div>
</div>
</div>
    

    

    Static Block: block-blog
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom Blog” and Identifier * : “block-blog”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="latest-blog-wrap">
<div class="title-home">
<h2><strong>Latest</strong> Blog</h2>
</div>
<div class="latest-blog">
<div class="item item-1">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Praesent quam ligula sate" href="#"> <img src="{{media url="wysiwyg/blog/blog-1.jpg"}}" alt="Image Blog" /> </a>
<div class="date-blog">
<div class="big-txt">06</div>
<div class="normal-txt">Mar</div>
</div>
</div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Praesent quam ligula sate</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More <em class="fa fa-angle-double-right"></em> </a></div>
</div>
</div>
</div>
<div class="item item-2">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Ut nonummy rutrum turpis" href="#"> <img src="{{media url="wysiwyg/blog/blog-2.jpg"}}" alt="Image Blog" /> </a>
<div class="date-blog">
<div class="big-txt">08</div>
<div class="normal-txt">Mar</div>
</div>
</div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Ut nonummy rutrum turpis</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More <em class="fa fa-angle-double-right"></em> </a></div>
</div>
</div>
</div>
<div class="item item-3">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Pellentesque orci lacus commodo" href="#"> <img src="{{media url="wysiwyg/blog/blog-2.jpg"}}" alt="Image Blog" /> </a>
<div class="date-blog">
<div class="big-txt">15</div>
<div class="normal-txt">Mar</div>
</div>
</div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Pellentesque orci lacus commodo</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More <em class="fa fa-angle-double-right"></em> </a></div>
</div>
</div>
</div>
<div class="item item-4">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Morbi in turpis vel ante feugiat placerat" href="#"> <img src="{{media url="wysiwyg/blog/blog-4.jpg"}}" alt="Image Blog" /> </a>
<div class="date-blog">
<div class="big-txt">16</div>
<div class="normal-txt">Mar</div>
</div>
</div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Morbi in turpis vel ante feugiat placerat</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More <em class="fa fa-angle-double-right"></em> </a></div>
</div>
</div>
</div>
</div>
</div>
    

    

    Static Block: brands-tab
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 1- brands tab” and Identifier * : “brands-tab”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="brands-tab"><!-- Nav tabs -->
<ul class="nav-brand-tabs first">
<li class="brands-title">
<h2><strong>Featured</strong> Brands</h2>
</li>
<li class="br1 active-fix active"><a href="#brand1" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br1.jpg"}}" alt="" /></a></li>
<li class="br2"><a href="#brand2" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br2.jpg"}}" alt="" /></a></li>
<li class="br3"><a href="#brand3" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br3.jpg"}}" alt="" /></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="brand1" class="tab-pane fade in active"><img src="{{media url="wysiwyg/brand/brand1.jpg"}}" alt="" /></div>
<div id="brand2" class="tab-pane fade"><img src="{{media url="wysiwyg/brand/brand2.jpg"}}" alt="" /></div>
<div id="brand3" class="tab-pane fade"><img src="{{media url="wysiwyg/brand/brand3.jpg"}}" alt="" /></div>
<div id="brand4" class="tab-pane fade"><img src="{{media url="wysiwyg/brand/brand4.jpg"}}" alt="" /></div>
<div id="brand5" class="tab-pane fade"><img src="{{media url="wysiwyg/brand/brand5.jpg"}}" alt="" /></div>
<div id="brand6" class="tab-pane fade"><img src="{{media url="wysiwyg/brand/brand6.jpg"}}" alt="" /></div>
</div>
<!-- Nav tabs -->
<ul class="nav-brand-tabs">
<li class="br4"><a href="#brand4" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br4.jpg"}}" alt="" /></a></li>
<li class="br5"><a href="#brand5" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br5.jpg"}}" alt="" /></a></li>
<li class="br6"><a href="#brand6" data-toggle="tab"><img src="{{media url="wysiwyg/brand/br6.jpg"}}" alt="" /></a></li>
</ul>
</div>
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Footer support” and Identifier * : “footer-support”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <p>NEED HELP? CALL OUR AWARD-WINNING</p>
<p><span>SUPPORT TEAM 24/7 AT (844) 555-8386</span></p>
    

    

    Static Block: spotlight1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Footer support” and Identifier * : “spotlight1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="spotlight spotlight1 col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="block-title">Our Services</div>
<div class="block-cont">
<ul>
<li><a href="#">Delivery Information</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Shipping & Refund</a></li>
<li><a href="#">Specials</a></li>
</ul>
</div>
</div>
    

    

    Static Block: spotlight2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Footer col 2″ and Identifier * : “spotlight2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="spotlight spotlight2 col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="block-title">Extras</div>
<div class="block-cont">
<ul>
<li><a href="{{store url="contact-us.html"}}">Contact us</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Brands</a></li>
<li><a href="#">Gift Voucher</a></li>
</ul>
</div>
</div>
    

    

    Static Block: spotlight3
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Footer col 3″ and Identifier * : “spotlight3″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="spotlight spotlight3 col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="block-title">My account</div>
<div class="block-cont">
<ul>
<li><a href="{{store url="sales/order/history/"}}">My orders</a></li>
<li><a href="{{store url="catalog/product_compare/index/"}}">My Compare</a></li>
<li><a href="{{store url="customer/address/new/"}}">My addresses</a></li>
<li><a href="#">My personal info</a></li>
</ul>
</div>
</div>
    

    

    Static Block: spotlight4
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Footer col 4″ and Identifier * : “spotlight4″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="spotlight spotlight4 col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="inner">
<div class="block-title">Contact us</div>
<div class="block-cont">
<div class="contactus">
<p class="first"><em class="fa fa-map-marker"></em><span>Megnor Comp Pvt Limited, Trade Centre, Udhana Darwaja</span></p>
<p><em class="fa fa-mobile"></em><span>(91)-261 3023333</span></p>
<p><em class="fa fa-envelope"></em><span>demo@furnicom.com</span></p>
</div>
<div class="payment"><a href="#"><img src="{{media url="wysiwyg/payment/pay1.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/payment/pay2.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/payment/pay3.png"}}" alt="" /></a> <a class="pay4" href="#"><img src="{{media url="wysiwyg/payment/pay4.png"}}" alt="" /></a> <a class="pay5" href="#"><img src="{{media url="wysiwyg/payment/pay5.png"}}" alt="" /></a> <a class="pay5" href="#"><img src="{{media url="wysiwyg/payment/pay6.png"}}" alt="" /></a></div>
</div>
</div>
</div>
    

    

    Static Block: apps
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Header Socials” and Identifier * : “apps”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="apps">
<div class="footer-title">Download Our App</div>
<div class="app-cont"><a href="#"><img src="{{media url="wysiwyg/payment/app1.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/payment/app2.png"}}" alt="" /></a></div>
</div>
    

    

    Static Block: banner2-1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 2 – Banner 1″ and Identifier * : “banner2-1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="banner1-w">
<div class="banner banner1-1"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner1-1.jpg"}}" alt="" /></a></div>
<div class="banner banner1-2"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner1-2.jpg"}}" alt="" /></a></div>
<div class="banner banner1-3"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner1-3.jpg"}}" alt="" /></a></div>
</div>
    

    

    Static Block: banner2-2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 2 – Banner 2″ and Identifier * : “banner2-2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="banner banner2"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home2/banner2.jpg"}}" alt="" /></a></div>
    

    

    Static Block: static-categories2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 2 – static categories” and Identifier * : “static-categories2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="static-categories">
<div class="static-cate static-cate-1"><a href="{{store url="> <span>Living room</span> </a></div>
<div class="static-cate static-cate-2"><a href="{{store url="> <span>Office</span> </a></div>
<div class="static-cate static-cate-3"><a href="{{store url="> <span>Armchair</span> </a></div>
<div class="static-cate static-cate-4"><a href="{{store url="> <span>Dinning room</span> </a></div>
<div class="static-cate static-cate-5"><a href="{{store url="> <span>Shelf</span> </a></div>
<div class="static-cate static-cate-6"><a href="{{store url="> <span>Bedroom</span> </a></div>
<div class="static-cate static-cate-7"><a href="{{store url="> <span>Sofa</span> </a></div>
<div class="static-cate static-cate-8"><a href="{{store url="> <span>Wall decor</span> </a></div>
<div class="static-cate static-cate-9"><a href="{{store url="> <span>Nightstand</span> </a></div>
</div>
    

    

    Static Block: blog-home2
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 2 – Blog” and Identifier * : “blog-home2″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="latest-blog-wrap2">
<div class="title-home">
<h2><strong>Latest</strong> Blog</h2>
</div>
<div class="latest-blog">
<div class="first-post">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Sed ut perspiciatis unde omnis" href="#"><img src="{{media url="wysiwyg/blog/blog-1-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Sed ut perspiciatis unde omnis</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste na...</div>
</div>
</div>
</div>
<div class="list-post">
<div class="item item-1">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Praesent quam ligula sate" href="#"><img src="{{media url="wysiwyg/blog/blog-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Praesent quam ligula sate</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id e...</div>
</div>
</div>
</div>
<div class="item item-2">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Ut nonummy rutrum turpis" href="#"><img src="{{media url="wysiwyg/blog/blog-2.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Ut nonummy rutrum turpis</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id e...</div>
</div>
</div>
</div>
<div class="item item-3">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Pellentesque orci lacus commodo" href="#"><img src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<h2 class="postTitle"><a href="#">Pellentesque orci lacus commodo</a></h2>
<div class="postContent">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id e...</div>
</div>
</div>
</div>
</div>
</div>
</div>
    

    

    Static Block: custom-slider-img
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 3 – custom slider images” and Identifier * : “custom-slider-img”
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="custom-slider-img-w">
<div class="custom-slider-img">
<div class="item"><a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide1.jpg"}}" alt="" /></a></div>
<div class="item"><a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide2.jpg"}}" alt="" /></a></div>
<div class="item"><a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide3.jpg"}}" alt="" /></a></div>
<div class="item"><a href="#"><img src="{{media url="wysiwyg/slider-home/home-v3/slide4.jpg"}}" alt="" /></a></div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function($) {
		var owl_testimonial = $(".custom-slider-img");
		owl_testimonial.owlCarousel({
			
			responsive:{
				0:{
					items:1
				},
				480:{
					items:1
				},
				768:{
					items:1
				},
				992:{
					items:2
				},
				1200:{
					items:2
				}
			},

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

		});	  
	});
// ]]></script>
</div>
    

    

    Static Block: banner4-1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 4 – banner 1″ and Identifier * : “banner4-1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="banner4-1">
<div class="banner banner41 col-lg-8 col-md-8 col-sm-8 col-xs-12 no-padding"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/banner4-1.jpg"}}" alt="" /></a></div>
<div class="banner banner42 col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/banner4-2.jpg"}}" alt="" /></a></div>
</div>
    

    

    Static Block: pretext-deal4
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – Pretex Deal custom – home 4″ and Identifier * : “pretext-deal4″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="pretext-inner">
<p>Fusce lorem ante, condimentum in massa, posuere bibendum. Maecenas euismod vulputate eu rhoncus.</p>
<div class="top-categories"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/cat1.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/cat2.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/cat3.png"}}" alt="" /></a> <a href="#"><img src="{{media url="wysiwyg/home-page-image/home4/cat4.png"}}" alt="" /></a></div>
</div>
    

    

    Static Block: banner5-1
    

    

    To create the static block, go to Content>> Elements>> Blocks with Title * : “Furnicom – home 5 –  banner 1″ and Identifier * : “banner5-1″
    

    Frontend Appearance 
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    Copy and paste the following code into the content tab of this static block: 
    <div class="banner5-1">
<div class="banner banner51 col-lg-4 col-md-4 no-padding"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home5/banner5-1.jpg"}}" alt="" /></a></div>
<div class="banner banner52 col-lg-8 col-md-8 no-padding"><a href="#"><img src="{{media url="wysiwyg/home-page-image/home5/banner5-2.jpg"}}" alt="" /></a></div>
</div>
    

    3.5 How To Edit Copyright in Admin Panel
    

    Frontend Appearance
    

    

    In SM Furnicom Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Furnicom >> Advanced to configure this theme’s copyright.
    

    
Edit the code here: 
    SM Furnicom © 2016
Demo Store. All Rights Reserved. Designed by
<a title="MagenTech.Com" target="_blank" href="http://www.MagenTech.Com">MagenTech.Com</a>
    

    3.6 How To Customize the Social symbols in admin panel
    

    Frontend Appearance
    

    

    In SM Furnicom Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM Furnicom >> Socials.
    

    

    3.7 Newsletter
    

    Frontend Appearance 
    

    In your Website’s Directory, go to \app\design\frontend\Sm\furnicom\Magento_Newsletter\templates folder. In this folder, you could open the file named subscribe-footer.phtml by your editor program, to change the text such as: Enter your email address, Subscribe, please find these words and edit as you want.
    

      

    • Backend Setting: Please click Here to view.
      • 

    

    

    

    

    4SUPPORT
    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                                        
    
                       
    
                         
                
    

                       
    
                     
    
                     
    ↧
    
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    How to make product feature with Woocommerce
    
                     
    
                                              June 7, 2016, 1:16 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    1. In your WordPress dashboard browse to the products header and then to the products category.
    

    woofeatured_1
    

    2. On your list of products on the right hand side simply click the star icon to set the product as a featured product.
    

    woofeatured
    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    How To: Change Your Theme Favicon
    
                     
    
                                              June 7, 2016, 1:40 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    Favicons are the small icons for your website that are typically displayed in your web browser.
    

    Favicons can be created using various image editing software. Easier solutions involve generating a favicon from an image using a website such as this, or creating your own favicon using Faviconer. If you would like to change the favicon of your theme, follow these instructions:
    

      

    1. Log in to the server of your site using an FTP client such as FileZilla, or within your hosting options.
      2. 

    2. Locate the images folder within your themes directory. The path should be similar to wp-content > themes > sw_theme> assets>img.
      3. 

    3. Upload your favicon.ico file in to the images directory, overwriting the existing favicon file.
      4. 

    4. You’re done!
      5. 

    

    Note: Favicons are registered deep in your browsers cache. So you may not see the change right away unless your browser cache is cleared and/or restarted.
    

                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                                    
                                                                                                                                                                                                                                                                          
                                                                            
                                                                                                                                                                                                                     
                   
    
                     
                     
                   
    
                   
    

                     
                                        
    

                   
                   
    
                                          
    SP Paco
    
                     
    
                                              June 8, 2016, 3:32 am
                     
    

                     
                     

                     
                     
                                          
                     
                                          
                     
                   
    

                   
                   
    

                     
                     
    
                       
                       
    
                         
                              
                         

                          
                           $
                         

                         
    
                            
                               
                           
                           0
                         
    

                         
    
                            
                               
                           
                           0
                         
    

                         
                               
                         

                         
                                
                         
                       
    
                     
    
    
                                                               
                     
                     
    
                       
    
                         
    View demoMore detail
    

    

    1GETTING STARTED 
    

    

    

    1.1 Introduction
    

    

    

    Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
    

    This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read this document throughtly if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.
    

    

    

    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 import the theme/module file to your server due to the maximum upload and PHP memory limit, 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 not familiar with Prestashop, please read its guide first: http://doc.prestashop.com/display/PS16/Getting+Started

    

    

    

    2INSTALLATION 
    

    

    

    There are two ways to install SP Paco Theme
    

      

    • Quickstart Installation: sp_paco_quickstart_p16_v1.0.0.zip . By using this package, you will set the theme exactly like our Demo with sample data.
      • 

    • Manual Installation : Include of Theme layout Installation Packages. Please unzip the package: sp_paco_template_package.zip and you would see the following folders:

        

      • module folder
        • 

      • sp_paco_template_p16_v1.0.0.zip file
        

        • 

      

      • 

    

    

    

    2.1 Quickstart Installation
    

    

    We provide 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 of SP Paco theme
      • 

    • Step 2: Extract the downloaded package named “sp_paco_quickstart_p16_v1.0.0.zip” in your localhost (or your hosting) folder. 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 these steps 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. 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 click “Create” button.
    

    

    When the database is created successfully, copy and paste its name into the “Database name” field, then click the “Test your database connection now!” button to make sure that the entered settings are correct. If they are, you will see a Database is connected message. After that, you could click the “Next” button to move to next steps.
    

    

      

        

      • Finish installation: This process could take a few minutes
        • 

      

    

    

    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 the cache. In your back office, please go to ADVANCED PARAMETERS >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.
    

    

    

    SP Paco Theme Installation
    

    

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

      

    • module folder: contain of the smartblog.zip file, smartblogcategories.zip file, smartbloghomelatestnews.zip file, smartblogrecentposts.zip file
      

      • 

    • and the sp_paco_template_p16_v1.0.0.zip file.
      • 

    

    STEP 1: Install smartblog.zip , smartblogcategories.zip , smartbloghomelatestnews.zip , smartblogrecentposts.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  “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 click “Install” button to run it.
    

    

    5. When a pop-up window displays, please click “Proceed with the installation” button.
    

    

    6. Finally, Module(s) installed successfully.
    

    Note: Do the same with the others.
    

    STEP 2: Install the “sp_paco_template_p16_v1.0.0.zip” file. 
    

    1. Login to your Prestashop admin panel and navigate to Preferences -> Themes. At the top of the page click the Add a new theme button.
    

    

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


    
3.  When your choice is successfully validated , a notice will be showed like the following image:
    


    
4.  In the section named as Select a theme for your “[name]” shop, move your mouse cursor over SP Paco‘s thumbnail and select  Use this theme to replace your current theme with SP Paco theme.
    
5. After that, a list of the installed/disabled modules will be showed out, please click “Save” to install modules that were imported along with the theme.
    

    

    6. Finally, please click “Finish” to end the process.
    

    

    

    

    

    3SP THEME CONFIGURATION 
    

    

    

    3.1 General Settings
    

    

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

    

    2. In the SP Theme Settings, choose “General” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.2 Layout Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Layout” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.3 Fonts
    

    

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

    

    2. In the SP Theme Settings, choose “Fonts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    Note: Please copy and paste the following line into Font Selector tab:
    body, #attributes .attribute_list select, h5.product-name, .pb-right-column h1.product_name
    

    

    

    3.4 Category Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Category Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.5 Product Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.6 Bonus Pages
    

    

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

    

    2. In the SP Theme Settings, choose “Bonus Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.7 Advanced Settings
    

    

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

    

    2. In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    

    

    3.8 Social Accounts
    

    

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

    

    2. In the SP Theme Settings, choose “Social Accounts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
    

    


    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.10 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 image size types that suit your products best.
    

    

    2. Image quality - You can set image quality in 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 used in your site. Select option then click Regenerate thumbnails button.
    

    


    Frontend Appearance:
    

    

    To edit Copyright, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Copyright”in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    3.12 Edit Payment
    

    

    Frontend Appearance:
    

    

    To edit Payment, please follow these steps:
    
1. In your Prestashop Admin Dashboard, navigate to Modules and Services >> Modules and Services >> go to MODULES LIST section, search for “SP Theme Configuration” module then click on Configure.
    

    

    2. In the SP Theme Settings, choose “General” to configure the parameter named “Upload your own payment image”  in this section. After finishing, you could go to the front-end to see the changes.
    

    

    

    3.13 Edit Pop-up
    

    

    Frontend Appearance:
    

    

    To edit this pop-up, please follow these steps:
    
1. Change the image:
    
In your Website’s Directory, go to themes\sp_paco\css\modules\spblocknewsletter\img folder. To change the image in this pop-up, you could replace our sample image named bg_popup.jpg by your image with the same name as our sample image.
    

    
2. Change the text:
    
In your Website’s Directory, go to themes\sp_paco\modules\spblocknewsletter folder. To change the text in this pop-up, in this folder, you could open the file named blocknewsletterpopup.tpl by your editor program.
    
Find and change the following text in this file as you want:
    'Subscribe to the Paco mailing list to receive updates on new arrivals, special offers and other discount information.' mod='spblocknewsletter'
    

    
3.  After finishing, you could go to the front-end to see the changes.

    

    

    

    4SP MEGA MENU CONFIGURATION 
    

    

    

    4.1 displayMenu: SP Mega Menu
    

    


    
1. Navigate to Modules -> Modules >> look for SP Mega Menu >> Click the Configure button to access the module configuration page.
    

    
2. In the SP Mega Menu Panel, you could configure  Add New Module by click on the button like the following image:
    

    
3. In the configuration page of new module, you could configure  General Options as follows
    

    
4. In the configuration page of new module, you could configure  Menu Information as follows
    

    
5.  In order to add menu items, to add items as you want, you need to click this button.
    

    
6. Menu list of Mega Menu You need to look at the menu list to configure easily.
    

    
7.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Mega Menu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Shop 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Iphone Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Sony Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Samsung Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Lg Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Nokia Collection’: Please click Here to view.
      • 

    

    Our Brands
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘HP Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Oppo Collection’ in ‘Our Brands’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Featured product’ in ‘Our brands’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘HTC Colletion’: Please click Here to view.
      • 

    

    Occasion 
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Lips Submenu 1′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Lips Submenu 2′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Lips Submenu 3′: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Lips Submenu 4′: Please click Here to view.
      • 

    

    Blog
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Blog Listing Grid’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Blog Small Image’: Please click Here to view.
      • 

    

    About Us
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Contact
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    	Copy and paste the following code into the URL Tab:
    index.php?controller=contact
    

      

    • Backend Settings of Item ‘Contact Page 1′ : Please click Here to view.
      • 

      	Copy and paste the following code into the URL Tab:
    index.php?controller=contact?SP_contactStyle=contact-v1
    
	

    Note: You could do the same with these items having same level in this menu: Contact Page 2, Contact Page 3, Contact Page 4. However, the items’ URLs are different.
    

      

    • Copy and paste the following code into the URL Tab of Contact Page 2:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v2
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 3:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v3
      
	
      • 

    • 
	Copy and paste the following code into the URL Tab of Contact Page 4:
      
	
      index.php?controller=contact?SP_contactStyle=contact-v4
      

    

    

    

    

    

    

    4.2 displayVerticalMenu: SP Vertical Mega Menu
    

    

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

    
2. In the SP Vertical Megamenu Panel, you could configure General Options as follows
    

    
3. In the SP Vertical Megamenu Panel, you could configure  Menu Information as follows
    

    
4.  In order to add menu items, to add items as you want, you need to click this button.
    

    
5. Menu list of Vertical Megamenu You need to look at the menu list to configure easily.
    

    
6.  To configure each item, you need to click “Edit” button as follows:
    

    
Go Here to readmore about the SP Vertical Megamenu module.
    

    Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.
    

    Iphone Collection
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Apple – Iphone’: Please click Here to view.
      • 

      Note: Do the same with item ‘Lenovo’, ‘Samsung’, ‘Masstel’
      

    

      

    • Backend Settings of Item ‘Offical Cosme-decom’ in ‘Apple – Iphone’: Please click Here to view.
      • 

      Note: Do the same with item ‘Lady Dior’, ‘Chests & Dressers’, ‘Claritas Est Etiam’ and ‘Quisque ultrices’
      

    

      

    • Backend Settings of Item ‘Pellentesque dignis’ in ‘Lenovo’: Please click Here to view.
      • 

      Note: Do the same with item ‘Fusce mollis’, ‘Nam suere’, ‘Etiam quam’ and ‘Aliquam felis’
      

    

      

    • Backend Settings of Item ‘Catalog Product 1′ in ‘Samsung’: Please click Here to view.
      • 

      Note: Do the same with item ‘Catalog Product 2′, ‘Catalog Product 3′, ‘Catalog Product 4′ and ‘Catalog Product 5′
      

    

      

    • Backend Settings of Item ‘Marigold Flowers’ in ‘Masstel’: Please click Here to view.
      • 

      Note: Do the same with item ‘Hyacinth Flowers’, ‘Sunflower’, ‘Narcissus Flowers’ and ‘Health Bell’
      

    

      

    • Backend Settings of Item ‘Image’: Please click Here to view.
      • 

      	Copy and paste the following code into the content: 
    &ltp&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_paco/themes/sp_paco/img/cms/image-thum-1.jpg" alt="" /&gt&lt/p&gt
    


      

    • Backend Settings of Item ‘Image 2′: Please click Here to view.
      • 

      	Copy and paste the following code into the content: 
    &ltp&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_paco/themes/sp_paco/img/cms/image-thum-2.jpg" alt="" /&gt&lt/p&gt
    


    Lg Collection
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Maybelin Face’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Tulip’ in ‘Maybelin Face’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Pansy’ in ‘Maybelin Face’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Lily’ in ‘Maybelin Face’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Mum’ in ‘Maybelin Face’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Lenovo’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Glaliolus’ in ‘Lenovo’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Orchild’ in ‘Lenovo’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Violet’ in ‘Lenovo’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Cherry Blossom’ in ‘Lenovo’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Sports’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Night Lady’ in ‘Sports’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Wild Flowers’ in ‘Sports’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Rose Mallow’ in ‘Sports’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Tuberose’ in ‘Sports’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Running’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Peony’ in ‘Running’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Phoenix’ in ‘Running’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Flower Narcissus’ in ‘Running’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Milk Flower’ in ‘Running’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Airconditioner’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Hebent’ in ‘Airconditioner’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Gaming’ in ‘Airconditioner’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘NutriBullet’ in ‘Airconditioner’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Etiam quam’ in ‘Airconditioner’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Brands Car’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Mercedes’ in ‘Brands Car’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Volvo’ in ‘Brands Car’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Porche’ in ‘Brands Car’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Kia Morning’ in ‘Brands Car’: Please click Here to view.
      • 

    

    Sony Collection
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Auto Tools’ in ‘Sony Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Habent’ in ‘Sony Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Chests & Dressers’ in ‘Sony Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘MD Formulations’ in ‘Sony Collection’: Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘NeoStrata’ in ‘Sony Collection’: Please click Here to view.
      • 

    

    Samsung Collection
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Coolpad
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Blackberry
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

      

    • Backend Settings of Item ‘Blackberry Enterprise’ in ‘Blackberry’: Please click Here to view.
      • 

      Note: Do the same with the item:‘Blackberry Smartphone’.
      

    

      

    • Backend Settings of Item ‘Western Digital’ in ‘Blackberry Enterprise’: Please click Here to view.
      • 

      Note: Do the same with item:‘Toshiba’, ‘Seagate’,'Hitachi’,'Est Etiam’,'Paula Deen’, ‘Flower Orchild’.
      

    

      

    • Backend Settings of Item ‘Gothica Littera’ in ‘Blackberry Smartphone’: Please click Here to view.
      • 

      Note: Do the same with the item:‘Place Decorative’, ‘Video & Audio’, ‘Sofa engineer’, ‘Smart TVs’, ‘Revere Cookware’ and ‘Moto Sports’.
      

    

      

    • Backend Settings of Item ‘Image Feature’: Please click Here to view.
      • 

      Copy and paste the following code into the content: 
    &ltp&gt&ltimg src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_paco/themes/sp_paco/img/cms/blackberry.jpg" alt="blackberry" /&gt&lt/p&gt
    


    Philips
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Infocus
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Electronics
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    Computer
    
Frontend Appearance 
    

      

    • Backend Settings : Please click Here to view.
      • 

    

    


    

    5EXTENSIONS CONFIGURATION 
    

    

    

    5.1 SP Paco Layout 1
    

    

    home-default
    

    display CustomHTML1
    

    

    SP Custom HTML – Contact Html
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv&gtContact us 24/7: +44 573 222 7439     |    Paco Store, Portland Street, Manchester City, Manchester&lt/div&gt
    

    display Customhtml2
    

    

    SP Custom HTML – Top Social
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltul class="inline-block"&gt
&ltli&gt&lta href="https://www.facebook.com/SmartAddons.page" class="facebook" target="_blank"&gt&lti class="fa fa-facebook"&gt&lt/i&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta href="https://www.pinterest.com/smartaddons/" class="pinterest" target="_blank"&gt&lti class="fa fa-pinterest"&gt&lt/i&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta href="https://twitter.com/smartaddons" class="twitter" target="_blank"&gt&lti class="fa fa-twitter"&gt&lt/i&gt&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#" class="tumblr" target="_blank"&gt&lti class="fa fa-tumblr"&gt&lt/i&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
    

    

    SP Search Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Search Pro” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

     displayCart
    

    

    SP Cart Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Cart Block” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayUserinfo
    

    

    SP User Info Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.
    

    

    displayTopNav
    

    

    1. SP Block Currencies
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.
    

    

    2. SP Block Languages
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: To add language as you want. For example: To 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:
    

    

    displaySlideShow1
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 1:  Please click Here to view
      
		Copy and paste the following code into the source code field: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtLG V10&ltbr /&gtDIAMON&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    • Sample 2: Please click Here to view
      
		Copy and paste the following code into the source code field: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtSS G7&ltbr /&gtGOLD&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    • Sample 3: Please click Here to view
      
		Copy and paste the following code into the source code field: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtSony&ltbr /&gtSmartwatch&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    

    display CustomHTML4
    

    

    SP Custom HTML – Banner Top 1
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="banner-1 clearfix"&gt
&ltdiv class="group-1"&gt
&ltdiv class="col-md-6 col-sm-12 icon"&gt
&ltdiv class="item"&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner1-1.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="text"&gt
&lth4 class="origin"&gtApple Store&lt/h4&gt
&lth3 class="title"&gtIphone&lt/h3&gt
&lta class="more" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="item nth_2"&gt
&ltdiv class="text"&gt
&lth4 class="origin"&gtSamsung Store&lt/h4&gt
&lth3 class="title"&gtGalaxy&lt/h3&gt
&lta class="more" href="#"&gtShop Now&lt/a&gt&lt/div&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner1-2.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-md-6 col-sm-12 icon"&gt
&ltdiv class="item_2"&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner1-3.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="text_2"&gt
&lth3 class="title_2"&gtFind The Balance In Life&lt/h3&gt
&ltdiv class="origin_2"&gtWith Sony SmartWear and Accessories&lt/div&gt
&lt/div&gt
&ltdiv class="more"&gt
&lth5&gt&lta class="more" href="#"&gtBuy Now&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
&lt!--end icon--&gt&lt/div&gt
&lt!--end group-1--&gt&lt/div&gt
&ltdiv class="group-2"&gt
&ltdiv class="col-md-6 col-sm-12 icon"&gt
&ltdiv class="item_2"&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner1-4.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="text_2"&gt
&lth3 class="title_2"&gtFind The Balance In Life&lt/h3&gt
&ltdiv class="origin_2"&gtWith Sony SmartWear and Accessories&lt/div&gt
&lt/div&gt
&ltdiv class="more"&gt
&lth5&gt&lta class="more" href="#"&gtBuy Now&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
&lt!--end icon--&gt&lt/div&gt
&ltdiv class="col-md-6 col-sm-12 icon"&gt
&ltdiv class="item_3"&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner1-5.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&lta class="more" href="#"&gtShop Now&lt/a&gt &lt!--end item--&gt&lt/div&gt
&ltdiv class="item_3 nth_2"&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner1-6.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&lta class="more" href="#"&gtShop Now&lt/a&gt &lt!--end item--&gt&lt/div&gt
&lt!--end icon--&gt&lt/div&gt
&lt!--end group-2--&gt&lt/div&gt
&lt/div&gt
    	
    

    displayExtraSlider
    

    

    SP Extra Slider – Best Sellers 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayCountdownslider
    

    

    SP Countdown Slider – Best Smart Phone
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 1:  Please click Here to view
      
		Copy and paste the following code into the source code field: 
      

      &lth2&gtBest Smartphone 2016&lt/h2&gt
&ltp&gtGet 45% Off Your Order Of $500 And More.&lt/p&gt
&ltdiv class="shopnow"&gt
&lth5&gt&lta href="#"&gtExplore Now&lt/a&gt&lt/h5&gt
&lt/div&gt
      
		
      • 

    

    display-customhtml5
    

    

    SP Custom HTML – Testimonial
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &lth3 class="title_block"&gtWhat our clients say&lt/h3&gt
&ltdiv class="main"&gt
&ltdiv class="slider slider-nav"&gt
&ltdiv&gt&ltimg src="../themes/sp_paco/img/cms/test_2.png" alt="" /&gt&lt/div&gt
&ltdiv&gt&ltimg src="../themes/sp_paco/img/cms/test_1.png" alt="" /&gt&lt/div&gt
&ltdiv&gt&ltimg src="../themes/sp_paco/img/cms/test_3.png" alt="" /&gt&lt/div&gt
&ltdiv&gt&ltimg src="../themes/sp_paco/img/cms/test_4.png" alt="" /&gt&lt/div&gt
&lt/div&gt
&ltdiv class="slider slider-for"&gt
&ltdiv class="item"&gt
&ltdiv class="text"&gt
&ltp&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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 ipsam voluptatem quia."&lt/p&gt
&lth4 class="name-cus"&gtDonald Berry&lt/h4&gt
&lth5 class="job"&gtWeb Developer&lt/h5&gt
&lt/div&gt
&lt!-- end text --&gt&lt/div&gt
&lt!-- end item --&gt
&ltdiv class="item"&gt
&ltdiv class="text"&gt
&ltp&gt"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."&lt/p&gt
&lth4 class="name-cus"&gtJonas Brother&lt/h4&gt
&lth5 class="job"&gtProducer&lt/h5&gt
&lt/div&gt
&lt/div&gt
&lt!-- end item --&gt
&ltdiv class="item"&gt
&ltdiv class="text"&gt
&ltp&gt“In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus”&lt/p&gt
&lth4 class="name-cus"&gtDavid Beckham&lt/h4&gt
&lth5 class="job"&gtPlayer Football&lt/h5&gt
&lt/div&gt
&lt/div&gt
&lt!-- end item --&gt
&ltdiv class="item"&gt
&ltdiv class="text"&gt
&ltp&gt"Lorem ipsum dolor sit amet, consectetur adipisicing 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 ipsam voluptatem quia."&lt/p&gt
&lth4 class="name-cus"&gtKaty Perry&lt/h4&gt
&lth5 class="job"&gtActress&lt/h5&gt
&lt/div&gt
&lt/div&gt
&lt!-- end item --&gt&lt/div&gt
&lt/div&gt
    		
    

    display Home News
    

    

    SP SmartBlog Home Lastest
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    SP Manufacture Slider – Manufacturers
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    


    Contact Information Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “Contact Information Block” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    display CustomHTML
    

    

    SP Custom HTML – Opening Time
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="opening-time"&gt
&lth3 class="title"&gtOpening Time&lt/h3&gt
&ltul&gt
&ltli&gt&ltspan&gtMonday - Friday 2pm - 11pm&lt/span&gt&lt/li&gt
&ltli&gt&ltspan&gtSaturday 1pm - 12.30am&lt/span&gt&lt/li&gt
&ltli&gt&ltspan&gtSunday 2pm - 10pm&lt/span&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    

    SP Theme Configuration 
    

    Frontend Appearance:
    

    

    Backend Settings: Go Here to see the backend settings.
    

    display Newsletter
    

    

    SP Newsletter Block
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
    

    

    Step 2: You could configure its settings like the following image.
    


    
To edit the text in this module, please follow these steps:
    
In your Website’s Directory, go to themes\sp_paco\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter.tpl by your editor program.
    
Find and change the text you want to edit, such as: SUBCRIBE
    

    display FooterBottom
    

    

    SP Custom HTML – My Account
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="footer-links"&gt
&lth3 class="title"&gtMy Account&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="../my-account"&gtMy Account&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../my-account"&gtLog in&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../order"&gtMy Cart&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../module/blockwishlist/mywishlist"&gtMy Wishlist&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../products-comparison"&gtMy Compare&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    display FooterBottom
    

    

    SP Custom HTML – Information
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="footer-links"&gt
&lth3 class="title"&gtInformation&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="../content/4-about-us"&gtAbout Us&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtJobs&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtDelivery Information&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtPrivacy Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtTerm and Conditions&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    display FooterBottom
    

    

    SP Custom HTML – Others pages
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="footer-links"&gt
&lth3 class="title"&gtOther pages&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="index.php?fc=module&module=smartblog&controller=category"&gtBlog&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtGift Center&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtBuying Guides&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtNew Arrivals&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtClearance&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    display FooterBottom
    

    

    SP Custom HTML – Customer service
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="footer-links"&gt
&lth3 class="title"&gtCustomer Service&lt/h3&gt
&ltul&gt
&ltli&gt&lta href="#"&gtShipping Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtReturn Policy&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtTerm and Conditions&lt/a&gt&lt/li&gt
&ltli&gt&lta href="#"&gtYour Account&lt/a&gt&lt/li&gt
&ltli&gt&lta href="../contact-us"&gtContact Us&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    

    5.2 SP Paco Layout 2
    

    

    home-default
    

    display CustomHTML3
    

    

    SP Custom HTML – Bonus Menu
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="item-item"&gt
&ltdiv class="col-xs-4 item shipping"&gt
&ltdiv class="icon"&gt&lt/div&gt
&ltdiv class="text"&gt
&lth4&gt&lta href="#"&gtFree Shipping&lt/a&gt&lt/h4&gt
&ltp&gtFree Shipping On Orders Over $35&lt/p&gt
&lt!--end text--&gt&lt/div&gt
&lt!--end item--&gt&lt/div&gt
&ltdiv class="col-xs-4 item money"&gt
&ltdiv class="icon"&gt&lt/div&gt
&ltdiv class="text"&gt
&lth4&gt&lta href="#"&gtmoney back 100%&lt/a&gt&lt/h4&gt
&ltp&gtWithin 30 Days after delivery&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt!--end item--&gt
&ltdiv class="col-xs-4 item order"&gt
&ltdiv class="icon"&gt&lt/div&gt
&ltdiv class="text"&gt
&lth4&gt&lta href="#"&gtSecurity Protection&lt/a&gt&lt/h4&gt
&ltp&gt100% Safe Shopping Guarantee&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt!--end item-item--&gt&lt/div&gt
&ltdiv class="topbar-close"&gt&ltspan class="button"&gtbutton&lt/span&gt&lt/div&gt
    

    displaySlideShow2
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 4:  Please click Here to view
      
		Copy and paste the following code into the source code field: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtNew Samsung&ltbr /&gtGalaxy Note5&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    • Sample 5: Please click Here to view
      
Copy and paste the following code into the source code field: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtSS S7&ltbr /&gtEdge&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    • Sample 6: Please click Here to view
      
		Copy and paste the following code into the source code field: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtApple&ltbr /&gtSmartwatch&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    

    display Customhtml6
    

    

    SP Custom HTML – Banner Top Layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="banner-2 clearfix"&gt
&ltdiv class="title_collection"&gt
&lth3 class="title_block"&gtcollection by brand&lt/h3&gt
&ltspan class="subtitle"&gt The standard chunk of Lorem Ipsum used since the 1500s is reproduced&lt/span&gt&lt/div&gt
&ltul&gt
&ltli class="item col-sm-3 col-xs-6"&gt
&ltdiv class="item-image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner2-3.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item-content"&gt
&lth4&gt&lta href="#"&gtIphone Collection&lt/a&gt&lt/h4&gt
&ltp&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&lth5 class="more"&gt&lta href="#"&gtShop Now&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/li&gt
&ltli class="item col-sm-3 col-xs-6"&gt
&ltdiv class="item-image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner2-4.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item-content"&gt
&lth4&gt&lta href="#"&gtLg Collection&lt/a&gt&lt/h4&gt
&ltp&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&lth5 class="more"&gt&lta href="#"&gtShop Now&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/li&gt
&ltli class="item col-sm-3 col-xs-6"&gt
&ltdiv class="item-image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner2-5.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item-content"&gt
&lth4&gt&lta href="#"&gtSamsung Collection&lt/a&gt&lt/h4&gt
&ltp&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&lth5 class="more"&gt&lta href="#"&gtShop Now&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/li&gt
&ltli class="item col-sm-3 col-xs-6"&gt
&ltdiv class="item-image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner2-6.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item-content"&gt
&lth4&gt&lta href="#"&gtSony Collection&lt/a&gt&lt/h4&gt
&ltp&gtThey Will Try To Close The Door On You&ltbr /&gt Just Open It . We the best.&lt/p&gt
&lth5 class="more"&gt&lta href="#"&gtShop Now&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    displayExtraSlider2
    

    

    SP Extra Slider – New Arrivals
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Customhtml7
    

    

    SP Custom HTML – Banner Center Layout2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="banner-1 clearfix"&gt
&ltdiv class="col-md-6 col-sm-12 icon"&gt
&ltdiv class="item_2"&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner2-1.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="text_2"&gt
&lth3 class="title_2"&gtFIND YOUR COVER&lt/h3&gt
&ltdiv class="origin_2"&gtMany Cover Leather Cover Protect Your Phone&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end icon--&gt&lt/div&gt
&ltdiv class="col-md-6 col-sm-12 icon"&gt
&ltdiv class="item_2"&gt
&ltdiv class="image"&gt&lta href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner2-2.jpg" alt="#" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="text_2"&gt
&lth3 class="title_2"&gtFind The Balance In Life&lt/h3&gt
&ltdiv class="origin_2"&gtWith Sony SmartWear and Accessories&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end icon--&gt&lt/div&gt
&lt/div&gt
    

    displayDeal
    

    

    SP Deal – Deals of the week
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displayExtraSlider3
    

    

    SP Extra Slider – Best Seller
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Customhtml8
    

    

    SP Custom HTML – Testimonial 2
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="our_clients"&gt
&lth3 class="title_block"&gtWhat our clients say&lt/h3&gt
&ltul class="say_list"&gt
&ltli&gt
&ltdiv class="content col-xs-6"&gt&ltimg class="quotes" src="../themes/sp_paco/img/cms/icon-testimonial.png" alt="" /&gt
&ltdiv class="text"&gt
&ltp&gt“In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pelle tesque mattis. Maecenas volutpat, diam enim sagittis quam”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_3.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtJonas Brother&lt/h4&gt
&lth5 class="job"&gtProducer&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt
&ltdiv class="content col-xs-6"&gt&ltimg class="quotes" src="../themes/sp_paco/img/cms/icon-testimonial.png" alt="" /&gt
&ltdiv class="text"&gt
&ltp&gt“In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pelle tesque mattis. Maecenas volutpat, diam enim sagittis quam” &lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_1.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtDonald Berry&lt/h4&gt
&lth5 class="job"&gtWeb Developer&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt&lt/li&gt
&ltli&gt
&ltdiv class="content col-xs-6"&gt&ltimg class="quotes" src="../themes/sp_paco/img/cms/icon-testimonial.png" alt="" /&gt
&ltdiv class="text"&gt
&ltp&gt“In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pelle tesque mattis. Maecenas volutpat, diam enim sagittis quam”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_2.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtDavid Beckham&lt/h4&gt
&lth5 class="job"&gtPlayer Football&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt
&ltdiv class="content col-xs-6"&gt&ltimg class="quotes" src="../themes/sp_paco/img/cms/icon-testimonial.png" alt="" /&gt
&ltdiv class="text"&gt
&ltp&gt“In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pelle tesque mattis. Maecenas volutpat, diam enim sagittis quam”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_3.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtJonas Brother&lt/h4&gt
&lth5 class="job"&gtProducer&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt&lt/li&gt
&ltli&gt
&ltdiv class="content col-xs-6"&gt&ltimg class="quotes" src="../themes/sp_paco/img/cms/icon-testimonial.png" alt="" /&gt
&ltdiv class="text"&gt
&ltp&gt“In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pelle tesque mattis. Maecenas volutpat, diam enim sagittis quam”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_1.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtDavid Beckham&lt/h4&gt
&lth5 class="job"&gtPlayer Football&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt
&ltdiv class="content col-xs-6"&gt&ltimg class="quotes" src="../themes/sp_paco/img/cms/icon-testimonial.png" alt="" /&gt
&ltdiv class="text"&gt
&ltp&gt“In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pelle tesque mattis. Maecenas volutpat, diam enim sagittis quam”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_2.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtDonald Berry&lt/h4&gt
&lth5 class="job"&gtWeb Developer&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
    

    display Home News2
    

    

    SP SmartBlog Home Lastest
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    

    5.3 SP Paco Layout 3
    

    

    home-default
    

     displaySearch2
    

    

    SP Search Block
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Search Pro” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displaySlideShow3
    

    

    Sp slider for your homepage
    

    Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Slider For Your Homepage” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    Step 4: In the last part named Slides List of this configuration page, click  button in the right corner to add new slide and edit slide’s information as follows:
    

      

    • Sample 7:  Please click Here to view
      
		Copy and paste the following code into the content: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtLG V10&ltbr /&gtDiamond&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    • Sample 8: Please click Here to view
      
		Copy and paste the following code into the content: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtApple&ltbr /&gtWatch&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    • Sample 9: Please click Here to view
      
		Copy and paste the following code into the content: 
      

      &ltdiv class="container"&gt
&ltdiv class="box-text"&gt
&lth3&gtSamsung&ltbr /&gtNote 5&lt/h3&gt
&ltp&gtAwaken Your In-Between Moments&lt/p&gt
&lt/div&gt
&ltdiv class="now"&gt
&lth5&gt&lta href="#"&gtBUY NOW&lt/a&gt&lt/h5&gt
&lt/div&gt
&lt/div&gt
      
		
      • 

    

    displayDeal2
    

    

    SP Deal – Hot deals
    
Frontend Appearance:
    


    
Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
    

    
Step 2: In the “SP Deal” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    	
    

    display Customhtml9
    

    

    SP Custom HTML – Banner Top layout3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="banner-3 banner block"&gt
&ltdiv class="row"&gt
&ltul&gt
&ltli class="item-1 col-xs-4 list-image-static"&gt&lta class="img1" href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner3-2.jpg" alt="#" /&gt&lt/a&gt&lt/li&gt
&ltli class="item-2 col-xs-4 list-image-static"&gt&lta class="img2" href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner3-3.jpg" alt="#" /&gt&lt/a&gt&lt/li&gt
&ltli class="item-3 col-xs-4 list-image-static"&gt&lta class="img3" href="#"&gt&ltimg src="../themes/sp_paco/img/cms/banner3-4.jpg" alt="#" /&gt&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
    

     displayListingtab
    

    

    SP Listing Tabs 
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
    

    
Step 2: In the “SP Listing Tabs” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    		
    

    displayExtraSlider4
    

    

    SP Extra Slider – Best Seller
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
    

    
Step 2: In the “SP Extra Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    displaycategoryslider
    

    

    SP Category Slider – SmartPhone
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Category Slider” module.
    

    
Step 2: In the “SP Category Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Customhtml10
    

    

    SP Custom HTML – ImageRight Layout 3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="banner-4 banner list-image-static block"&gt&lta href="#"&gt &ltimg src="../themes/sp_paco/img/cms/banner3-1.jpg" alt="" /&gt &lt/a&gt&lt/div&gt
    

    display Home News3
    

    

    SP SmartBlog Home Lastest
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SmartBlog Home Lastest” module.
    

    

    Step 2: You could configure this module like the following image.
    

    

    displaycategoryslider2
    

    

    SP Category Slider 2 – Accesories
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Category Slider” module.
    

    
Step 2: In the “SP Category Slider” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    

    

    display Customhtm11
    

    

    SP Custom HTML – FAQs
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="faqs block"&gt
&lth3 class="title_block"&gtFAQs&lt/h3&gt
&ltdiv class="panel-group" id="accordion"&gt&lt!-- accordion 1 --&gt
&ltdiv class="panel"&gt
&ltdiv class="panel-heading active"&gt&lt!-- panel-heading --&gt
&lth4 class="panel-title"&gt&lt!-- title 1 --&gt &lta class="hehe" data-toggle="collapse" data-parent="#accordion" href="#accordionOne"&gtWhat is Lorem Ipsum?&lt/a&gt&lti class="indicator glyphicon glyphicon-minus pull-right"&gt&lt/i&gt&lt/h4&gt
&lt/div&gt
&lt!-- panel body --&gt
&ltdiv id="accordionOne" class="panel-collapse collapse in"&gt
&ltdiv class="panel-body"&gtLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="panel"&gt&lt!-- accordion 2 --&gt
&ltdiv class="panel-heading"&gt
&lth4 class="panel-title"&gt&lt!-- title 2 --&gt &lta class="hehe" data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"&gtWhere does it come from?&lt/a&gt&lti class="indicator glyphicon glyphicon-plus pull-right"&gt&lt/i&gt&lt/h4&gt
&lt/div&gt
&lt!-- panel body --&gt
&ltdiv id="accordionTwo" class="panel-collapse collapse"&gt
&ltdiv class="panel-body"&gtChange does not roll in on the wheels of inevitability, but comes through continuous struggle...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="panel"&gt&lt!-- accordion 3 --&gt
&ltdiv class="panel-heading"&gt
&lth4 class="panel-title"&gt&lt!-- title 3 --&gt &lta class="hehe" data-toggle="collapse" data-parent="#accordion" href="#accordionThree"&gtWhy do we use it?&lt/a&gt&lti class="indicator glyphicon glyphicon-plus pull-right"&gt&lt/i&gt&lt/h4&gt
&lt/div&gt
&ltdiv id="accordionThree" class="panel-collapse collapse"&gt&lt!-- panel body --&gt
&ltdiv class="panel-body"&gtYou must take personal responsibility. You cannot change the circumstances, the seasons...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="panel"&gt&lt!-- accordion 4 --&gt
&ltdiv class="panel-heading"&gt
&lth4 class="panel-title"&gt&lt!-- title 4 --&gt &lta class="hehe" data-toggle="collapse" data-parent="#accordion" href="#accordionFour"&gtWhere can I get some?&lt/a&gt&lti class="indicator glyphicon glyphicon-plus pull-right"&gt&lt/i&gt&lt/h4&gt
&lt/div&gt
&ltdiv id="accordionFour" class="panel-collapse collapse"&gt&lt!-- panel body --&gt
&ltdiv class="panel-body"&gtLorem ipsum dolor sit amet, consectetur adipisicing. but comes through continuous struggle...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="panel"&gt&lt!-- accordion 5 --&gt
&ltdiv class="panel-heading"&gt
&lth4 class="panel-title"&gt&lt!-- title 5 --&gt &lta class="hehe" data-toggle="collapse" data-parent="#accordion" href="#accordionFive"&gt1914 translation by H. Rack&lt/a&gt&lti class="indicator glyphicon glyphicon-plus pull-right"&gt&lt/i&gt&lt/h4&gt
&lt/div&gt
&ltdiv id="accordionFive" class="panel-collapse collapse"&gt&lt!-- panel body --&gt
&ltdiv class="panel-body"&gtContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of...&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end panel-group--&gt&lt/div&gt
&lt!--end why-choose--&gt&lt/div&gt
    

    display Customhtm12
    

    

    SP Custom HTML – Testimonial 3
    
Frontend Appearance:
    

    

    Backend Settings:
    

    Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
    

    

    Step 2: In the “SP Custom HTML” configuration page, click  button in the right corner to “ADD NEW MODULE”.
    

    Step 3: You could configure this module like the following image.
    


    
Copy and paste the following code into the content: 
    &ltdiv class="our_clients"&gt
&lth3 class="title_block"&gtTestimonials&lt/h3&gt
&lt/div&gt
&ltul class="say_list"&gt
&ltli&gt
&ltdiv class="content"&gt
&ltdiv class="text"&gt
&ltp&gt“ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical ”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_1.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtJonas Brother&lt/h4&gt
&lth5 class="job"&gtProducer&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt&lt/li&gt
&ltli&gt
&ltdiv class="content"&gt
&ltdiv class="text"&gt
&ltp&gt“ In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_2.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtDonald Berry&lt/h4&gt
&lth5 class="job"&gtWeb Developer&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt&lt/li&gt
&ltli&gt
&ltdiv class="content"&gt
&ltdiv class="text"&gt
&ltp&gt“ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical ”&lt/p&gt
&ltdiv class="info"&gt
&ltdiv class="info-image"&gt&ltimg src="../themes/sp_paco/img/cms/test_3.png" alt="" /&gt&lt/div&gt
&ltdiv class="info-info"&gt
&lth4 class="name-cus"&gtDavid Beckham&lt/h4&gt
&lth5 class="job"&gtPlayer Football&lt/h5&gt
&lt!--end info-info--&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt!--end content--&gt&lt/li&gt
&lt/ul&gt
    

    

    6SUPPORT
    

    

    

    

      

    • SUPPORT – If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
      • 

    • FAQs – Go to Here to view more the Frequently Asked Questions.
      • 

    

    

    

    
                       
    

                           
                       
                     
    

                   
    

                   
    ↧
    

                   
                   
                   
                   
                 
               
    

            
            
                              



               
               
    




                                   
                     
    
                     
                        Viewing all 239 articles
                     
                     
    
                                                                                                      

               
    
                
                        

                  
             
         
            
               
             
         
         
                              
    

               
    
                                                                     
                     
                        Browse latest
                     
                                                      
                     
                        View live
                     
                                                 
    

               
    
               
    
               
    

               
                          
                        
            
                                      
            
    
            
    
              
    
                
                
    

              
    
            
    
            
    


          
    

          
          
            
    

              
                            
    

                                
                                
    
                  
    
                    
                  
    
                
    
                
                  
                                
    

                                    
                  
                                    
    
                                                                                                                                        
                
    
                  
    
                    
                    
    
                      Search