SM Product Detail Sliders

June 9, 2016, 7:21 pm

≫ Next: SM Deals Slider

≪ Previous: SP Paco

View demo More detail

This guide will help you install SM Product Detail Sliders 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 Product Detail Sliders 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 Product Detail Sliders 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

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 Catalog or Product IDs.
Select Category – Allow you to select Category.
Child Category Products: Include or Exclude Products from Child Categories.
Category Depth: Allow to choose 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.

Product Options

Product Title

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

Product Title Thumbnail

Display – Allow to display title of product thumbnail 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.
Add Cart Text – Allow to add text for Add To Cart.
Display Add Wishlist – Allow to display Wishlist OR not.
Add Wishlist Text – Allow to add text for Wishlist.
Display Add Compare – Allow to display Add Compare OR not.
Add Compare Text – Allow to add text to Add Compare.
Display Readmore Link – Allow to display Readmore link OR not.
Readmore Text – Allow to input name of Readmore text. For example: Details.
Readmore Use Category Link – Allow to Readmore Use Category Link or not.

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

Resize Image Detail – Allow you resize image detail or NOT.
Image Width – Allow to set image width.
Image Height – Allow to set image height.

Resize Image Thumbnail

Resize Image Thumbnail – Allow you resize image thumbnail or NOT.
Image Width Thumbnail – Allow to set image thumbnail width.
Image Height Thumbnail – Allow to set image thumbnail height.

Other

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

Auto Play – Allow you to set for slideshow auto play OR NOT.
Auto Play Speed- Allow to set speed of timer (larger = slower).
Loop – Allow to Display to Loop OR Not.
Navigation- Allow to choose Navigation OR Not.
Center – Allow to choose Center position or NOT.
Dots – Allow to Enable/Disable one page scroll with dot navigation style.
Pause On Hover: Allow to Pause effects when users hover Or not.
Start- Allow to choose the first item by position number.
Slide By – Allow to choose the number of products displayed when clicking “Next” button.

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

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:

&ltp&gt{{block class="Sm\ProductsDetailSliders\Block\ProductsDetailSliders" name="productsdetailsliders" template="Sm_ProductsDetailSliders::default.phtml"}}&lt/p&gt

Design Tab: Please click to see the Backend Settings .

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

↧

SM Deals Slider

June 10, 2016, 3:06 am

≫ Next: SP Countdown Product

≪ Previous: SM Product Detail Sliders

View demo More detail

This guide will help you install SM Deals 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 Layout Demo

You could see the appearance of SM Deals 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 Deals 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 Options

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
Select Theme – Allow to choose theme: Theme 1/ Theme 2.

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 Catalog or Product IDs.
Select Category – Allow you to select Category.
Child Category Products: Include or Exclude Products from Child Categories.
Category Depth: Allow to choose 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.

Product Options

Product Title

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

Product Title Thumbnail

Display – Allow to display title of product thumbnail OR not.

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 Countdown – Allow to display Countdown 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

Product Image

Display – Allow to display Product Image or NOT.

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

Resize Image Detail – Allow you resize image detail or NOT.
Image Width – Allow to set image width.
Image Height – Allow to set image height.

Resize Image Thumbnail

Resize Image Thumbnail – Allow you resize image thumbnail or NOT.
Image Width Thumbnail – Allow to set image thumbnail width.
Image Height Thumbnail – Allow to set image thumbnail height.

Other

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

Auto Play – Allow you to set for slideshow auto play OR NOT.
Auto Play Speed- Allow to set speed of timer (larger = slower).
Loop – Allow to Display to Loop OR Not.
Navigation- Allow to choose Navigation OR Not.
Center – Allow to choose Center position or NOT.
Dots – Allow to Enable/Disable one page scroll with dot navigation style.
Pause On Hover: Allow to Pause effects when users hover Or not.
Start- Allow to choose the first item by position number.
Slide By – Allow to choose the number of products displayed when clicking “Next” button.

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

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:

&ltp&gt{{block class="Sm\DealsSlider\Block\DealsSlider" name="dealsslider" as="dealsslider" template="Sm_DealsSlider::default.phtml" theme="theme1" nb_column1="9" /}}&lt/p&gt
&ltp&gt{{block class="Sm\DealsSlider\Block\DealsSlider" title="SM Deals Slider - Demo 2" autoplay="0" name="dealsslider" as="dealsslider" template="Sm_DealsSlider::default.phtml" /}}&lt/p&gt

Design Tab: Please click to see the Backend Settings .

4SUPPORT

↧

SP Countdown Product

June 13, 2016, 1:25 am

≫ Next: SM Cart Pro Magento 2

≪ Previous: SM Deals Slider

View demo More detail

This guide will help you install SP Countdown Product Module step by step.

1Requirement – Back to top

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

Get discounts from product category.
Countdown time remaining discount for each product.
Compatible with version Prestashop: Prestashop 1.6.1.x
Have Responsive Layout.

2 Installation – Back to top

Firstly, you must install Prestashop version 1.6.x. Please Click Here to read more about How To Install Prestashop version 1.6.x
Secondly, prepare for installing the SP Countdown Product. The installation contains 5 steps as following:

Step 1: Login to your Prestashop admin panel and Go to Back Office >> Modules >> Modules. At the top of the page, click the Add new theme button.

Step 2: Click “Choose a file” button to select your module .zip file “sp_countdown_product_p1.6-res_v1.0.0.zip” that you have downloaded and then push “Upload this module” button.

Step 3: The uploading process will be started. You will see the message that “the module was successfully downloaded”.

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

Step 5: Finally, you will see a notification message: “This module is already installed: spcountdownproduct”.

3 Configuration – Back to top

Find to the module that you have installed and clicked on Configure button to configure the module.

After clicking “Configure” button. It will display a page as the image below.

Can edit, duplicate, delete and add new module in this page.

In this layout, can change ordering of category by dragging the box contain ordering. And this module can work with different Hook into, can change in the param Hook into.

Below is module layout

The parameters are divided into the following groups:

General Options
Source Options
Product Options
Effect Options

Let’s look at the parameters in detail:

General Options

Title – Input title for the module.
Display Title Module – Display title of module Or not.
Module Class Suffix – A suffix is applied to the CSS class of module. This allows for individual module styling.
Status – Set status enable/disable for the module.
Hook into – Select Hook into in list box.
# Column – Set # column for each device
- For devices have screen width from 1200px to greater.
- For devices have screen width from 768px up to 1199px.
Open Link – Target to open links:
- New window – Open the link in the new window/tab.
- Same window – Open the link in the same window/tab.
- Popup window – Open the link in new pop-up window.

Source Options

Select Category – Allow to select Category.
Product Field to Order By – Allow to set Product Field to Order By: “Name/ID/Date Add/Price/Sell”.
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.

Product Options

Size image(WxH) – Select size of product image in list box.
Display Name – Allow to display product name or not.
Name Maxlength – The limited number of characters of product name.
Display Description – Allow to display product description or not.
Description Maxlength – The limited number of characters of product description.
Display Price – Allow to display price or not.
Display Add to Cart Button – Allow to display add to cart button or not.
Display Add to Wishlist Button – Allow to display add to wishlist button or not.
Display Add to Compare Button – Allow to display add to compare button or not.
Display Detail Link – Allow to display detail link or not.
Display New – Allow to show/hide icon new in image of product .
Display Sale – Allow to show/hide icon sale in image of product.

1. In Product Options part, The Size image (W x H) parameter is set “cart_default”. To view the size of image, please go to PREFERENCES >> Images as the image below:

Effect Options

Auto Play – Allow to Enable/Disable auto play or not.
Auto Play Speed – Allow to set speed of timer (larger = slower).
Speed – Allow to set speed of module. Large = Slower.
Auto Play Hover Pause – Allow to pause effect when the user hovers.
Start Position Item – Allow to choose the first item by position number.
Slide By – Allow to choose the number of products displayed when clicking “Next” button.
Mouse Drag – Allow to use the cursor to navigate pages of products in this module.
Touch Drag – Allow to set the speed of dot navigation style.
Show Navigation – Allow to Enable/Disable the next/previous button.
Loop – Allow to Display to Loop OR Not.

4 How To Create Categories – Back to top

Please go Here to readmore How To Create Categories in Prestashop.

5 How To Create Products – Back to top

Please go Here to readmore How To Create Products in Prestashop.

6 How To Configure Product With Sale Price – Back to top

To configure Product with Sale Price, please go Administrator Panel >> Catalog >> Product >> Add new product >> Select “Prices” in the left column >> Select “Specific Prices”

7Support – 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 Cart Pro Magento 2

June 14, 2016, 2:38 am

≫ Next: SM Instagram Gallery Magento2

≪ Previous: SP Countdown Product

View demo More detail

This guide will help you install SM Cart Pro 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 Layout Demo

You could see the appearance of SM Cart Pro module as following:

3.2 Module Configuration

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

In the Administrator Page, navigate to Stores -> Settings -> Configuration and find SM Cart Pro to configure.

Let’s look at the parameter in detail:

General settings

Enable CartPro Module: Enable or disable the CartPro module displaying on Frontend area.
Enable Ajax Cart: To Display Ajax cart for the module or not.
Enable Ajax for Compare: Enable or disable the Ajax box for Compare button.
Enable Ajax for Wishlist: Enable or disable the Ajax box for Wishlist button.
Countdown Number: The time of ajax box displaying on the screen.
Effect Selector: User can “Click” or ” Hover” when selecting.

Atter that, paste into the following line which is under right these codes,and finally, save it. Now the SM CartPro Module with Ajax cart, Ajax for Wishlist running on frontend area as the following images.

Add To cart Ajax box on Frontend

Add to Wishlist Ajax box on Frontend: However, user need register before clicking the “Add to Wishlist” button.

Add to Compare Ajax box on Frontend

4SUPPORT

↧

SM Instagram Gallery Magento2

June 15, 2016, 2:40 am

≫ Next: SM Himarket v.1.0.0

≪ Previous: SM Cart Pro Magento 2

View demo More detail

This guide will help you install SM Instagram Gallery 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 Instagram Gallery 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 Instagram Gallery to configure.
The parameters are divided into the following groups:

General settings
Other 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 show/hide title of the module.
Title Enter the title of the module.
Instagram Users ID Allow to enter Instagram Users ID.
Access Token Allow to enter Access Token.
Limit Images Allow to choose the limit of images.
Hide Full Image Allow to hide Full Image or NOT.
Target Allow to display the target link in Same Window/ New Window/ Popup Window.
Type Thumbnial Allow to choose the type of thumbnail: Thumbnail/Button.

Other Options

Column – Set the number of columns for devices:
- 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.
- Type Show Choose the type to show:Simple/Slider.
Effect Options
- 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 speed of navigation
- Auto Interval Timeout – The duration to change to next slide.
- Display Navigation – Allow to choose Navigation OR Not.
- Display Loop – Allow to run a loop or not.
- 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
- Cache Time - Allow to choose the time (in seconds) before the module is recached
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

↧

SM Himarket v.1.0.0

June 23, 2016, 12:58 am

≫ Next: SM Listing Deals

≪ Previous: SM Instagram Gallery Magento2

View demo More 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.7
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_himarket_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_himarket_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_himarket_theme_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 Himarket.

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 Himarket 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

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"&gt
&ltdiv class="row"&gt
&ltdiv class="col-md-3"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" title="&ltspan&gtTop 5&lt/span&gt popular" name="basicproducts" template="Sm_BasicProducts::sm/basicproducts/basic-index1.phtml" product_limitation="5"}}&lt/div&gt
&ltdiv class="col-md-9"&gt{{block class="Sm\DealsSlider\Block\DealsSlider" name="dealsslider" as="dealsslider" template="Sm_DealsSlider::default.phtml" title="&ltspan&gtDeal&lt/span&gtof the day" /}} {{block class="Magento\\Cms\\Block\\Block" block_id="banner-home11"}}&lt/div&gt
&lt/div&gt
&ltdiv class="listting-tabs-feature"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs1" template="Sm_ListingTabs::sm/listingtabs/default2.phtml" title="&ltspan&gtFeatured&lt/span&gtProducts" product_order_by="created_at" filter_type="categories" product_category="73,74,75,76,115,116" margin="0" style-customer="style2" row_item="1" nb_column1="4" nb_column2="3" pretext="" posttext=""}}&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-home12"}}
&ltdiv class="listting-tabs-arrivals"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs2" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="&ltspan&gtNew&lt/span&gt arrivals" product_order_by="random" filter_type="categories" product_category="73,74,75,76,115,116" style-customer="" margin="0" pretext="" posttext=""}}&lt/div&gt
&ltdiv class="listting-tabs-bestsell"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs3" template="Sm_ListingTabs::sm/listingtabs/default2.phtml" title="&ltspan&gtBest&lt/span&gtselling" product_order_by="best_sales" filter_type="categories" product_category="43,120,45,46,47,117,119" icon_display="1" margin="2" style-customer="style2" row_item="2" nb_column1="4" nb_column2="3" nb_column3="2" pretext="" posttext=""}}&lt/div&gt
&lt/div&gt

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Layout Update XML field::

&ltreferenceContainer name="main.content"&gt
&ltblock class="Magento\Cms\Block\Block" name="home-slider1" before="-"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gthome-slider1&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&ltblock class="Magento\Cms\Block\Block" name="block-bottom-home1"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtblock-bottom-home1&lt/argument&gt
	&lt/arguments&gt
&lt/block&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

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-2"&gt
&ltdiv class="row"&gt
&ltdiv class="col-md-3 col-left2"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts2" template="Sm_BasicProducts::sm/basicproducts/basic-index2.phtml" product_order_by="top_rating" title="&ltspan&gtHot&lt/span&gtProducts"}} {{block class="Magento\\Cms\\Block\\Block" block_id="image-sidebar"}} {{block class="Magento\\Cms\\Block\\Block" block_id="blog-block-index2"}} {{block class="Magento\\Cms\\Block\\Block" block_id="block-policyshop2"}} {{block class="Magento\\Cms\\Block\\Block" block_id="testimonials-block-index2"}}&lt/div&gt
&ltdiv class="col-md-9"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="block-banner-index2"}}
&ltdiv class="listting-tabs-top"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs2" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="&ltspan&gtFeatured&lt/span&gt Products" product_order_by="random" filter_type="categories" product_category="73,74,75,76" margin="0" tab_all_display="1" nb_column1="4" nb_column2="3" nb_column3="3" pretext="" posttext=""}}&lt/div&gt
{{block class="Sm\DealsSlider\Block\DealsSlider" name="dealsslider" as="dealsslider" template="Sm_DealsSlider::default.phtml" title="" theme="theme1" product_limitation="20" nb_column1="8" nb_column2="7" nb_column3="6" nb_column4="3" nb_column5="2"/}} {{block class="Magento\\Cms\\Block\\Block" block_id="block-banner-center"}} {{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts3" template="Sm_BasicProducts::sm/basicproducts/basic-bottom-index2.phtml" product_order_by="created_at" title="&ltspan&gtNew&lt/span&gtArrivals" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2"}}&lt/div&gt
&lt/div&gt
&ltdiv class="littingtabs-bottom"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.home.tabs3" template="Sm_ListingTabs::sm/listingtabs/default.phtml" title="&ltspan&gtBest&lt/span&gtselling" product_order_by="best_sales" filter_type="categories" product_category="43,44,45,46,47,117,119,120,121" icon_display="1" margin="10" nb_column1="5" nb_column2="4" pretext="" posttext=""}}&lt/div&gt
&lt/div&gt

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Layout Update XML field::

&ltreferenceContainer name="main.content"&gt
&ltblock class="Magento\Cms\Block\Block" name="slideshow2" before="-"&gt
	&ltarguments&gt
		&ltargument name="block_id" xsi:type="string"&gtslideshow2&lt/argument&gt
	&lt/arguments&gt
&lt/block&gt
&lt/referenceContainer&gt

Meta Data Tab: Please click to see the Backend Settings.

3.2 Configure Megamenu

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizontal“.)
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

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="Boxed Layout" href="{{store url="?___store=german&___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"}}"&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
	&lt/ul&gt
	
	&ltul class="item-home-store theme-color"&gt
		&ltli class="title-menu-home"&gtColor Styles&lt/li&gt
		&ltli class="green"&gt&lta title="Green" href="{{store url="?___store=default&___from_store=french"}}"&gtGreen&lt/a&gt&lt/li&gt
		&ltli class="blue"&gt&lta title="Blue" href="{{store url="?___store=vietnam&___from_store=default"}}"&gtBlue&lt/a&gt&lt/li&gt
		&ltli class="yellow"&gt&lta title="Teal" href="{{store url="?___store=somaliland&___from_store=default"}}"&gtYellow&lt/a&gt&lt/li&gt
		&ltli class="red"&gt&lta title="Red" href="{{store url="?___store=japan&___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.

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

vertical-mega-menu

Sortable Categories Items Please click Here to view.

Smartphones Accessories
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Row 1′ in ‘Smartphones Accessories’: 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’

Backend of ‘Images’ in ‘Row 2′: Please click Here to view.

Copy and paste the following code into the Content field::

&lta href="banner-img"&gt&ltimg src="{{media url="wysiwyg/image-megamenu/img-megamenu2.jpg"}}" alt="" /&gt&lt/a&gt

Computer & Networking
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Col 1′ in ‘Computer & Networking’: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘Beds’ in ‘Col 1′: Please click Here to view.

Backend of ‘Shoes’ in ‘Col 1′: Please click Here to view.

Backend of ‘Shoes’ in ‘Col 2′: Please click Here to view.

Backend of ‘Beds’ in ‘Col 2′: Please click Here to view.

Backend of ‘Col 3′ in ‘Computer & Networking’: Please click Here to view.

Backend of ‘Image 1′ in ‘Col 3′: Please click Here to view.

Copy and paste the following code into the Content field::

&lta href="#" class="banner-img"&gt&ltimg src="{{media url="wysiwyg/image-megamenu/img-megamenu.jpg"}}" alt="" /&gt&lt/a&gt

Smartphones & Tablets
Frontend Appearance

Backend Settings: Please click Here to view.

Health & Beauty
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘sub-menu’ in ‘Health & Beauty’: Please click Here to view.

Car Accessories
Frontend Appearance

Backend Settings: Please click Here to view.

Apparel & Accessories
Frontend Appearance

Backend Settings: Please click Here to view.

Intimate Apparel
Frontend Appearance

Backend Settings: Please click Here to view.

Lights & Lighting
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Col1-light’ in ‘Lights & Lighting’: Please click Here to view.

Note: Do the same with item ‘Col2-light’, ‘Col3-light’ and ‘Col4-light’

Backend of ‘Image 1′ in ‘Col1-light’: Please click Here to view.

Copy and paste the following code into the Content field::

&lta href="#" class="banner-img"&gt&ltimg src="{{media url="wysiwyg/image-megamenu/ca1.png"}}" alt="" /&gt&lt/a&gt

Backend of ‘Categories 1′ in ‘Col1-light’: Please click Here to view.

Backend of ‘Image 2′ in ‘Col2-light’: Please click Here to view.

Copy and paste the following code into the Content field::

&lta href="#" class="banner-img"&gt&ltimg src="{{media url="wysiwyg/image-megamenu/ca2.png"}}" alt="" /&gt&lt/a&gt

Backend of ‘Categories 2′ in ‘Col2-light’: Please click Here to view.

Backend of ‘Image 3′ in ‘Col3-light’: Please click Here to view.

Copy and paste the following code into the Content field::

&lta href="#" class="banner-img"&gt&ltimg src="{{media url="wysiwyg/image-megamenu/ca3.png"}}" alt="" /&gt&lt/a&gt

Backend of ‘Categories 3′ in ‘Col3-light’: Please click Here to view.

Backend of ‘Images Category4′ in ‘Col4-light’: Please click Here to view.

Copy and paste the following code into the Content field::

&ltimg src="{{media url="wysiwyg/image-megamenu/ca4.png"}}" alt="" /&gt

Backend of ‘Categories 4′ in ‘Col4-light’: Please click Here to view.

Home & Office
Frontend Appearance

Backend Settings: Please click Here to view.

Cameras & Camcorders
Frontend Appearance

Backend Settings: Please click Here to view.

Sports & Outdoors
Frontend Appearance

Backend Settings: Please click Here to view.

Toys & Hobbies
Frontend Appearance

Backend Settings: Please click Here to view.

Consumer Electronics
Frontend Appearance

Backend Settings: Please click Here to view.

All Categories
Frontend Appearance

Backend Settings: Please click Here to view.

3.3 Configure Extensions

The SM Himarket front-page has been integrated with the extensions in the following list:

In SM Himarket Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM to configure extensions as you want.

3.3.1 SM Search Box

Position: SM Search Box
Frontend Appearance

Backend of SM Search Box: Click Here

3.3.2 SM Deals Slider

Position: SM Deals Slider
Frontend Appearance

Backend of SM Deals Slider: Click Here

Position: SM Megamenu
Frontend Appearance

Backend of SM Megamenu: 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 Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: Click Here

3.3.6 SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of SM Listing Tabs: Click Here

3.3.7 SM Deals

Position: SM Deals
Frontend Appearance

Backend of SM Deals: Click Here

3.3.8 SM Quick View

Position: SM Quick View
Frontend Appearance

Backend of SM Quick View: Click Here

3.4 Configure Static Blocks

The SM Himarket 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 * : “Himarket Hotline Header “ 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 class="phone"&gt&ltem class="fa fa-phone"&gt&lt/em&gt Call us free:&ltspan class="phone"&gt 000-943-446-000&lt/span&gt&lt/p&gt
&ltp&gt&ltem class="fa fa-envelope"&gt&lt/em&gt&lta href="#"&gtEmail: Hidesign@domain.com&lt/a&gt&lt/p&gt

Static Block: block-policyshop1

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket – Policy Shop Home 1″ and Identifier * : “block-policyshop1″

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-shop1"&gt
&ltdiv class="row"&gt
&ltdiv class="col-sm-4"&gt
&ltdiv class="content-policy"&gt
&ltdiv class="imgages"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/icon1.png"}}" alt="" /&gt&lt/div&gt
&lth2&gtFree Shipping&lt/h2&gt
&ltp&gtFree shipping on all UK orders&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-4"&gt
&ltdiv class="content-policy"&gt
&ltdiv class="imgages"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/icon2.png"}}" alt="" /&gt&lt/div&gt
&lth2&gtMoney Guarantee&lt/h2&gt
&ltp&gt30 days money back guarantee&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-4"&gt
&ltdiv class="content-policy"&gt
&ltdiv class="imgages"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/icon3.png"}}" alt="" /&gt&lt/div&gt
&lth2&gtOnline Support&lt/h2&gt
&ltp&gtWe support online 24/24 on day&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarker- Block Home 1 “ and Identifier * : “banner-home11″

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"&gt&lta class="banner-img" href="#"&gt &ltimg src="{{media url="wysiwyg/home-page-image/home-1/banner3.jpg"}}" alt="" /&gt &lt/a&gt&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket Block Banner 2 Home 1″ and Identifier * : “banner-home12″

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"&gt
&ltdiv class="row"&gt
&ltdiv class="col-sm-6"&gt&lta class="banner-img" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/banner1.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-6"&gt&lta class="banner-img" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-1/banner2.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt

Static Block: slider-brand

To create the static block, go to Content>> Elements>> Blocks with Title * : “Theme – Slider Brand” and Identifier * : “slider-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="slider-brand-wrapper"&gt
&ltdiv class="slider-brand"&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-1.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-2.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-3.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-4.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-5.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-6.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-1.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-2.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-3.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-4.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="item"&gt&lta title="Brand" href="#"&gt&ltimg src="{{media url="wysiwyg/brand/br-5.png"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&ltscript type="text/javascript"&gt// &lt![CDATA[
		jQuery(document).ready(function($) {
			$('.slider-brand').owlCarousel({
				margin:40,
				nav:true,
				loop:true,
				dots: false,
				responsive:{
						0:{
							items:2
						},
						480:{
							items:2
						},
						768:{
							items:4
						},
						992:{
							items:5
						},
						1200:{
							items:6
						},
					},
			})
		});
// ]]&gt&lt/script&gt
&lt/div&gt

Static Block: blog-block-index1

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket – Blog index 1″ and Identifier * : “blog-block-index1″

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 block-blog"&gt
&ltdiv class="block-title"&gt&ltstrong&gtLatest Blogs&lt/strong&gt&lt/div&gt
&ltdiv class="slider-blog-home1"&gt
&ltdiv class="item-blog"&gt
&ltdiv class="col-sm-6 inner-images"&gt&lta class="images" title="Image" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blog-11.jpg"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-6 inner-infomation"&gt
&ltdiv class="date-time"&gt&ltspan&gt24&lt/span&gt/January 2016&lt/div&gt
&lth2&gt&lta title="Title" href="#"&gtDigital Black Friday event January 2016.&lt/a&gt&lt/h2&gt
&ltp&gtLorem ipsum dolor sit amet, consmctetur asdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore magna aliqua...&lt/p&gt
&ltdiv class="comemt-view"&gt
&ltdiv class="comment"&gt07 comment &ltem class="fa fa-comments"&gt&lt/em&gt&lt/div&gt
&ltdiv class="view-more color-theme"&gt&lta title="View" href="#"&gtView More &ltem class="fa fa-arrow-circle-right"&gt&lt/em&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item-blog"&gt
&ltdiv class="col-sm-6 inner-images"&gt&lta class="images" title="Image" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blog-12.jpg"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-6 inner-infomation"&gt
&ltdiv class="date-time"&gt&ltspan&gt24&lt/span&gt/January 2016&lt/div&gt
&lth2&gt&lta title="Title" href="#"&gtDigital Black Friday event January 2016.&lt/a&gt&lt/h2&gt
&ltp&gtLorem ipsum dolor sit amet, consmctetur asdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore magna aliqua...&lt/p&gt
&ltdiv class="comemt-view"&gt
&ltdiv class="comment"&gt07 comment &ltem class="fa fa-comments"&gt&lt/em&gt&lt/div&gt
&ltdiv class="view-more color-theme"&gt&lta title="View" href="#"&gtView More &ltem class="fa fa-arrow-circle-right"&gt&lt/em&gt&lt/a&gt&lt/div&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($) {
			$('.slider-blog-home1').owlCarousel({
				margin:30,
				nav:true,
				loop:true,
				dots: false,
				items:1
			})
		});
// ]]&gt&lt/script&gt

Static Block: testimonials-block-index1

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket – Testimonials Home 1″ and Identifier * : “testimonials-block-index1″

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 block-testimonials"&gt
&ltdiv class="block-title"&gt&ltstrong&gtTestimonials&lt/strong&gt&lt/div&gt
&ltdiv class="slider-testimonials-home1"&gt
&ltdiv class="item"&gt
&ltdiv class="inner"&gt
&ltdiv class="images"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-4.jpg"}}" alt="Brand" /&gt&lt/div&gt
&lth2 class="name"&gtJohny Walker&lt/h2&gt
&ltdiv class="des"&gtLorem ipsum dolor sit amet, conmeturasdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore.&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="inner"&gt
&ltdiv class="images"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-5.jpg"}}" alt="Brand" /&gt&lt/div&gt
&lth2 class="name"&gtJohny Walker&lt/h2&gt
&ltdiv class="des"&gtLorem ipsum dolor sit amet, conmeturasdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore.&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="inner"&gt
&ltdiv class="images"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-6.jpg"}}" alt="Brand" /&gt&lt/div&gt
&lth2 class="name"&gtJohny Walker&lt/h2&gt
&ltdiv class="des"&gtLorem ipsum dolor sit amet, conmeturasdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore.&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($) {
			$('.slider-testimonials-home1').owlCarousel({
				margin:0,
				nav:true,
				loop:true,
				dots: true,
				items:1
			})
		});
// ]]&gt&lt/script&gt

Static Block: ft-my-account

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket – 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 * : “Himarket – 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="Information" href="#"&gtInformation&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Oders History" href="#"&gtOrders History&lt/a&gt&lt/li&gt
&ltli&gt&lta title="My Wishlist" href="#"&gtMy Wishlist&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="Site Map" href="#"&gtSite Map&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt

Static Block: ft-our-services

To create the static block, go to Content>> Elements>> Blocks with Title * : “SM Himarket – Footer Our Services” and Identifier * : “ft-our-services”

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"&gt
&ltdiv class="title"&gtOur Services&lt/div&gt
&ltdiv class="content"&gt
&ltul&gt
&ltli&gt&lta title="Product Recall" href="#"&gtProduct Recall&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Gift Vouchers" href="#"&gtGift Vouchers&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Returns and Exchanges" href="#"&gtReturns and Exchanges&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Shipping Options" href="#"&gtShipping Options&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Terms of Use" href="#"&gtTerms of Use&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 * : “Contact us info” 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="contact-info cms-content"&gt
&ltp class="cms-content-important"&gtWe love hearing from you, our Luma customers. Please contact us about anything at all. Your latest passion, unique health experience or request for a specific product. We’ll do everything we can to make your Luma experience unforgettable every time. Reach us however you like&lt/p&gt
&ltdiv class="block block-contact-info"&gt
&ltdiv class="block-title"&gt&ltstrong&gtContact Us Info&lt/strong&gt&lt/div&gt
&ltdiv class="block-content"&gt
&ltdiv class="box box-phone"&gt&ltstrong class="box-title"&gt &ltspan&gtPhone&lt/span&gt &lt/strong&gt
&ltdiv class="box-content"&gt&ltspan class="contact-info-number"&gt1-800-403-8838&lt/span&gt
&ltp&gtCall the Luma Helpline for concerns, product questions, or anything else. We’re here for you 24 hours a day - 365 days a year.&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="box box-design-inquiries"&gt&ltstrong class="box-title"&gt &ltspan&gtApparel Design Inquiries&lt/span&gt &lt/strong&gt
&ltdiv class="box-content"&gt
&ltp&gtAre you an independent clothing designer? Feature your products on the Luma website! Please direct all inquiries via email to: &lta href="mailto:cs@luma.com"&gtcs@luma.com&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="box box-press-inquiries"&gt&ltstrong class="box-title"&gt &ltspan&gtPress Inquiries&lt/span&gt &lt/strong&gt
&ltdiv class="box-content"&gt
&ltp&gtPlease direct all media inquiries via email to: &lta href="mailto:pr@luma.com"&gtpr@luma.com&lt/a&gt&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Title * : “” and Identifier * : “ft-category-footer”

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-footer"&gt
&ltdiv class="footer-links-w"&gt
&ltdiv class="label-link"&gtTop Stores : Brand Directory | Store Directory&lt/div&gt
&ltdiv class="content-tags"&gt
&ltul&gt
&ltli&gt
&lth2&gtMOST SEARCHED KEYWORDS MARKET:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Xiaomi Mi3" href="#"&gtXiaomi Mi3&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Digiflip Pro XT 712 Tablet" href="#"&gtDigiflip Pro XT 712 Tablet&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Mi 3 Phones" href="#"&gtMi 3 Phones&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtMOBILES:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Moto E" href="#"&gtMoto E&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Samsung Mobile" href="#"&gtSamsung Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Micromax Mobile" href="#"&gtMicromax Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Nokia Mobile" href="#"&gtNokia Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="HTC Mobile" href="#"&gtHTC Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Sony Mobile" href="#"&gtSony Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Apple Mobile" href="#"&gtApple Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="LG Mobile" href="#"&gtLG Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Karbonn Mobile" href="#"&gtKarbonn Mobile&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtCAMERA:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Nikon Camera" href="#"&gtNikon Camera&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Canon Camera" href="#"&gtCanon Camera&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Sony Camera" href="#"&gtSony Camera&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Samsung Camera" href="#"&gtSamsung Camera&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Point shoot camera" href="#"&gtPoint shoot camera&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Camera Lens" href="#"&gtCamera Lens&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Camera Tripod" href="#"&gtCamera Tripod&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Camera Bag" href="#"&gtCamera Bag&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtLAPTOPS:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Apple Laptop" href="#"&gtApple Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Acer Laptop" href="#"&gtAcer Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Samsung Laptop" href="#"&gtSamsung Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Lenovo Laptop" href="#"&gtLenovo Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Sony Laptop" href="#"&gtSony Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Dell Laptop" href="#"&gtDell Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Asus Laptop" href="#"&gtAsus Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Toshiba Laptop" href="#"&gtToshiba Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="LG Laptop" href="#"&gtLG Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="HP Laptop" href="#"&gtHP Laptop&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Notebook" href="#"&gtNotebook&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtTVS:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Sony TV" href="#"&gtSony TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Samsung TV" href="#"&gtSamsung TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="LG TV" href="#"&gtLG TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Panasonic TV" href="#"&gtPanasonic TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Onida TV" href="#"&gtOnida TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Toshiba TV" href="#"&gtToshiba TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Philips TV" href="#"&gtPhilips TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Micromax TV" href="#"&gtMicromax TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="LED TV" href="#"&gtLED TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="LCD TV" href="#"&gtLCD TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Plasma TV" href="#"&gtPlasma TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="3D TV" href="#"&gt3D TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Smart TV" href="#"&gtSmart TV&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtTABLETS:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Micromax Tablets" href="#"&gtMicromax Tablets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="HCL Tablets" href="#"&gtHCL Tablets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Samsung Tablets" href="#"&gtSamsung Tablets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Lenovo Tablets" href="#"&gtLenovo Tablets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Karbonn Tablets" href="#"&gtKarbonn Tablets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Asus Tablets" href="#"&gtAsus Tablets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Apple Tablets" href="#"&gtApple Tablets&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtWATCHES:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="FCUK Watches" href="#"&gtFCUK Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Titan Watches" href="#"&gtTitan Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Casio Watches" href="#"&gtCasio Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Fastrack Watches" href="#"&gtFastrack Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Timex Watches" href="#"&gtTimex Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Fossil Watches" href="#"&gtFossil Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Diesel Watches" href="#"&gtDiesel Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Luxury Watches" href="#"&gtLuxury Watches&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtCLOTHING:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Shirts" href="#"&gtShirts&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Jeans" href="#"&gtJeans&lt/a&gt&lt/li&gt
&ltli&gt&lta title="T shirts" href="#"&gtT shirts&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Kurtis" href="#"&gtKurtis&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Sarees" href="#"&gtSarees&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Levis Jeans" href="#"&gtLevis Jeans&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Killer Jeans" href="#"&gtKiller Jeans&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Pepe Jeans" href="#"&gtPepe Jeans&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Arrow Shirts" href="#"&gtArrow Shirts&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Ethnic Wear" href="#"&gtEthnic Wear&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Formal Shirts" href="#"&gtFormal Shirts&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Peter England Shirts" href="#"&gtPeter England Shirts&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&ltul&gt
&ltli&gt
&lth2&gtFOOTWEAR:&lt/h2&gt
&lt/li&gt
&ltli&gt&lta title="Casual Shoes" href="#"&gtCasual Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Casual Shoes" href="#"&gtCasual Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Sports Shoes" href="#"&gtSports Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Formal Shoes" href="#"&gtFormal Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Adidas Shoes" href="#"&gtAdidas Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Gas Shoes" href="#"&gtGas Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Puma Shoes" href="#"&gtPuma Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Reebok Shoes" href="#"&gtReebok Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Woodland Shoes" href="#"&gtWoodland Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="Nike Shoes" href="#"&gtNike Shoes&lt/a&gt&lt/li&gt
&ltli&gt&lta title="View all" href="#"&gtView all&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

Static Block: hotline2

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket Hotline Header Home 1″ and Identifier * : “hotline2″

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="phone"&gt&ltem class="fa fa-phone"&gt&lt/em&gt Call Support Free : &ltspan class="phone"&gt (044) 6789 839&lt/span&gt&lt/p&gt

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarker- Block Banner Index 2″ and Identifier * : “block-banner-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="block banner-top-h2"&gt
&ltdiv class="row"&gt
&ltdiv class="col-sm-6"&gt&lta class="banner-img" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/img1.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="col-sm-6"&gt&lta class="banner-img" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/img2.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt

Static Block: blog-block-index2

To create the static block, go to Content>> Elements>> Blocks with Title * : “” and Identifier * : “blog-block-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="block block-blog"&gt
&ltdiv class="block-title"&gt&ltstrong&gt&ltspan&gtLatest&lt/span&gt Blogs&lt/strong&gt&lt/div&gt
&ltdiv class="slider-blog-home2"&gt
&ltdiv class="item-blog"&gt
&ltdiv class="inner-images"&gt&lta class="images" title="Image" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blog-11.jpg"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="inner-infomation"&gt
&ltdiv class="date-time"&gt&ltspan&gt24&lt/span&gt/January 2016&lt/div&gt
&lth2&gt&lta title="Title" href="#"&gtDigital Black Friday event January 2016.&lt/a&gt&lt/h2&gt
&ltp&gtLorem ipsum dolor sit amet, consmctetur asdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore magna aliqua...&lt/p&gt
&ltdiv class="comemt-view"&gt
&ltdiv class="comment"&gt07&ltem class="fa fa-comments"&gt&lt/em&gt&lt/div&gt
&ltdiv class="view-more color-theme"&gt&lta title="View" href="#"&gtView More &ltem class="fa fa-arrow-circle-right"&gt&lt/em&gt&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item-blog"&gt
&ltdiv class="inner-images"&gt&lta class="images" title="Image" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blog-12.jpg"}}" alt="Brand" /&gt&lt/a&gt&lt/div&gt
&ltdiv class=" inner-infomation"&gt
&ltdiv class="date-time"&gt&ltspan&gt24&lt/span&gt/January 2016&lt/div&gt
&lth2&gt&lta title="Title" href="#"&gtDigital Black Friday event January 2016.&lt/a&gt&lt/h2&gt
&ltp&gtLorem ipsum dolor sit amet, consmctetur asdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore magna aliqua...&lt/p&gt
&ltdiv class="comemt-view"&gt
&ltdiv class="comment"&gt07 &ltem class="fa fa-comments"&gt&lt/em&gt&lt/div&gt
&ltdiv class="view-more color-theme"&gt&lta title="View" href="#"&gtView More &ltem class="fa fa-arrow-circle-right"&gt&lt/em&gt&lt/a&gt&lt/div&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($) {
			$('.slider-blog-home2').owlCarousel({
				margin:30,
				nav:true,
				loop:true,
				dots: false,
				items:1
			})
		});
// ]]&gt&lt/script&gt

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarker- Block Banner Center Index 2″ and Identifier * : “block-banner-center”

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"&gt&lta class="banner-img" title="Static Image" href="#"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/img3.jpg"}}" alt="" /&gt&lt/a&gt&lt/div&gt

Static Block: block-policyshop2

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket – Policy Shop Home 1″ and Identifier * : “block-policyshop2″

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 block"&gt
&ltdiv class="row"&gt
&ltdiv class="col-sm-12"&gt
&ltdiv class="content-policy"&gt
&ltdiv class="imgages"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/icon1.png"}}" alt="" /&gt&lt/div&gt
&ltdiv class="content"&gt
&lth2&gtFree Shipping&lt/h2&gt
&ltp&gtOn oders over $99.00&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-12"&gt
&ltdiv class="content-policy"&gt
&ltdiv class="imgages"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/icon2.png"}}" alt="" /&gt&lt/div&gt
&ltdiv class="content"&gt
&lth2&gtMoney Guarantee&lt/h2&gt
&ltp&gt30 days money back&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="col-sm-12"&gt
&ltdiv class="content-policy"&gt
&ltdiv class="imgages"&gt&ltimg src="{{media url="wysiwyg/home-page-image/home-2/icon3.png"}}" alt="" /&gt&lt/div&gt
&ltdiv class="content"&gt
&lth2&gtOnline Support&lt/h2&gt
&ltp&gtOnline support 24/24&lt/p&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

Static Block: testimonials-block-index2

To create the static block, go to Content>> Elements>> Blocks with Title * : “Himarket – Testimonials Home 2″ and Identifier * : “testimonials-block-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="block block-testimonials2"&gt
&ltdiv class="block-title"&gt&ltstrong&gt&ltspan&gtWHAT &lt/span&gtOUR CLIENTS SAY&lt/strong&gt&lt/div&gt
&ltdiv class="slider-testimonials-home1"&gt
&ltdiv class="item"&gt
&ltdiv class="inner"&gt
&ltdiv class="images"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-4.jpg"}}" alt="Brand" /&gt&lt/div&gt
&lth2 class="name"&gtJohny Walker&lt/h2&gt
&ltdiv class="des"&gtLorem ipsum dolor sit amet, conmeturasdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore.&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="inner"&gt
&ltdiv class="images"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-5.jpg"}}" alt="Brand" /&gt&lt/div&gt
&lth2 class="name"&gtJohny Walker&lt/h2&gt
&ltdiv class="des"&gtLorem ipsum dolor sit amet, conmeturasdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore.&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="inner"&gt
&ltdiv class="images"&gt&ltimg src="{{media url="wysiwyg/testimonial/client-6.jpg"}}" alt="Brand" /&gt&lt/div&gt
&lth2 class="name"&gtJohny Walker&lt/h2&gt
&ltdiv class="des"&gtLorem ipsum dolor sit amet, conmeturasdipiscing elit, sed do eiusmod temporace imcedidunt ut labore et dolore.&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($) {
			$('.slider-testimonials-home1').owlCarousel({
				margin:30,
				nav:false,
				loop:false,
				dots: true,
				items:1
			})
		});
// ]]&gt&lt/script&gt

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In SM Himarket Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Himarket >> Advanced to configure this theme’s copyright.

Edit the code here:

SM Himarket © 2016&lta href="magentech.com" title="Magento"&gtMagento&lt/a&gt . All rights reserved.

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

↧

SM Listing Deals

June 24, 2016, 9:31 pm

≫ Next: SM Listing Extend

≪ Previous: SM Himarket v.1.0.0

View demo More detail

This guide will help you install SM Listing Deals 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 Layout Demo

You could see the appearance of SM Listing Deals 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 Listing Deals to configure.
The parameters are divided into the following groups:

General settings
Source Options
Tabs Options
Product Options
Image Options
Effect Options
Advanced Options

Let’s look at the parameters in detail:

General Options

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
Show Type – Allow to choose type: Loadmore/ Slider.

Rows – Set the number rows for slider:

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 Catalog or Field Product.
Select Category – Allow you to select Category.
Product Field to Order By: Set Product Field to Order By.
Field Preload: Set Field to preload.
Child Category Products: Include or Exclude Products from Child Categories.
Category Depth: Allow to choose the number of child category levels to return.
Featured Products: Allow to Show/Hide/Only Featured Products.
Ordering Direction: Allow to order ascending/descending direction.
Product Limitation: Allow to set product limitation.

Tabs Options

Tab All Display – Allow to choose tab all display OR not.
Category title max length – Allow to set the max length of category title.
Categories Order By: – Set Categories Order By: Name/Position/Random.
Categories Ordering Direction: – Allow to order ASC(ascending)/ DESC(descending) direction.
Display Icon: – Allow to choose display icon OR not.
Get Image From Category Image: – Allow to display Image of Category or NOT.
Get Image From Category Description: – Allow to display Description of Category or NOT.
Order to get: – Allow to order to get image with options such as category_description,category_image.
Resize: – Allow you resize category image 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.
Image Replacement: – Only when the categories has no image, the module will take photos from placeholder to replace.

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 Countdown – Allow to display Countdown 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

Product Image

Display – Allow to display Product Image or NOT.

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 image detail 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.

Config When Type Module is Slider

Auto Play – Allow you to set for slideshow auto play OR NOT.
Auto Play Speed: Allow to set speed of timer (larger = slower).
Start – Allow to set page that is displayed at first when you run slideshow.
Step – Set the number of items for each slide transition.
Pause On Hover: Allow to Pause effects when users hover Or not.
Navigation – Allow to Enable/Disable the next/previous button.
Loop – Allow to Enable/Disable to loop products.
Dots – Allow to Enable/Disable one page scroll with dot navigation style.
Margin Right – Allow to set right margin of the image.
Nav Speed: Allow to set the speed of Navigation.
Dots Speed: Allow to set the speed of dot navigation style.
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

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:

&ltp&gt{{block class="Sm\ListingDeals\Block\ListingDeals" name="dealsslider" template="Sm_ListingDeals::default.phtml"}}&lt/p&gt

Design Tab: Please click to see the Backend Settings .

3.4 How To Configure Product With Sale Price

To configure Prduct with Sale Price, go to Products >>Catalog.

And find “featured Joust Duffle” >>Edit.

Choose “Advanced Pricing” to configure Product With Sale Price

4SUPPORT

↧

SM Listing Extend

June 26, 2016, 7:24 pm

≫ Next: SP Shoppystore Update

≪ Previous: SM Listing Deals

View demo More detail

This guide will help you install SM Listing Extend 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 Layout Demo

You could see the appearance of SM Listing Extend 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 Listing Extend to configure.
The parameters are divided into the following groups:

General settings
Source Options
Product Options
Image Options
Effect Options
Advanced Options

Let’s look at the parameters in detail:

General Options

Enable 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.
Number rows of items – Allow to choose the number rows os items.

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

Listing Type – Allow to choose listing type: Under Price/ Field Products.
Under Price – Allow to choose under price to sort products.
Select Category – Allow you to select Category.
Featured Products: Allow to Show/Hide/Only Featured Products.
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 from Product Description – Allow to display Product Description or NOT.
Order to Get – Allow to order to get image with options such as “product_description, product_image”.
Resize – Allow you resize image detail 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

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 to set auto play timeout.
Auto Play Speed- Allow to set speed of timer (larger = slower).
Navigation Speed- Allow to set the speed of Navigation.
Start Possition Item- Allow to choose the first item by position number.
Mouch 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

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:

&ltp&gt{{block class="Sm\ListingExtend\Block\ListingExtend" name="listingextend.default" as="listingextend_default" template="Sm_ListingExtend::default.phtml"}}&lt/p&gt

Design Tab: Please click to see the Backend Settings .

3.4 How To Configure Product With Sale Price

To configure Prduct with Sale Price, go to Products >>Catalog.

And find “featured Joust Duffle” >>Edit.

Choose “Advanced Pricing” to configure Product With Sale Price

4SUPPORT

↧

SP Shoppystore Update

July 8, 2016, 8:31 pm

≫ Next: How to update Visual Composer plugin?

≪ Previous: SM Listing Extend

View demo More detail

1GETTING STARTED

1.1 Introduction

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

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 Shoppystore Theme

Quickstart Installation: sp_shoppystore_quickstart_p16_v3.0.0 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_shoppystore_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 Shoppystore theme
Step 2: Extract the downloaded package named “sp_shoppystore_quickstart_p16_v3.0.0″ 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.

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 Shoppystore Theme Installation

Firstly, you must EXTRACT the “sp_shoppystore_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_shoppystore_template_p16_v3.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_shoppystore_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_shoppystore_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 Shoppystore‘s thumbnail and select Use this themeto replace your current theme with SP Shoppystore 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 configurator” 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

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

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,#quantity_wanted_p label,.custom_modview .spmostviewed-heading .close,.product_list.grid .button-container .cart_button, .product_lists.grid .button-container .cart_button,.spr-container .spr-query

.sp-megamenu .navbar-nav  li li a,

h1,h2,h3,h4,h5,h6,.titleFont

.content_sortPagiBar_top label, .content_sortPagiBar_bottom label,.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span

3.4 Category Pages

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

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

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

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.

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.

3.9 Setup Logo

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

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

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

3.11 Edit Copyright

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 configurator” 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. 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.

6EXTENSIONS CONFIGURATION

6.1 SP Shoppystore Layout 1

displayCustomHtml1

SP Custom HTML – Custom Support
Frontend Appearance:

Backend Setting:

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="welcome-msg">
</ul class="list-msg">
</li></span class="sp-ic fa fa-phone color-theme"><//span> Telephone: </a style="margin-right: 15px;" title="Call:(801) 2345 - 6789" href="tel:+84123456789">(801) 2345 - 6789<//a> </span class="sp-ic fa fa-envelope color-theme"><//span> E-mail: </a title="Contact@gmail.com" href="mailto:contact@gmail.com">contact@gmail.com<//a><//li>
</li></span class="sp-ic fa fa-phone color-theme"><//span> Telephone: </a style="margin-right: 15px;" title="Call:(801) 2345 - 6789" href="tel:+84123456789">(801) 2345 - 6789<//a> </span class="sp-ic fa fa-envelope color-theme"><//span> E-mail: </a title="Contact@gmail.com" href="mailto:contact@gmail.com">contact@gmail.com<//a><//li>
<//ul>
<//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:

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.

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.

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

displayDeal

SP Deal – Hot deal!
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 Customhtml2

SP Custom HTML – Banner Slider
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="custombanner">
</div class="box-img box-1"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner01.jpg" alt="" /><//a><//div>
</div class="box-img box-2"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner02.jpg" alt="" /><//a><//div>
</div class="box-img box-3"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner03.jpg" alt="" /><//a><//div>
<//div>

displayExtraSlider

SP Extra Slider – recommended 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.

displayExtraSlider2

SP Extra Slider – Electronics
Frontend Appearance:

Backend Settings:

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

display Customhtml3

SP Custom HTML – Banner Bottom 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_shoppystore/img/cms/banner04.jpg" alt="" /><//a><//p>

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.

displayExtraSlider3

SP Extra Slider – Jewelry & Watches
Frontend Appearance:

Backend Settings:

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

display Customhtml4

SP Custom HTML – Banner Bottom 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:

</div class="banner-bottom">
</div class="row">
</div class=" col-lg-6 col-md-6 col-sm-6"></a title="Static Image" href="#"></img src="../themes/sp_shoppystore/img/cms/banner05.jpg" alt="Static Image" /><//a><//div>
</div class="col-lg-6 col-md-6 col-sm-6"></a title="Static Image" href="#"></img src="../themes/sp_shoppystore/img/cms/banner06.jpg" alt="Static Image" /><//a><//div>
<//div>
<//div>

displayExtraSlider4

SP Extra Slider – BAGS & SHOES
Frontend Appearance:

Backend Settings:

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

displayListingtab

SP Listing Tabs – TOP SELLING
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.

displayManufacture

SP Manufacture Slider – FEATURED 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.

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_shoppystore\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, Sign up and Save!, Receive email-only deals, special offers & product exclusives

display Customhtml10

1. 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 orders<//a><//li>
</li></a href="#">My credit slips<//a><//li>
</li></a href="#">My addresses<//a><//li>
</li></a href="#">My personal info<//a><//li>
</li></a href="#">My vouchers<//a><//li>
<//ul>

2. 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="#">Gift Services<//a><//li>
</li></a href="#">Best Seller<//a><//li>
</li></a href="#">New Products<//a><//li>
</li></a href="#">Delivery<//a><//li>
</li></a href="index.php?controller=contact">Contact Us<//a><//li>
<//ul>

3. SP Custom HTML – Corporate
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="../sp_shoppystore/en/content/4-about-us">About us<//a><//li>
</li></a href="#">Customer Service<//a><//li>
</li></a href="#">Company<//a><//li>
</li></a href="#">Investor Relations<//a><//li>
</li></a href="#">Typography<//a><//li>
<//ul>

4. SP Custom HTML – Why Choose Us
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="../sp_shoppystore/en/content/4-about-us">About us<//a><//li>
</li></a href="index.php?fc=module&module=smartblog&controller=category">Blog<//a><//li>
</li></a href="#">Company<//a><//li>
</li></a href="#">Investor Relations<//a><//li>
</li></a href="#">Typography<//a><//li>
<//ul>

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 Customhtml5

SP Custom HTML – Free Shiping
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="box-sevicer">
</div class="sn-sevirce sn-put1">
</div class="img-sevirce img-sevirce1"><//div>
</div class="content-service"></a href="#" rel="nofollow" class="sn-title">High Quality<//a> </span>Nullam sed sollicitudin mauris velit id venenatis morbi<//span><//div>
<//div>
</div class="sn-sevirce sn-put2">
</div class="img-sevirce img-sevirce2"><//div>
</div class="content-service"></a href="#" rel="nofollow" class="sn-title">Awesome Support<//a> </span>Nullam sed sollicitudin mauris velit id venenatis morbi<//span><//div>
<//div>
</div class="sn-sevirce sn-put3">
</div class="img-sevirce img-sevirce3"><//div>
</div class="content-service"></a href="#" rel="nofollow" class="sn-title">Really Fast Delivery<//a> </span>Nullam sed sollicitudin mauris velit id venenatis morbi<//span><//div>
<//div>
</div class="sn-sevirce sn-put4">
</div class="img-sevirce img-sevirce4"><//div>
</div class="content-service"></a href="#" rel="nofollow" class="sn-title">14-Day Returns<//a> </span>Nullam sed sollicitudin mauris velit id venenatis morbi<//span><//div>
<//div>
</div class="sn-sevirce sn-put5">
</div class="img-sevirce img-sevirce5"><//div>
</div class="content-service"></a href="#" rel="nofollow" class="sn-title">Secure Checkout<//a> </span>Nullam sed sollicitudin mauris velit id venenatis morbi<//span><//div>
<//div>
<//div>

display Customhtml6

SP Custom HTML – Hot Tags
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-tag"></a href="#">Mini hobby tool kit<//a> </a href="#">case iphone reflective<//a> </a href="#">kingston micro sd card 8gb<//a> </a href="#">led tail light<//a> </a href="#">splants vs zombies figures<//a> </a href="#">the best smartphone<//a> </a href="#">epair parts replacement touch screen digitizer for gps<//a> </a href="#">halloween flatware<//a> </a href="#">32gb tf card<//a> </a href="#">stickfenix tk40 flashlight<//a> </a href="#">android smart<//a> </a href="#">mini gps<//a> </a href="#">coolest headphones<//a> </a href="#">best mini usb flash drive<//a> </a href="#">nike headband<//a> </a href="#">ramos lcd tablet pc black <//a> </a href="#">bluetooth motorcycle headset<//a> </a href="#">travel clock <//a> </a href="#">mercedes grille badges<//a><//div>

6.2 SP Shoppystore Layout 2

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 Customhtml7

SP Custom HTML – Banner Bottom 1 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="bannerhomev2">
</div class="img-effect img-banner1"></a class="img-classv2 banner1" href="#"> </img src="../themes/sp_shoppystore/img/cms/banner08.jpg" alt="img" /> <//a><//div>
</div class="img-effect img-banner2"></a class="img-classv2 banner2" href="#"> </img src="../themes/sp_shoppystore/img/cms/banner09.jpg" alt="img" /> <//a><//div>
</div class="img-effect img-banner3"></a class="img-classv2 banner3" href="#"> </img src="../themes/sp_shoppystore/img/cms/banner10.jpg" alt="img" /> <//a><//div>
<//div>

displayListingtab2

SP Listing Tabs – listing tab bottom 1 layout 2
Frontend Appearance:

Backend Settings:

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

display Customhtml8

SP Custom HTML – Banner right bottom 2 layout 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=" content-home-img-v2">
</div class=" img-effect img-content-homev2"></a class="img-class sn-1" href="#"> </img src="../themes/sp_shoppystore/img/cms/banner11.jpg" alt="img" /></br /> <//a><//div>
</div class=" img-content-homev2">
</div class="img-effect img-content-homev2-1"></a class="img-class sn-2" href="#"> </img src="../themes/sp_shoppystore/img/cms/banner12.jpg" alt="img" /> <//a><//div>
</div class="img-effect img-content-homev2-2"></a class="img-class sn-3" href="#"> </img src="../themes/sp_shoppystore/img/cms/banner13.jpg" alt="img" /> <//a><//div>
<//div>
<//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_shoppystore\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter2.tpl by your editor program.
Find and change the text you want to edit, such as: SUBCRIBE, You a Client, large or small, and want to participate in this adventure, please send us an email to support@nik.com

displayListingtab3

SP Listing Tabs – Special Products
Frontend Appearance:

Backend Settings:

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

displayDeal2

SP Deal – LATEST DEALS
Frontend Appearance:

Backend Settings:

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

display Customhtml9

SP Custom HTML – Banner left bottom 1 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-bottom-left"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner14.jpg" alt="" /><//a><//div>

display Customhtml11

SP Custom HTML – Testimonial 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="clients_say">
</div class="slider-clients-say">
</div class="block_content">
</div class="image"></img src="../themes/sp_shoppystore/img/cms/img-client-1.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
<//div>
<//div>
</div class="block_content">
</div class="image"></img src="../themes/sp_shoppystore/img/cms/img-client-2.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
<//div>
<//div>
</div class="block_content">
</div class="image"></img src="../themes/sp_shoppystore/img/cms/img-client-3.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
<//div>
<//div>
<//div>
<//div>
</p><//p>

6.3 SP Shoppystore Layout 3

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
Sample 8: Please click Here to view
Sample 9: Please click Here to view

display Customhtml12

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="custom-banner-l2 col-xs-12">
</div class="col-xs-12 col-md-3 col-sm-3 col-lg-3 box-img box-img-left"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner15.jpg" alt="" /><//a><//div>
</div class="col-xs-12 col-md-6 col-sm-6 col-lg-6 box-img box-img-center"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner16.jpg" alt="" /><//a><//div>
</div class="col-xs-12 col-md-3 col-sm-3 col-lg-3 box-img box-img-right"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner17.jpg" alt="" /><//a><//div>
<//div>

displayDeal4

SP Deal – LATEST DEALS
Frontend Appearance:

Backend Settings:

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

displayListingtab4

SP Listing Tabs – SPORTS & OUTDOORS
Frontend Appearance:

Backend Settings:

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

displayListingtab5

SP Listing Tabs – SPORTS & OUTDOORS
Frontend Appearance:

Backend Settings:

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

display Customhtml13

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="custom-bottom-l3"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner20.jpg" alt="" /><//a><//div>

display Customhtml14

SP Custom HTML – TESTIMONIALS
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="clients_say">
</div class="slider-clients-say">
</div class="block_content">
</div class="image"></img src="../themes/sp_shoppystore/img/cms/img-client-1.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec phasellus euismod.<//div>
<//div>
<//div>
</div class="block_content">
</div class="image"></img src="../themes/sp_shoppystore/img/cms/img-client-2.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec phasellus euismod.<//div>
<//div>
<//div>
</div class="block_content">
</div class="image"></img src="../themes/sp_shoppystore/img/cms/img-client-3.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec phasellus euismod.<//div>
<//div>
<//div>
<//div>
<//div>
</p><//p>

6.4 SP Shoppystore Layout 4

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
Sample 11: Please click Here to view
Sample 12: Please click Here to view

display Customhtml15

SP Custom HTML – TESTIMONIALS
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="hot-line"></em class="fa fa-phone"><//em>  Hotline: </a title="0123 456 7891" href="#">0123 456 7891<//a><//div>

display Customhtml16

SP Custom HTML – banner top 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:

</div class="custom-banner-l4">
</div class="col-sm-6 banner-left"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner21.jpg" alt="" /> <//a><//div>
</div class="col-sm-6 banner-right">
</div class="banner-top"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner22.jpg" alt="" /> <//a><//div>
</div class="banner-bottom"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner23.jpg" alt="" /> <//a><//div>
<//div>
<//div>

displaysupercategory2

SP Super Category – Luxury ferume
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 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:

</div class="custom-banner-center-l4">
</div class="col-sm-4 banner-left"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner24.jpg" alt="" /> <//a><//div>
</div class="col-sm-4 banner-center"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner25.jpg" alt="" /> <//a><//div>
</div class="col-sm-4 banner-right"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner26.jpg" alt="" /> <//a><//div>
<//div>

displaysupercategory3

SP Super Category – Skin Care
Frontend Appearance:

Backend Settings:

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

display Customhtml18

SP Custom HTML – banner bottom 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:

</div class="custom-banner-bottom-l4">
</div class="col-sm-6 banner-left"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner27.jpg" alt="" /> <//a><//div>
</div class="col-sm-6 banner-center"></a href="#"> </img src="../themes/sp_shoppystore/img/cms/banner28.jpg" alt="" /> <//a><//div>
<//div>

display Customhtml19

SP Custom HTML – Testimonial 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="client">
</div class="content-inner">
</div class="item">
</div class="item-inner col-lg-12">
</div class="image-client"></a href="#" title="KATERINA SANDEROVA"> </img src="../themes/sp_shoppystore/img/cms/img-client-1.png" alt="" /> <//a><//div>
</div class="client-say-info">
</div class="client-comment">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
</div class="name-client">
</h2></a title="KATERINA SANDEROVA">KATERINA SANDEROVA<//a><//h2>
<//div>
</div class="info-client">--- Sale & Martketing ---<//div>
<//div>
<//div>
<//div>
</div class="item ">
</div class="item-inner col-lg-12">
</div class="image-client"></a href="#" title="Jane Doe"> </img src="../themes/sp_shoppystore/img/cms/img-client-2.png" alt="" /> <//a><//div>
</div class="client-say-info">
</div class="client-comment">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
</div class="name-client">
</h2></a title="Jane Doe">Jane Doe<//a><//h2>
<//div>
</div class="info-client">--- Sale & Martketing ---<//div>
<//div>
<//div>
<//div>
</div class="item ">
</div class="item-inner col-lg-12">
</div class="image-client"></a href="#" title="Jack Andrson"> </img src="../themes/sp_shoppystore/img/cms/img-client-3.png" alt="" /> <//a><//div>
</div class="client-say-info">
</div class="client-comment">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
</div class="name-client">
</h2></a title="Jack Andrson">Jack Andrson<//a><//h2>
<//div>
</div class="info-client">--- Sale & Martketing ---<//div>
<//div>
<//div>
<//div>
<//div>
<//div>

displayExtraSlider6

SP Extra Slider – special items
Frontend Appearance:

Backend Settings:

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

displayExtraSlider7

SP Extra Slider – top seller
Frontend Appearance:

Backend Settings:

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

display Customhtml20

SP Custom HTML – banner bottom l4 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="custom-bottom-l4-left"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner29.jpg" alt="" /><//a><//div>

display Customhtml21

SP Custom HTML – banner bottom l4 right
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-bottom-l4-left"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner30.jpg" alt="" /><//a><//div>

displayListingtab6

SP Listing Tabs – SPORTS & OUTDOORS
Frontend Appearance:

Backend Settings:

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

6.5 SP Shoppystore Layout 5

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 Customhtml26

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="banner-top-l5">
</div class="col-sm-4"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner31.jpg" alt="" /><//a><//div>
</div class="col-sm-4">
</div class="img1"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner32.jpg" alt="" /><//a><//div>
</div class="img2"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner33.jpg" alt="" /><//a><//div>
<//div>
</div class="col-sm-4"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner34.jpg" alt="" /><//a><//div>
<//div>

displayListingtab7

SP Listing Tabs – best seller
Frontend Appearance:

Backend Settings:

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

display Customhtml27

SP Custom HTML – Img 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="Img_gallery">
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/g1.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/g2.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/g3.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/g4.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/g5.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/g6.jpg" alt="" /><//a><//div>
<//div>

display Customhtml28

SP Custom HTML – Our 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="Our_gallery">
</div class="text-title">
</h2>– Our gallery –<//h2>
<//div>
</div class="text-des">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<//div>
</p></a href="#" class="text-button">VIEW MORE<//a><//p>
<//div>

displayListingtab8

SP Listing Tabs – featured items
Frontend Appearance:

Backend Settings:

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

display Customhtml29

SP Custom HTML – Free Shiping l5
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="free_shipping">
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/f1.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/f2.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_shoppystore/img/cms/f3.jpg" alt="" /> <//a><//div>
<//div>

displayExtraSlider8

SP Extra Slider – on sale
Frontend Appearance:

Backend Settings:

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

displayExtraSlider9

SP Extra Slider – on sale
Frontend Appearance:

Backend Settings:

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

6.6 SP Shoppystore Layout 6

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 16: Please click Here to view
Sample 17: Please click Here to view
Sample 18: Please click Here to view

display Customhtml30

SP Custom HTML – Banner Top 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:

</div class="banner-top-l6">
</div class="img-top"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner35.jpg" alt="" /><//a><//div>
</div class="img-left"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner36.jpg" alt="" /><//a><//div>
</div class="img-right"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner37.jpg" alt="" /><//a><//div>
<//div>

display Customhtml22

SP Custom HTML – Our Brands 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:

</div class="banner-top-l6">
</div class="img-top"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner35.jpg" alt="" /><//a><//div>
</div class="img-left"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner36.jpg" alt="" /><//a><//div>
</div class="img-right"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner37.jpg" alt="" /><//a><//div>
<//div>

displayListingtab9

SP Listing Tabs – featured items
Frontend Appearance:

Backend Settings:

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

display Customhtml23

SP Custom HTML – Banner Bottom 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:

</div class="banner-bottom-l6">
</div class="col-sm-6 img-left"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner38.jpg" alt="" /><//a><//div>
</div class="col-sm-6 img-right"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner39.jpg" alt="" /><//a><//div>
<//div>

displaysupercategory1

SP Super Category – Women’s
Frontend Appearance:

Backend Settings:

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

displaysupercategory4

SP Super Category – Men’s
Frontend Appearance:

Backend Settings:

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

displayExtraSlider10

SP Extra Slider – top rated
Frontend Appearance:

Backend Settings:

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

display Customhtml24

SP Custom HTML – banner bottom 2 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:

</div class="custom-bottom2-l6">
</div class="img-1 images"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner42.jpg" alt="" /><//a><//div>
</div class="img-2 images"></a href="#"></img src="../themes/sp_shoppystore/img/cms/banner43.jpg" alt="" /><//a><//div>
<//div>

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.

↧

How to update Visual Composer plugin?

July 11, 2016, 1:30 am

≫ Next: How to update new version of SW theme?

≪ Previous: SP Shoppystore Update

- First, login to CodeCanyon and under your profile click Downloads link.

- Re-download Visual Composer and extract it.

- Navigate to Visual Composer License tab and deactivate your license.

- Now navigate to the Plugins menu in your WordPress admin area.

- Remove old copy of Visual Composer.

- Upload new version of Visual Composer.

- Activate Visual Composer license.

↧

How to update new version of SW theme?

July 11, 2016, 1:31 am

≫ Next: How to translate theme/multi language ?

≪ Previous: How to update Visual Composer plugin?

Please find out steps below:

- You need back up your site (database+code), if back up make error you can use back up file.

- Copy your custom code which you change in your code.

- Download new version theme, uninstall old theme and install new theme.

- Deacitve and remove plugins which request to install in your site (this is our plugins, not plugins which you install after).

- click Begin installing plugins: http://prntscr.com/aak9j5 and install plugins again (this is new version which we changed code and you need update them).

- Paste your custom code in new theme.

- Check your site again to sure it works.

↧

How to translate theme/multi language ?

July 11, 2016, 1:34 am

≫ Next: SM Maxshop Magento 2

≪ Previous: How to update new version of SW theme?

1. Please install your localization package.

2. Then you can enable the translate inline to translate some the text don’t translate in localization file.

3. if you can translate by the translation inline and the localization file. You can enable the path hint to find the file .html.

By this way you can find the any the text which hard code on the site. then you can edit directly or use the statement for the text to translate inline:

eg:

=> change to:

you can refer the link:

http://www.magentocommerce.com/magento-connect/customer-experience/internationalization-localization.html

http://help.sweettoothrewards.com/article/434-how-do-i-turn-on-template-path-hints

http://www.youtube.com/watch?v=RLcYd-Alq5c http://inchoo.net/ecommerce/magento/inline-translation-in-magento/

↧

SM Maxshop Magento 2

July 13, 2016, 3:25 am

≫ Next: SP Agood

≪ Previous: How to translate theme/multi language ?

View demo More detail

Note: This theme has two versions for Magento 2.0.x and Magento 1.9.x. This guide is for Magento 2.0.x Version. Please follow SM Maxshop Guide for Magento 1.9.x if you want to use the other.

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

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:

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_maxshop_quickstart_m2.0.7_v2.0.7
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_maxshop_quickstart_m2.0.7_v2.0.7\data_quickstart

Note:

After successful installation DO NOT run magento.

Now we are going to Set file system ownership and permissions. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

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.

Step 12:

Now we are going to verify Composer installation, Deploy static content, Clear compiled code and the cache, Reindex the Magento 2 blocks. On Windows server environment, 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.

Note:

At this moment we should Set file system ownership and permissions again. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

Step 13: Disable Cache: After deploying, go to System>> Tools >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

2.2 Manual Installation

Step 1: Please unzip ‘sm_maxshop_theme_m2.0.x_v2.0.7′ 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 System>> 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 Maxshop.

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 Maxshop 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,
Configure Developer: To Custom Css or Javascript

3CONFIGURATION

3.1 Page Configuration

3.1.1 Home Style 1

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

Copy and paste the following code into the Content field::

</div class="homepage-wrapper home-style-1">
</div class="row">
</div class="sidebar col-lg-3 col-md-3">{{block class="Magento\\Cms\\Block\\Block" block_id="vertical-menu-config"}} {{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar"}} {{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}} {{block class="Magento\\Cms\\Block\\Block" block_id="faqs"}} {{block class="Magento\\Cms\\Block\\Block" block_id="slider-client-say"}} {{block class="Magento\\Cms\\Block\\Block" block_id="brand-left"}}<//div>
</div class="col-main col-lg-9 col-md-9">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}} {{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default.phtml" title="Hot Deals" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2" nb_column5="1" margin="30"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="11" pretext="static_c_electronic" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="20" pretext="static_c_mobile" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="75" pretext="static_c_computer" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}}<//div>
<//div>
</div class="row">{{block class="Magento\\Cms\\Block\\Block" block_id="bottom-service"}}<//div>
<//div>

Design Tab: Please click to see the Backend Setting.

3.1.2 Home Style 2

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

Copy and paste the following code into the Content field::

</div class="homepage-wrapper home-style-2">
</div class="row">
</div class="col-main col-lg-12 col-md-12">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}} {{block class="Magento\\Cms\\Block\\Block" block_id="top-static-image"}}<//div>
<//div>
</div class="row">
</div class="sidebar col-lg-3 col-md-3">{{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar"}} {{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}} {{block class="Magento\\Cms\\Block\\Block" block_id="faqs"}} {{block class="Magento\\Cms\\Block\\Block" block_id="slider-client-say"}} {{block class="Magento\\Cms\\Block\\Block" block_id="brand-left"}}<//div>
</div class="col-main col-lg-9 col-md-9">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default.phtml" title="Hot Deals" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2" nb_column5="1" margin="30"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="11" pretext="static_c_electronic" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="20" pretext="static_c_mobile" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="75" pretext="static_c_computer" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}}<//div>
<//div>
</div class="row">{{block class="Magento\\Cms\\Block\\Block" block_id="bottom-service"}}<//div>
<//div>

Design Tab: Please click to see the Backend Setting.

3.1.3 Home Style 3

Frontend of Home Style 3 – Layout Position

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 Setting.
Content Tab: Please click to see the Backend Setting.

Copy and paste the following code into the Content field::

</div class="homepage-wrapper home-style-3">
</div class="row">
</div class="col-lg-12 col-md-12">
</div class="yt-slideshow">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}<//div>
{{block class="Magento\\Cms\\Block\\Block" block_id="static-banner-right"}}<//div>
<//div>
</div class="row">{{block class="Magento\\Cms\\Block\\Block" block_id="bottom-service"}}<//div>
</div class="row">
</div class="col-main col-lg-9 col-md-9">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default.phtml" title="Hot Deals" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2" nb_column5="1" margin="30"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="11" pretext="static_c_electronic" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="20" pretext="static_c_mobile" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="75" pretext="static_c_computer" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}}<//div>
</div class="sidebar col-lg-3 col-md-3">{{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar"}} {{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}} {{block class="Magento\\Cms\\Block\\Block" block_id="faqs"}} {{block class="Magento\\Cms\\Block\\Block" block_id="slider-client-say"}} {{block class="Magento\\Cms\\Block\\Block" block_id="st-image-home-right"}}<//div>
<//div>
</div class="row">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-slider"}}<//div>
<//div>

Design Tab: Please click to see the Backend Setting.

3.1.4 Home Style 4

Frontend of Home Style 4 – Layout Position

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 Setting.
Content Tab: Please click to see the Backend Setting.

Copy and paste the following code into the Content field::

</div class="homepage-wrapper home-style-4">
</div class="row">
</div class="col-lg-3 col-md-hidden"> <//div>
</div class="col-lg-9 col-md-12">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}<//div>
<//div>
</div class="row">{{block class="Magento\\Cms\\Block\\Block" block_id="bottom-service"}}<//div>
</div class="row">
</div class="sidebar col-lg-3 col-md-3">{{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar"}} {{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}} {{block class="Magento\\Cms\\Block\\Block" block_id="faqs"}} {{block class="Magento\\Cms\\Block\\Block" block_id="slider-client-say"}} {{block class="Magento\\Cms\\Block\\Block" block_id="brand-left"}}<//div>
</div class="col-main col-lg-9 col-md-9">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default.phtml" title="Hot Deals" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2" nb_column5="1" margin="30"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="11" pretext="static_c_electronic" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="20" pretext="static_c_mobile" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="75" pretext="static_c_computer" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}}<//div>
<//div>
<//div>

Design Tab: Please click to see the Backend Setting.

3.1.5 Home Style 5

Frontend of Home Style 5 – Layout Position

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 Setting.
Content Tab: Please click to see the Backend Setting.

Copy and paste the following code into the Content field::

</div class="homepage-wrapper home-style-5">
</div class="row">
</div class="col-lg-12 col-md-12">
</div class="yt-slideshow">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}<//div>
{{block class="Magento\\Cms\\Block\\Block" block_id="st-image-home-right-v5"}}<//div>
<//div>
</div class="row">{{block class="Magento\\Cms\\Block\\Block" block_id="bottom-service"}}<//div>
</div class="row">
</div class="col-main col-lg-12">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default.phtml" title="Hot Deals" nb_column1="5" nb_column2="4" nb_column3="3" nb_column4="2" nb_column5="1" margin="30"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default_index5.phtml" product_category="11" posttext="icon-electronic-st-id" pretext="img-super-1-h5" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default_index5.phtml" product_category="20" posttext="icon-mobile-st-id" pretext="img-super-2-h5" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}} {{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default_index5.phtml" product_category="75" posttext="icon-computer-st-id" pretext="img-super-3-h5" nbi_column1="4" nbi_column2="3" nbi_column3="2" nbi_column4="1"}}<//div>
<//div>
</div class="row">
</div class="blog-bottom col-lg-4 col-md-4 col-sm-6">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block-index5"}}<//div>
</div class="basic-product-bottom col-lg-4 col-md-4 col-sm-6">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sm/basicproducts/sidebar-product-index5.phtml" title="</span>Best Sellers<//span>" product_category="3,7,9,11,20" product_limitation="2" img_width="100" img_height="100" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0"}}<//div>
</div class="col-lg-4 col-md-4 client-say-bottom">{{block class="Magento\\Cms\\Block\\Block" block_id="slider-client-say-index5"}}<//div>
<//div>
</div class="row">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-slider"}}<//div>
<//div>

Design Tab: Please click to see the Backend Setting.

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

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

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizontal“, “Mega Menu Vertical“.
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

3.2.1 Horizontal Megamenu:

Horizontal-mega-menu

Sortable Categories Items Please click Here to view.

Home
Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the Content field::

</div class="home-wrapper-item">
			</div class="item-feature layout-block">
				</div class="title-item-feature"></h2>Layouts<//h2><//div>
				</ul>
					</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>
			<//div>
			
			</div class="item-feature color-block">
				</div class="title-item-feature"></h2>Color styles<//h2><//div>
				</ul>
					</li class="blue"></a title="Blue" href="{{store url="?___store=belgium&___from_store=default"}}">Blue<//a><//li>
					</li class="cyan"></a title="Cyan" href="{{store url="?___store=japan&___from_store=default"}}">Cyan<//a><//li>
					</li class="green"></a title="Green" href="{{store url="?___store=andorra&___from_store=default"}}">Green<//a><//li>
					</li class="orange"></a title="Orange" href="{{store url="?___store=vietnam&___from_store=default"}}">Orange<//a><//li>
					</li class="red"></a title="Red" href="{{store url="?___store=default&___from_store=default"}}">Red<//a><//li>					
				<//ul>
			<//div>
		<//div>

Electronics
Frontend Appearance

Backend Setting: Please click Here to view.

Backend Setting of ‘Ele Row 1′: Please click Here to view.

Note: Do the same with ‘Ele Row 2′ having same level.

Backend Setting of ‘Ele Col 1′: Please click Here to view.

Note: Do the same with the others having same level.

Backend Setting of ‘Image 1′: Please click Here to view.

Copy and paste the following code into the Content field::

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

Fashion
Frontend Appearance

Backend Setting: Please click Here to view.

Note: Do the same with the others having same levelblockquote>

Mobile
Frontend Appearance

Backend Setting: Please click Here to view.

Backend Setting of ‘Row 1′: Please click Here to view.

Note: Do the same with the others having same level.

Backend Setting of ‘Col 1′: Please click Here to view.

Note: Do the same with the others having same level.

3.2.2 Vertical Megamenu:

Horizontal-mega-menu

Sortable Categories Items Please click Here to view.

Fashion
Frontend Appearance

Backend Setting: Please click Here to view.

Note: Do the same with the others having same level.

Smartphone
Frontend Appearance

Backend Setting: Please click Here to view.

Backend Setting of ‘Row1′: Please click Here to view.

Backend Setting of ‘Col1′: Please click Here to view.

Note: Do the same with ‘Col2′ having same level.

Backend Setting of ‘Brand’ in ‘Col1′: Please click Here to view.

Backend Setting of ‘Featured products’: Please click Here to view.

Computer
Frontend Appearance

Backend Setting: Please click Here to view.

Backend Setting of ‘Row1′: Please click Here to view.

Backend Setting of ‘Brand’: Please click Here to view.

Backend Setting of ‘Accessories’: Please click Here to view.

Backend Setting of ‘Row2′: Please click Here to view.

Backend Setting of ‘Banner’: Please click Here to view.

Copy and paste the following code into the Content field::

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

3.3 Configure Extensions

The SM Maxshop front-page has been integrated with the extensions in the following list:

In SM Maxshop Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM to configure extensions as you want.

Position: SM Box Search
Frontend Appearance

Backend of SM Search Box: Click Here

To enable SM Search Box on the frontend, please go to Content>> Elements>> Blocks and create a static block with Identifier * : “search-box”

Please click Here to view the configuration of this static block.

Copy and paste the following code into the content tab of this static block:

</p>{{block class="Sm\SearchBox\Block\SearchBox" name="searchbox" as="searchbox" template="Sm_SearchBox::searchbox.form.mini.phtml"}}<//p>

Position: SM Megamenu
Frontend Appearance

Horizontal Megamenu:
Vertical Megamenu:

Backend of SM Megamenu: Click Here

To enable Vertical Megamenu on the frontend, please go to Content>> Elements>> Blocks and create a static block with Identifier * : “vertical-menu-config”

Please click Here to view the configuration of this static block.

Copy and paste the following code into the content tab of this static block:

</p>{{block class="Sm\MegaMenu\Block\MegaMenu\View" template="Sm_MegaMenu::megamenu.phtml" theme="2" group_id="2" }}<//p>

3.3.3 SM Image Slider

Position: SM Image Slider
Frontend Appearance

Backend of SM Image Slider: 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 Deals

Position: SM Deals
Frontend Appearance

Backend of SM Deals: Click Here

3.3.6 SM Super Categories

Position: SM Super Categories
Frontend Appearance

Backend of SM 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 Maxshop 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-slider

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “header-slider”

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="label-offer-slider">This Week<//div>
</div class="offer-wrapper">
</div class="offer-header">
</ul id="offer-slider">
</li class="item"></a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!<//a><//li>
</li class="item"></a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!<//a><//li>
</li class="item"></a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!<//a><//li>
</li class="item"></a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!<//a><//li>
</li class="item"></a title="Offer" href="#">Pellentesque elementum aliquam libero sed tincidunt nullam!<//a><//li>
<//ul>
</script type="text/javascript">// </![CDATA[
			jQuery(document).ready(function($) {
			var offer_slider = $("#offer-slider");
			offer_slider.owlCarousel({				
			responsive:{
				0:{
					items:1
				},
				480:{
					items:1
				},
				768:{
					items:1
				},
				992:{
					items:1
				},
				1200:{
					items:1
				}
			},
			autoplay:true,
			loop:false,
			nav : false,
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:30,
			});	  
			});
// ]]><//script>
<//div>
<//div>

Static Block: hot-line-header

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “hot-line-header”

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="hot-lilne-wrapper">
</h2>HOT LINE:<//h2>
</a title="Call: (801) 2345 - 6789" href="tel:+84123456789">(801) 2345 - 6789<//a><//div>

Static Block: blog-block

To create the static block, go to Content>> Elements>> Blocks with 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:

</div class="block latest-blog">
</div class="block-title"></strong> </span>Latest Post<//span> <//strong>
</div class="customNavigation nav-left-blog"> <//div>
<//div>
</div class="block-content">
</div class="latest-blog-slider">
</div class="item-blog item">
</div class="img-blog"></a class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"></img src="{{media url="wysiwyg/img-blog/img-blog.png"}}" alt="Image Blog" /><//a><//div>
</div class="blog-info">
</div class="postTitle">
</h2></a title="Vestibulum ipsum a ornare lectus" href="#">Vestibulum ipsum a ornare lectus<//a><//h2>
<//div>
</div class="postContent">Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare.<//div>
<//div>
<//div>
</div class="item-blog item">
</div class="img-blog"></a class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"></img src="{{media url="wysiwyg/img-blog/img-blog.png"}}" alt="Image Blog" /><//a><//div>
</div class="blog-info">
</div class="postTitle">
</h2></a title="Vestibulum ipsum a ornare lectus" href="#">Vestibulum ipsum a ornare lectus<//a><//h2>
<//div>
</div class="postContent">Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare.<//div>
<//div>
<//div>
</div class="item-blog item">
</div class="img-blog"></a class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"></img src="{{media url="wysiwyg/img-blog/img-blog.png"}}" alt="Image Blog" /><//a><//div>
</div class="blog-info">
</div class="postTitle">
</h2></a title="Vestibulum ipsum a ornare lectus" href="#">Vestibulum ipsum a ornare lectus<//a><//h2>
<//div>
</div class="postContent">Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare.<//div>
<//div>
<//div>
</div class="item-blog item">
</div class="img-blog"></a class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"></img src="{{media url="wysiwyg/img-blog/img-blog.png"}}" alt="Image Blog" /><//a><//div>
</div class="blog-info">
</div class="postTitle">
</h2></a title="Vestibulum ipsum a ornare lectus" href="#">Vestibulum ipsum a ornare lectus<//a><//h2>
<//div>
</div class="postContent">Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare.<//div>
<//div>
<//div>
<//div>
<//div>
</script type="text/javascript">// </![CDATA[
		jQuery(document).ready(function($) {
			var owl_blog = $(".latest-blog-slider");
			owl_blog.owlCarousel({				
			responsive:{
				0:{
					items:1
				},
				480:{
					items:2
				},
				768:{
					items:3
				},
				992:{
					items:1
				},
				1200:{
					items:1
				}
			},
			autoplay:false,
			loop:true,
			nav : false,
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:1	
			});	  
			
			
			$('.nav-left-blog .prev-blog').click(function() {
				$('.latest-blog .owl-prev').trigger('click');
			});
			$('.nav-left-blog .next-blog').click(function() {
				$('.latest-blog .owl-next').trigger('click');
			});
			
		});	
	
// ]]><//script>
<//div>

Static Block: static_c_mobile

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static_c_mobile”

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-c-brand">
</div class="banner"></a class="first-image" title="Static Image" href="#"></img class="img-static" src="{{media url="wysiwyg/image-category/img-cat-2.png"}}" alt="Static Image" /><//a><//div>
<//div>

Static Block: faqs

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “faqs”

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="block faqs-block">
</div class="block-title"></strong> </span>FAQs<//span> <//strong><//div>
</div class="block-content">
</div class="faq-wrapper">
</div class="faq-item">
</div id="section1" class="accordion"></span>Pellentesque vitae imperdiet in?<//span><//div>
</div class="container-accordion">
</div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.<//div>
<//div>
<//div>
</div class="faq-item">
</div id="section2" class="accordion"></span>Hendrerit eu nunc massa?<//span><//div>
</div class="container-accordion">
</div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.<//div>
<//div>
<//div>
</div class="faq-item">
</div id="section3" class="accordion"></span>Suspendisse feugiat cursus?<//span><//div>
</div class="container-accordion">
</div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.<//div>
<//div>
<//div>
</div class="faq-item">
</div id="section4" class="accordion"></span>Finibus ullamcorper eleifend?<//span><//div>
</div class="container-accordion">
</div class="content">Donec tempor, odio sed hendrerit placerat, tourna in posuere tortor, blandit nisi erat non tellus. Aenean non finibus turpis.<//div>
<//div>
<//div>
<//div>
<//div>
</script type="text/javascript">// </![CDATA[
				jQuery(document).ready(function($) {
					$('.accordion').accordion_snyderplace({
						defaultOpen: 'section2',
						speed: 'fast',
						animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
							elem.next().slideFadeToggle(opts.speed);
						},
						animateClose: function (elem, opts) { //replace the standard slideDown with custom function
							elem.next().slideFadeToggle(opts.speed);
						}
					});
					//custom animation for open/close
					$.fn.slideFadeToggle = function(speed, easing, callback) {
						return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
					};
				});
			
// ]]><//script>
<//div>

Static Block: static_c_electronic

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static_c_electronic”

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-c-brand">
</div class="banner"></a class="first-image" title="Static Image" href="#"></img class="img-static" src="{{media url="wysiwyg/image-category/img-cat-1.png"}}" alt="Static Image" /><//a><//div>
<//div>

Static Block: slider-client-say

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “slider-client-say”

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="block client-say">
</div class="block-title"></strong> </span>Testimonial<//span> <//strong><//div>
</div class="block-content">
</div class="client-say-slider">
</div class="item item-client-say">
</div class="client-comment">"Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare"<//div>
</div class="client-say-info">
</div class="image-client"></a title="Jack Andrson" href="#"></img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /><//a><//div>
</div class="name-client">
</h2></a title="Jack Andrson" href="#">Jack Andrson<//a><//h2>
</p>Web designer<//p>
<//div>
<//div>
<//div>
</div class="item item-client-say">
</div class="client-comment">"Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare"<//div>
</div class="client-say-info">
</div class="image-client"></a title="Jack Andrson" href="#"></img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /><//a><//div>
</div class="name-client">
</h2></a title="Jack Andrson" href="#">Jack Andrson<//a><//h2>
</p>Web designer<//p>
<//div>
<//div>
<//div>
</div class="item item-client-say">
</div class="client-comment">"Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus tortor sed eros. Sed pharetra ante sit amet suscipit ornare"<//div>
</div class="client-say-info">
</div class="image-client"></a title="Jack Andrson" href="#"></img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /><//a><//div>
</div class="name-client">
</h2></a title="Jack Andrson" href="#">Jack Andrson<//a><//h2>
</p>Web designer<//p>
<//div>
<//div>
<//div>
<//div>
<//div>
</script type="text/javascript">// </![CDATA[
		jQuery(document).ready(function($) {
			var owl_client = $(".client-say-slider");
			owl_client.owlCarousel({				
			responsive:{
				0:{
					items:1
				},
				480:{
					items:1
				},
				768:{
					items:1
				},
				992:{
					items:1
				},
				1200:{
					items:1
				}
			},
			autoplay:false,
			loop:false,
			nav : false,
			dots: true,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:30,
			});			
		});	
	
// ]]><//script>
<//div>

Static Block: brand-left

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “brand-left”

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="block block-brand">
</div class="block-title"></strong> </span>Our Brand<//span> <//strong> </a class="view-all-brand" title="View All" href="#">View All<//a><//div>
</div class="block-content">
</div class="brand-wrapper">
</ul>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-1.png"}}" alt="Brand Logo" /><//a><//li>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-2.png"}}" alt="Brand Logo" /><//a><//li>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-3.png"}}" alt="Brand Logo" /><//a><//li>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-4.png"}}" alt="Brand Logo" /><//a><//li>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-1.png"}}" alt="Brand Logo" /><//a><//li>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-2.png"}}" alt="Brand Logo" /><//a><//li>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-3.png"}}" alt="Brand Logo" /><//a><//li>
</li></a title="Brand" href="#"></img src="{{media url="wysiwyg/brand-image/brand-logo-4.png"}}" alt="Brand Logo" /><//a><//li>
<//ul>
<//div>
<//div>
<//div>

Static Block: static_c_computer

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static_c_computer”

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-c-brand">
</div class="banner"></a class="first-image" title="Static Image" href="#"></img class="img-static" src="{{media url="wysiwyg/image-category/img-cat-3.png"}}" alt="Static Image" /><//a><//div>
<//div>

Static Block: bottom-service

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “bottom-service”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

</ul class="list-services">
</li class="item-service col-lg-4 col-md-4 col-sm-4"></a title="Free Shipping" href="#"></img src="{{media url="wysiwyg/static-image-home/free-shipping.png"}}" alt="Free Shipping" /><//a><//li>
</li class="item-service col-lg-4 col-md-4 col-sm-4"></a title="Guaranteed" href="#"></img src="{{media url="wysiwyg/static-image-home/guaranteed.png"}}" alt="Guaranteed" /><//a><//li>
</li class="item-service col-lg-4 col-md-4 col-sm-4"></a title="Deal" href="#"></img src="{{media url="wysiwyg/static-image-home/deal.png"}}" alt="Deal" /><//a><//li>
<//ul>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “about-us-footer”

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="logo-footer"></img src="{{media url="wysiwyg/footer/footer-logo.png"}}" alt="Maxshop - Responsive Magento Theme for Multipurpose" /><//div>
</p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.<//p>

Static Block: ft-my-account

To create the static block, go to Content>> Elements>> Blocks with 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:

</div class="block ft-my-account">
</div class="title">MY ACCOUNT<//div>
</div class="content">
</ul>
</li></a title="My account" href="{{config path="web/secure/base_url"}}customer/account/">My account<//a><//li>
</li></a title="Login" href="{{config path="web/secure/base_url"}}customer/login/">Login<//a><//li>
</li></a title="My Cart" href="{{config path="web/secure/base_url"}}checkout/cart/">My Cart<//a><//li>
</li></a title="My Wishlist" href="{{config path="web/secure/base_url"}}wishlist/">My Wishlist<//a><//li>
</li></a title="My Compare" href="{{config path="web/secure/base_url"}}catalog/product_compare/index/">My Compare<//a><//li>
<//ul>
<//div>
<//div>

Static Block: ft-information

To create the static block, go to Content>> Elements>> Blocks with 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:

</div class="block ft-information">
</div class="title">INFORMATION<//div>
</div class="content">
</ul>
</li></a title="About Us" href="{{config path="web/secure/base_url"}}about-us.html">About Us<//a><//li>
</li></a title="Jobs" href="#">Jobs<//a><//li>
</li></a title="Delivery Information" href="#">Delivery Information<//a><//li>
</li></a title="Privacy Policy" href="#">Privacy Policy<//a><//li>
</li></a title="Term and Conditions" href="#">Term and Conditions<//a><//li>
<//ul>
<//div>
<//div>

Static Block: ft-contact-us

To create the static block, go to Content>> Elements>> Blocks with 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:

</div class="block ft-contact-us">
</div class="title">Contact Information<//div>
</div class="content">
</p class="address"></em class="fa fa-home"><//em>8901 Marmora Road, Glasgow, D04 89GR<//p>
</p class="phone"></em class="fa fa-mobile-phone" style="font-size: 22px; top: 0;"><//em>Telephone: </a title="Call:(801) 2345 - 6789" href="tel:+84123456789">(801) 2345 - 6789<//a><//p>
</p class="email"></em class="fa fa-envelope" style="font-size: 13px;"><//em>E-mail: </a title="support@maxshop.com" href="mailto:name@email.com">support@maxshop.com<//a><//p>
<//div>
<//div>

To create the static block, go to Content>> Elements>> Blocks with 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:

</p></img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /><//p>

Static Block: top-static-image

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “top-static-image”

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-home-2">
</ul>
</li class="col-s-1"></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/st-img-1-home-2.png"}}" alt="Static Image" /><//a> </a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/st-img-2-home-2.png"}}" alt="Static Image" /><//a><//li>
</li class="col-s-2"></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/st-img-3-home-2.png"}}" alt="Static Image" /><//a><//li>
</li class="col-s-3"></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/st-img-4-home-2.png"}}" alt="Static Image" /><//a><//li>
</li class="col-s-4"></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/st-img-5-home-2.png"}}" alt="Static Image" /><//a><//li>
<//ul>
<//div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-banner-right”

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-right">
</ul>
</li></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/img-banner-right-1.png"}}" alt="Static Image" /><//a><//li>
</li></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/img-banner-right-2.png"}}" alt="Static Image" /><//a><//li>
</li></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/img-banner-right-3.png"}}" alt="Static Image" /><//a><//li>
<//ul>
<//div>

Static Block: st-image-home-right

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “st-image-home-right”

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-image-home-right"></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/img-static-right.png"}}" alt="Static Image" /><//a><//div>

Static Block: st-image-home-right-v5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “st-image-home-right-v5″

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-right">
</ul>
</li></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/banner-right-1-home-5.png"}}" alt="Static Image" /><//a><//li>
</li></a title="Static Image" href="#"></img src="{{media url="wysiwyg/static-image-home/banner-right-2-home-5.png"}}" alt="Static Image" /><//a><//li>
<//ul>
<//div>

Static Block: blog-block-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “blog-block-index5″

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="block-title-bottom">
</h2>News Update<//h2>
<//div>
</div class="latest-blog-bottom">
</div class="item-blog item">
</div class="date-blog-left">
</div class="d-blog">26<//div>
</div class="m-blog">Nov<//div>
<//div>
</div class="blog-info">
</div class="postTitle">
</h2></a title="Vestibulum ipsum a ornare lectus" href="#">Vestibulum ipsum a ornare lectus<//a><//h2>
<//div>
</div class="postContent">Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus<//div>
<//div>
<//div>
</div class="item-blog item">
</div class="date-blog-left">
</div class="d-blog">26<//div>
</div class="m-blog">Nov<//div>
<//div>
</div class="blog-info">
</div class="postTitle">
</h2></a title="Dolor at tincidunt mollis augue" href="#">Dolor at tincidunt mollis augue<//a><//h2>
<//div>
</div class="postContent">Duis aliquam, magna ac fermentum are finibus, orci viverra risus, non into varius tellus<//div>
<//div>
<//div>
<//div>

Static Block: slider-client-say-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “slider-client-say-index5″

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="client-wrapper-b">
</div class="block-title-bottom">
</h2>Testimonial<//h2>
</div class="nav-custom"></a class="prev-test fa fa-angle-left" title="Previous"></span>Previous<//span><//a> </a class="next-test fa fa-angle-right" title="Next"></span>Next<//span><//a><//div>
<//div>
</div class="block-content">
</div class="client-say-slider">
</div class="item item-client-say">
</div class="image-client"></a title="Jack Andrson" href="#"></img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /><//a><//div>
</div class="client-say-info">
</div class="client-comment">"Duis aliquam, magna ac fermentum are we finibus, orci viverra risus, into varius telluso tortor sed eros. Sedion pharetra ante sit amet suscipit ornare. Integer et auctor diam sit dolor."<//div>
</div class="name-client">
</h2></a title="Jack Andrson" href="#">Jack Andrson<//a><//h2>
<//div>
<//div>
<//div>
</div class="item item-client-say">
</div class="image-client"></a title="Jack Andrson" href="#"></img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /><//a><//div>
</div class="client-say-info">
</div class="client-comment">"Duis aliquam, magna ac fermentum are we finibus, orci viverra risus, into varius telluso tortor sed eros. Sedion pharetra ante sit amet suscipit ornare. Integer et auctor diam sit dolor."<//div>
</div class="name-client">
</h2></a title="Jack Andrson" href="#">Jack Andrson<//a><//h2>
<//div>
<//div>
<//div>
</div class="item item-client-say">
</div class="image-client"></a title="Jack Andrson" href="#"></img src="{{media url="wysiwyg/image-client/img-client-1.png"}}" alt="Image Client" /><//a><//div>
</div class="client-say-info">
</div class="client-comment">"Duis aliquam, magna ac fermentum are we finibus, orci viverra risus, into varius telluso tortor sed eros. Sedion pharetra ante sit amet suscipit ornare. Integer et auctor diam sit dolor."<//div>
</div class="name-client">
</h2></a title="Jack Andrson" href="#">Jack Andrson<//a><//h2>
<//div>
<//div>
<//div>
<//div>
<//div>
</script type="text/javascript">// </![CDATA[
			jQuery(document).ready(function($) {
				var owl_client = $(".client-say-slider");
				owl_client.owlCarousel({				
				responsive:{
					0:{
						items:1
					},
					480:{
						items:1
					},
					768:{
						items:1
					},
					992:{
						items:1
					},
					1200:{
						items:1
					}
				},
				autoplay:false,
				loop:false,
				nav : false,
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:30,
				});	
				$('.client-wrapper-b .prev-test').click(function() {
					$('.client-wrapper-b .owl-prev').trigger('click');
				});
				$('.client-wrapper-b .next-test').click(function() {
					$('.client-wrapper-b .owl-next').trigger('click');
				});			
			});
// ]]><//script>
<//div>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In SM Maxshop Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Maxshop >> Advanced to configure this theme’s copyright.

Edit the code here:

SM Maxshop © 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 Maxshop Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM Maxshop >> 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 Agood

July 20, 2016, 9:53 pm

≫ Next: SM Market Magento 2.1.0

≪ Previous: SM Maxshop Magento 2

View demo More detail

1GETTING STARTED

1.1 Introduction

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

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 Agood Theme

Quickstart Installation: sp_agood_quickstart_p16_v3.0.0 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_agood_template_p16_v3.0.0.zip file

2.1 Quickstart Installation

Step 1: Download the quickstart package of SP Agood theme
Step 2: Extract the downloaded package named “sp_agood_quickstart_p16_v3.0.0″ 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.

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.

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 Agood Theme Installation

Firstly, you must EXTRACT the “sp_agood_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_agood_template_p16_v3.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_agood_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_agood_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 Agood‘s thumbnail and select Use this themeto replace your current theme with SP Agood 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

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

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

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,#quantity_wanted_p label,.custom_modview .spmostviewed-heading .close,.product_list.grid .button-container .cart_button, .product_lists.grid .button-container .cart_button,.spr-container .spr-query

.sp-megamenu .navbar-nav  li li a,

h1,h2,h3,h4,h5,h6,.titleFont

.content_sortPagiBar_top label, .content_sortPagiBar_bottom label,.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span

3.4 Category Pages

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

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

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

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.

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.

3.9 Setup Logo

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.11 Edit Copyright

Frontend Appearance:

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. After finishing, you could go to the front-end to see the changes.

3.12 Edit Payment

Frontend Appearance:

6EXTENSIONS CONFIGURATION

6.1 SP Agood Layout 1

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 2: Fill information into the required field (*) as below:

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.

displayCustomHtml1

SP Custom HTML – Custom Support
Frontend Appearance:

Backend Setting:

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="support-info">
<ul>
<li class="live-chat"><a href="#">Start <strong>live chat</strong></a></li>
<li class="phone-support"><span>Call our customer service at:</span><strong> 096-999-8386</strong></li>
</ul>
</div>

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.

displayTag2

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 >> click “Configure” button to configure.

Step 2: In the “SP Tags 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 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:

<div class="free-shipping">
<div class="item style-01">
<div class="thumb"><img src="../themes/sp_agood/img/cms/free-ship.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">free shipping</a></h4>
<p>Delivery world wide</p>
</div>
</div>
<div class="item style-02">
<div class="thumb"><img src="../themes/sp_agood/img/cms/money.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">money back</a></h4>
<p>While not exactly line</p>
</div>
</div>
<div class="item style-03">
<div class="thumb"><img src="../themes/sp_agood/img/cms/support.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">we support</a></h4>
<p>Online store 24/7</p>
</div>
</div>
<div class="item style-04">
<div class="thumb"><img src="../themes/sp_agood/img/cms/hotline.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">hot line</a></h4>
<strong>+ 098.111.666</strong></div>
</div>
</div>

displayCountdownproduct

SP Countdown product slider – 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 Countdown product slider” module.

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

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

displayCategories

SP Categories – collection!
Frontend Appearance:

Backend Settings:

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

Step 2: In the “SP Categories” 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:

<div class="col-md-6 col-sm-6 col-xs-6 images"><a href="#"><img src="../themes/sp_agood/img/cms/banner01.jpg" alt="images" /></a></div>
<div class="col-md-6 col-sm-6 col-xs-6 images"><a href="#"><img src="../themes/sp_agood/img/cms/banner02.jpg" alt="images" /></a></div>

displayListingtab

SP Listing Tabs – Top Selling
Frontend Appearance:

Backend Settings:

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

displayExtraSlider4

SP Extra Slider – Top 10 Popular
Frontend Appearance:

Backend Settings:

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

display Customhtml3

SP Custom HTML – Banner Content Layout 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:

<div class="custom-banner-02">
<div class="row custom-row">
<div class="custom-col-left col-md-6 col-sm-6 col-xs-6">
<div class="images style-01"><a href="#"><img src="../themes/sp_agood/img/cms/banner03.jpg" alt="images" /></a></div>
<div class="images style-02"><a href="#"><img src="../themes/sp_agood/img/cms/banner04.jpg" alt="images" /></a></div>
</div>
<div class="custom-col-right col-md-6 col-sm-6 col-xs-6">
<div class="images style-03"><a href="#"><img src="../themes/sp_agood/img/cms/banner05.jpg" alt="images" /></a></div>
</div>
</div>
</div>

displayExtraSlider

SP Extra Slider – Hot Sale
Frontend Appearance:

Backend Settings:

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

displayExtraSlider6

SP Extra Slider – Viewed Products
Frontend Appearance:

Backend Settings:

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.

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:

<div class="bg_testimonia">
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_agood/themes/sp_agood/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_agood/themes/sp_agood/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_agood/themes/sp_agood/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_agood/themes/sp_agood/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
</div>

displayManufacture

SP Manufacture Slider – FEATURED BRANDS
Frontend Appearance:

Backend Settings:

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

SP Theme Configuration
Frontend Appearance:

Backend Settings:

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

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

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_agood\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, Sign up and Save!, Receive email-only deals, special offers & product exclusives

display Customhtml10

1. SP Custom HTML – us address
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="#">View Points and Certificates</a></li>
<li><a href="#">Learn More</a></li>
<li><a href="#">Exclusive Offers</a></li>
<li><a href="#">Sign in or Create Account</a></li>
</ul>

2. SP Custom HTML – support & 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="#">Customer Service</a></li>
<li><a href="#">Protection Plans</a></li>
<li><a href="#">Installation</a></li>
<li><a href="#">Trade-In Program</a></li>
<li><a href="#">More Support & Services</a></li>
</ul>

3. SP Custom HTML – orders & returns
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="#">Order Status</a></li>
<li><a href="#">Return & Exchange Promise</a></li>
<li><a href="#">Price Match Guarantee</a></li>
<li><a href="#">Pay With Points</a></li>
<li><a href="#">More Orders & Returns Help</a></li>
</ul>

4. SP Custom HTML – credit cards
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="#">make payment/check balance</a></li>
<li><a href="#">credit card offers</a></li>
<li><a href="#">apply now</a></li>
</ul>

display Customhtml11

SP Custom HTML – products tag
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="tags-container">
<ul>
<li><strong>furniture: </strong></li>
<li><a href="#">Bedsheets</a></li>
<li><a href="#">Curtains</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Storage</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Wall</a></li>
<li><a href="#">Decor</a></li>
<li><a href="#">Showpieces</a></li>
<li><a href="#">Clocks</a></li>
<li><a href="#">Towels</a></li>
<li><a href="#">Coffee</a></li>
<li><a href="#">Mugs</a></li>
<li><a href="#">Screwdrivers</a></li>
</ul>
<ul>
<li><strong>camera: </strong></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Lens</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Tripod</a></li>
</ul>
<ul>
<li><strong>laptops: </strong></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Acer</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Lenovo</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Dell</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Asus</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Toshiba</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Notebook</a></li>
</ul>
<ul>
<li><strong>tvs: </strong></li>
<li><a href="#">Sony</a></li>
<li><a href="#">TV Samsung</a></li>
<li><a href="#">TV LG</a></li>
<li><a href="#">TV Panasonic</a></li>
<li><a href="#">TV Onida</a></li>
<li><a href="#">TV Toshiba</a></li>
<li><a href="#">TV Philips</a></li>
<li><a href="#">TV Micromax</a></li>
<li><a href="#">TV LED</a></li>
<li><a href="#">TV 3D</a></li>
<li><a href="#">TV Curved</a></li>
<li><a href="#">TV Smart</a></li>
</ul>
</div>

SP Theme Configuration
Frontend Appearance:

Backend Settings:

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

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

6.2 SP Agood Layout 2

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 Customhtml9

SP Custom HTML – Layout 2 – Banner slider
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-bannerSlider">
<div class="row">
<div class="style-01 col-md-6 col-sm-6 col-xs-6"><a href="#"><img src="../themes/sp_agood/img/cms/banner06.jpg" alt="images" /></a></div>
<div class="style-02 col-md-6 col-sm-6 col-xs-6"><a href="#"><img src="../themes/sp_agood/img/cms/banner07.jpg" alt="images" /></a></div>
</div>
</div>

display Customhtml12

SP Custom HTML – Layout 2 – Banner right
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="col-sm-12 images"><a href="#"><img src="../themes/sp_agood/img/cms/banner08.jpg" alt="image" /></a></div>

displayExtraSlider8

SP Extra Slider – top10 popular
Frontend Appearance:

Backend Settings:

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

displayExtraSlider5

SP Extra Slider – feature products!
Frontend Appearance:

Backend Settings:

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

displayCowndowntproducts2

SP Cowndowntproductslider – 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 Cowndowntproductslider” module.

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

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

displayListingtab2

SP Listingtabs – Top Selling!
Frontend Appearance:

Backend Settings:

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

Step 2: In the “SP Listingtabs” 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 – Layout 2 – 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="row">
<div class="images style-01 col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_agood/img/cms/banner09.jpg" alt="images" /></a></div>
<div class="images style-02 col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_agood/img/cms/banner10.jpg" alt="images" /></a></div>
</div>

displayExtraSlider7

SP Extra Slider – new arrivals!
Frontend Appearance:

Backend Settings:

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

display Customhtml4

SP Custom HTML – Layout 2 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="bg_testimonia2">
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_agood/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_agood/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_agood/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
</div>

6.3 SP Agood Layout 3

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
Sample 8: Please click Here to view
Sample 9: Please click Here to view

displayExtraSlider9

SP Extra Slider – extraslider index 3!
Frontend Appearance:

Backend Settings:

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

displaySuperCategory2

SP Super Category – mobile & tablet
Frontend Appearance:

Backend Settings:

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

displaySuperCategory1

SP Super Category – electronics
Frontend Appearance:

Backend Settings:

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

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.

display Customhtml16

SP Custom HTML – Banner Center 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="row custom-row">
<div class="images col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_agood/img/cms/banner11.jpg" alt="images" /></a></div>
<div class="images col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_agood/img/cms/banner12.jpg" alt="images" /></a></div>
<div class="images col-md-12 col-sm-12 col-xs-12"><a href="#"><img src="../themes/sp_agood/img/cms/banner13.jpg" alt="images" /></a></div>
</div>

displayListingtab4

SP Listing Tabs – SPORTS & OUTDOORS
Frontend Appearance:

Backend Settings:

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

displayListingtab5

SP Listing Tabs – SPORTS & OUTDOORS
Frontend Appearance:

Backend Settings:

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

display Customhtml13

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="custom-bottom-l3"></a href="#"></img src="../themes/sp_agood/img/cms/banner20.jpg" alt="" /><//a><//div>

display Customhtml14

SP Custom HTML – TESTIMONIALS
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="clients_say">
</div class="slider-clients-say">
</div class="block_content">
</div class="image"></img src="../themes/sp_agood/img/cms/img-client-1.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec phasellus euismod.<//div>
<//div>
<//div>
</div class="block_content">
</div class="image"></img src="../themes/sp_agood/img/cms/img-client-2.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec phasellus euismod.<//div>
<//div>
<//div>
</div class="block_content">
</div class="image"></img src="../themes/sp_agood/img/cms/img-client-3.png" alt="" /><//div>
</div class="block-info">
</div class="text">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec phasellus euismod.<//div>
<//div>
<//div>
<//div>
<//div>
</p><//p>

6.4 SP Agood Layout 4

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
Sample 11: Please click Here to view
Sample 12: Please click Here to view

display Customhtml15

SP Custom HTML – TESTIMONIALS
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="hot-line"></em class="fa fa-phone"><//em>  Hotline: </a title="0123 456 7891" href="#">0123 456 7891<//a><//div>

display Customhtml16

SP Custom HTML – banner top 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:

</div class="custom-banner-l4">
</div class="col-sm-6 banner-left"></a href="#"> </img src="../themes/sp_agood/img/cms/banner21.jpg" alt="" /> <//a><//div>
</div class="col-sm-6 banner-right">
</div class="banner-top"></a href="#"> </img src="../themes/sp_agood/img/cms/banner22.jpg" alt="" /> <//a><//div>
</div class="banner-bottom"></a href="#"> </img src="../themes/sp_agood/img/cms/banner23.jpg" alt="" /> <//a><//div>
<//div>
<//div>

displaysupercategory2

SP Super Category – Luxury ferume
Frontend Appearance:

Backend Settings:

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

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:

</div class="custom-banner-center-l4">
</div class="col-sm-4 banner-left"></a href="#"> </img src="../themes/sp_agood/img/cms/banner24.jpg" alt="" /> <//a><//div>
</div class="col-sm-4 banner-center"></a href="#"> </img src="../themes/sp_agood/img/cms/banner25.jpg" alt="" /> <//a><//div>
</div class="col-sm-4 banner-right"></a href="#"> </img src="../themes/sp_agood/img/cms/banner26.jpg" alt="" /> <//a><//div>
<//div>

displaysupercategory3

SP Super Category – Skin Care
Frontend Appearance:

Backend Settings:

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

display Customhtml18

SP Custom HTML – banner bottom 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:

</div class="custom-banner-bottom-l4">
</div class="col-sm-6 banner-left"></a href="#"> </img src="../themes/sp_agood/img/cms/banner27.jpg" alt="" /> <//a><//div>
</div class="col-sm-6 banner-center"></a href="#"> </img src="../themes/sp_agood/img/cms/banner28.jpg" alt="" /> <//a><//div>
<//div>

display Customhtml19

SP Custom HTML – Testimonial 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="client">
</div class="content-inner">
</div class="item">
</div class="item-inner col-lg-12">
</div class="image-client"></a href="#" title="KATERINA SANDEROVA"> </img src="../themes/sp_agood/img/cms/img-client-1.png" alt="" /> <//a><//div>
</div class="client-say-info">
</div class="client-comment">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
</div class="name-client">
</h2></a title="KATERINA SANDEROVA">KATERINA SANDEROVA<//a><//h2>
<//div>
</div class="info-client">--- Sale & Martketing ---<//div>
<//div>
<//div>
<//div>
</div class="item ">
</div class="item-inner col-lg-12">
</div class="image-client"></a href="#" title="Jane Doe"> </img src="../themes/sp_agood/img/cms/img-client-2.png" alt="" /> <//a><//div>
</div class="client-say-info">
</div class="client-comment">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
</div class="name-client">
</h2></a title="Jane Doe">Jane Doe<//a><//h2>
<//div>
</div class="info-client">--- Sale & Martketing ---<//div>
<//div>
<//div>
<//div>
</div class="item ">
</div class="item-inner col-lg-12">
</div class="image-client"></a href="#" title="Jack Andrson"> </img src="../themes/sp_agood/img/cms/img-client-3.png" alt="" /> <//a><//div>
</div class="client-say-info">
</div class="client-comment">Donec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim ac quam scelerisque rutrum. Aliquam ante dolor, posuere nec mattis id, suscipit ac mi. Praesent luctus ex massa, nec feugiat est eleifend nec. Cras viverra purus a mauris malesuada aliquam. Integer purus lectus, volutpat quis gravida porttitor, venenatis ut tortor. Phasellus a sapien lorem.<//div>
</div class="name-client">
</h2></a title="Jack Andrson">Jack Andrson<//a><//h2>
<//div>
</div class="info-client">--- Sale & Martketing ---<//div>
<//div>
<//div>
<//div>
<//div>
<//div>

displayExtraSlider6

SP Extra Slider – special items
Frontend Appearance:

Backend Settings:

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

displayExtraSlider7

SP Extra Slider – top seller
Frontend Appearance:

Backend Settings:

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

display Customhtml20

SP Custom HTML – banner bottom l4 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="custom-bottom-l4-left"></a href="#"></img src="../themes/sp_agood/img/cms/banner29.jpg" alt="" /><//a><//div>

display Customhtml21

SP Custom HTML – banner bottom l4 right
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-bottom-l4-left"></a href="#"></img src="../themes/sp_agood/img/cms/banner30.jpg" alt="" /><//a><//div>

displayListingtab6

SP Listing Tabs – SPORTS & OUTDOORS
Frontend Appearance:

Backend Settings:

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

6.5 SP Agood Layout 5

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 Customhtml26

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="banner-top-l5">
</div class="col-sm-4"></a href="#"></img src="../themes/sp_agood/img/cms/banner31.jpg" alt="" /><//a><//div>
</div class="col-sm-4">
</div class="img1"></a href="#"></img src="../themes/sp_agood/img/cms/banner32.jpg" alt="" /><//a><//div>
</div class="img2"></a href="#"></img src="../themes/sp_agood/img/cms/banner33.jpg" alt="" /><//a><//div>
<//div>
</div class="col-sm-4"></a href="#"></img src="../themes/sp_agood/img/cms/banner34.jpg" alt="" /><//a><//div>
<//div>

displayListingtab7

SP Listing Tabs – best seller
Frontend Appearance:

Backend Settings:

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

display Customhtml27

SP Custom HTML – Img 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="Img_gallery">
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/g1.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/g2.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/g3.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/g4.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/g5.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/g6.jpg" alt="" /><//a><//div>
<//div>

display Customhtml28

SP Custom HTML – Our 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="Our_gallery">
</div class="text-title">
</h2>– Our gallery –<//h2>
<//div>
</div class="text-des">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<//div>
</p></a href="#" class="text-button">VIEW MORE<//a><//p>
<//div>

displayListingtab8

SP Listing Tabs – featured items
Frontend Appearance:

Backend Settings:

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

display Customhtml29

SP Custom HTML – Free Shiping l5
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="free_shipping">
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/f1.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/f2.jpg" alt="" /><//a><//div>
</div class="col-sm-4 img"></a href="#"></img src="../themes/sp_agood/img/cms/f3.jpg" alt="" /> <//a><//div>
<//div>

displayExtraSlider8

SP Extra Slider – on sale
Frontend Appearance:

Backend Settings:

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

displayExtraSlider9

SP Extra Slider – on sale
Frontend Appearance:

Backend Settings:

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

6.6 SP Agood Layout 6

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 16: Please click Here to view
Sample 17: Please click Here to view
Sample 18: Please click Here to view

display Customhtml30

SP Custom HTML – Banner Top 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:

</div class="banner-top-l6">
</div class="img-top"></a href="#"></img src="../themes/sp_agood/img/cms/banner35.jpg" alt="" /><//a><//div>
</div class="img-left"></a href="#"></img src="../themes/sp_agood/img/cms/banner36.jpg" alt="" /><//a><//div>
</div class="img-right"></a href="#"></img src="../themes/sp_agood/img/cms/banner37.jpg" alt="" /><//a><//div>
<//div>

display Customhtml22

SP Custom HTML – Our Brands 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:

</div class="banner-top-l6">
</div class="img-top"></a href="#"></img src="../themes/sp_agood/img/cms/banner35.jpg" alt="" /><//a><//div>
</div class="img-left"></a href="#"></img src="../themes/sp_agood/img/cms/banner36.jpg" alt="" /><//a><//div>
</div class="img-right"></a href="#"></img src="../themes/sp_agood/img/cms/banner37.jpg" alt="" /><//a><//div>
<//div>

displayListingtab9

SP Listing Tabs – featured items
Frontend Appearance:

Backend Settings:

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

display Customhtml23

SP Custom HTML – Banner Bottom 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:

</div class="banner-bottom-l6">
</div class="col-sm-6 img-left"></a href="#"></img src="../themes/sp_agood/img/cms/banner38.jpg" alt="" /><//a><//div>
</div class="col-sm-6 img-right"></a href="#"></img src="../themes/sp_agood/img/cms/banner39.jpg" alt="" /><//a><//div>
<//div>

displaysupercategory1

SP Super Category – Women’s
Frontend Appearance:

Backend Settings:

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

displaysupercategory4

SP Super Category – Men’s
Frontend Appearance:

Backend Settings:

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

displayExtraSlider10

SP Extra Slider – top rated
Frontend Appearance:

Backend Settings:

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

display Customhtml24

SP Custom HTML – banner bottom 2 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:

</div class="custom-bottom2-l6">
</div class="img-1 images"></a href="#"></img src="../themes/sp_agood/img/cms/banner42.jpg" alt="" /><//a><//div>
</div class="img-2 images"></a href="#"></img src="../themes/sp_agood/img/cms/banner43.jpg" alt="" /><//a><//div>
<//div>

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 Market Magento 2.1.0

July 22, 2016, 6:45 pm

≫ Next: SM Shoppystore Magento 2.1.0

≪ Previous: SP Agood

View demo More detail

Note: This theme has two versions for Magento 2.0.x and Magento 1.9.x. This guide is for Magento 2.0.x Version. Please follow SM Market Guide for Magento 1.9.x if you want to use the other.

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

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:

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_market_quickstart_m2.0.7_v2.1.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_market_quickstart_m2.0.7_v2.1.0\data_quickstart

Note:

After successful installation DO NOT run magento.

Now we are going to Set file system ownership and permissions. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

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.

Step 12:

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.

Note:

At this moment we should Set file system ownership and permissions again. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

2.2 Manual Installation

Step 1: Please unzip ‘sm_market_theme_m2.0.x_v2.1.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 Market.

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 Market 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,
Configure Developer: To Custom Css or Javascript

3CONFIGURATION

3.1 Page Configuration

3.1.1 Home Style 1

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-style home-page-1">
<div class="row">
<div class="col-lg-9 col-lg-offset-3">{{block class="Magento\\Cms\\Block\\Block" block_id="top-search"}}
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
<div class="static-image-1">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1"}}</div>
<div class="services-home">{{block class="Magento\\Cms\\Block\\Block" block_id="services-store"}}</div>
</div>
</div>
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="row">
<div class="static-image-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

3.1.2 Home Style 2

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-style home-page-2">
<div class="row">
<div class="col-lg-9 col-lg-offset-3">
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 newsletter-home">{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-home.phtml"}}</div>
<div class="col-lg-9 col-md-9 static-image-block-1">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-3"}}</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 left-main">
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="static-image-block-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-4"}}</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
</div>
<div class="col-lg-3 col-md-3 right-main">{{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar-home"}} {{block class="Magento\\Cms\\Block\\Block" block_id="clients-say-slider"}} {{block class="Magento\\Cms\\Block\\Block" block_id="static-image-sidebar"}}</div>
</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

3.1.3 Home Style 3

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-style home-page-3">
<div class="row">
<div class="col-lg-9 col-md-9 image-slideshow">
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
<div class="col-lg-3 col-md-3 static-image-5">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-5"}}</div>
</div>
<div class="services-home">{{block class="Magento\\Cms\\Block\\Block" block_id="services-store-3"}}</div>
<div class="row">
<div class="col-lg-3 col-md-3 sidebar-home">{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/custom-nav.phtml"}} {{block class="Magento\\Cms\\Block\\Block" block_id="product-sidebar-home3"}} {{block class="Magento\\Cms\\Block\\Block" block_id="clients-say-slider"}} {{block class="Magento\\Cms\\Block\\Block" block_id="static-image-7"}}</div>
<div class="col-lg-9 col-md-9 main-home">
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="static-image-6">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-6"}}</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
</div>
</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design Tab: Please click to see the Backend Settings.

3.1.4 Home Style 4

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-style home-page-4">
<div class="row">
<div class="col-lg-9 image-slideshow">
<div class="image-slider-home">{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
<div class="col-lg-3 slider-deal">{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default.phtml"}}</div>
</div>
<div class="services-home">{{block class="Magento\\Cms\\Block\\Block" block_id="services-store-3"}}</div>
<div class="list-product-home">{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::sm/listingtabs/default.phtml"}}</div>
<div class="row">
<div class="static-image-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
</div>
<div class="list-product-home list-product-home-custom">{{block class="Magento\\Cms\\Block\\Block" block_id="listing-tab-2"}}</div>
<div class="home-collection">{{block class="Magento\\Cms\\Block\\Block" block_id="block-collection"}}</div>
<div class="full-wrapper full-categories">
<div class="container">
<div class="hot-categories-home">{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}</div>
</div>
</div>
</div>

Design 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.1.5 Home Style 5

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-page-5"&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-3 col-md-3 sidebar-home"&gt{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/custom-nav-v5.phtml"}} {{block class="Magento\\Cms\\Block\\Block" block_id="clients-say-v5"}} {{block class="Magento\\Cms\\Block\\Block" block_id="collection-v5"}}
&ltdiv class="fb-fanbox"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="facebook-fanbox"}}&lt/div&gt
{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-home.phtml"}}&lt/div&gt
&ltdiv class="col-lg-9 col-md-9 content-home"&gt
&ltdiv class="slider-deal-type2"&gt{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default-v2.phtml"}}&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-v51"}}
&ltdiv class="listing-tab-wrapper"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default-id5.phtml"}}&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-v52"}}
&ltdiv class="row product-brand"&gt
&ltdiv class="col-lg-6 col-md-6 product-featured"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::sidebar-product-v5.phtml" title="Featured Product" product_limitation="3" img_width="100" img_height="100" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0"}}&lt/div&gt
&ltdiv class="col-lg-6 col-md-6 brand-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="brand-v5"}}&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-v53"}} {{block class="Magento\\Cms\\Block\\Block" block_id="latest-blog-v5"}}&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="services-v5"}}
&ltdiv class="full-wrapper hot-cat-full"&gt
&ltdiv class="container"&gt
&ltdiv class="hot-categories-home"&gt{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default-v5.phtml"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&g

Design Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

&ltreferenceContainer name="slideshow-header"&gt
	&ltblock class="Sm\ImageSlider\Block\ImageSlider" name="slideshow.hd5" as="slideshow.hd5" template="Sm_ImageSlider::default.phtml" /&gt
&lt/referenceContainer&gt

3.1.6 Home Style 6

Frontend of Home Style 6 – Layout Position

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-page-6"&gt
&ltdiv class="slideshow-index"&gt{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}&lt/div&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-3 col-md-3 collection-index"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="collection-v5"}}&lt/div&gt
&ltdiv class="col-lg-9 col-md-9 slider-deal-index"&gt
&ltdiv class="slider-deal-type2"&gt{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default-v2.phtml"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-v61"}}
&ltdiv class="listingtab-custom tab-custom-1"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml"}}
&ltdiv class="custom-image static-image"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="customtab-1-v6"}}&lt/div&gt
&lt/div&gt
&ltdiv class="listingtab-custom tab-custom-2"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml" filter_type="fieldproducts" title="Furniture" product_category="99,189,190,191,192" filter_order_by="created_at,most_viewed,best_sales"}}
&ltdiv class="custom-image static-image"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="customtab-2-v6"}}&lt/div&gt
&lt/div&gt
&ltdiv class="full-wrapper full-wrapper-sv"&gt
&ltdiv class="container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="services-v6"}}&lt/div&gt
&lt/div&gt
&ltdiv class="tab-custom-3"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml" title="Most Viewed" margin="30" nb_column1="4" nb_column2="3" nb_column3="3" nb_column4="2" nb_column5="1" filter_type="categories" product_category="97,98,103" category_preload="97" product_order_by="most_viewed"}}&lt/div&gt
&ltdiv class="product-featured"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::default-v6.phtml" title="Featured Product" nb_column1="3" nb_column2="2" nb_column3="2" nb_column4="1" product_limitation="6" img_width="140" img_height="140" product_addcart_display="1" product_addwishlist_display="1" product_addcompare_display="1"}}&lt/div&gt
&ltdiv class="latest-post-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="latest-blog-v6"}}&lt/div&gt
&ltdiv class="brand-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="brand-v6"}}&lt/div&gt
&ltdiv class="full-wrapper full-categories"&gt
&ltdiv class="container"&gt
&ltdiv class="hot-categories-home"&gt{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

Design Tab: Please click to see the Backend Settings.

3.1.7 Home Style 7

Frontend of Home Style 7 – Layout Position

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-page-7"&gt
&ltdiv class="full-wrapper full-slidershow-container"&gt
&ltdiv class="full-content"&gt
&ltdiv class="container"&gt{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="services-v7"}}
&ltdiv class="listingtab-custom tab-custom-1"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml"}}
&ltdiv class="custom-image"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="customtab-1-v7"}}&lt/div&gt
&lt/div&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-3 col-md-3 left-banner-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="banner-71"}}&lt/div&gt
&ltdiv class="col-lg-9 col-md-9 deal-content-wrapper"&gt
&ltdiv class="slider-deal-type2"&gt{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default-v2.phtml"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="listingtab-custom tab-custom-1"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml" title="Furniture" product_category="100"}}
&ltdiv class="custom-image"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="customtab-2-v7"}}&lt/div&gt
&lt/div&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-4 col-md-4 banner-left"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="banner-left-v7"}}&lt/div&gt
&ltdiv class="col-lg-4 col-md-4 newsletter-index"&gt{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-home-v7.phtml"}}&lt/div&gt
&ltdiv class="col-lg-4 col-md-4 banner-right"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="banner-right-v7"}}&lt/div&gt
&lt/div&gt
&ltdiv class="latest-post-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="latest-blog-v6"}}&lt/div&gt
&ltdiv class="collection-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="collection-slider"}}&lt/div&gt
&ltdiv class="full-wrapper full-categories"&gt
&ltdiv class="container"&gt
&ltdiv class="hot-categories-home"&gt{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

Design Tab: Please click to see the Backend Settings.

3.1.8 Home Style 8

Frontend of Home Style 8 – Layout Position

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-page-8"&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-offset-3 col-lg-9 right-content-index"&gt
&ltdiv class="slideshow-banner"&gt
&ltdiv class="slidershow-content"&gt{{block class="Sm\ImageSlider\Block\ImageSlider" template="Sm_ImageSlider::default.phtml"}}&lt/div&gt
&ltdiv class="banner-right-index"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="banner-v81"}}
&ltdiv class="newsletter-right"&gt{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-home-v8.phtml"}}&lt/div&gt
&lt/div&gt
&ltdiv class="product-featured"&gt{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::default-slider.phtml" nb_column1="3" nb_column3="2" product_limitation="6" img_width="140" img_height="140" product_addcart_display="0" product_addwishlist_display="0" product_addcompare_display="0"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="services-v7"}}
&ltdiv class="listingtab-custom"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml"}}&lt/div&gt
&ltdiv class="full-wrapper full-categories"&gt
&ltdiv class="container"&gt
&ltdiv class="hot-categories-home"&gt{{block class="Sm\Categories\Block\Categories" template="Sm_Categories::default.phtml"}}&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="collection-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="collection-slider"}}&lt/div&gt
&ltdiv class="listingtab-default"&gt{{block class="Sm\ListingTabs\Block\ListingTabs" template="Sm_ListingTabs::default.phtml" nb_rows="1" display_title="1" title="New Arrivals" filter_type="categories" product_category="97,99,100" category_preload="97" product_order_by="created_at" product_limitation="8"}}&lt/div&gt
{{block class="Magento\\Cms\\Block\\Block" block_id="banner-v82"}}
&ltdiv class="row"&gt
&ltdiv class="col-lg-9 col-md-12 deal-container"&gt
&ltdiv class="slider-deal-type2"&gt{{block class="Sm\Deals\Block\Deals" template="Sm_Deals::default-v2.phtml"}}&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-3 col-md-12 collection-container"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="clients-say-v5"}}&lt/div&gt
&lt/div&gt
&ltdiv class="latest-post-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="latest-blog-v6"}}&lt/div&gt
&ltdiv class="brand-wrapper"&gt{{block class="Magento\\Cms\\Block\\Block" block_id="brand-v6"}}&lt/div&gt
&lt/div&gt

Design Tab: Please click to see the Backend Settings.

3.2 Configure Megamenu

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizontal“, “Mega Menu Vertical“.
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

3.2.1 Horizontal Megamenu:

Horizontal-mega-menu

Sortable Categories Items Please click Here to view.

Home
Frontend Appearance

Backend Settings: Please click Here to view.

New Arrivals
Frontend Appearance

Backend Settings: Please click Here to view.

Note: Do the same with the others.

3.2.2 Vertical Megamenu:

Horizontal-mega-menu

Sortable Categories Items Please click Here to view.

Electronics
Frontend Appearance

Backend Settings: Please click Here to view.

Smartphones & Tablets
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group Categories Smartphone’: Please click Here to view.

Backend of ‘Col-1′ in ‘Group Categories Smartphone’: Please click Here to view.

Note: Item Col-2 having same level would have same configuration as Col-1.

Backend of ‘Camping & Hiking Gear’ in ‘Col-1′: Please click Here to view.

Note: Item Swim Gear, Cycling Gear having same level would have same configuration as Camping & Hiking Gear.

Backend of ‘Poduct Megamenu’: Please click Here to view.

Health & Beauty
Frontend Appearance

Backend Settings: Please click Here to view.

Note: The following items, having same level, would have same configuration as Health & Beauty: Toys & Hobbies, Computers & Networking, Laptops & Accessories, Jewelry & Watches, Bags, Shoes & Accessories, Cameras & Photo, Holiday Supplies & Gifts, Apparel, Video Games. .

Sports & Outdoors
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Categories Sports & Outdoors’: Please click Here to view.

Backend of ‘Cycling Gear’ in ‘Categories Sports & Outdoors’: Please click Here to view.

Note: The following items, having same level, would have same configuration as Cycling Gear: . Camping & Hiking Gear, Swim Gear.

Backend of ‘Right Static Image’: Please click Here to view.

Copy and paste the following code into the Content field::

<div class="right-image-menu">
	<a title="Static Image" href="#">
	<img src="{{media url="wysiwyg/mega-menu/mega-banner.png"}}" alt="Static Image" />
	</a>
</div>

Automotive & Motorcycle
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Motorcycle’: Please click Here to view.

Note: The following items, having same level, would have same configuration as Motorcycle: . Car Accessories, Motorcycle Gadgets, Car Lights.

3.3 Configure Extensions

The SM Market front-page has been integrated with the extensions in the following list:

In SM Market Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM to configure extensions as you want.

3.3.1 SM Listing Deals

Backend of SM Listing Deals: Click Here

Position: SM Megamenu
Frontend Appearance

Horizontal Megamenu:
Vertical Megamenu:

Backend of SM Megamenu: Click Here

3.3.3 SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of SM Listing Tabs: Click Here

3.3.4 SM Listing Extend

Backend of SM Listing Extend: 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 Basic Products

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here

Position: SM Search Box
Frontend Appearance

Backend of SM Search Box: Click Here

3.3.8 SM Deals

Position: SM Deals
Frontend Appearance

Backend of SM Deals: Click Here

3.3.9 SM Quick View

Position: SM Quick View
Frontend Appearance

Backend of SM Quick View: Click Here

3.3.10 SM Categories

Position: SM Categories
Frontend Appearance

Backend of SM Categories: Click Here

3.4 Configure Static Blocks

The SM Market 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: top-search

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “top-search”

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="top-search">
<ul>
<li class="search-label">Top Search:</li>
<li><a title="Tattoo Kits" href="#">Tattoo Kits</a></li>
<li><a title="Electronic Cigarettes" href="#">Electronic Cigarettes</a></li>
<li><a title="Sexy Lingerie" href="#">Sexy Lingerie</a></li>
<li><a title="Eye Makeup" href="#">Eye Makeup</a></li>
<li><a title="iPad Mini Cases" href="#">iPad Mini Cases</a></li>
<li><a title="iPhone 5 Cases" href="#">iPhone 5 Cases</a></li>
<li><a title="Tattoo Supplies" href="#">Tattoo Supplies</a></li>
<li><a title="RC Helicopters" href="#">RC Helicopters</a></li>
</ul>
</div>

Static Block: static-image-1

To create the static block, go to Content>> Elements>> Blocks with 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:

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

Static Block: services-store

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “services-store”

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-policy">
<div class="inner">
<div class="policy policy1"><a title="90 days money back" href="#"><span class="ico-policy">ico policy</span>90 days<br />money back</a></div>
<div class="policy policy2"><a title="free shipping on all orders" href="#"><span class="ico-policy">ico policy</span>free shipping<br />on all orders</a></div>
<div class="policy policy3"><a title="lowest price guarantee" href="#"><span class="ico-policy">ico policy</span>lowest price guarantee</a></div>
<div class="policy policy4"><a title="safe shopping guarantee" href="#"><span class="ico-policy">ico policy</span>safe shopping guarantee</a></div>
</div>
</div>

Static Block: static-image-2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-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="col-lg-4 col-md-4 col-sm-4 static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-4.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-4 col-md-4 col-sm-4 static-image"><a class="image-top" title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-5.jpg"}}" alt="Static Image" /></a> <a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-6.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-4 col-md-4 col-sm-4 static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner-7.jpg"}}" alt="Static Image" /></a></div>

Static Block: block-collection

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “block-collection”

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="collections-wrap">
<div class="title-home-page"><span>Collections</span></div>
<ul class="collections">
<li class="collect collect1"><a href="#">Furniture</a></li>
<li class="collect collect2"><a href="#">Gift idea</a></li>
<li class="collect collect3"><a href="#">Cool gadgets</a></li>
<li class="collect collect4"><a href="#">Ourdoor<br /><span>activities</span></a></li>
<li class="collect collect5"><a href="#">Accessories for<br /><span>smartphone</span></a></li>
<li class="collect collect6"><a href="#">Women world</a></li>
</ul>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “about-footer”

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="footer-block">
<div class="footer-block-title">
<h3>About Market</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="About Us" href="{{store url=""}}about-us.html">About Us</a></li>
<li><a title="Market Reviews" href="#">Market Reviews</a></li>
<li><a title="Terms of Use" href="#">Terms of Use</a></li>
<li><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li><a title="Site Map" href="#">Site Map</a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “customer-services-footer”

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="footer-block">
<div class="footer-block-title">
<h3>Customer Service</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="Shipping Policy" href="#">Shipping Policy</a></li>
<li><a title="Compensation First" href="#">Compensation First</a></li>
<li><a title="My Account" href="{{store url=""}}customer/account">My Account</a></li>
<li><a title="Return Policy" href="#">Return Policy</a></li>
<li><a title="Contact Us" href="{{store url=""}}contact-us.html">Contact Us</a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “payment-shipping-footer”

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="footer-block">
<div class="footer-block-title">
<h3>Payment & Shipping</h3>
</div>
<div class="footer-block-content">
<ul class="links-footer">
<li><a title="Terms of Use" href="#">Terms of Use</a></li>
<li><a title="Payment Methods" href="#">Payment Methods</a></li>
<li><a title="Shipping Guide" href="#">Shipping Guide</a></li>
<li><a title="Locations We Ship To" href="#">Locations We Ship To</a></li>
<li><a title="Estimated Delivery Time" href="#">Estimated Delivery Time</a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “contact-footer”

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="footer-block">
<div class="footer-block-title">
<h3>Contact Us</h3>
</div>
<div class="footer-block-content">
<ul class="links-contact">
<li class="add-icon">Address: No 40 Baria Sreet 133/2 NewYork City, NY, United States</li>
<li class="email-icon middle-content">Email: contact@market.com</li>
<li class="phone-icon">Phone 1 : 0123456789<br />Phone 2 : 0123456789</li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “footer-links”

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="footer-links-w">
<div class="label-link">Top Stores : Brand Directory | Store Directory</div>
<ul>
<li>
<h2>MOST SEARCHED KEYWORDS MARKET:</h2>
<a href="#">Xiaomi Mi3</a> | <a href="#">Digiflip Pro XT 712 Tablet</a> | <a href="#">Mi 3 Phones</a> | <a href="#">View all</a></li>
<li>
<h2>MOBILES:</h2>
<a href="#">Moto E</a> | <a href="#">Samsung Mobile</a> | <a href="#">Micromax Mobile</a> | <a href="#">Nokia Mobile</a> | <a href="#">HTC Mobile</a> | <a href="#">Sony Mobile</a> | <a href="#">Apple Mobile</a> | <a href="#">LG Mobile</a> | <a href="#">Karbonn Mobile</a> | <a href="#">View all</a></li>
<li>
<h2>CAMERA:</h2>
<a href="#">Nikon Camera</a> | <a href="#">Canon Camera</a> | <a href="#">Sony Camera</a> | <a href="#">Samsung Camera</a> | <a href="#">Point shoot camera</a> | <a href="#">Camera Lens</a> | <a href="#">Camera Tripod</a> | <a href="#">Camera Bag</a> | <a href="#">View all</a></li>
<li>
<h2>LAPTOPS:</h2>
<a href="#">Apple Laptop</a> | <a href="#">Acer Laptop</a> | <a href="#">Samsung Laptop</a> | <a href="#">Lenovo Laptop</a> | <a href="#">Sony Laptop</a> | <a href="#">Dell Laptop</a> | <a href="#">Asus Laptop</a> | <a href="#">Toshiba Laptop</a> | <a href="#">LG Laptop</a> | <a href="#">HP Laptop</a> | <a href="#">Notebook</a> | <a href="#">View all</a></li>
<li>
<h2>TVS:</h2>
<a href="#">Sony TV</a> | <a href="#">Samsung TV</a> | <a href="#">LG TV</a> | <a href="#">Panasonic TV</a> | <a href="#">Onida TV</a> | <a href="#">Toshiba TV</a> | <a href="#">Philips TV</a> | <a href="#">Micromax TV</a> | <a href="#">LED TV</a> | <a href="#">LCD TV</a> | <a href="#">Plasma TV</a> | <a href="#">3D TV</a> | <a href="#">Smart TV</a> | <a href="#">View all</a></li>
<li>
<h2>TABLETS:</h2>
<a href="#">Micromax Tablets</a> | <a href="#">HCL Tablets</a> | <a href="#">Samsung Tablets</a> | <a href="#">Lenovo Tablets</a> | <a href="#">Karbonn Tablets</a> | <a href="#">Asus Tablets</a> | <a href="#">Apple Tablets</a> | <a href="#">View all</a></li>
<li>
<h2>WATCHES:</h2>
<a href="#">FCUK Watches</a> | <a href="#">Titan Watches</a> | <a href="#">Casio Watches</a> | <a href="#">Fastrack Watches</a> | <a href="#">Timex Watches</a> | <a href="#">Fossil Watches</a> | <a href="#">Diesel Watches</a> | <a href="#">Luxury Watches</a> | <a href="#">View all</a></li>
<li>
<h2>CLOTHING:</h2>
<a href="#">Shirts</a> | <a href="#">Jeans</a> | <a href="#">T shirts</a> | <a href="#">Kurtis</a> | <a href="#">Sarees</a> | <a href="#">Levis Jeans</a> | <a href="#">Killer Jeans</a> | <a href="#">Pepe Jeans</a> | <a href="#">Arrow Shirts</a> | <a href="#">Ethnic Wear</a> | <a href="#">Formal Shirts</a> | <a href="#">Peter England Shirts</a> | <a href="#">View all</a></li>
<li>
<h2>FOOTWEAR:</h2>
<a href="#">Shoes</a> | <a href="#">Casual Shoes</a> | <a href="#">Sports Shoes</a> | <a href="#">Formal Shoes</a> | <a href="#">Adidas Shoes</a> | <a href="#">Gas Shoes</a> | <a href="#">Puma Shoes</a> | <a href="#">Reebok Shoes</a> | <a href="#">Woodland Shoes</a> | <a href="#">Red tape Shoes</a> | <a href="#">Nike Shoes</a> | <a href="#">View all</a></li>
</ul>
</div>

To create the static block, go to Content>> Elements>> Blocks with 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:

<p><img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /></p>

Static Block: static-image-3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-3″

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-image">
<div class="col-1-image"><a class="image-1" title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-1.jpg"}}" alt="Static Image" /> </a> <a class="image-2" title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-2.jpg"}}" alt="Static Image" /> </a> <a class="image-3" title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-3.jpg"}}" alt="Static Image" /> </a></div>
<div class="col-2-image"><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-4.jpg"}}" alt="Static Image" /> </a></div>
</div>

Static Block: static-image-4

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-4″

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-image"><a title="Static Image" href="#"> <img src="{{media url="wysiwyg/banner/banner2-5.jpg"}}" alt="Static Image" /> </a></div>

Static Block: clients-say-slider

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “clients-say-slider”

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="block clients-say">
<div class="block-title filter-title"><strong>Clients say</strong></div>
<div class="block-content block-content-clients-say">
<div class="clients-say-slider">
<div class="item">
<div class="client-description">Aliquam ut tellus dignissim, cursus erat ultricies tellus. Nulla tempus sollicitudin mauris cursus dictum. Etiam id diam diam.</div>
<div class="client-info"><img src="{{media url="wysiwyg/clientsay/client-img1.jpg"}}" alt="Static Image" />
<div class="info-detail">
<h3>Aliquam Tellus</h3>
<p>Vitae Ornare Mauris</p>
</div>
</div>
</div>
<div class="item">
<div class="client-description">Aliquam ut tellus dignissim, cursus erat ultricies tellus. Nulla tempus sollicitudin mauris cursus dictum. Etiam id diam diam.</div>
<div class="client-info"><img src="{{media url="wysiwyg/clientsay/client-img2.jpg"}}" alt="Static Image" />
<div class="info-detail">
<h3>Aliquam Tellus</h3>
<p>Vitae Ornare Mauris</p>
</div>
</div>
</div>
<div class="item">
<div class="client-description">Aliquam ut tellus dignissim, cursus erat ultricies tellus. Nulla tempus sollicitudin mauris cursus dictum. Etiam id diam diam.</div>
<div class="client-info"><img src="{{media url="wysiwyg/clientsay/client-img1.jpg"}}" alt="Static Image" />
<div class="info-detail">
<h3>Aliquam Tellus</h3>
<p>Vitae Ornare Mauris</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
				jQuery(document).ready(function($) {
					var owl_clientsay = $(".clients-say-slider");
					owl_clientsay.owlCarousel({
						
						responsive:{
							0:{
								items:1
							},
							480:{
								items:1
							},
							768:{
								items:1
							},
							992:{
								items:1
							},
							1200:{
								items:1
							}
						},

						autoplay:false,
						loop:true,
						nav : true,
						dots: false,
						autoplaySpeed : 500,
						navSpeed : 500,
						dotsSpeed : 500,
						autoplayHoverPause: true,
						margin:20,

					});	  
				});
// ]]></script>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-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:

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

Static Block: static-image-5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-5″

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-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-1.jpg"}}" alt="Static Image" /></a></div>

Static Block: services-store-3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “services-store-3″

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-policy">
<div class="inner">
<div class="policy policy1"><a title="90 days money back" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">30 DAY RETURN</span> <span>moneyback guarantee</span> </span> </a></div>
<div class="policy policy2"><a title="free shipping on all orders" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">FREE SHIPPING</span> <span>on all order over $99</span> </span> </a></div>
<div class="policy policy3"><a title="lowest price guarantee" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">LOWEST PRICE</span> <span>guarantee</span> </span> </a></div>
<div class="policy policy4"><a title="safe shopping guarantee" href="#"> <span class="ico-policy">ico policy</span> <span class="info-service"> <span class="title-sv">SAFE SHOPPING</span> <span>guarantee</span> </span> </a></div>
</div>
</div>

Static Block: static-image-6

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-6″

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-image-content">
<div class="static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-2.jpg"}}" alt="Static Image" /></a></div>
<div class="static-image"><a class="first-image" title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-3.jpg"}}" alt="Static Image" /></a> <a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-4.jpg"}}" alt="Static Image" /></a></div>
<div class="static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-5.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-7

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-7″

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-image-7">
<div class="static-image"><a title="Static Image" href="#"><img src="{{media url="wysiwyg/banner/banner3-6.jpg"}}" alt="Static Image" /></a></div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-v51″

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-v51"&gt
&ltdiv class="left-banner static-image"&gt&lta title="Static Image" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v51.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="right-banner static-image"&gt&lta title="Static Image" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v52.jpg"}}" alt="Banner" /&gt &lt/a&gt &lta title="Static Image" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v53.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt
&lt/div&gt

Static Block: clientsay-v5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “clientsay-v5″

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="clients-say-container"&gt
&ltdiv class="title-home"&gt
&lth2&gt&ltspan&gtClients Say&lt/span&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="clientsay-wrap"&gt
&ltdiv class="clients-say-content"&gt
&ltdiv class="clients-say-slider"&gt
&ltdiv class="item"&gt
&ltdiv class="item-inner"&gt
&ltdiv class="image-box-client"&gt
&ltdiv class="image"&gt&ltimg src="{{media url="wysiwyg/clients/client-1-v5.jpg"}}" alt="Client" /&gt&lt/div&gt
&lt/div&gt
&ltdiv class="info-client"&gt
&lth3&gtJohn Doe&lt/h3&gt
&ltdiv class="description"&gtDonec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum.&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="item-inner"&gt
&ltdiv class="image-box-client"&gt
&ltdiv class="image"&gt&ltimg src="{{media url="wysiwyg/clients/client-1-v5.jpg"}}" alt="Client" /&gt&lt/div&gt
&lt/div&gt
&ltdiv class="info-client"&gt
&lth3&gtJohn Doe&lt/h3&gt
&ltdiv class="description"&gtDonec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum.&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item"&gt
&ltdiv class="item-inner"&gt
&ltdiv class="image-box-client"&gt
&ltdiv class="image"&gt&ltimg src="{{media url="wysiwyg/clients/client-1-v5.jpg"}}" alt="Client" /&gt&lt/div&gt
&lt/div&gt
&ltdiv class="info-client"&gt
&lth3&gtJohn Doe&lt/h3&gt
&ltdiv class="description"&gtDonec sit amet vulputate velit. Aenean tempus nisl ac fermentum tincidunt. Nam aliquet enim quam scelerisque rutrum.&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 clients_slider = $(".clients-say-slider");
					clients_slider.owlCarousel({
						nav: true,
						dots:false,
						
						responsive: {
							0: {
								items:1
							},
							480: {
								items:1
							},
							768: {
								items:1
							},
							991: {
								items:1
							},						
							1200: {
								items:1
							}
						}
					});	  
				});	
			
// ]]&gt&lt/script&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

Static Block: collection-v5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “collection-v5″

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="collection-sidebar"&gt
&ltdiv class="title-home"&gt
&lth2&gt&ltspan&gtCollection&lt/span&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="collection-content"&gt
&ltul class="collection-list"&gt
&ltli&gt&lta title="Furniture" href="#"&gt &ltspan class="icon-collection"&gt &ltimg src="{{media url="wysiwyg/collection/icon-1.png"}}" alt="Collection" /&gt &lt/span&gt &ltspan class="name-collection"&gtFurniture&lt/span&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Gift Idea" href="#"&gt &ltspan class="icon-collection"&gt &ltimg src="{{media url="wysiwyg/collection/icon-2.png"}}" alt="Gift Idea" /&gt &lt/span&gt &ltspan class="name-collection"&gtGift Idea&lt/span&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Cool Gadgets" href="#"&gt &ltspan class="icon-collection"&gt &ltimg src="{{media url="wysiwyg/collection/icon-3.png"}}" alt="Cool Gadgets" /&gt &lt/span&gt &ltspan class="name-collection"&gtCool Gadgets&lt/span&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Outdoor Activities" href="#"&gt &ltspan class="icon-collection"&gt &ltimg src="{{media url="wysiwyg/collection/icon-4.png"}}" alt="Outdoor Activities" /&gt &lt/span&gt &ltspan class="name-collection"&gtOutdoor Activities&lt/span&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Smartphones" href="#"&gt &ltspan class="icon-collection"&gt &ltimg src="{{media url="wysiwyg/collection/icon-5.png"}}" alt="Smartphones" /&gt &lt/span&gt &ltspan class="name-collection"&gtSmartphones&lt/span&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Womens World" href="#"&gt &ltspan class="icon-collection"&gt &ltimg src="{{media url="wysiwyg/collection/icon-6.png"}}" alt="Womens World" /&gt &lt/span&gt &ltspan class="name-collection"&gtWomens World&lt/span&gt &lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-v52″

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-v52 static-image"&gt&lta title="Static Image" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v54.jpg"}}" alt="Banner" /&gt &lt/a&gt &lta title="Static Image" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v55.jpg"}}" alt="Banner" /&gt &lt/a&gt &lta title="Static Image" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v56.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt

Static Block: brand-v5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “brand-v5″

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-container"&gt
&ltdiv class="title-home"&gt
&lth2&gt&ltspan&gtOur Brands&lt/span&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="brands-content"&gt
&ltul class="brand-list"&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-1.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-2.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-3.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-4.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-5.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-6.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-7.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-8.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&ltli&gt&lta title="Brand" href="#"&gt &ltimg src="{{media url="wysiwyg/brand/brand-9.jpg"}}" alt="Brand" /&gt &lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt
&lt/div&gt

Static Block: facebook-fanbox

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “facebook-fanbox”

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="fb-page" data-href="https://www.facebook.com/MagenTech" data-tabs="timeline" data-width="270" data-height="214" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true"&gt
&ltdiv class="fb-xfbml-parse-ignore"&gt
&ltblockquote cite="https://www.facebook.com/MagenTech"&gt&lta href="https://www.facebook.com/MagenTech"&gtMagenTech&lt/a&gt&lt/blockquote&gt
&lt/div&gt
&lt/div&gt
&ltdiv id="fb-root"&gt &lt/div&gt
&ltscript type="text/javascript"&gt// &lt![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=615561541809250";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]&gt&lt/script&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-v53″

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-v53 static-image"&gt&lta title="Static Image" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v57.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt

Static Block: lastest-blog-v5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “lastest-blog-v5″

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="latest-post-container"&gt
&ltdiv class="title-home"&gt
&lth2&gt&ltspan&gtLatest Blog&lt/span&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="slider-post-container"&gt
&ltdiv class="slider-post"&gt
&ltdiv class="item item-post"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blo1.jpg"}}" alt="Blog Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="date-post-title"&gt
&ltdiv class="date-post"&gt
&ltdiv class="day"&gt26&lt/div&gt
&ltdiv class="month"&gtNov&lt/div&gt
&lt/div&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blo2.jpg"}}" alt="Blog Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="date-post-title"&gt
&ltdiv class="date-post"&gt
&ltdiv class="day"&gt26&lt/div&gt
&ltdiv class="month"&gtNov&lt/div&gt
&lt/div&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blo3.jpg"}}" alt="Blog Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="date-post-title"&gt
&ltdiv class="date-post"&gt
&ltdiv class="day"&gt26&lt/div&gt
&ltdiv class="month"&gtNov&lt/div&gt
&lt/div&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blo4.jpg"}}" alt="Blog Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="date-post-title"&gt
&ltdiv class="date-post"&gt
&ltdiv class="day"&gt26&lt/div&gt
&ltdiv class="month"&gtNov&lt/div&gt
&lt/div&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt&ltimg src="{{media url="wysiwyg/blog/blo5.jpg"}}" alt="Blog Image" /&gt&lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&ltdiv class="date-post-title"&gt
&ltdiv class="date-post"&gt
&ltdiv class="day"&gt26&lt/div&gt
&ltdiv class="month"&gtNov&lt/div&gt
&lt/div&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&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-post");
					post_slider.owlCarousel({				
						nav: true,
						dots:false,
						margin: 30,
						
						responsive: {
							0: {
								items:1
							},
							480: {
								items:2
							},
							768: {
								items:3
							},
							991: {
								items:2
							},						
							1200: {
								items:3
							}
						}
					});	  
				});
// ]]&gt&lt/script&gt
&lt/div&gt

Static Block: services-v5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “services-v5″

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="services"&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-4 col-md-4 col-sm-4 service-item"&gt&lta title="Services" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v58.png"}}" alt="Service" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="col-lg-4 col-md-4 col-sm-4 service-item"&gt&lta title="Services" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v59.png"}}" alt="Service" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="col-lg-4 col-md-4 col-sm-4 service-item"&gt&lta title="Services" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner-v551.png"}}" alt="Service" /&gt &lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-v61″

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-v61"&gt
&ltdiv class="left-banner static-image"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner61.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="right-banner static-image"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner62.jpg"}}" alt="Banner" /&gt &lt/a&gt &lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner63.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt
&lt/div&gt

Static Block: services-v6

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “services-v6″

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="services-v6"&gt
&ltdiv class="row"&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 item item-1"&gt
&ltdiv class="item-inner"&gt&lta class="item-inline" title="30 DAY RETURN" href="#"&gt &ltspan class="title-sv"&gt30 DAY RETURN&lt/span&gt &ltspan&gtmoneyback guarantee&lt/span&gt &lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 item item-2"&gt
&ltdiv class="item-inner"&gt&lta class="item-inline" title="FREE SHIPPING" href="#"&gt &ltspan class="title-sv"&gtFREE SHIPPING&lt/span&gt &ltspan&gton all order over $99&lt/span&gt &lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 item item-3"&gt
&ltdiv class="item-inner"&gt&lta class="item-inline" title="LOWEST PRICE" href="#"&gt &ltspan class="title-sv"&gtLOWEST PRICE&lt/span&gt &ltspan&gtguarantee&lt/span&gt &lt/a&gt&lt/div&gt
&lt/div&gt
&ltdiv class="col-lg-3 col-md-3 col-sm-6 item item-4"&gt
&ltdiv class="item-inner"&gt&lta class="item-inline" title="SAFE SHOPPING" href="#"&gt &ltspan class="title-sv"&gtSAFE SHOPPING&lt/span&gt &ltspan&gtguarantee&lt/span&gt &lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&lt/div&gt

Static Block: lastest-blog-v6

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “lastest-blog-v6″

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="latest-post-type2"&gt
&ltdiv class="title-home-page"&gtLatest Blog&lt/div&gt
&ltdiv class="slider-post-container"&gt
&ltdiv class="slider-post"&gt
&ltdiv class="item item-post"&gt
&ltdiv class="post-content"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt &ltimg src="{{media url="wysiwyg/blog/blo1.jpg"}}" alt="Blog" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&ltdiv class="date-comment"&gt&ltspan class="date"&gt11/26/2014 1:57 AM&lt/span&gt &lta class="comment" href="#"&gt&ltspan&gt0&lt/span&gt &ltspan&gtComment &lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lta class="readmore" title="Read more" href="#"&gtRead more&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="post-content"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt &ltimg src="{{media url="wysiwyg/blog/blo2.jpg"}}" alt="Blog" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&ltdiv class="date-comment"&gt&ltspan class="date"&gt11/26/2014 1:57 AM&lt/span&gt &lta class="comment" href="#"&gt&ltspan&gt0&lt/span&gt &ltspan&gtComment &lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lta class="readmore" title="Read more" href="#"&gtRead more&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="post-content"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt &ltimg src="{{media url="wysiwyg/blog/blo3.jpg"}}" alt="Blog" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&ltdiv class="date-comment"&gt&ltspan class="date"&gt11/26/2014 1:57 AM&lt/span&gt &lta class="comment" href="#"&gt&ltspan&gt0&lt/span&gt &ltspan&gtComment &lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lta class="readmore" title="Read more" href="#"&gtRead more&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="post-content"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt &ltimg src="{{media url="wysiwyg/blog/blo4.jpg"}}" alt="Blog" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&ltdiv class="date-comment"&gt&ltspan class="date"&gt11/26/2014 1:57 AM&lt/span&gt &lta class="comment" href="#"&gt&ltspan&gt0&lt/span&gt &ltspan&gtComment &lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lta class="readmore" title="Read more" href="#"&gtRead more&lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt
&ltdiv class="item item-post"&gt
&ltdiv class="post-content"&gt
&ltdiv class="image-blog static-image"&gt&lta class="img-link" title="Vestibulum ipsum a ornare lectus" href="#"&gt &ltimg src="{{media url="wysiwyg/blog/blo5.jpg"}}" alt="Blog" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="info-blog"&gt
&lth2 class="postTitle"&gt&lta href="#"&gtVestibulum ipsum a ornare lectus&lt/a&gt&lt/h2&gt
&ltdiv class="date-comment"&gt&ltspan class="date"&gt11/26/2014 1:57 AM&lt/span&gt &lta class="comment" href="#"&gt&ltspan&gt0&lt/span&gt &ltspan&gtComment &lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="postContent"&gtFusce sem lacus, sodales sit amet eros a, pharetra feugiat nisl. Integer nunc leo, mollis a libero sit amet, sagittis...&lt/div&gt
&lta class="readmore" title="Read more" href="#"&gtRead more&lt/a&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-post");
							post_slider.owlCarousel({				
								nav: true,
								dots:false,
								margin: 30,
								
								responsive: {
									0: {
										items:1
									},
									480: {
										items:2
									},
									768: {
										items:2
									},
									991: {
										items:2
									},						
									1200: {
										items:3
									}
								}
							});	  
						});
// ]]&gt&lt/script&gt
&lt/div&gt
&lt/div&gt

Static Block: services-v7

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “services-v7″

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="services-v7"&gt
&ltdiv class="row"&gt
&ltdiv class="item-sv col-lg-4 col-md-4 col-sm-4"&gt&lta title="Service" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/sv-71.jpg"}}" alt="Service" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="item-sv col-lg-4 col-md-4 col-sm-4"&gt&lta title="Service" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/sv-72.jpg"}}" alt="Service" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="item-sv col-lg-4 col-md-4 col-sm-4"&gt&lta title="Service" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/sv-73.jpg"}}" alt="Service" /&gt &lt/a&gt&lt/div&gt
&lt/div&gt
&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-71″

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-v71 static-image"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner71.jpg"}}" alt="Banner" /&gt &lt/a&gt &lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner72.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-left-v7″

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-content static-image"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner73.jpg"}}" alt="Banner" /&gt &lt/a&gt &lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner74.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-right-v7″

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-content static-image"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner75.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt

Static Block: collection-slider

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “collection-slider”

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="collections-wrap-container"&gt
&ltdiv class="title-home-page"&gtCollections&lt/div&gt
&ltdiv class="collections"&gt
&ltdiv class="item collect collect1"&gt&lta href="#"&gtFurniture&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect2"&gt&lta href="#"&gtGift idea&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect3"&gt&lta href="#"&gtCool gadgets&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect4"&gt&lta href="#"&gtOurdoor&ltbr /&gt&ltspan&gtactivities&lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect5"&gt&lta href="#"&gtAccessories for&ltbr /&gt&ltspan&gtsmartphone&lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect6"&gt&lta href="#"&gtWomen world&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect1"&gt&lta href="#"&gtFurniture&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect2"&gt&lta href="#"&gtGift idea&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect3"&gt&lta href="#"&gtCool gadgets&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect4"&gt&lta href="#"&gtOurdoor&ltbr /&gt&ltspan&gtactivities&lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect5"&gt&lta href="#"&gtAccessories for&ltbr /&gt&ltspan&gtsmartphone&lt/span&gt&lt/a&gt&lt/div&gt
&ltdiv class="item collect collect6"&gt&lta href="#"&gtWomen world&lt/a&gt&lt/div&gt
&lt/div&gt
&ltscript type="text/javascript"&gt// &lt![CDATA[
							jQuery(document).ready(function($) {
								var collections_slider = $(".collections");
								collections_slider.owlCarousel({				
									nav: true,
									dots:false,
									margin: 10,
									
									responsive: {
										0: {
											items:1
										},
										480: {
											items:3
										},
										768: {
											items:4
										},
										991: {
											items:4
										},						
										1200: {
											items:6
										}
									}
								});	  
							});
// ]]&gt&lt/script&gt
&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-v81″

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-v81 static-image"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner86.jpg"}}" alt="Banner" /&gt&lt/a&gt&lt/div&gt

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-v82″

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="banner82 static-image"&gt
&ltdiv class="banner banner-left"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner81.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="banner banner-center"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner82.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt
&ltdiv class="banner banner-right"&gt&lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner83.jpg"}}" alt="Banner" /&gt &lt/a&gt &lta title="Banner" href="#"&gt &ltimg src="{{media url="wysiwyg/banner/banner84.jpg"}}" alt="Banner" /&gt &lt/a&gt&lt/div&gt
&lt/div&gt

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In SM Market Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Market >> Advanced to configure this theme’s copyright.

Edit the code here:

SM Market © 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 Market Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM Market >> 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.

↧

SM Shoppystore Magento 2.1.0

July 26, 2016, 2:19 am

≫ Next: SP Widmex

≪ Previous: SM Market Magento 2.1.0

View demo More detail

Note: This theme has two versions for Magento 2.0.x and Magento 1.9.x. This guide is for Magento 2.0.x Version. Please follow SM Shoppystore Guide for Magento 1.9.x if you want to use the other.

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

1 SYSTEM REQUIREMENT

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

Compatible with Magento Community Edition 2.1.0
Composer (latest stable version)
Apache 2.2 or late
PHP 7.0.2 – 7.0.6 except for 7.0.3, 7.0.4, 7.0.5, 5.6.x or 5.5.x (PHP 5.4 is not supported) and Memory_limit no less than 2G)

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:

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_market_quickstart_m2.0.7_v2.1.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_market_quickstart_m2.0.7_v2.1.0\data_quickstart

Note:

After successful installation DO NOT run magento.

Now we are going to Set file system ownership and permissions. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

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.

Step 12:

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.

Note:

At this moment, we should Set file system ownership and permissions again. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

Step 13: Disable Cache: After deploying, go to System>> Tools >> Cache Management, click ‘Sellect All’ button, then choose ‘Disable’ and click ‘Submit’ button to complete the action.

2.2 Manual Installation

Step 1: Please unzip ‘sm_shoppystore_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 Shoppystore.

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 Shoppystore 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

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

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

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

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

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

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizontal“.)
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

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 Shoppystore front-page has been integrated with the extensions in the following list:

In SM Shoppystore Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM to configure extensions as you want.

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 Shoppystore 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 Shoppystore Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Shoppystore >> Advanced to configure this theme’s copyright.

Edit the code here:

SM Shoppystore © 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 Shoppystore Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM Shoppystore >> 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.

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 Widmex

August 2, 2016, 7:07 pm

≫ Next: SM Furnicom Magento 2.1.0

≪ Previous: SM Shoppystore Magento 2.1.0

View demo More detail

1GETTING STARTED

1.1 Introduction

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

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 Widmex Theme

Quickstart Installation: sp_widmex_quickstart_p16_v1.0.0 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_widmex_template_p16_v1.0.0.zip file

2.1 Quickstart Installation

Step 1: Download the quickstart package of SP Widmex theme
Step 2: Extract the downloaded package named “sp_widmex_quickstart_p16_v1.0.0″ 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.

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.

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 Widmex Theme Installation

Firstly, you must EXTRACT the “sp_widmex_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_widmex_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_widmex_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_widmex_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 Widmex‘s thumbnail and select Use this themeto replace your current theme with SP Widmex 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

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

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

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,#quantity_wanted_p label,.custom_modview .spmostviewed-heading .close,.product_list.grid .button-container .cart_button, .product_lists.grid .button-container .cart_button,.spr-container .spr-query, .sp-megamenu .navbar-nav > li.mega_type2 .dropdown-menu ul li .dropdown-menu ul li .dropdown-menu ul li >a , .sp-megamenu .navbar-nav > li.mega_type1 .dropdown-menu ul li .dropdown-menu ul li a, .tags-container .tags_block .title_block span

.sp-megamenu .navbar-nav  li li a,.sp-megamenu .navbar-nav > li.mega_type2 .dropdown-menu ul li .dropdown-menu ul li > a,.sp-megamenu .navbar-nav > li > a, .sp-megamenu .home > a

h1,h2,h3,h4,h5,h6

.content_sortPagiBar_top label, .content_sortPagiBar_bottom label,.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span, .about-title, #pagenotfound .columns-container b, #pagenotfound .columns-container form button, #smartblogcat .articleContent .read-more .more, #smartblogcat .articleContent .sdsarticleHeader .sdstitle_block a, #smartblogcat .smartblogpost .sdsarticle-info, div.post-page .pagination span, div.post-page .pagination li a, div.post-page .pagination li span, #smartblogcat .small_image .articleContent .sdsarticle-info, #smartblogcat .large_image .articleContent .sdsarticle-info, .blog-post .date_added, #sdsblogArticle.blog-post .article-info .post-comment-right .author, #sdsblogArticle.blog-post .article-info .post-comment-right .comment-detail, #sdsblogArticle .sdstags-update .title_tag, #sdsblogArticle .social_blog .title_social_blog, div#articleComments .commentList li .text .name, div#articleComments .commentList li .text .created, div#respond .comment-reply-title, #pagination ul.pagination li, #pagination_bottom ul.pagination li, .product_list .price-box .price, .product_lists .price-box .price, .label-box, .product_list .price-box .old-price, .product_lists .price-box .old-price, #layered_block_left #layered_form span.layered_subtitle, #availability_statut, .content_prices .our_price_display, .sharing-buttons label, #quantity_wanted_p label, #quantity_wanted_p .qty input,#attributes fieldset label, .support-info ul li.phone-support strong, .shopping_cart .ajax_cart_total, .cart_block .price-total span, .cart_block .buttons a, .cart_block .cart-info .product-name a, .cart_block .cart-info .price, .free-shipping .item .content strong, .spcountdownproductslider-time .item-timer, .sp-categories .cat-wrap .content-box .cate-title a, .bg-categories .h3, .breadcrumb .category-name, .content_prices #old_price, .title-module-listingtab, .sp-listing-tabs .ltabs-tabs-container .ltabs-tabs li > span, .product_list h5.product-name a, div.lastestnews .post .post_content .read-more a, div.lastestnews .post .sdsarticle-info, .ps-test .item .bg_content .author, .ps-test .item .bg_content .des:before, .popular_product .product_list.grid .recommend-title, #newsletter_block_home .form-group .button, .footer-container #footer-center .tags-container ul li strong, .left-sidebar .popular_product .product_list.grid .right-block .lnk_view, .right-sidebar .popular_product .product_list.grid .right-block .lnk_view,.ps-testmonial2 .item .thumb-left .author > a, .ps-testmonial2 .item .content .des, .ps-testmonial2 .item .content .date, #sp-vermegamenu .navbar-nav > li > a, .sp-vermegamenu .navbar-nav > li.mega_type2 .dropdown-menu ul li .dropdown-menu ul li.parent > a, .lastestnews2 .post .post_content .post_title a, .sp-sp-cat .spcat-wrap .custom-cate .category-wrap-cat .sp-cat-title-parent, div.sp-sp-cat .spcat-tabs-container .spcat-tabs .spcat-tab,.sp-sp-cat .spcat-wrap .spcat-inner .category-wrap-cat .sp-catchild .more-cate, #newsletter_block_popup .block_content .content-inner .msg label, #newsletter_block_popup .close, .extraslider4 .product_list .product-container .right-block .lnk_view

3.4 Category Pages

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

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

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

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.

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.

3.9 Setup Logo

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.11 Edit Copyright

Frontend Appearance:

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. After finishing, you could go to the front-end to see the changes.

3.12 Edit Payment

Frontend Appearance:

4SP MEGA MENU CONFIGURATION

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.

About us
Frontend Appearance

Backend Setting : Please click Here to view.

Electronic
Frontend Appearance

Backend Setting : Please click Here to view.

Backend Setting of ‘Category Image’: Please click Here to view.

Copy and paste the following code into the code field:

<div class="images_cat"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_widmex/themes/sp_widmex/img/cms/image_cat1.jpg" alt="images" /> </a></div>

Backend Setting of ‘Category 1′: Please click Here to view.

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

Men
Frontend Appearance

Backend Setting : Please click Here to view.

Backend Setting of ‘box cate’: Please click Here to view.

Backend Setting of ‘categories 1′: Please click Here to view.

Note: The items named ‘Category 2′ having same menu level as item ‘Category 1′ could have same configuration

Backend Setting of ‘box html’: Please click Here to view.

Copy and paste the following code into the code field:

<div class="box-image"><a href="#"> <img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_widmex/themes/sp_widmex/img/cms/image_cat2.jpg" alt="images" /> </a></div>

Women
Frontend Appearance

Backend Setting : Please click Here to view.

Backend Setting of ‘Dining Submenu 1′: Please click Here to view.

Backend Setting of ‘Dining Submenu 2′: Please click Here to view.

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

Baby & Kids
Frontend Appearance

Backend Setting : Please click Here to view.

Furniture
Frontend Appearance

Backend Setting : Please click Here to view.

Book & media
Frontend Appearance

Backend Setting : Please click Here to view.

Blog
Frontend Appearance

Backend Setting : Please click Here to view.

Contact Us
Frontend Appearance

Backend Setting : Please click Here to view.

Copy and paste the following code into the URL Tab:

index.php?controller=contact

Backend Setting 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

6EXTENSIONS CONFIGURATION

6.1 SP Widmex Layout 1

6.1.1 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 2: Fill information into the required field (*) as below:

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

6.1.3 displayCustomHtml1

SP Custom HTML – Custom Support
Frontend Appearance:

Backend Setting:

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="support-info">
<ul>
<li class="live-chat"><a href="#">Start <strong>live chat</strong></a></li>
<li class="phone-support"><span>Call our customer service at:</span><strong> 096-999-8386</strong></li>
</ul>
</div>

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

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

6.1.6 displayTag2

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 >> click “Configure” button to configure.

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

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

6.1.7 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

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

<div class="free-shipping">
<div class="item style-01">
<div class="thumb"><img src="../themes/sp_widmex/img/cms/free-ship.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">free shipping</a></h4>
<p>Delivery world wide</p>
</div>
</div>
<div class="item style-02">
<div class="thumb"><img src="../themes/sp_widmex/img/cms/money.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">money back</a></h4>
<p>While not exactly line</p>
</div>
</div>
<div class="item style-03">
<div class="thumb"><img src="../themes/sp_widmex/img/cms/support.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">we support</a></h4>
<p>Online store 24/7</p>
</div>
</div>
<div class="item style-04">
<div class="thumb"><img src="../themes/sp_widmex/img/cms/hotline.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">hot line</a></h4>
<strong>+ 098.111.666</strong></div>
</div>
</div>

6.1.9 displayCountdownproduct

SP Countdown product slider – Deals of the day!
Frontend Appearance:

Backend Settings:

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

6.1.10 displayCategories

SP Categories – collection!
Frontend Appearance:

Backend Settings:

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

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

<div class="col-md-6 col-sm-6 col-xs-6 images"><a href="#"><img src="../themes/sp_widmex/img/cms/banner01.jpg" alt="images" /></a></div>
<div class="col-md-6 col-sm-6 col-xs-6 images"><a href="#"><img src="../themes/sp_widmex/img/cms/banner02.jpg" alt="images" /></a></div>

6.1.12 displayListingtab

SP Listing Tabs – Top Selling
Frontend Appearance:

Backend Settings:

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

6.1.13 displayExtraSlider4

SP Extra Slider – Top 10 Popular
Frontend Appearance:

Backend Settings:

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

6.1.14 display Customhtml3

SP Custom HTML – Banner Content Layout 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:

<div class="custom-banner-02">
<div class="row custom-row">
<div class="custom-col-left col-md-6 col-sm-6 col-xs-6">
<div class="images style-01"><a href="#"><img src="../themes/sp_widmex/img/cms/banner03.jpg" alt="images" /></a></div>
<div class="images style-02"><a href="#"><img src="../themes/sp_widmex/img/cms/banner04.jpg" alt="images" /></a></div>
</div>
<div class="custom-col-right col-md-6 col-sm-6 col-xs-6">
<div class="images style-03"><a href="#"><img src="../themes/sp_widmex/img/cms/banner05.jpg" alt="images" /></a></div>
</div>
</div>
</div>

6.1.15 displayExtraSlider

SP Extra Slider – Hot Sale
Frontend Appearance:

Backend Settings:

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

6.1.16 displayExtraSlider6

SP Extra Slider – Viewed Products
Frontend Appearance:

Backend Settings:

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

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

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

<div class="bg_testimonia">
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_widmex/themes/sp_widmex/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_widmex/themes/sp_widmex/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_widmex/themes/sp_widmex/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_widmex/themes/sp_widmex/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
</div>

6.1.19 displayManufacture

SP Manufacture Slider – FEATURED BRANDS
Frontend Appearance:

Backend Settings:

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

6.1.20 displayFootersocial

SP Theme Configuration
Frontend Appearance:

Backend Settings:

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

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

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_widmex\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, Sign up and Save!, Receive email-only deals, special offers & product exclusives

6.1.22 display Customhtml10

1. SP Custom HTML – us address
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="#">View Points and Certificates</a></li>
<li><a href="#">Learn More</a></li>
<li><a href="#">Exclusive Offers</a></li>
<li><a href="#">Sign in or Create Account</a></li>
</ul>

2. SP Custom HTML – support & 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="#">Customer Service</a></li>
<li><a href="#">Protection Plans</a></li>
<li><a href="#">Installation</a></li>
<li><a href="#">Trade-In Program</a></li>
<li><a href="#">More Support & Services</a></li>
</ul>

3. SP Custom HTML – orders & returns
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="#">Order Status</a></li>
<li><a href="#">Return & Exchange Promise</a></li>
<li><a href="#">Price Match Guarantee</a></li>
<li><a href="#">Pay With Points</a></li>
<li><a href="#">More Orders & Returns Help</a></li>
</ul>

4. SP Custom HTML – credit cards
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="#">make payment/check balance</a></li>
<li><a href="#">credit card offers</a></li>
<li><a href="#">apply now</a></li>
</ul>

6.1.23 display Customhtml11

SP Custom HTML – products tag
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="tags-container">
<ul>
<li><strong>furniture: </strong></li>
<li><a href="#">Bedsheets</a></li>
<li><a href="#">Curtains</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Storage</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Wall</a></li>
<li><a href="#">Decor</a></li>
<li><a href="#">Showpieces</a></li>
<li><a href="#">Clocks</a></li>
<li><a href="#">Towels</a></li>
<li><a href="#">Coffee</a></li>
<li><a href="#">Mugs</a></li>
<li><a href="#">Screwdrivers</a></li>
</ul>
<ul>
<li><strong>camera: </strong></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Lens</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Tripod</a></li>
</ul>
<ul>
<li><strong>laptops: </strong></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Acer</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Lenovo</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Dell</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Asus</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Toshiba</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Notebook</a></li>
</ul>
<ul>
<li><strong>tvs: </strong></li>
<li><a href="#">Sony</a></li>
<li><a href="#">TV Samsung</a></li>
<li><a href="#">TV LG</a></li>
<li><a href="#">TV Panasonic</a></li>
<li><a href="#">TV Onida</a></li>
<li><a href="#">TV Toshiba</a></li>
<li><a href="#">TV Philips</a></li>
<li><a href="#">TV Micromax</a></li>
<li><a href="#">TV LED</a></li>
<li><a href="#">TV 3D</a></li>
<li><a href="#">TV Curved</a></li>
<li><a href="#">TV Smart</a></li>
</ul>
</div>

6.1.24 displayPayment

SP Theme Configuration
Frontend Appearance:

Backend Settings:

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

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

6.2 SP Widmex Layout 2

6.2.1 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

6.2.2 display Customhtml9

SP Custom HTML – Layout 2 – Banner slider
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-bannerSlider">
<div class="row">
<div class="style-01 col-md-6 col-sm-6 col-xs-6"><a href="#"><img src="../themes/sp_widmex/img/cms/banner06.jpg" alt="images" /></a></div>
<div class="style-02 col-md-6 col-sm-6 col-xs-6"><a href="#"><img src="../themes/sp_widmex/img/cms/banner07.jpg" alt="images" /></a></div>
</div>
</div>

6.2.3 display Customhtml12

SP Custom HTML – Layout 2 – Banner right
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="col-sm-12 images"><a href="#"><img src="../themes/sp_widmex/img/cms/banner08.jpg" alt="image" /></a></div>

6.2.4 displayExtraSlider8

SP Extra Slider – top10 popular
Frontend Appearance:

Backend Settings:

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

6.2.5 displayExtraSlider5

SP Extra Slider – feature products!
Frontend Appearance:

Backend Settings:

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

6.2.6 displayCowndowntproducts2

SP Cowndowntproductslider – Deals of the day!
Frontend Appearance:

Backend Settings:

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

6.2.7 displayListingtab2

SP Listingtabs – Top Selling!
Frontend Appearance:

Backend Settings:

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

6.2.8 display Customhtml13

SP Custom HTML – Layout 2 – 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="row">
<div class="images style-01 col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_widmex/img/cms/banner09.jpg" alt="images" /></a></div>
<div class="images style-02 col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_widmex/img/cms/banner10.jpg" alt="images" /></a></div>
</div>

6.2.9 displayExtraSlider7

SP Extra Slider – new arrivals!
Frontend Appearance:

Backend Settings:

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

6.2.10 display Customhtml14

SP Custom HTML – Layout 2 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="bg_testimonia2">
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_widmex/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_widmex/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_widmex/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
</div>

6.3 SP Widmex Layout 3

6.3.1 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
Sample 8: Please click Here to view
Sample 9: Please click Here to view

6.3.2 displayExtraSlider9

SP Extra Slider – extraslider index 3!
Frontend Appearance:

Backend Settings:

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

6.3.3 displaySuperCategory2

SP Super Category – mobile & tablet
Frontend Appearance:

Backend Settings:

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

6.3.4 displaySuperCategory1

SP Super Category – electronics
Frontend Appearance:

Backend Settings:

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

6.3.5 display Customhtml16

SP Custom HTML – Banner Center 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="row custom-row">
<div class="images col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_widmex/img/cms/banner11.jpg" alt="images" /></a></div>
<div class="images col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_widmex/img/cms/banner12.jpg" alt="images" /></a></div>
<div class="images col-md-12 col-sm-12 col-xs-12"><a href="#"><img src="../themes/sp_widmex/img/cms/banner13.jpg" alt="images" /></a></div>
</div>

6.3.6 displayExtraSlider10

SP Extra Slider – best seller!
Frontend Appearance:

Backend Settings:

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

6.4 SP Widmex Layout 4

6.4.1 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
Sample 11: Please click Here to view
Sample 12: Please click Here to view

6.4.2 displayExtraSlider11

SP Extra Slider – Extraslider index 4!
Frontend Appearance:

Backend Settings:

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

6.4.3 displayListingtab3

SP Listingtabs – Top Featured!
Frontend Appearance:

Backend Settings:

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

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

<div class="custom-banner-02">
<div class="row custom-row">
<div class="custom-col-left col-md-6 col-sm-6 col-xs-6">
<div class="images style-01"><a href="#"><img src="../themes/sp_widmex/img/cms/banner14.jpg" alt="images" /></a></div>
<div class="images style-02"><a href="#"><img src="../themes/sp_widmex/img/cms/banner15.jpg" alt="images" /></a></div>
</div>
<div class="custom-col-right col-md-6 col-sm-6 col-xs-6">
<div class="images style-03"><a href="#"><img src="../themes/sp_widmex/img/cms/banner16.jpg" alt="images" /></a></div>
</div>
</div>
</div>

6.4.5 display Customhtml2

SP Custom HTML – Banner Bottom 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:

<div class="custom-banner-04">
<div class="custom-row">
<div class="images style-01"><a href="#"><img src="../themes/sp_widmex/img/cms/banner17.jpg" alt="images" /></a></div>
<div class="images style-02"><a href="#"><img src="../themes/sp_widmex/img/cms/banner18.jpg" alt="images" /></a></div>
<div class="images style-03"><a href="#"><img src="../themes/sp_widmex/img/cms/banner19.jpg" alt="images" /></a></div>
</div>
</div>

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 Furnicom Magento 2.1.0

August 3, 2016, 12:47 am

≫ Next: SM Topshop Magento 2.1.0

≪ Previous: SP Widmex

View demo More detail

Note: This theme has versions for Magento 2.1.0, Magento 2.0.x and Magento 1.9.x. This guide is for Magento 2.1.0 Version. Please follow SM Furnicom Guide for Magento 2.0.x, SM Furnicom Guide for Magento 1.9.x if you want to use the others.

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

1 SYSTEM REQUIREMENT

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

Compatible with Magento Community Edition 2.1.0
Composer (latest stable version)
Apache 2.2 or late
PHP 7.0.2 – 7.0.6 except for 7.0.3, 7.0.4, 7.0.5, 5.6.x or 5.5.x (PHP 5.4 is not supported) and Memory_limit no less than 2G)

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:

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.1.0_v2.1.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.1.0_v2.1.0\data_quickstart

Note:

After successful installation DO NOT run magento.

Now we are going to Set file system ownership and permissions. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

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 remove semicolon (;) in front of the following lines:

;extension=php_intl.dll
;extension=php_xsl.dll

After modification, need to save the file(php.ini) as well as need to restart the Apache Server and check out the result.

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.

Step 12:

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.

Note:

At this moment we should Set file system ownership and permissions again. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

2.2 Manual Installation

Step 1: Please unzip ‘sm_furnicom_theme_m2.1.x_v2.1.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 Content>> Design>> Configuration. In your storeview, select Default 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

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

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

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

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

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

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

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

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

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

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

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::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::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::default_home4.phtml"}}</div>
<div class="box-content super-cate-2">{{block class="Sm\SuperCategories\Block\SuperCategories" template="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::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" nb_column4="1"}}</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>

3.1.5 Home Style 5

Frontend of Home Style 5 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

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::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::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::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::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::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::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" nb_column4="1" }}</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>

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

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

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizontal“.)
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

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.

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

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.

↧

SM Topshop Magento 2.1.0

August 4, 2016, 2:13 am

≫ Next: SP Solo

≪ Previous: SM Furnicom Magento 2.1.0

View demo More detail

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

Note: This theme has versions for Magento 1.9.x, Magento 2.0.x, and Magento 2.1.0.

Version	Userguide
SM Topshop Magento Version 1.9.x	Please click *Here* to view
SM Topshop Magento Version 2.0.x	Please click *Here* to view
SM Topshop Magento Version 2.1.x	Please click *Here* to view

1 SYSTEM REQUIREMENT

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

Compatible with Magento Community Edition 2.1.0
Composer (latest stable version)
Apache 2.2 or late
PHP 7.0.2 – 7.0.6 except for 7.0.3, 7.0.4, 7.0.5, 5.6.x or 5.5.x (PHP 5.4 is not supported) and Memory_limit no less than 2G)

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:

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_topshop_quickstart_m2.1.0_v2.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_topshop_quickstart_m2.1.0_v2.0.0\data_quickstart

Note:

After successful installation DO NOT run magento.

Now we are going to Set file system ownership and permissions. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

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 remove semicolon (;) in front of the following lines:

;extension=php_intl.dll
;extension=php_xsl.dll

After modification, need to save the file(php.ini) as well as need to restart the Apache Server and check out the result.

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.

Step 12:

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.

Note:

At this moment we should Set file system ownership and permissions again. To perform all actions, you should use PuTTY – a free SSH and telnet client for Windows on your computer. When you have the command-line access, enter the following commands in the order shown:
cd <your Magento install dir>
chmod -R 777 pub
chmod -R 777 var
chmod -R 777 app/etc
Go Here to readmore about the action.

2.2 Manual Installation

Step 1: Please unzip ‘sm_topshop_theme_m2.1.x_v2.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 Content>> Design>> Configuration. In your storeview, select Default Theme field with the SM Topshop.

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 Topshop 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,
Configure Developer: To Custom Css or Javascript

3CONFIGURATION

3.1 Page Configuration

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.

Home Style 1

Frontend of Home Style 1 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

Copy and paste the following code into the Content field:

<div class="homepage-wrapper home-style-1">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1"}}</div>
<div class="boxed-container listingtab-wrap">{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.default" as="listingtabs_default" template="Sm_ListingTabs::default.phtml"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
<div class="boxed-container fashion-cat">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="73" pretext="static_c_fashion" posttext="banner_s_p_fashion" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_fur" template="Sm_SuperCategories::default.phtml" product_category="74" pretext="static_c_furniture" posttext="banner_s_p_furniture" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_com" template="Sm_SuperCategories::default.phtml" product_category="75" pretext="static_c_computer" posttext="banner_s_p_computer" }}</div>
<div class="boxed-container healthy-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_hea" template="Sm_SuperCategories::default.phtml" product_category="76" pretext="static_c_healthy" posttext="banner_s_p_healthy" }}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}</div>
<div class="boxed-container brand-wrap">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

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"/>

			<block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default.phtml" img_background="ffffff"/>
</referenceContainer>

Home Style 2

Frontend of Home Style 2 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

Copy and paste the following code into the Content field:

<div class="homepage-wrapper home-style-2">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container top-full">
<div class="row">
<div class="col-lg-3 vertical-menu-box">{{block class="Magento\\Cms\\Block\\Block" block_id="vertical-menu-config"}}</div>
<div class="col-lg-9 slideshow-box">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}</div>
</div>
</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index2"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
<div class="boxed-container">{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.default" as="listingtabs_default" template="Sm_ListingTabs::default.phtml"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::sm/supercategories/default.phtml" product_category="73" pretext="static_c_fashion" posttext="banner_s_p_fashion" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_fur" template="Sm_SuperCategories::default.phtml" product_category="74" pretext="static_c_furniture" posttext="banner_s_p_furniture" }}</div>
<div class="boxed-container">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_com" template="Sm_SuperCategories::default.phtml" product_category="75" pretext="static_c_computer" posttext="banner_s_p_computer" }}</div>
<div class="boxed-container healthy-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories_hea" template="Sm_SuperCategories::default.phtml" product_category="76" pretext="static_c_healthy" posttext="banner_s_p_healthy" }}</div>
<div class="boxed-container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 newsletter-box">{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe-index2.phtml"}}</div>
<div class="col-lg-8 col-md-8 col-sm-8 latest-post-wrapper">
<div class="slider-latest-blog">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block-index2"}}</div>
</div>
</div>
</div>
</div>
</div>
</div>

Home Style 3

Frontend of Home Style 3 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

Copy and paste the following code into the Content field:

<div class="homepage-wrapper home-style-3">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container top-full">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 vertical-menu-virtual"> </div>
<div class="col-lg-6 col-md-6 col-sm-12 slideshow-box">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"}}</div>
<div class="col-lg-3 col-md-3 col-sm-12 banner-box">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index3"}}</div>
</div>
</div>
<div class="boxed-container banner-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index2"}}</div>
<div class="boxed-container hotdeal-custom-wrapper">
<div class="row featured-deal-wrap">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts" template="Sm_BasicProducts::slider-index3.phtml" title="Featured Products" product_order_by="price" product_category="11" product_limitation="6" nb_column1="3" nb_column2="3" nb_column3="2" nb_column4="2" nb_column5="1" }}</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 deal-wrapper slidebar">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default-index3.phtml" title="Hot deals" posttext="" nb_column4="2" margin="30"}}</div>
</div>
</div>
<div class="boxed-container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 left9-wrapper">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index3"}}
<div class="supercategories-wrap">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="73" pretext="static_c_fashion" posttext="banner_s_p_fashion" nbi_rows="4" }}</div>
<div class="supercategories-wrap furniture-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="74" pretext="static_c_furniture" posttext="banner_s_p_furniture" nbi_rows="4" }}</div>
<div class="supercategories-wrap computer-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="75" pretext="static_c_computer" posttext="banner_s_p_computer" nbi_rows="4" }}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 slidebar">
<div class="slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts" template="Sm_BasicProducts::slider-index3.phtml" title="Best sellers" product_order_by="best_sales" product_category="11" product_limitation="6" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="2" nb_column5="1" }}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-3-index3"}}
<div class="slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts" template="Sm_BasicProducts::slider-index3.phtml" title="New Products" product_order_by="created_at" product_category="11" product_limitation="6" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="2" nb_column5="1" }}</div>
{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-4-index3"}}
<div class="latest-post-wrapper">
<div class="slider-latest-blog">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block-index3"}}</div>
</div>
</div>
</div>
</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

Home Style 4

Frontend of Home Style 4 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

Copy and paste the following code into the Content field:

<div class="homepage-wrapper home-style-4">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index4"}}</div>
<div class="boxed-container hotdeal-custom-wrapper">{{block class="Sm\CountdownProductSlider\Block\CountdownProductSlider" name="countdownproductslider.default" as="countdownproductslider_default" template="Sm_CountdownProductSlider::default.phtml"}}</div>
<div class="boxed-container banner-2">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2"}}</div>
<div class="boxed-container supercategories-wrap women-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="80" nbi_rows="4" pretext="banner-c-women" posttext="" }}</div>
<div class="boxed-container supercategories-wrap men-cate supercate-right">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="81" nbi_rows="4" pretext="banner-c-men" posttext="" }}</div>
<div class="boxed-container supercategories-wrap shoe-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="98" nbi_rows="4" pretext="banner-c-shoe" posttext="" }}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index4"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

Copy and paste the following code into the Layout Update XML field:

<referenceContainer name="main.content">
	<block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"/>
</referenceContainer>

Home Style 5

Frontend of Home Style 5 – Layout Position

In the Admin Panel, please navigate to Content >> Elements >> Pages to create a new page in Pages section.

Backend Setting: Please click Here to view.

Copy and paste the following code into the Content field:

<div class="homepage-wrapper home-style-5">
<div class="full-wrapper banner-top">
<div class="container">
<div class="boxed-container top-full">
<div class="row">
<div class="col-lg-3 col-md-3 hidden-sm vertical-menu-virtual">{{block class="Magento\\Cms\\Block\\Block" block_id="vertical-menu-config"}}</div>
<div class="col-lg-7 col-md-7 col-sm-12 slideshow-box">{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" before="-" template="Sm_ImageSlider::default.phtml"}}</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs banner-box">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-1-index5"}}</div>
</div>
</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-service-1-index5"}}</div>
<div class="boxed-container deal-featured">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 slidebar deal-wrapper">{{block class="Sm\Deals\Block\Deals" name="deals" template="Sm_Deals::default-index3.phtml" title="Hot deals" posttext="" nb_column5="1"}}</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-6  slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" name="basicproducts" template="Sm_BasicProducts::slider-index3.phtml" title="Featured Products" product_order_by="price" product_category="11" product_limitation="6" nb_column1="3" nb_column2="3" nb_column3="2" nb_column4="1" nb_column5="1" }}</div>
</div>
</div>
<div class="boxed-container new-banner">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 slidebar">
<div class="slider-basic-wrapper">{{block class="Sm\BasicProducts\Block\BasicProducts" template="Sm_BasicProducts::slider-index5.phtml" title="New Products" product_order_by="created_at" product_category="11" product_limitation="6" nb_column1="1" nb_column2="1" nb_column3="1" nb_column4="2" nb_column5="1" }}</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 banner-custom-wrapper">
<div class="banner-wrapper">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index5"}}</div>
</div>
</div>
</div>
<div class="boxed-container supercategories-wrap women-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="80" nbi_rows="5" pretext="" posttext="" }}</div>
<div class="boxed-container supercategories-wrap men-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="81" nbi_rows="5" pretext="" posttext="" }}</div>
<div class="boxed-container">{{block class="Magento\\Cms\\Block\\Block" block_id="static-image-2-index4"}}</div>
<div class="boxed-container supercategories-wrap shoe-cate">{{block class="Sm\SuperCategories\Block\SuperCategories" name="supercategories" template="Sm_SuperCategories::default.phtml" product_category="98" nbi_rows="5" pretext="" posttext="" }}</div>
<div class="boxed-container latest-post-wrapper">
<div class="slider-latest-blog">{{block class="Magento\\Cms\\Block\\Block" block_id="blog-block"}}</div>
</div>
<div class="boxed-container brand-wraper">{{block class="Magento\\Cms\\Block\\Block" block_id="brand-block"}}</div>
</div>
</div>
</div>

3.2 Configure Megamenu

Step 1: Create a New Menu In Admin Panel, navigate to SM Megamenu >> Add New Menu (add group: “Mega Menu Horizon.
Step 2: Navigate to SM Megamenu >> Configuration & fill the ID number for the created menu in step 1
Step 3: In order to add menu items, go to SM Megamenu >> Menu Manager >> click on ‘Edit’to open Menu Items to add items as you want

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

<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="blue"><a title="Blue" href="{{store url="?___store=belgium&___from_store=default"}}">Blue</a></li>
		<li class="brown"><a title="Brown" href="{{store url="?___store=australia&___from_store=default"}}">Brown</a></li>
		<li class="cyan"><a title="Cyan" href="{{store url="?___store=japan&___from_store=default"}}">Cyan</a></li>
		<li class="green"><a title="Green" href="{{store url="?___store=andorra&___from_store=default"}}">Green</a></li>
		<li class="orange"><a title="Orange" href="{{store url="?___store=vietnam&___from_store=default"}}">Orange</a></li>
		<li class="pink"><a title="Pink" href="{{store url="?___store=benin&___from_store=default"}}">Pink</a></li>
		<li class="teal"><a title="Teal" href="{{store url="?___store=barbados&___from_store=default"}}">Teal</a></li>
		<li class="red"><a title="Red" href="{{store url="?___store=default&___from_store=default"}}">Red</a></li>
	</ul>	
			
	<ul class="item-home-store layout-home">
		<li class="title-menu-home">404 Page Layout</li>
		<li><a title="404 Page Style 1" href="{{store url="404page"}}">404 Page Style 1</a></li>
	</ul>
	
	<div style="clear:both;"> </div>
	
</div>

Shop
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group 1′: Please click Here to view.

Note: Do the same with item ‘Group 2′

Backend of ‘Accessories – Women’ in the ‘Group 1′: Please click Here to view.

Backend of ‘Bag – Women’ in the ‘Group 1′: Please click Here to view.

Note: Do the same with other items having same level as ‘Bag – Women’ in the ‘Group 1′

Backend of ‘Shoes – Women’ in the ‘Group 2′: Please click Here to view.

Backend of ‘Product Slider – Men’ in the ‘Group 2′: Please click Here to view.

Note: Do the same with other items having same level as ‘Product Slider – Men’ in the ‘Group 2′

Collection
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Group 1′: Please click Here to view.

Note: Do the same with item ‘Group 2′

Backend of ‘Accessories – Women’ in the ‘Group 1′: Please click Here to view.

Backend of ‘Image 1′ in the ‘Group 1′: Please click Here to view.

Copy and paste the following code into the content:

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

Backend of ‘Shoes-Women’ in the ‘Group 2′: Please click Here to view.

Backend of ‘Image 2′ in the ‘Group 2′: Please click Here to view.

Copy and paste the following code into the content:

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

Accessories
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Accessories’ in the ‘Accessories’: Please click Here to view.

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:

Vertical-mega-menu

Sortable Categories Items Please click Here to view.

Fashion
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Row 1′: Please click Here to view.

Note: Do the same with item ‘Row 2′

Backend of ‘T-shirt’ in the ‘Row 1′: Please click Here to view.

Backend of ‘Dress’ in the ‘Row 1′: Please click Here to view.

Backend of ‘Shoes’ in the ‘Row 1′: Please click Here to view.

Backend of ‘Bags’ in the ‘Row 2′: Please click Here to view.

Backend of ‘Dress’ in the ‘Row 2′: Please click Here to view.

Backend of ‘Shoes’ in the ‘Row 2′: Please click Here to view.

Computer
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Computer Column 1′: Please click Here to view.

Note: Do the same with item ‘Computer Column 2′

Backend of ‘Col 1′ in the ‘Computer Column 1′: Please click Here to view.

Note: The item named ‘Col 2′ in the ‘Computer Column 1′ and ‘Col 1′, ‘Col 2′ in the ‘Computer Column 2′ having same menu level (Level 3) as item ‘Col 1′ could have the same configuration. However, you should be aware that the Parent Item of ‘Col 1′, ‘Col 2′ in the ‘Computer Column 2′ is different.

Backend of ‘Beds’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Cabinets & Storage’ in the ‘Col 2′

Backend of ‘Shoes’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Coat’ in ‘the ‘Col 2′

Backend of ‘Bathroom Fixtures’ in the ‘Col 1′: Please click Here to view.

Backend of ‘Banner’ in the ‘Col 2′: Please click Here to view.

Copy and paste the following code into the content:

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

Healthy & Beauty
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Healthy & Beauty’: Please click Here to view.

Furniture
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Row 1′ in the ‘Furniture’: Please click Here to view.

Backend of ‘Fu.. R1 Column 1′ in the ‘Row 1′: Please click Here to view.

Backend of ‘Col 1′in the’Fu.. R1 Column 1′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘Chairs & Sofas’in the’Col 1′: Please click Here to view.

Note: Do the same with item ‘Dress’

Backend of ‘Fu.. R1 Column 2′ in the ‘row1′: Please click Here to view.

Backend of ‘Col 1′in the’Fu.. R1 Column 2′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘Office Furniture’in the’Col 1′: Please click Here to view.

Note: Do the same with item ‘T-shirt’

Backend of ‘Banner 2′in the’Fu.. Row 2′: Please click Here to view.

Copy and paste the following code into the content:

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

Backend of ‘Banner 3′in the’Fu.. Row 2′: Please click Here to view.

Copy and paste the following code into the content:

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

Smartphone
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Row 1′: Please click Here to view.

Note: Do the same with item ‘Fu.. Row 2′

Backend of ‘Fu.. R1 Column 1′ in the ‘Row 1′: Please click Here to view.

Note: Do the same with item ‘Fu.. R1 Column 2′

Backend of ‘Col 1′ in the ‘Fu.. R1 Column 1′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘T-shirt’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Dress’

Backend of ‘Col 1′ in the ‘Fu.. R1 Column 2′: Please click Here to view.

Note: Do the same with item ‘Col 2′

Backend of ‘Hat’ in the ‘Col 1′: Please click Here to view.

Note: Do the same with item ‘Shoes’

Backend of ‘Banner 3′in the’Fu.. Row 2′: Please click Here to view.

Copy and paste the following code into the content:

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

Sport Clothing
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Sport Clothing’: Please click Here to view.

Accessories
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Accessories’: Please click Here to view.

Watch & Jewelry
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Watch & Jewelry’: Please click Here to view.

Kitchen
Frontend Appearance

Backend Settings: Please click Here to view.

Backend of ‘Sub list’ in the ‘Kitchen’: Please click Here to view.

More Category
Frontend Appearance

Backend Settings: Please click Here to view.

3.3 Configure Extensions

The SM topshop front-page has been integrated with the extensions in the following list:

In SM topshop Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM to configure extensions as you want.

SM Listing Tabs

Position: SM Listing Tabs
Frontend Appearance

Backend of SM Listing Tabs: Click Here

Position: SM Basic Products
Frontend Appearance

Backend of SM Basic Products: Click Here

Position: SM Megamenu
Frontend Appearance

Horizontal Megamenu

Vertical Megamenu

Backend of SM Megamenu: Click Here

SM Countdown Product Slider

Position: SM Countdown Product Slider
Frontend Appearance

Backend of SM Countdown Product Slider: Click Here

SM Image Slider

Position: SM Image Slider
Frontend Appearance

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

SM Super Categories

Position: SM Super Categories
Frontend Appearance

Backend of SM Super Categories: Click Here

SM Deals

Position: SM Deals
Frontend Appearance

Backend of SM Deals: Click Here

SM Quick View

Position: SM Quick View
Frontend Appearance

Backend of SM Quick View: Click Here

3.4 Configure Static Blocks

The SM topshop 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 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:

<p>Call Support Free : (044) 6789 839</p>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-full-top”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p><a title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/banner-full-top.jpg"}}" alt="Image static" /></a></p>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-link-deal”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<ul>
<li><a href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/plicy-1.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/plicy-2.png"}}" alt="" /></a></li>
<li><a href="#"><img src="{{media url="wysiwyg/home-page-image/home-1/plicy-3.png"}}" alt="" /></a></li>
</ul>

Static Block: static-image-1

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="row banner-list static-image-1">
<div class="col-lg-4 col-md-4 col-xs-4"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-8 col-md-8 col-xs-8">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-xs-6 newsletter-wrap">{{block class="Magento\Newsletter\Block\Subscribe" template="subscribe.phtml"}}</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
</div>

Static Block: static-image-2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-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="row banner-list static-image-2">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-4.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: blog-block

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="box-content latest-post-block">
<div class="slider-latest-blog">
<div class="title-home">
<h2>Recent posts</h2>
</div>
<div class="slider-blog latest-post">
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-7.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vestibulum sit amet libero vel neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loin ground round nostrud sint. Kevin pancetta sunt officia ullamco, meatball ut cow ex velit elit laboris...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Fusce orci ligula neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-4.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Fusce orci ligula neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Aliquip pork loin prosciutto fatback bresaola culpa ribeye dolor. Cillum fatback drumstick aute. Sirloin beef ribs culpa, nisi ut meatball kevin. Officia deserunt drums...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vivamus dictum pulvinar ipsum vitae vestibulum" href="#"><img src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vivamus dictum pulvinar ipsum vitae vestibulum</a></h2>
</div>
<div class="postContent">Pork belly enim tenderloin, boudin short loin cillum ad picanha proident. Sint minim shankle dolore. Ball tip tongue alcatra, strip steak pork loin do filet mignon ullam...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<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-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Morbi in turpis vel ante feugiat placerat</a></h2>
</div>
<div class="postContent">We welcome Lauren Manoogian to Need Supply Co. this fall. This eponymous label of one very talented Brooklyn designer is defined by soft knits and sculptural cuts.</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![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,
	});	  
	});
// ]]></script>
</div>
</div>

Static Block: brand-block

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="brand-block">
<div class="title-home">
<h2>Our brand</h2>
</div>
<div class="brand-content">
<ul class="list-brands row">
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br01.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br02.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br03.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br04.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br05.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br06.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br07.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br08.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br09.jpg"}}" alt="Brand" /></a></li>
<li class="col-lg-2 col-md-2 col-sm-3"><a title="Brand" href="#"><img src="{{media url="wysiwyg/brand/br10.jpg"}}" alt="Brand" /></a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “about-us-footer”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p><img src="{{media url="wysiwyg/footer/footer-logo.png"}}" alt="Topshop - Responsive Magento Theme for Multipurpose" /></p>
<p>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 don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>

Static Block: ft-contact-us

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="block ft-contact-us">
<div class="title">Store Information</div>
<div class="content">
<p class="address"><em class="fa fa-home"></em>Ranelagh Place, Liverpool, L3 5UL, England</p>
<p class="phone"><em class="fa fa-phone"></em><a title="Telephone" href="#">8 (495) 989 906 743</a></p>
<p class="email"><em class="fa fa-envelope"></em><a title="Mail to: topshop@co.uk.com" href="mailto:topshop@co.uk.com">topshop@co.uk.com</a></p>
</div>
</div>

Static Block: ft-information

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="block ft-information">
<div class="title">INFORMATION</div>
<div class="content">
<ul>
<li><a title="About Us" href="{{config path="web/secure/base_url"}}about-us.html">About Us</a></li>
<li><a title="Jobs" href="#">Jobs</a></li>
<li><a title="Delivery Information" href="#">Delivery Information</a></li>
<li><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li><a title="Term and Conditions" href="#">Term and Conditions</a></li>
</ul>
</div>
</div>

Static Block: ft-my-account

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="block ft-my-account">
<div class="title">MY ACCOUNT</div>
<div class="content">
<ul>
<li><a title="My account" href="{{config path="web/secure/base_url"}}customer/account/">My account</a></li>
<li><a title="Login" href="{{config path="web/secure/base_url"}}customer/login/">Login</a></li>
<li><a title="My Cart" href="{{config path="web/secure/base_url"}}checkout/cart/">My Cart</a></li>
<li><a title="My Wishlist" href="{{config path="web/secure/base_url"}}wishlist/">My Wishlist</a></li>
<li><a title="My Compare" href="{{config path="web/secure/base_url"}}catalog/product_compare/">My Compare</a></li>
</ul>
</div>
</div>

Static Block: ft-why-us

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “ft-why-us”

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="block ft-why-us">
<div class="title">WHY CHOOSE US</div>
<div class="content">
<ul>
<li><a title="Product Recall" href="#">Product Recall</a></li>
<li><a title="Gift Vouchers" href="#">Gift Vouchers</a></li>
<li><a title="Returns and Exchanges" href="#">Returns and Exchanges</a></li>
<li><a title="Shipping Options" href="#">Shipping Options</a></li>
<li><a title="Terms of Use" href="#">Terms of Use</a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “ft-category-footer”

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="block ft-category">
<div class="content">
<ul>
<li><label title="WATCHES">WATCHES : </label></li>
<li><a title="Watches" href="#">Watches</a></li>
<li><a title="Titan Watches" href="#">Titan Watches</a></li>
<li><a title="Casio Watches" href="#">Casio Watches</a></li>
<li><a title="Fastrack Watches" href="#">Fastrack Watches</a></li>
<li><a title="Timex Watches" href="#">Timex Watches</a></li>
<li><a title="Fossil Watches" href="#">Fossil Watches</a></li>
<li><a title="Diesel Watches" href="#">Diesel Watches</a></li>
<li><a title="Luxury Watches " href="#">Luxury Watches </a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
<ul>
<li><label title="CLOTHING">CLOTHING: </label></li>
<li><a title="Shirts" href="#">Shirts</a></li>
<li><a title="Jeans" href="#">Jeans</a></li>
<li><a title="T shirts" href="#">T shirts</a></li>
<li><a title="Kurtis " href="#">Kurtis </a></li>
<li><a title="Sarees" href="#">Sarees</a></li>
<li><a title="Levis Jeans" href="#">Levis Jeans</a></li>
<li><a title="Killer Jeans" href="#">Killer Jeans</a></li>
<li><a title="Pepe Jeans " href="#">Pepe Jeans </a></li>
<li><a title="Arrow Shirts " href="#">Arrow Shirts </a></li>
<li><a title="Ethnic Wear " href="#">Ethnic Wear </a></li>
<li><a title="Formal Shirts  " href="#">Formal Shirts </a></li>
<li><a title="Peter England Shirts  " href="#">Peter England Shirts </a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
<ul>
<li><label title="FOOTWEAR">FOOTWEAR : </label></li>
<li><a title="Shoes " href="#">Shoes </a></li>
<li><a title="Casual Shoes " href="#">Casual Shoes </a></li>
<li><a title="Adidas Shoes" href="#">Adidas Shoes</a></li>
<li><a title="Gas Shoes" href="#">Gas Shoes</a></li>
<li><a title=" Puma Shoes " href="#"> Puma Shoes </a></li>
<li><a title="Reebok Shoes " href="#">Reebok Shoes </a></li>
<li><a title="Woodland Shoes " href="#">Woodland Shoes </a></li>
<li><a title="Red tape Shoes " href="#">Red tape Shoes </a></li>
<li><a title="Nike Shoes " href="#">Nike Shoes </a></li>
<li><a title="View all" href="#">View all</a></li>
</ul>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with 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:

<p><img src="{{media url="wysiwyg/payment/payment.png"}}" alt="Payment" /></p>

Static Block: static-image-1-index2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1-index2″

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="row banner-list static-image-1-index2">
<div class="col-lg-4 col-md-4 col-sm-4"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-sm-6 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
</div>

Static Block: blog-block-index2

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “blog-block-index2″

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="box-content latest-post-block latest-post-block-index2">
<div class="slider-latest-blog">
<div class="title-home">
<h2>Recent posts</h2>
</div>
<div class="slider-blog latest-post">
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-7.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vestibulum sit amet libero vel neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loin ground round nostrud sint. Kevin pancetta sunt officia ullamco, meatball ut cow ex velit elit laboris...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Fusce orci ligula neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-4.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Fusce orci ligula neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Aliquip pork loin prosciutto fatback bresaola culpa ribeye dolor. Cillum fatback drumstick aute. Sirloin beef ribs culpa, nisi ut meatball kevin. Officia deserunt drums...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vivamus dictum pulvinar ipsum vitae vestibulum" href="#"><img src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vivamus dictum pulvinar ipsum vitae vestibulum</a></h2>
</div>
<div class="postContent">Pork belly enim tenderloin, boudin short loin cillum ad picanha proident. Sint minim shankle dolore. Ball tip tongue alcatra, strip steak pork loin do filet mignon ullam...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<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-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Morbi in turpis vel ante feugiat placerat</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loin ground round nostrud sint. Kevin pancetta sunt officia ullamco, meatball ut cow ex velit elit laboris...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function($) {
	var post_slider = $(".latest-post-block-index2 .slider-blog.latest-post");
	post_slider.owlCarousel({				
	responsive:{
		0:{
			items:1
		},
		480:{
			items:1
		},
		768:{
			items:2
		},
		992:{
			items:2
		},
		1200:{
			items:2
		}
	},
	autoplay:false,
	loop:false,
	nav : false,
	dots: false,
	autoplaySpeed : 500,
	navSpeed : 500,
	dotsSpeed : 500,
	autoplayHoverPause: true,
	margin:30,
	});	  
	});
// ]]></script>
</div>
</div>

Static Block: static-image-1-index3

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="row banner-list static-image-1-index3">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-6 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-2.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-2-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2-index3″

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="row banner-list static-image-2-index3">
<div class="col-lg-12 col-md-12 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-3-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-3-index3″

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="row banner-list box-margin-bottom">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-4.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-4-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-4-index3″

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="row banner-list">
<div class="col-lg-12 col-md-12 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-3/image-5.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: blog-block-index3

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “blog-block-index3″

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="box-content latest-post-block latest-post-block-index3">
<div class="slider-latest-blog">
<div class="title-home">
<h2>Recent posts</h2>
</div>
<div class="slider-blog latest-post">
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vestibulum sit amet libero vel neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-7.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vestibulum sit amet libero vel neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Quis qui prosciutto, eiusmod bacon in kielbasa beef enim short loi...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Fusce orci ligula neque dapibus ultrices" href="#"><img src="{{media url="wysiwyg/blog/blog-4.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Fusce orci ligula neque dapibus ultrices</a></h2>
</div>
<div class="postContent">Nostrud turkey ad dolore deserunt cillum magna cow ball tip. Nostr...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<div class="blog-item-content">
<div class="image-blog"><a class="img-link" title="Vivamus dictum pulvinar ipsum vitae vestibulum" href="#"><img src="{{media url="wysiwyg/blog/blog-3.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Vivamus dictum pulvinar ipsum vitae vestibulum</a></h2>
</div>
<div class="postContent">Aliquip pork loin prosciutto fatback bresaola culpa ribeye dolor....</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
<div class="item">
<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-1.jpg"}}" alt="Image Blog" /></a></div>
<div class="info-blog">
<div class="postTitle">
<div class="postDate"><span class="month">Mar</span><span class="date">16</span></div>
<h2><a href="#">Morbi in turpis vel ante feugiat placerat</a></h2>
</div>
<div class="postContent">Pork belly enim tenderloin, boudin short loin cillum ad picanha pr...</div>
<div class="action-post"><a class="btn-readmore" title="Read More" href="#">Read More</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
	jQuery(document).ready(function($) {
	var post_slider = $(".latest-post-block-index3 .slider-blog.latest-post");
	post_slider.owlCarousel({				
	responsive:{
		0:{
			items:1
		},
		480:{
			items:1
		},
		768:{
			items:1
		},
		992:{
			items:1
		},
		1200:{
			items:1
		}
	},
	autoplay:false,
	loop:false,
	nav : false,
	dots: false,
	autoplaySpeed : 500,
	navSpeed : 500,
	dotsSpeed : 500,
	autoplayHoverPause: true,
	margin:30,
	});	  
	});
// ]]></script>
</div>
</div>

Static Block: static-image-1-index4

To create the static block, go to Content>> Elements>> Blocks with 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:

<div class="row banner-list static-image-1-index4">
<div class="col-lg-4 col-md-4 col-sm-4"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-1.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-1/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-sm-6 box-margin-bottom"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-2/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-4/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-c-women”

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-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/categories-image/banner_c_women.jpg"}}" alt="Static Image" /></a></div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-c-men”

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-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/categories-image/banner_c_men.jpg"}}" alt="Static Image" /></a></div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “banner-c-shoe”

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-c-brand">
<div class="banner"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/categories-image/banner_c_chair.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-2-index4

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2-index4″

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="row banner-list static-image-2-index4">
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-4/image-2.jpg"}}" alt="Static Image" /></a></div>
<div class="col-lg-6 col-md-6 col-sm-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-4/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-image-1-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-1-index5″

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="row banner-list">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-1.jpg"}}" alt="Static Image" /></a></div>
</div>

Static Block: static-service-1-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-service-1-index5″

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-service-1-index5">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-service">
<div class="icon"> </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="icon"> </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="icon"> </div>
<div class="info">
<p class="title">Support 24/7</p>
<p class="desc">Support 100%</p>
</div>
</div>
</div>
</div>

Static Block: static-image-2-index5

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “static-image-2-index5″

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="row banner-list static-image-2-index5">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row box-margin-bottom">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-2.jpg"}}" alt="Static Image" /></a></div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-3.jpg"}}" alt="Static Image" /></a></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><a class="first-image" title="Static Image" href="#"><img class="img-static" src="{{media url="wysiwyg/home-page-image/home-5/image-4.jpg"}}" alt="Static Image" /></a></div>
</div>

To create the static block, go to Content>> Elements>> Blocks with Identifier * : “vertical-menu-config”

Frontend Appearance

Backend Setting: Please click Here to view.

Copy and paste the following code into the content tab of this static block:

<p>{{block class="Sm\MegaMenu\Block\MegaMenu\View" template="Sm_MegaMenu::megamenu.phtml" theme="2" group_id="2" }}</p>

3.5 How To Edit Copyright in Admin Panel

Frontend Appearance

In SM Topshop Administration Page, please navigate to Stores>> Settings>> Configuration >> MAGENTECH.COM >> SM Topshop >> Advanced to configure this theme’s copyright.

Edit the code here:

TOPSHOP  ©  2016 Magento Themes Demo Store. All Rights Reserved.

3.6 How To Customize the Social symbols in admin panel

Frontend Appearance

In SM topshop Administration Page, please navigate to Stores>> Settings >> Configuration >> MAGENTECH.COM >> SM topshop >> 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 Solo

August 4, 2016, 11:52 pm

≫ Next: SM HiMarket Magento 2.1.0

≪ Previous: SM Topshop Magento 2.1.0

View demo More detail

1GETTING STARTED

1.1 Introduction

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

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 Solo Theme

Quickstart Installation: sp_solo_quickstart_p16_v1.0.0 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_solo_template_p16_v1.0.0.zip file

2.1 Quickstart Installation

Step 1: Download the quickstart package of SP Solo theme
Step 2: Extract the downloaded package named “sp_solo_quickstart_p16_v1.0.0″ 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.

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.

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 Solo Theme Installation

Firstly, you must EXTRACT the “sp_solo_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_solo_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_solo_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_solo_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 Solo‘s thumbnail and select Use this themeto replace your current theme with SP Solo 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

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

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

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,#quantity_wanted_p label,.custom_modview .spmostviewed-heading .close,.product_list.grid .button-container .cart_button, .product_lists.grid .button-container .cart_button,.spr-container .spr-query, .sp-megamenu .navbar-nav > li.mega_type2 .dropdown-menu ul li .dropdown-menu ul li .dropdown-menu ul li >a , .sp-megamenu .navbar-nav > li.mega_type1 .dropdown-menu ul li .dropdown-menu ul li a, .tags-container .tags_block .title_block span

.sp-megamenu .navbar-nav  li li a,.sp-megamenu .navbar-nav > li.mega_type2 .dropdown-menu ul li .dropdown-menu ul li > a,.sp-megamenu .navbar-nav > li > a, .sp-megamenu .home > a

h1,h2,h3,h4,h5,h6

.content_sortPagiBar_top label, .content_sortPagiBar_bottom label,.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span, .about-title, #pagenotfound .columns-container b, #pagenotfound .columns-container form button, #smartblogcat .articleContent .read-more .more, #smartblogcat .articleContent .sdsarticleHeader .sdstitle_block a, #smartblogcat .smartblogpost .sdsarticle-info, div.post-page .pagination span, div.post-page .pagination li a, div.post-page .pagination li span, #smartblogcat .small_image .articleContent .sdsarticle-info, #smartblogcat .large_image .articleContent .sdsarticle-info, .blog-post .date_added, #sdsblogArticle.blog-post .article-info .post-comment-right .author, #sdsblogArticle.blog-post .article-info .post-comment-right .comment-detail, #sdsblogArticle .sdstags-update .title_tag, #sdsblogArticle .social_blog .title_social_blog, div#articleComments .commentList li .text .name, div#articleComments .commentList li .text .created, div#respond .comment-reply-title, #pagination ul.pagination li, #pagination_bottom ul.pagination li, .product_list .price-box .price, .product_lists .price-box .price, .label-box, .product_list .price-box .old-price, .product_lists .price-box .old-price, #layered_block_left #layered_form span.layered_subtitle, #availability_statut, .content_prices .our_price_display, .sharing-buttons label, #quantity_wanted_p label, #quantity_wanted_p .qty input,#attributes fieldset label, .support-info ul li.phone-support strong, .shopping_cart .ajax_cart_total, .cart_block .price-total span, .cart_block .buttons a, .cart_block .cart-info .product-name a, .cart_block .cart-info .price, .free-shipping .item .content strong, .spcountdownproductslider-time .item-timer, .sp-categories .cat-wrap .content-box .cate-title a, .bg-categories .h3, .breadcrumb .category-name, .content_prices #old_price, .title-module-listingtab, .sp-listing-tabs .ltabs-tabs-container .ltabs-tabs li > span, .product_list h5.product-name a, div.lastestnews .post .post_content .read-more a, div.lastestnews .post .sdsarticle-info, .ps-test .item .bg_content .author, .ps-test .item .bg_content .des:before, .popular_product .product_list.grid .recommend-title, #newsletter_block_home .form-group .button, .footer-container #footer-center .tags-container ul li strong, .left-sidebar .popular_product .product_list.grid .right-block .lnk_view, .right-sidebar .popular_product .product_list.grid .right-block .lnk_view,.ps-testmonial2 .item .thumb-left .author > a, .ps-testmonial2 .item .content .des, .ps-testmonial2 .item .content .date, #sp-vermegamenu .navbar-nav > li > a, .sp-vermegamenu .navbar-nav > li.mega_type2 .dropdown-menu ul li .dropdown-menu ul li.parent > a, .lastestnews2 .post .post_content .post_title a, .sp-sp-cat .spcat-wrap .custom-cate .category-wrap-cat .sp-cat-title-parent, div.sp-sp-cat .spcat-tabs-container .spcat-tabs .spcat-tab,.sp-sp-cat .spcat-wrap .spcat-inner .category-wrap-cat .sp-catchild .more-cate, #newsletter_block_popup .block_content .content-inner .msg label, #newsletter_block_popup .close, .extraslider4 .product_list .product-container .right-block .lnk_view

3.4 Category Pages

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

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

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

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.

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.

3.9 Setup Logo

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.11 Edit Copyright

Frontend Appearance:

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. After finishing, you could go to the front-end to see the changes.

3.12 Edit Payment

Frontend Appearance:

4SP MEGA MENU CONFIGURATION

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.

About us
Frontend Appearance

Backend Setting : Please click Here to view.

Electronic
Frontend Appearance

Backend Setting : Please click Here to view.

Backend Setting of ‘Category Image’: Please click Here to view.

Copy and paste the following code into the code field:

<div class="images_cat"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_solo/themes/sp_solo/img/cms/image_cat1.jpg" alt="images" /> </a></div>

Backend Setting of ‘Category 1′: Please click Here to view.

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

Men
Frontend Appearance

Backend Setting : Please click Here to view.

Backend Setting of ‘box cate’: Please click Here to view.

Backend Setting of ‘categories 1′: Please click Here to view.

Note: The items named ‘Category 2′ having same menu level as item ‘Category 1′ could have same configuration

Backend Setting of ‘box html’: Please click Here to view.

Copy and paste the following code into the code field:

<div class="box-image"><a href="#"> <img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_solo/themes/sp_solo/img/cms/image_cat2.jpg" alt="images" /> </a></div>

Women
Frontend Appearance

Backend Setting : Please click Here to view.

Backend Setting of ‘Dining Submenu 1′: Please click Here to view.

Backend Setting of ‘Dining Submenu 2′: Please click Here to view.

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

Baby & Kids
Frontend Appearance

Backend Setting : Please click Here to view.

Furniture
Frontend Appearance

Backend Setting : Please click Here to view.

Book & media
Frontend Appearance

Backend Setting : Please click Here to view.

Blog
Frontend Appearance

Backend Setting : Please click Here to view.

Contact Us
Frontend Appearance

Backend Setting : Please click Here to view.

Copy and paste the following code into the URL Tab:

index.php?controller=contact

Backend Setting 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

6EXTENSIONS CONFIGURATION

6.1 SP Solo Layout 1

6.1.1 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 2: Fill information into the required field (*) as below:

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

6.1.3 displayCustomHtml1

SP Custom HTML – Custom Support
Frontend Appearance:

Backend Setting:

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="support-info">
<ul>
<li class="live-chat"><a href="#">Start <strong>live chat</strong></a></li>
<li class="phone-support"><span>Call our customer service at:</span><strong> 096-999-8386</strong></li>
</ul>
</div>

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

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

6.1.6 displayTag2

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 >> click “Configure” button to configure.

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

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

6.1.7 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

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

<div class="free-shipping">
<div class="item style-01">
<div class="thumb"><img src="../themes/sp_solo/img/cms/free-ship.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">free shipping</a></h4>
<p>Delivery world wide</p>
</div>
</div>
<div class="item style-02">
<div class="thumb"><img src="../themes/sp_solo/img/cms/money.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">money back</a></h4>
<p>While not exactly line</p>
</div>
</div>
<div class="item style-03">
<div class="thumb"><img src="../themes/sp_solo/img/cms/support.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">we support</a></h4>
<p>Online store 24/7</p>
</div>
</div>
<div class="item style-04">
<div class="thumb"><img src="../themes/sp_solo/img/cms/hotline.png" alt="images" /></div>
<div class="content">
<h4 class="title"><a href="#">hot line</a></h4>
<strong>+ 098.111.666</strong></div>
</div>
</div>

6.1.9 displayCountdownproduct

SP Countdown product slider – Deals of the day!
Frontend Appearance:

Backend Settings:

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

6.1.10 displayCategories

SP Categories – collection!
Frontend Appearance:

Backend Settings:

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

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

<div class="col-md-6 col-sm-6 col-xs-6 images"><a href="#"><img src="../themes/sp_solo/img/cms/banner01.jpg" alt="images" /></a></div>
<div class="col-md-6 col-sm-6 col-xs-6 images"><a href="#"><img src="../themes/sp_solo/img/cms/banner02.jpg" alt="images" /></a></div>

6.1.12 displayListingtab

SP Listing Tabs – Top Selling
Frontend Appearance:

Backend Settings:

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

6.1.13 displayExtraSlider4

SP Extra Slider – Top 10 Popular
Frontend Appearance:

Backend Settings:

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

6.1.14 display Customhtml3

SP Custom HTML – Banner Content Layout 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:

<div class="custom-banner-02">
<div class="row custom-row">
<div class="custom-col-left col-md-6 col-sm-6 col-xs-6">
<div class="images style-01"><a href="#"><img src="../themes/sp_solo/img/cms/banner03.jpg" alt="images" /></a></div>
<div class="images style-02"><a href="#"><img src="../themes/sp_solo/img/cms/banner04.jpg" alt="images" /></a></div>
</div>
<div class="custom-col-right col-md-6 col-sm-6 col-xs-6">
<div class="images style-03"><a href="#"><img src="../themes/sp_solo/img/cms/banner05.jpg" alt="images" /></a></div>
</div>
</div>
</div>

6.1.15 displayExtraSlider

SP Extra Slider – Hot Sale
Frontend Appearance:

Backend Settings:

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

6.1.16 displayExtraSlider6

SP Extra Slider – Viewed Products
Frontend Appearance:

Backend Settings:

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

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

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

<div class="bg_testimonia">
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_solo/themes/sp_solo/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_solo/themes/sp_solo/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_solo/themes/sp_solo/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
<div class="item">
<div class="images"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_solo/themes/sp_solo/img/cms/tes1.jpg" alt="images" /></a></div>
<div class="bg_content">
<div class="author"><a href="#">John doe</a> <span>8 Sep 2018</span></div>
<div class="des">Healthy Vending. the world's leading franchisor of socially responsible. healthy vending machine businesses.</div>
</div>
</div>
</div>

6.1.19 displayManufacture

SP Manufacture Slider – FEATURED BRANDS
Frontend Appearance:

Backend Settings:

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

6.1.20 displayFootersocial

SP Theme Configuration
Frontend Appearance:

Backend Settings:

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

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

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_solo\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, Sign up and Save!, Receive email-only deals, special offers & product exclusives

6.1.22 display Customhtml10

1. SP Custom HTML – us address
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="#">View Points and Certificates</a></li>
<li><a href="#">Learn More</a></li>
<li><a href="#">Exclusive Offers</a></li>
<li><a href="#">Sign in or Create Account</a></li>
</ul>

2. SP Custom HTML – support & 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="#">Customer Service</a></li>
<li><a href="#">Protection Plans</a></li>
<li><a href="#">Installation</a></li>
<li><a href="#">Trade-In Program</a></li>
<li><a href="#">More Support & Services</a></li>
</ul>

3. SP Custom HTML – orders & returns
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="#">Order Status</a></li>
<li><a href="#">Return & Exchange Promise</a></li>
<li><a href="#">Price Match Guarantee</a></li>
<li><a href="#">Pay With Points</a></li>
<li><a href="#">More Orders & Returns Help</a></li>
</ul>

4. SP Custom HTML – credit cards
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="#">make payment/check balance</a></li>
<li><a href="#">credit card offers</a></li>
<li><a href="#">apply now</a></li>
</ul>

6.1.23 display Customhtml11

SP Custom HTML – products tag
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="tags-container">
<ul>
<li><strong>furniture: </strong></li>
<li><a href="#">Bedsheets</a></li>
<li><a href="#">Curtains</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Storage</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Wall</a></li>
<li><a href="#">Decor</a></li>
<li><a href="#">Showpieces</a></li>
<li><a href="#">Clocks</a></li>
<li><a href="#">Towels</a></li>
<li><a href="#">Coffee</a></li>
<li><a href="#">Mugs</a></li>
<li><a href="#">Screwdrivers</a></li>
</ul>
<ul>
<li><strong>camera: </strong></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">DSLR</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Lens</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Tripod</a></li>
</ul>
<ul>
<li><strong>laptops: </strong></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Acer</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Lenovo</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Dell</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Asus</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Toshiba</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Notebook</a></li>
</ul>
<ul>
<li><strong>tvs: </strong></li>
<li><a href="#">Sony</a></li>
<li><a href="#">TV Samsung</a></li>
<li><a href="#">TV LG</a></li>
<li><a href="#">TV Panasonic</a></li>
<li><a href="#">TV Onida</a></li>
<li><a href="#">TV Toshiba</a></li>
<li><a href="#">TV Philips</a></li>
<li><a href="#">TV Micromax</a></li>
<li><a href="#">TV LED</a></li>
<li><a href="#">TV 3D</a></li>
<li><a href="#">TV Curved</a></li>
<li><a href="#">TV Smart</a></li>
</ul>
</div>

6.1.24 displayPayment

SP Theme Configuration
Frontend Appearance:

Backend Settings:

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

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

6.2 SP Solo Layout 2

6.2.1 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

6.2.2 display Customhtml9

SP Custom HTML – Layout 2 – Banner slider
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-bannerSlider">
<div class="row">
<div class="style-01 col-md-6 col-sm-6 col-xs-6"><a href="#"><img src="../themes/sp_solo/img/cms/banner06.jpg" alt="images" /></a></div>
<div class="style-02 col-md-6 col-sm-6 col-xs-6"><a href="#"><img src="../themes/sp_solo/img/cms/banner07.jpg" alt="images" /></a></div>
</div>
</div>

6.2.3 display Customhtml12

SP Custom HTML – Layout 2 – Banner right
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="col-sm-12 images"><a href="#"><img src="../themes/sp_solo/img/cms/banner08.jpg" alt="image" /></a></div>

6.2.4 displayExtraSlider8

SP Extra Slider – top10 popular
Frontend Appearance:

Backend Settings:

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

6.2.5 displayExtraSlider5

SP Extra Slider – feature products!
Frontend Appearance:

Backend Settings:

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

6.2.6 displayCowndowntproducts2

SP Cowndowntproductslider – Deals of the day!
Frontend Appearance:

Backend Settings:

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

6.2.7 displayListingtab2

SP Listingtabs – Top Selling!
Frontend Appearance:

Backend Settings:

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

6.2.8 display Customhtml13

SP Custom HTML – Layout 2 – 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="row">
<div class="images style-01 col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_solo/img/cms/banner09.jpg" alt="images" /></a></div>
<div class="images style-02 col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_solo/img/cms/banner10.jpg" alt="images" /></a></div>
</div>

6.2.9 displayExtraSlider7

SP Extra Slider – new arrivals!
Frontend Appearance:

Backend Settings:

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

6.2.10 display Customhtml14

SP Custom HTML – Layout 2 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="bg_testimonia2">
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_solo/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_solo/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
<div class="item">
<div class="thumb-left">
<div class="author"><a href="#">mr: phamtu</a> <span>Happy customer</span></div>
<a href="#"><img src="../themes/sp_solo/img/cms/tes2.jpg" alt="images" /></a></div>
<div class="content">
<div class="des">Lorem ipsum dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt but labore et, do et eiusmod tempor.dolor sit consectetur adipiscing elit, do et eiusmod tempor incididunt</div>
<div class="comment_note">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="date">08 SEP 2016</div>
</div>
</div>
</div>

6.3 SP Solo Layout 3

6.3.1 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
Sample 8: Please click Here to view
Sample 9: Please click Here to view

6.3.2 displayExtraSlider9

SP Extra Slider – extraslider index 3!
Frontend Appearance:

Backend Settings:

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

6.3.3 displaySuperCategory2

SP Super Category – mobile & tablet
Frontend Appearance:

Backend Settings:

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

6.3.4 displaySuperCategory1

SP Super Category – electronics
Frontend Appearance:

Backend Settings:

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

6.3.5 display Customhtml16

SP Custom HTML – Banner Center 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="row custom-row">
<div class="images col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_solo/img/cms/banner11.jpg" alt="images" /></a></div>
<div class="images col-md-6 col-sm-6 col-xs-12"><a href="#"><img src="../themes/sp_solo/img/cms/banner12.jpg" alt="images" /></a></div>
<div class="images col-md-12 col-sm-12 col-xs-12"><a href="#"><img src="../themes/sp_solo/img/cms/banner13.jpg" alt="images" /></a></div>
</div>

6.3.6 displayExtraSlider10

SP Extra Slider – best seller!
Frontend Appearance:

Backend Settings:

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

6.4 SP Solo Layout 4

6.4.1 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
Sample 11: Please click Here to view
Sample 12: Please click Here to view

6.4.2 displayExtraSlider11

SP Extra Slider – Extraslider index 4!
Frontend Appearance:

Backend Settings:

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

6.4.3 displayListingtab3

SP Listingtabs – Top Featured!
Frontend Appearance:

Backend Settings:

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

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

<div class="custom-banner-02">
<div class="row custom-row">
<div class="custom-col-left col-md-6 col-sm-6 col-xs-6">
<div class="images style-01"><a href="#"><img src="../themes/sp_solo/img/cms/banner14.jpg" alt="images" /></a></div>
<div class="images style-02"><a href="#"><img src="../themes/sp_solo/img/cms/banner15.jpg" alt="images" /></a></div>
</div>
<div class="custom-col-right col-md-6 col-sm-6 col-xs-6">
<div class="images style-03"><a href="#"><img src="../themes/sp_solo/img/cms/banner16.jpg" alt="images" /></a></div>
</div>
</div>
</div>

6.4.5 display Customhtml2

SP Custom HTML – Banner Bottom 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:

<div class="custom-banner-04">
<div class="custom-row">
<div class="images style-01"><a href="#"><img src="../themes/sp_solo/img/cms/banner17.jpg" alt="images" /></a></div>
<div class="images style-02"><a href="#"><img src="../themes/sp_solo/img/cms/banner18.jpg" alt="images" /></a></div>
<div class="images style-03"><a href="#"><img src="../themes/sp_solo/img/cms/banner19.jpg" alt="images" /></a></div>
</div>
</div>

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.

↧

3.1 Module Demo

3.2 Module Configuration

General settings

Source Options

Product Options

Image Options

Effect Options

Advanced Options

3.3 Page Configuration

3.1 Layout Demo

3.2 Module Configuration

General Options

Source Options

Product Options

Image Options

Effect Options

Advanced Options

3.3 Page Configuration

General Options

Source Options

Product Options

Effect Options

3.1 Layout Demo

3.2 Module Configuration

3.1 Module Demo

3.2 Module Configuration

General settings

Other Options

Effect Options

Advanced Options

2.1 Quickstart Installation:

2.2 Manual Installation

2.3 Theme Setting

3.1 Page Configuration

3.2 Configure Megamenu

3.2.1 Horizontal Megamenu:

3.2.2 Vertical Megamenu:

3.3 Configure Extensions

3.4 Configure Static Blocks

Static Block: hotline

Static Block: block-policyshop1

Static Block: banner-home11

Static Block: banner-home12

Static Block: slider-brand

Static Block: blog-block-index1

Static Block: testimonials-block-index1

Static Block: ft-my-account

Static Block: ft-information

Static Block: ft-our-services

Static Block: ft-contact-us

Static Block: ft-category-footer

Static Block: hotline2

Static Block: block-banner-index2

Static Block: blog-block-index2

Static Block: block-banner-center

Static Block: block-policyshop2

Static Block: testimonials-block-index2

3.5 How To Edit Copyright in Admin Panel

3.6 How To Customize the Social symbols in admin panel

3.1 Layout Demo

3.2 Module Configuration

General Options

Source Options

Tabs Options

Product Options

Image Options

Effect Options

Advanced Options

3.3 Page Configuration

3.4 How To Configure Product With Sale Price

3.1 Layout Demo

3.2 Module Configuration

General Options

Source Options

Product Options

Image Options

Effect Options

Advanced Options

3.3 Page Configuration

3.4 How To Configure Product With Sale Price