SP Supershop | MagenTech Documentation Area

displayBanner Position

SP Countdown Timer: Top Deal

Frontend Appearance:

Backend Settings:

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

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

displayTop1 Position

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:

displayUserInfo Position

SP User Info

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 Position

1. SP Language

Frontend Appearance:

Backend Settings:

Step 1: To add language as you want. For example: To add “Arabic” language, in your Admin Panel >> navigate to LOCALIZATION >> Languages >> click button in the right corner to “ADD NEW”.

Step 2: Fill information into the required field (*) as below:

Step 3: Click “Save” button and view shop to see the changes.

Note: When you add any language as you want, for example: Arabic language as above. At the frontend , some images will display “?” image as following:

.

To resolve this error, please make the steps following:

1. In your administator, please find to position of this module, for example: Position - displayTop2 (Custom ADV Banner); Module: SP Custom HTML.

.

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

.

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

.

2. SP Currency Block

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.

displaySearch Position

SP Search Pro

Frontend Appearance:

Backend Settings:

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

displayCart Position

SP Cart block

Frontend Appearance:

Backend Settings:

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

displaySlidershow1 Position

SP Home Slider

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:

Copy and paste the following code into the content:

<h2><a href="#"><strong>Modern</strong> sofa</a></h2> <ul> <li class="one"><a href="#">Top 10 Item Best Sales</a></li> <li class="two"><a href="#">Best Quality</a></li> <li class="three"><a href="#">Over 1200 Happy Customer</a></li> </ul> <div class="shopnow"><a href="#">Shop Now</a></div>

1 2 3 4 5 6 7

<h2><a href="#"><strong>Modern</strong> sofa 2015</a></h2> <ul> <li class="one"><a href="#">Top 10 Item Best Sales</a></li> <li class="two"><a href="#">Best Quality</a></li> <li class="three"><a href="#">Over 1200 Happy Customer</a></li> </ul> <div class="shopnow"><a href="#">Shop Now</a></div>

• Sample 2:

Copy and paste the following code into the content:

<h2><a href="#"><strong>office</strong> chair</a></h2> <ul class="slider-second"> <li class="one"><a href="#">Top 10 Item Best Sales</a></li> <li class="two"><a href="#">Best Quality</a></li> <li class="three"><a href="#">Over 1200 Happy Customer</a></li> </ul>

1 2 3 4 5 6

<h2><a href="#"><strong>office</strong> chair 2015</a></h2> <ul class="slider-second"> <li class="one"><a href="#">Top 10 Item Best Sales</a></li> <li class="two"><a href="#">Best Quality</a></li> <li class="three"><a href="#">Over 1200 Happy Customer</a></li> </ul>

• Sample 3:

Copy and paste the following code into the content:

<h2><a href="#"><strong>Furniture</strong> living room</a></h2> <ul class="slider-three"> <li class="one"><a href="#">Top 10 Item Best Sales</a></li> <li class="two"><a href="#">Best Quality</a></li> <li class="three"><a href="#">Over 1200 Happy Customer</a></li> </ul>

1 2 3 4 5 6

<h2><a href="#"><strong>Furniture</strong> living room</a></h2> <ul class="slider-three"> <li class="one"><a href="#">Top 10 Item Best Sales</a></li> <li class="two"><a href="#">Best Quality</a></li> <li class="three"><a href="#">Over 1200 Happy Customer</a></li> </ul>

displayBottom1 Position

1. 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 & Paste the code into your editor:

2. SP Slider: Best Sellers

Frontend Appearance:

Backend Settings:

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

3. SP Super Category: Sp Super Category Bottom1

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.

displayBottom2 Position

SP Custom HTML: Center Image

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 & Paste the code into your editor:

displayBottom3 Position

3. SP Super Category: Sp Super Category Bottom3

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.

displayBottom4 Position

SP Countdown Slider: Group 1

Frontend Appearance:

Backend Settings:

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

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

• Slide 1:

Copy and paste the following code into the content:

<h2>Living Room Sale 50% Off</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<br /> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="shopnow"><a href="#">Shop Now</a></div>

1 2 3

<h2>Living Room Sale 50% Off</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<br /> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="shopnow"><a href="#">Shop Now</a></div>

• Slide 2:

Copy and paste the following code into the content:

<h2>Living Room Sale 50% Off</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<br /> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="shopnow"><a href="#">Shop Now</a></div>

1 2 3

<h2>Living Room Sale 50% Off</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<br /> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="shopnow"><a href="#">Shop Now</a></div>

• Slide 3:

Copy and paste the following code into the content:

1

displayBottom5 Position

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 “SP SmartBlog Home Lastest” module.

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

displayBottom6 Position

SP Custom HTML: Count

Frontend Appearance:

Backend Settings:

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

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

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

Copy & Paste the code into your editor:

displayBottom7 Position

Frontend Appearance:

Backend Settings:

To edit Copyright, please follow these steps:

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

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

displayBottom8 Position

SP Manufacture Slider:

Frontend Appearance: Shop Brands

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.

displayFooter2 Position

SP Custom HTML: Logo bottom

Frontend Appearance:

Backend Settings:

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

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

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

Copy & Paste the code into your editor:

displayFooterSocial Position

SP Theme Configuration

Frontend Appearance:

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

2. In the 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.

displayFooter Position

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 & Paste the code into your editor:

displayFooter3 Position

SP Custom HTML: Link

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 & Paste the code into your editor:

copyright Position

SP Theme Configuration

Frontend Appearance:

Backend Settings:
Go Here to see the backend settings.

displayFooterPayment Position

SP Theme Configuration

Frontend Appearance:

Backend Settings:
Go Here to see the backend settings.

displaySlidershow2 Position

SP Home Slider

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:
• Sample 5:

displayBottom Position

SP Custom HTML: Banner Top 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 & Paste the code into your editor:

displaySlider Position

SP Slider: Best Sellers

Frontend Appearance:

Backend Settings:

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

displayNewsLetter Position

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 this module like the following image.

displaybloghome Position

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 “SP SmartBlog Home Lastest” module.

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

displaySuper Position

SP Super Category: Sp Super Category Slider

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.

displayTwitter Position

SP Twitter Slider

Frontend Appearance:

Backend Settings:

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

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

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

displayBottom16 Position

SP Custom HTML: Banner Midder

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 & Paste the code into your editor:

displayBottom15 Position

SP Custom HTML: Image Left Column

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 & Paste the code into your editor:

displaySuper2 Position

SP Super Category: Sp Super Category Slider 2

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.

displayBottom13 Position

SP Custom HTML: Gallery

Frontend Appearance:

Backend Settings:

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

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

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

Copy & Paste the code into your editor:

displayBottom11 Position

SP Custom HTML: Center Image 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 & Paste the code into your editor:

displayBottom14 Position

SP Custom HTML: Clients say

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 & Paste the code into your editor:

displayDeal Position

SP Deal: Daily Deal

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super 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.