Getting 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 throughout this document if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.

1.2 System Requirements

Please make sure your hosting server meets the PrestaShop requirements:

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

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

1.3 PrestaShop Guide

If you are not familiar with Prestashop, please read its guide first: http://doc.prestashop.com/display/PS17/Getting+Started

Installation

There are two ways to install SP HiTheme Theme

  • Quickstart Installation: sp_hitheme_quickstart_p1.7.3.0_v1.5.0.zip By using this package, you will set the theme exactly like our Demo with sample data.
  • Manual Installation: sp_hitheme_template_p1.7.x_v1.5.0.zipInclude of Theme layout Installation Packages.

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 HiTheme theme
  • Step 2: Extract the downloaded package named “sp_hitheme_quickstart_p1.7.3.0_v1.5.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.

HiTheme Prestashop Theme

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

  • Installation Assistant (License agreements)

Please check the license agreement.

HiTheme Prestashop Theme

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

  • Checking PrestaShop Compatibility

In this step, you could check if PrestaShop was compatible with your system environment.

HiTheme Prestashop Theme

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.

HiTheme Prestashop Theme

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

  • System Configuration

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

HiTheme Prestashop Theme

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

HiTheme Prestashop Theme

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.

HiTheme Prestashop Theme

  • Finish installation: This process could take a few minutes

HiTheme Prestashop Theme

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:

HiTheme Prestashop Theme

2.2 Theme Installation

Note: Before installing theme, you must disable the cache. In your back office, please go to CONFIGURE >> Advanced Parameters >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.

HiTheme Prestashop Theme

SP HiTheme Theme Installation

Install the “sp_hitheme_template_p1.7.x_v1.5.0.zip” file.

1. Login to your Prestashop admin panel and navigate to IMPROVE >> Design >> Theme & Logo. At the top of the page click the Add a new theme button.

HiTheme Prestashop Theme

2. Navigate to “Import from your computer>> choose the zip theme file as named “sp_hitheme_template_p1.7.x_v1.5.0.zip >> Save.

HiTheme Prestashop Theme

Besides

  • You get the message file is too large
  • You're use prestashop version 1.7.0.3 or higher

With either case, you must upload theme file in the "/themes" folder.

HiTheme Prestashop Theme

- Login to your Prestashop admin panel and navigate to IMPROVE >> Design >> Theme & Logo. At the top of the page click the Add a new theme button.

HiTheme Prestashop Theme

- Navigate to “Import from FTP>> choose the zip theme file as named “sp_hitheme_template_p1.7.x_v1.5.0.zip >> Save.

HiTheme Prestashop Theme

3. When your choice is successfully validated , the new theme will be shown in the section named as Select a theme for your “[name]” shop

HiTheme Prestashop Theme

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

Important!

Sometimes your site is broken after click "Use this theme" button. If your site was broken, You can refer this command chown -R <owner>:<group> <prestashop root directory path>.
Typical examples:
chown -R apache:apache /var/www/html/prestashop/hitheme

2.3 Layout Settings

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

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

HiTheme

Management & Pages

3.1 Homepage 1

SP HiTheme Layout 1

HiTheme

How to manage HiTheme or HiTheme or HiTheme ...etc?

Please read the detail below or you could search: layout1-01 or layout1-02 or layout1-03...etc

Module name: SP Megamenu

1. Navigate to IMPROVE >> Modules >> Modules and Services go to Installed modules section and look for SP Mega Menu >> Click the Configure button to access the module configuration page.

2. In the SP Mega Menu Panel, you could 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

HiTheme

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

HiTheme

5. In order to add menu items, to add items as you want, you need to click Add New 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.

Go Here to readmore about the SP Mega Menu module.

Module name: SP Search Pro

Backend Settings:

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

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

Step 3: You could configure this module like the illustration.

That hook has 3 modules Sp Language selector block, Sp Currency block, Sp Customer "Sign in" link

- Sp Language selector block

It will be showed if your store has more than 2 languages

HiTheme

- Sp Currency block

It will be showed if your store has more than 2 currencies

HiTheme

Module name: SP Shopping Cart

Backend Settings:

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

Step 2: You could configure this module like the illustration

Module name: Sp slider for your homepage

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Step 4: In the last part named Slides List of this configuration page, click HiTheme 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

Module name: SP Manufacture Slider

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Module name: SP Banner

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Banner module.

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

Module name: SP Coundown Product

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Coundown Product module.

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

Step 3: You could configure this module like the illustration

Module name: SP Custom Html

Backend Setting:

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

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

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div class="wrap-transport clearfix">
<div class="item item-1 col-lg-4 col-md-4">
<div class="wrap">
<div class="icon"></div>
<div class="content">
<h3><a href="#">Free shipping & return</a></h3>
<p>Free shipping on all UK oders</p>
</div>
</div>
</div>
<div class="item item-3 col-lg-4 col-md-4">
<div class="wrap">
<div class="icon"></div>
<div class="content">
<h3><a href="#">Money back guarantee</a></h3>
<p>30 days money back guarantee</p>
</div>
</div>
</div>
<div class="item item-2 col-lg-4 col-md-4">
<div class="wrap">
<div class="icon"></div>
<div class="content">
<h3><a href="#">Online support 24/24</a></h3>
<p>We support online 24/24 365 day</p>
</div>
</div>
</div>
</div>

Module name: SP Listing Tabs

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Module name: SP Custom Html

Backend Setting:

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

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

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div id="sp-testimonial" class="testimonial-slider carousel slide layout1">
<div class="owl-carousel">
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Walcott"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Walcott">Walcott</a></h2>
<div class="info-client">Web Developer</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Johny Walker"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Johny Walker">Johny walker</a></h2>
<div class="info-client">CEO - Magentec</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Aidan"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Aidan">Aidan</a></h2>
<div class="info-client">Designer</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Donald Berry"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Donald Berry">Donald Berry</a></h2>
<div class="info-client">Web Developer</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
</div>
</div>

Module name: SP Extra Slider

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Module name: SP Extra Slider

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Module name: SP Extra Slider

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Module name: SP Newsletter block

Backend Settings:

You could translate it on Translations page

HiTheme

Module name: SP Theme Configuration

Backend Settings:

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

Step 2:In the SP Theme Settings, choose “Social” to configure the parameters in this section.

HiTheme

Module name: SP Theme Configuration

- Edit the logo image:

You could override in folder "../themes/sp_hitheme/assets/img/logo2.png"

- Edit the contact info(adress, email, phone):

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

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

HiTheme

- Edit Payment logo:

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

Step 2:In the SP Theme Settings, choose “General” to configure the parameters in this section.

HiTheme

Module name: SP Footer Links

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Footer Links module.

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

Step 3: You could configure this module like the illustration

Module name: SP Footer Links

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Footer Links module.

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

Step 3: You could configure this module like the illustration

Module name: SP Footer Links

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Footer Links module.

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

Step 3: You could configure this module like the illustration

Backend Settings:

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

Step 2:In the SP Theme Settings, choose “General” to configure the parameters in this section.

HiTheme

3.2 Homepage 2

SP HiTheme Layout 2

HiTheme

How to manage HiTheme or HiTheme or HiTheme ...etc?

Please read the detail below or you could search: layout2-01 or layout2-02 or layout2-03...etc

That hook has 2 modules Sp Language selector block, Sp Currency block

- Sp Language selector block

It will be showed if your store has more than 2 languages

HiTheme

- Sp Currency block

It will be showed if your store has more than 2 currencies

HiTheme

Module name: SP Theme Configuration

Backend Settings:

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

Step 2:In the SP Theme Settings, choose “Social” to configure the parameters in this section.

HiTheme

Module name: Sp Customer "Sign in" link

You could translate the text "Login / Register" on translations page

It's a custom logo so you could replace the image in: "themes/sp_hitheme/assets/img/logov2.png

Or you could edit the image link in: "themes/sp_hitheme/templates/_partials/header/header-v2.tpl - Line 22

Module name: SP Megamenu

1. Navigate to IMPROVE >> Modules >> Modules and Services go to Installed modules section and look for SP Mega Menu >> Click the Configure button to access the module configuration page.

2. In the SP Mega Menu Panel, you could 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

HiTheme

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

HiTheme

5. In order to add menu items, to add items as you want, you need to click Add New 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.

Go Here to readmore about the SP Mega Menu module.

Module name: SP Search Pro

Backend Settings:

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

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

Step 3: You could configure this module like the illustration.

Module name: SP Shopping Cart

Backend Settings:

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

Step 2: You could configure this module like the illustration

Module name: Sp slider for your homepage

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Step 4: In the last part named Slides List of this configuration page, click HiTheme 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

Module name: SP Coundown Product

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Coundown Product module.

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

Module name: SP Banner

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Banner module.

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

Module name: SP Listing Tabs

Backend Settings:

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

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

Module name: SP Custom Html

Backend Setting:

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

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

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div id="sp-testimonial" class="testimonial-slider carousel slide layout1">
<div class="owl-carousel">
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Walcott"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Walcott">Walcott</a></h2>
<div class="info-client">Web Developer</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Johny Walker"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Johny Walker">Johny walker</a></h2>
<div class="info-client">CEO - Magentec</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Aidan"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Aidan">Aidan</a></h2>
<div class="info-client">Designer</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="client-say-info">
<div class="image-client"><a href="#" title="Donald Berry"><img width="150" height="150" src="http://demo.wpthemego.com/themes/sw_hitheme/wp-content/uploads/2017/01/02-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>
<div class="name-client">
<h2><a href="#" title="Donald Berry">Donald Berry</a></h2>
<div class="info-client">Web Developer</div>
</div>
<div class="client-comment">Kate Moss. Sexy Stuart Weitzman boots. Enough said. It is a long established fact that a reader will be distracted by the readable content of a page Kate Moss. Sexy Stuart Weitzman boots. Enough said.…</div>
</div>
</div>
</div>
</div>
</div>

Module name: SP Extra Slider

Backend Settings:

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

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

The same as layout1-09

SmartBlog Home Latest

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SmartBlog Home Latest” module.

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

Destino

The same as layout1-06

The same as layout1-17

The same as layout1-17

The same as layout1-18

The same as layout1-19

The same as layout1-20

The same as layout1-15

The same as layout1-16

The same as layout1-21

3.3 Homepage 3

SP HiTheme Layout 3

HiTheme

How to manage HiTheme or HiTheme or HiTheme ...etc?

Please read the detail below or you could search: layout3-01 or layout3-02 or layout3-03...etc

Module name: Sp Customer "Sign in" link

You could translate the text "Login / Register" on translations page

Module name: SP Theme Configuration

Backend Settings:

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

Step 2:In the SP Theme Settings, choose “Social” to configure the parameters in this section.

HiTheme

That hook has 2 modules Sp Language selector block, Sp Currency block

- Sp Language selector block

It will be showed if your store has more than 2 languages

HiTheme

- Sp Currency block

It will be showed if your store has more than 2 currencies

HiTheme

It's a custom logo so you could replace the image in: "themes/sp_hitheme/assets/img/logov3.png

Or you could edit the image link in: "themes/sp_hitheme/templates/_partials/header/header-v3.tpl - Line 20

Module name: SP Megamenu

1. Navigate to IMPROVE >> Modules >> Modules and Services go to Installed modules section and look for SP Mega Menu >> Click the Configure button to access the module configuration page.

2. In the SP Mega Menu Panel, you could 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

HiTheme

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

HiTheme

5. In order to add menu items, to add items as you want, you need to click Add New 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.

Go Here to readmore about the SP Mega Menu module.

Module name: SP Search Pro

Backend Settings:

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

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

Step 3: You could configure this module like the illustration.

Module name: SP Shopping Cart

Backend Settings:

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

Step 2: You could configure this module like the illustration

Module name: Sp slider for your homepage

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

Step 4: In the last part named Slides List of this configuration page, click HiTheme 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

Module name: SP Custom Html

Backend Setting:

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

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

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div class="wrap-transport clearfix">
<div class="transport-top">
<h3>Wellcome to our store</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s</p>
</div>
<div class="item item-1 col-lg-4 col-md-4">
<div class="wrap">
<div class="icon"></div>
<div class="content">
<h3><a href="#">Free shipping & return</a></h3>
<p>Free shipping on all UK oders</p>
</div>
</div>
</div>
<div class="item item-3 col-lg-4 col-md-4">
<div class="wrap">
<div class="icon"></div>
<div class="content">
<h3><a href="#">Money back guarantee</a></h3>
<p>30 days money back guarantee</p>
</div>
</div>
</div>
<div class="item item-2 col-lg-4 col-md-4">
<div class="wrap">
<div class="icon"></div>
<div class="content">
<h3><a href="#">Online support 24/24</a></h3>
<p>We support online 24/24 365 day</p>
</div>
</div>
</div>
</div>

Module name: SP Extra Slider

Backend Settings:

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

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

Module name: SP Coundown Product

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Coundown Product module.

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

Step 3: You could configure this module like the illustration

Module name: SP Listing Tabs

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

The same as layout1-11

SmartBlog Home Latest

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SmartBlog Home Latest” module.

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

Destino

The same as layout1-06

The same as layout1-17

The same as layout1-17

The same as layout1-18

The same as layout1-19

The same as layout1-20

The same as layout1-15

The same as layout1-16

The same as layout1-21

SP Theme Configuration

3.1 General Settings

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

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

3.2 Layout Settings

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

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

3.3 Background Settings

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

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

3.4 Fonts

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

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

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

1.


body, h5.product-name, .price-box, #attributes .attribute_list select, h1.product_name

2.


.sp-megamenu .navbar-nav  li li a

3.


h1,h2,h3,h4,h5,h6

4.


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

SP Megamenu Configuration

SP Megamenu (displayMenu)

Click Here to view documentation of SP MegaMenu module.

Frontend Appearance:

1. Navigate to IMPROVE >> Modules >> Modules and Services go to Installed modules section and look for SP Mega Menu >> Click the Configure button to access the module configuration page.

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

Shopping

3. You could configure General Options then click "Save" or "Save and stay" button.

Shopping

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

5. Examples. Create megamenu as the demo.

bestshop

  • Step 1: Create menu "Promotion" level 1. Scroll down you could configure Menu Information as follows:
  • Step 2: Create Menu Item.
    - Create submenu item. In this step, you can do the same to create other items.
  • Step 4: After each step, click "Save config" button and finally go to the front-end to view.

  • Product Listing Page

    Product Listing Page

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

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

    HiTheme


    +) Product title

    Display product title on Listing Page (Show/Hide)

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    +) Show Quick view

    Display button Quickview on Listing Page (Show/Hide)

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    +) Show product price

    Display product price on Listing Page (Show/Hide)

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    +) Show product label (New/Sale)

    Display product price on Listing Page (Show/Hide)

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    Product Detail Page

    Product Detail Page

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

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

    HiTheme


    +) Thumbnails Type

    Choose type display of thumbnails block on product page.

    • Vertical Thumbnails
    • Horizontal Thumbnails

    Backend Settings:

    HiTheme

    Frontend Appearance:

    -Horizontal Thumbnails

    HiTheme

    +) Display thumbnails

    Number of thumbnails be displayed.

    Backend Settings:

    HiTheme

    +) Display Product SKU

    Show/Hide Product SKU.

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    +) Display Product Attribute

    Show/Hide Product Attribute.

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    +) Display Product Availability

    Show/Hide Product Availability.

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    +) Share buttons

    Show/Hide Share buttons.

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    +) Short Product Description

    Show/Hide Short Product Description.

    Backend Settings:

    HiTheme

    Frontend Appearance:

    HiTheme

    Blog Page

    Blog Page

    Backend Settings:

    Step 1:

    • Install the "smartblog.zip" file.
    • Install the "smartblogcategories.zip" file.
    • Install the "smartbloghomelatestnews.zip" file.

    Step 2: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules

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

    - Smart Blog

    HiTheme

    - SmartBlog Home Latest

    HiTheme

    Please read more guide for Smartblog at here. SmartBlog Module

    Contact Page

    Contact Page

    HiTheme

    Store information

    In the Prestashop Admin Panel, navigate to Shop Parameters >> Contact >> Tabs Stores >> Contact Details

    HiTheme

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

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

    HiTheme

    - Frontend Appearance:

    HiTheme

    About us Page

    About us Page

    Frontend Appearance:

    HiTheme

    Backend Setting:

    Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Design >> Pages

    Step 2: In the “Pages” configuration page, click HiTheme button in the right corner to “ADD NEW”.

    Step 3: You could add new cms page like the illustration

    Copy and paste the following code into the content:

    
    <div class="sp-aboutus">
    <div class="aboutus-image"><img src="/ytc_templates/prestashop/sp_hitheme/themes/sp_hitheme/assets/img/aboutus.jpg" alt="aboutus.jpg" /></div>
    <div class="aboutus-content">
    <div class="aboutus-title">About Us</div>
    <div class="aboutus-text">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</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. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    </div>
    </div>
    
    

    Languages

    Management Languages


    1. Add new Language

    Step 1:

    - In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations

    HiTheme

    Step 2:

    - At here, Scroll to block "ADD / UPDATE A LANGUAGE"

    - Then, Select the language you want to add new, and click button "Add or update a language"

    HiTheme


    2. Export Language

    Step 1:

    - In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

    Step 2:

    - At here, Scroll to block "Export a Language"

    - Then, Select Language and Your theme that you want Export, and click button "Export"

    HiTheme


    3. Import Language

    Step 1:

    - In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

    Step 2:

    - At here, Scroll to block "Import a language pack manually"

    - Then, click button "Add file" and choose file language and select your theme, and click button "Import"

    HiTheme


    4. Management Language

    Step 1:

    - In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Localization, and choose tab "Languages"

    - You can edit or delete language on your store

    HiTheme

    Step 2:

    - If you want change language, click button "Edit".

    HiTheme

    Currencies

    Management Currencies

    Step 1:

    - In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Localization, and choose tab "Currencies"

    HiTheme

    Step 2:

    - In the "Currencies" configuration page, click button HiTheme in the right corner to “ADD NEW”.

    Step 3:

    You could configure this module like the illustration

    Translation

    Management Translation


    1. Translations Theme

    Step 1:

    - In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

    Step 2:

    - In the "Translations" configuration page, scroll to block "MODIFY TRANSLATIONS"

    - In the block "MODIFY TRANSLATIONS".

    1. Choose "Type of translation" is "Theme translations"
    2. Choose "Select your theme" is your theme you want translated.
    3. Select your language you want translated

    - Then click button "Modify"

    HiTheme

    HiTheme

    - Here, you can translate the text in the theme.

    HiTheme


    2. Translations Modules

    Step 1:

    - In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

    Step 2:

    - In the "Translations" configuration page, scroll to block "MODIFY TRANSLATIONS"

    - In the block "MODIFY TRANSLATIONS".

    1. Choose "Type of translation" is "Installed modules translations"
    2. Choose "Select your module" is your module you want translated.
    3. Select your language you want translated

    - Then click button "Modify"

    HiTheme

    - Here, you can translate the text in the module.

    HiTheme

    Custom Codes

    Custom Codes

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

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

    - You can input css or javascript.

    Examples code css

    
    body{
    	background-color: red;
    }
    
    

    Examples code Javascript

    
    alert('This is demo javascript');
    
    

    Customize CSS

    Customize CSS

    - In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

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


    1. SCSS Compile

    - Active: The system will automatically compile into CSS from SCSS when you refresh the website

    Note: System will change css file theme-...css. Ex: theme-ff0000.css

    Do not edit css file when active SCSS Compile


    2. CSS Format

    Css formatting after compile from sass.

    • scss_formatter: Css Normal
    • scss_formatter_nested: Css Nested
    • scss_formatter_compressed: Css Compressed

    Edit file CSS

    There are two instances to edit css file via ftp.

    • SCSS Compile: Disable
    • SCSS Compile: Enable

    1. SCSS Compile: Disable

    - You can edit css file of modules.

    Example: "../themes/sp_hitheme/modules/spcustomhtml/views/css/style.css"

    - You can edit css file of theme.

    Example:

    +) "../themes/sp_hitheme/assets/css/theme-0083c1.css"

    +) "../themes/sp_hitheme/assets/css/theme.css"

    2. SCSS Compile: Enable

    - You can edit css file of modules. (Sample as Disable)

    Note: The system will generate css file "theme-0083c1.css, theme-{color code}.css"

    Your changes to this file will be lost

    - You must edit file "*.scss" in the folder "_dev/css"

    Example: "../themes/sp_hitheme/_dev/css/themestyles/_content.scss"

    Update Prestashop

    Updating PrestaShop

    - New versions of PrestaShop come every few months, sometimes even weeks apart. Some are major, most are minor, but they all bring a slew of innovations, improvements and bug fixes. It is therefore highly advised to keep up with the latest version.

    - There are two ways to upgrade PrestaShop:

    Note: Update Version Prestashop Document

    Changelog

    Changelog

    Click here to view changelog.