SP Topshop

1GETTING STARTED

1.1 Introduction

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

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

1.2 System Requirements

Please make sure your hosting server meets the PrestaShop requirements:

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

Note: If you can not import the theme/module file to your server due to the maximum upload and PHP memory limit, you need to increase the parameter “memory_limit=200M”; “max_execution_time=300″; “max_execution_time=1000″ & “upload_max_filesize=20M” in the file php.ini.

1.3 PrestaShop Guide

If you are not familiar with Prestashop, please read its guide first

2INSTALLATION

There are two ways to install SP Topshop Theme

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

2.1 Quickstart Installation

We provide Quickstart package for each theme which aims to ease the installation for users. It will help you save much time of installing and configuring if you plan to start your site from the beginning. Please following steps below:

  • Step 1: Download the quickstart package of SP Topshop theme
  • Step 2: Extract the downloaded package named “sp_topshop_quickstart_p16_v2.0.0.zip” in your localhost (or your hosting) folder. In Quickstart folder you will see the extracted folder that include all sample data
  • Step 3: Start installation by opening browser and navigate to your URL (where the Quickstart uploaded) to load default Prestashop installer. Please follow these steps of the Installer so that the installation process can be set.
    • Installation Assistant (Choose your language)

Please select the installation language

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

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

    • Installation Assistant (License agreements)

Please check the license agreement.

License Agreements

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

    • System Compatibility

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

System Compatibility

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

    • Store Information

Now add required information for your store: Shop name, Main activity, Country, Shop timezone and add the account info: first name, last name, email and password. Click “Next” to next step.

Store Information

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

    • System Configuration

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

System Configuration

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

Create Database

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.

System Configuration2

    • Finish installation: This process could take a few minutes

Finish Installation

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:

Finish

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

Disable Cache

SP Topshop Layout1 Theme Installation

Note: Here we will introduce you How To Install SP Topshop Layout 1 Theme

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

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

STEP 1: Install smartblog.zip , smartblogarchive.zip , smartblogcategories.zip , smartbloghomelatestnews.zip , smartblogrecentposts.zip , smartblogtag.zip Module.

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

Add New Module

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

Upload Smartblog

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

Module Success Upload

4. Please find to the uploaded module and click “Install” button to run it.

Install Smart Blog

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

Process Installation

6. Finally, Module(s) installed successfully.

Note: Do the same with the others.

STEP 2: Install the “sp_topshop_template_p16_v2.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.
Add Newtheme Button

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

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

Successfully Temp Uploaded
4. In the section named as Select a theme for your “[name]” shop, move your mouse cursor over SP Topshop‘s thumbnail and select Use this themeto replace your current theme with SP Topshop theme.
Use This 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.
Select Modules Of Thetheme

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

Finish Install Theme

3SP THEME CONFIGURATION

3.1 General Settings

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

Sp Theme

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.

Theme General

3.2 Layout Settings

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

Sp Theme

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.

Theme Layout

3.3 Fonts

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

Sp Theme

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.

Theme Fonts

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

2.

3.4 Category Pages

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

Sp Theme

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.

Theme Cat Pages

3.5 Product Pages

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

Sp Theme

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.

Theme Product Pages

3.6 Bonus Pages

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

Sp Theme

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.

Theme Bonus

3.7 Advanced Settings

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

Sp Theme

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.

Theme Advanced

3.8 Social Accounts

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

Sp Theme

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.

Theme Social

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

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.

Image Size

2. Image quality - You can set image quality in use on your site.

Image Quality

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.

Regenerate Thumbnail

Frontend Appearance:

Copyright Frontend

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

Sp Theme

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.
Copyright Backend

3.12 Edit Payment

Frontend Appearance:

Payment Frontend

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.

Sp Theme

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.

Payment Backend

3.13 Edit Pop-up

Frontend Appearance:

Popup Frontend

To edit this pop-up, please follow these steps:
1. Change the image:
In your Website’s Directory, go to themes\sp_topshop\img\icon folder. To change the image in this pop-up, you could replace our sample image named bg_popup2.jpg by your image with the same name as our sample image.
Popup Image
2. Change the text:
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this pop-up, in this folder, you could open the file named spblocknewsletterpopup2.tpl by your editor program.
Find and change the following text in this file as you want:

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

4SP MEGA MENU CONFIGURATION

displayMenu: SP Mega Menu

Sp Megamenu Frontend
1. Navigate to Modules -> Modules >> look for SP Mega Menu >> Click the Configure button to access the module configuration page.
Sp Megamenu
2. In the SP Mega Menu Panel, you could configure Add New Module by click on the button like the following image:
Add New Module
3. In the configuration page of new module, you could configure General Options as follows
Menu General
4. In the configuration page of new module, you could configure Menu Information as follows
Menu Info
5. In order to add menu items, to add items as you want, you need to click this button.
Add New Button
6. Menu list of Mega Menu You need to look at the menu list to configure easily.
Menu List
7. To configure each item, you need to click “Edit” button as follows:
Configure Item
Go Here to readmore about the SP Mega Menu module.

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

Shop
Frontend Appearance Shop Frontend

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

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

Women
Frontend Appearance Women Frontend

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

Blog
Frontend Appearance Blog Frontend

  • Backend Settings : Please click Here to view.

Copy and paste the following code into the URL Tab:

About
Frontend Appearance About Frontend

  • Backend Settings : Please click Here to view.

Contact Us
Frontend Appearance Contact Us Frontend

  • Backend Settings : Please click Here to view.
  • Copy and paste the following code into the URL Tab:

  • Backend Settings of Item ‘Contact Page 1′ : Please click Here to view.
  • Copy and paste the following code into the URL Tab:

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:
  • Copy and paste the following code into the URL Tab of Contact Page 3:
  • Copy and paste the following code into the URL Tab of Contact Page 4:

5EXTENSIONS CONFIGURATION

6.1 SP Topshop Layout 1

home-default

SP Search Block

Frontend Appearance:

Search Frontend

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.

Sp Search

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

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

Search Backend

displayCart

SP Cart Block

Frontend Appearance:

Cart Frontend

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.

Sp Cart

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

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

displayUserinfo

SP User Info Block

Frontend Appearance:

Userinfo Frontend

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.

Userinfo Backend

displayTopNav

1. SP Block Currencies

Frontend Appearance:

Currency Frontend

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.

Sp Currency

2. SP Block Languages

Frontend Appearance:

Language Frontend

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 Plus button in the right corner to “ADD NEW”.

Add New Language

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

Inf Arabic

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:

Question Image.

To resolve this error, please make the steps following:

1. In your administator, please find to position of this module, for example: Position - displayHtml35: banner slider layout6; Module: SP Custom HTML.

.

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

Source Code.

3. Click “Save” button and go to the frontend to view the changes.
Banner Slider Layout6 Frontend

displaySlideShow6

Sp slider for your homepage

Frontend Appearance:

Sp Home Layout6 Frontend

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.

Sp Home Slider

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

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

Sp Home Layout6 Backend

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

  • Sample 13: Please click Here to view
  • Sample 14: Please click Here to view

display CustomHTML35

SP Custom HTML - banner slider layout6
Frontend Appearance:

Banner Slider Layout6 Frontend

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.

Sp Custom

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

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

Banner Slider Layout6 Backend
Copy and paste the following code into the content:

display CustomHTML36

SP Custom HTML - Weve confident
Frontend Appearance:

Weve Confident Frontend

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.

Sp Custom

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

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

Weve Confident Backend
Copy and paste the following code into the content:

displayListingtab

SP Listing Tabs
Frontend Appearance:

Sp Listing Frontend

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
Sp Listing
Step 2: In the “SP Listing Tabs” configuration page, click Button Plus button in the right corner to “ADD NEW MODULE”.

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

Sp Listing Backend

display CustomHTML37

SP Custom HTML - Banner Left layout6
Frontend Appearance:

Banner Left Layout6 Frontend

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.

Sp Custom

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

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

Banner Left Layout6 Backend
Copy and paste the following code into the content:

displayInstagram

SP Instagram Gallery
Frontend Appearance:

Instagram Frontend

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Instagram Gallery” module.
Sp Instagram
Step 2: In the “SP Instagram Gallery” configuration page, click Button Plus button in the right corner to “ADD NEW MODULE”.

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

Instagram Backend

display CustomHTML38

SP Custom HTML - Banner center layout6
Frontend Appearance:

Banner Center Layout6 Frontend

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.

Sp Custom

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

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

Banner Center Layout6 Backend
Copy and paste the following code into the content:

displayListingtab2

SP Listing Tabs
Frontend Appearance:

Sp Listing2 Frontend

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Listing Tabs” module.
Sp Listing
Step 2: In the “SP Listing Tabs” configuration page, click Button Plus button in the right corner to “ADD NEW MODULE”.

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

Sp Listing2 Backend

display CustomHTML39

SP Custom HTML - Banner bottom layout6
Frontend Appearance:

Banner Bottom Layout6 Frontend

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.

Sp Custom

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

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

Banner Bottom Layout6 Backend
Copy and paste the following code into the content:

displayExtraSlider4

SP Extra Slider - Hot Sale
Frontend Appearance:

Extra4 Frontend

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
Sp Extra Slider
Step 2: In the “SP Extra Slider” configuration page, click Button Plus button in the right corner to “ADD NEW MODULE”.

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

Extra4 Backend

displayExtraSlider5

SP Extra Slider - Recent
Frontend Appearance:

Extra5 Frontend

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Extra Slider” module.
Sp Extra Slider
Step 2: In the “SP Extra Slider” configuration page, click Button Plus button in the right corner to “ADD NEW MODULE”.

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

Extra5 Backend

displayDeal3

SP Deal - hot deals
Frontend Appearance:

Deal3 Frontend
Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Deal” module.
Sp Deal
Step 2: In the “SP Deal” configuration page, click Button Plus button in the right corner to “ADD NEW MODULE”.

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

Deal3 Backend

displayHomeNews4

SP SmartBlog Home Lastest
Frontend Appearance:

Smartblog4 Frontend

Backend Settings:

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

Smartblog

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

Smartblog4 Backend

displayManufacturer3

SP Manufacture Slider - Our Brands layout6
Frontend Appearance:

Manufacturers3 Frontend

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Manufacture Slider” module.
Sp Manufacture
Step 2: In the “SP Deal” configuration page, click Button Plus button in the right corner to “ADD NEW MODULE”.

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

Manufacturers3 Backend

display CustomHTML40

SP Custom HTML - Logo bottom l6
Frontend Appearance:

Logo Bottom Layout6 Frontend

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.

Sp Custom

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

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

Logo Bottom Layout6 Backend
Copy and paste the following code into the content:

Contact Information Block
Frontend Appearance:

Contact Info Frontend

Backend Settings:

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

Contact Info

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

Contact Info Backend

display CustomHTML41

SP Custom HTML - MY ACCOUNT
Frontend Appearance:

My Account Frontend

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.

Sp Custom

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

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

My Account Backend
Copy and paste the following code into the content:

display CustomHTML42

SP Custom HTML - OUR SERVICES
Frontend Appearance:

Our Services Frontend

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.

Sp Custom

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

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

Our Services Backend
Copy and paste the following code into the content:

display CustomHTML43

SP Custom HTML - SUPPORT
Frontend Appearance:

Support Frontend

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.

Sp Custom

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

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

Support Backend
Copy and paste the following code into the content:

SP Theme Configuration

Frontend Appearance:

Social Frontend

Backend Settings: Go Here to see the backend settings.

displayNewsletter

SP Newsletter Block
Frontend Appearance:

Sp Newsletter3 Frontend

Backend Settings:

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

Sp Newsletter

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

Sp Newsletter3 Backend
To edit the text in this module, please follow these steps:
In your Website’s Directory, go to themes\sp_topshop\modules\spblocknewsletter folder. To change the text in this module, in this folder, you could open the file named blocknewsletter3.tpl by your editor program.

You could find and change the text you want to edit, such as: Subscribe to receive inspiration, ideas and news in your inbox.
Sp Newsletter3 Code

6 SUPPORT

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