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/PS16/Getting+Started

Installation

There are two ways to install SP Top Deals Theme

Quickstart Installation: sp_topdeals_quickstart_p1.7.3.0_v1.5.0 By using this package, you will set the theme exactly like our Demo with sample data.
Manual Installation: Include of Theme layout Installation Packages. Please unzip the package "sp_topdeals_template_package" and you would see the following folders:
- modules folder
- sp_topdeals_template_p1.7.x_v1.5.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 Top Deals theme
Step 2: Extract the downloaded package named “sp_topdeals_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.

Top Deals Prestashop Theme

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

Installation Assistant (License agreements)

Please check the license agreement.

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

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

Top Deals Prestashop Theme

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

System Configuration

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

Top Deals Prestashop Theme

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

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

Top Deals Prestashop Theme

Finish installation: This process could take a few minutes

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

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

SP Top Deals Theme Installation

Install the “sp_topdeals_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.

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

Top Deals Prestashop Theme

Besides

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

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

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

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

Top Deals 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

Top Deals Prestashop Theme

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

Top Deals Prestashop Theme

Note: After click button, your site may be broken. If your site was broken, please run this command: chown -R apache:apache prestashop root directory path (usting PUTY software)
Example: Run this command chown -R apache:apache sp_topdeal

4. Click "Save" button and go to front-end to view your website.

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.

Top Deals

Management & Pages

3.1 Homepage 1

SP Top Deals Layout 1

Top Deals

Newsletter Popup

Frontend Appearance:

Backend Settings:

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

Step 2: You could configure its settings like the illustration. You can Enable/Disable button "Enable Newsletter Popup" to Show/Hide popup.

Background image: You could override in folder "../themes/sp_topdeals/assets/img/bg_popup.jpg"

displayTopNav

a. SP Block Currencies

Frontend Appearance:

Backend Settings:

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

b. SP Languages Selector Block

Frontend Appearance:

Backend Settings:

In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Languages Selector Block >> click “Enable” button to enable this module.

displayUserinfo

SP User Info Block

Frontend Appearance:

Backend Settings:

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

displaySearch

SP Search Block

Frontend Appearance:

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

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

displayCart

SP Shopping Cart

Frontend Appearance:

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

displayCustomHtml1

SP Custom HTML – Coupon Code

Frontend Appearance:

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 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="coupon-code">
<p class="phone">[ SPECIAL DEAL ] Sale Off 75% All iPhone 4 In All Store - Coupon Code NY2017</p>
</div>

displayCustomHtml2

SP Custom HTML – Contact Html

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="contact-html clearfix"><span class="email">Marketing@topdeal.com</span> <span class="add">Manhattan St, Amarillo, US</span></div>

displayCustomHtml3

SP Custom HTML – Call Us

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="call-us hidden-sm-down">
<div class="icon"></div>
<div class="text">
<p class="text">Free Call Us</p>
<p class="phone">(+123) 456 7890</p>
</div>
</div>

displaySlideShow1

Sp slider for your homepage

Frontend Appearance:

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

custom-link-deal

Smarty code – custom-link-deal

Frontend Appearance:

How to edit:

Step 1: Please open the .tpl file:"root/themes/sp_topdeals/templates/_partials/header/header-v1.tpl"

Step 2: At line 58 you could see: <a class="view-deal" href="../prices-drop" title="{l s='Today Deals'}">{l s='Today Deals'}</a>

Step 3: Replace {l s='Today Deals'} by your content. Replace ../prices-drop by your link

displayDeal

SP Deal - Flash Deal

Frontend Appearance:

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

displayBanner

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayBanner2

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayBanner3

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayCustomHtml4

SP Custom HTML – Hashtags

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="hashtags clearfix">
<h3 class="title_block">Hashtags</h3>
<ul class="clearfix">
<li class="item col-md-2 col-sm-4 col-xs-4">
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/tag-1.jpg" alt="#" /></a></div>
<div class="item-content">
<h4><a href="#">#Menfashion</a></h4>
</div>
</li>
<li class="item col-md-2 col-sm-4 col-xs-4">
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/tag-2.jpg" alt="#" /></a></div>
<div class="item-content">
<h4><a href="#">#Macbook</a></h4>
</div>
</li>
<li class="item col-md-2 col-sm-4 col-xs-4">
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/tag-3.jpg" alt="#" /></a></div>
<div class="item-content">
<h4><a href="#">#Kiddresses</a></h4>
</div>
</li>
<li class="item col-md-2 hidden-sm-down">
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/tag-4.jpg" alt="#" /></a></div>
<div class="item-content">
<h4><a href="#">#Cosmetics</a></h4>
</div>
</li>
<li class="item col-sm-2 hidden-sm-down">
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/tag-5.jpg" alt="#" /></a></div>
<div class="item-content">
<h4><a href="#">#Shoes</a></h4>
</div>
</li>
<li class="item col-sm-2 hidden-sm-down">
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/tag-6.jpg" alt="#" /></a></div>
<div class="item-content">
<h4><a href="#">#Women Fahion</a></h4>
</div>
</li>
</ul>
<div class="more"><a href="#"> View All </a></div>
</div>

displayCountdownProduct

SP Coundown Product – Weekly Deal

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayBanner4

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayExtraSlider

SP Extra Slider – Special Items

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayCustomHtml5

SP Custom HTML – Trending Search

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="trending clearfix">
<div class="text col-md-2 col-sm-3 col-xs-4">
<h3 class="title-block"><span>Trending</span> Search</h3>
</div>
<div class="item col-md-10 col-sm-9 col-xs-8 clearfix">
<ul class="out-content owl-carousel">
<li class="item item-1">
<div class="item-content">
<h4><a href="#">Men Fahion</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-1.jpg" alt="#" /></a></div>
</li>
<li class="item item-2">
<div class="item-content">
<h4><a href="#">Iphone 6</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-2.jpg" alt="#" /></a></div>
</li>
<li class="item item-3">
<div class="item-content">
<h4><a href="#">Women Shoes</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-3.jpg" alt="#" /></a></div>
</li>
<li class="item item-4">
<div class="item-content">
<h4><a href="#">Kid Dress</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-4.jpg" alt="#" /></a></div>
</li>
<li class="item item-4">
<div class="item-content">
<h4><a href="#">Jean</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-5.jpg" alt="#" /></a></div>
</li>
<li class="item item-4">
<div class="item-content">
<h4><a href="#">Watches</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-6.jpg" alt="#" /></a></div>
</li>
</ul>
</div>
</div>

displayBanner5

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayExtraSlider2

SP Extra Slider – Ending Soon

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayMostview

SP Most Viewed Products Slider – Most Viewed

Frontend Appearance:

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

displayBanner6

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayBanner7

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayBanner8

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayBanner10

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayBanner11

SP Banner

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayDeal2

SP Deal - Recommend

Frontend Appearance:

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

displayManufactureSlider

SP Manufacture Slider – Featured Brands

Frontend Appearance:

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

displayListingtab

SP Listing Tabs - Best seller

Frontend Appearance:

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

Step 3: You could configure this module like the illustration

displayCustomHtml6

SP Custom HTML – Bonus Menu

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="trending clearfix">
<div class="text col-md-2 col-sm-3 col-xs-4">
<h3 class="title-block"><span>Trending</span> Search</h3>
</div>
<div class="item col-md-10 col-sm-9 col-xs-8 clearfix">
<ul class="out-content owl-carousel">
<li class="item item-1">
<div class="item-content">
<h4><a href="#">Men Fahion</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-1.jpg" alt="#" /></a></div>
</li>
<li class="item item-2">
<div class="item-content">
<h4><a href="#">Iphone 6</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-2.jpg" alt="#" /></a></div>
</li>
<li class="item item-3">
<div class="item-content">
<h4><a href="#">Women Shoes</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-3.jpg" alt="#" /></a></div>
</li>
<li class="item item-4">
<div class="item-content">
<h4><a href="#">Kid Dress</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-4.jpg" alt="#" /></a></div>
</li>
<li class="item item-4">
<div class="item-content">
<h4><a href="#">Jean</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-5.jpg" alt="#" /></a></div>
</li>
<li class="item item-4">
<div class="item-content">
<h4><a href="#">Watches</a></h4>
</div>
<div class="item-image"><a href="#"><img src="../themes/sp_topdeals/assets/img/cms/home-image-1-6.jpg" alt="#" /></a></div>
</li>
</ul>
</div>
</div>

displayFooterContact

Store information

Frontend Appearance:

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 “Contact Info” to configure the parameters in this section.

displayFooterLinks

SP Footer Links – Information

Frontend Appearance:

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

displayFooterLinks2

SP Footer Links – My Account

Frontend Appearance:

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

displayHomeNews

SmartBlog Home Latest

Frontend Appearance:

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.

displayCustomHtml7

SP Custom HTML – Bonus Menu

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div><a class="app-1" href="#">google store</a> <a class="app-2" href="#">apple store</a> <a class="app-3" href="#">window store</a></div>

displayFooterSocial

SOCIAL ACCOUNTS

Frontend Appearance:

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.

displayCustomHtml8

SP Custom HTML – Bonus Menu

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="footer-toplinks">
<div class="links"><label>Mobiles:</label>
<ul>
<li><a href="#">HTC Mobiles</a></li>
<li><a href="#">iPhones</a></li>
<li><a href="#">Gionee Mobiles</a></li>
<li><a href="#">LG Mobiles</a></li>
<li><a href="#">Karbonn Mobiles</a></li>
<li><a href="#">Vivo Mobiles</a></li>
<li><a href="#">Intex Mobiles</a></li>
<li><a href="#">Micromax Mobiles</a></li>
<li><a href="#">Asus Mobiles</a></li>
<li><a href="#">Samsung Mobiles</a></li>
<li><a href="#">Lenovo Mobiles</a></li>
</ul>
</div>
<div class="links"><label>Tablets:</label>
<ul>
<li><a href="#">Apple iPads</a></li>
<li><a href="#">Samsung Tablets</a></li>
<li><a href="#">Windows Tablets</a></li>
<li><a href="#">Calling Tablets</a></li>
<li><a href="#">Micromax Tablets</a></li>
<li><a href="#">Lenovo Tablets</a></li>
<li><a href="#">Asus Tablets</a></li>
<li><a href="#">iBall Tablets</a></li>
<li><a href="#">Swipe Tablets</a></li>
</ul>
</div>
<div class="links"><label>TVs, Audio & Video:</label>
<ul>
<li><a href="#">Televisions</a></li>
<li><a href="#">LED TVs</a></li>
<li><a href="#">Smart Televisions</a></li>
<li><a href="#">Speakers</a></li>
<li><a href="#">Headphones</a></li>
<li><a href="#">Earphones</a></li>
<li><a href="#">Samsung Televisions</a></li>
<li><a href="#">Micromax Televisions</a></li>
<li><a href="#">LG Televisions</a></li>
</ul>
</div>
<div class="links"><label>Mobiles Accessories:</label>
<ul>
<li><a href="#">Mobile Covers</a></li>
<li><a href="#">Power Banks</a></li>
<li><a href="#">Samsung Power Banks</a></li>
<li><a href="#">Ambrane Power Banks</a></li>
<li><a href="#">Intex Power Banks</a></li>
<li><a href="#">Sony Power Banks</a></li>
<li><a href="#">Lenovo Power Banks</a></li>
<li><a href="#">PNY Power Banks</a></li>
</ul>
</div>
<div class="links"><label>Computers:</label>
<ul>
<li><a href="#">Lenovo Laptops</a></li>
<li><a href="#">Acer Laptops</a></li>
<li><a href="#">Apple Macbooks</a></li>
<li><a href="#">Notebook</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">External Hard Disks</a></li>
<li><a href="#">Dell Laptops</a></li>
<li><a href="#">HP Laptops</a></li>
</ul>
</div>
<div class="links"><label>Camera:</label>
<ul>
<li><a href="#">DSLR Cameras</a></li>
<li><a href="#">Canon Cameras</a></li>
<li><a href="#">Nikon Coolpix</a></li>
<li><a href="#">Nikon DSLR Cameras</a></li>
<li><a href="#">Sony Cameras</a></li>
<li><a href="#">Digital Cameras</a></li>
<li><a href="#">Panasonic Cameras</a></li>
<li><a href="#">Samsung Cameras</a></li>
</ul>
</div>
<div class="links"><label>Watches:</label>
<ul>
<li><a href="#">Men Watches</a></li>
<li><a href="#">Women Watches</a></li>
<li><a href="#">Casio Watches</a></li>
<li><a href="#">Titan Watches</a></li>
<li><a href="#">Fastrack Watches</a></li>
<li><a href="#">Fossil watches</a></li>
<li><a href="#">Casio Edifice</a></li>
<li><a href="#">Tissot Watches</a></li>
</ul>
</div>
<div class="links"><label>Fashion:</label>
<ul>
<li><a href="#">Sarees</a></li>
<li><a href="#">Silk sarees</a></li>
<li><a href="#">Salwar Suits</a></li>
<li><a href="#">Lehengas</a></li>
<li><a href="#">Biba</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="#">Rings</a></li>
<li><a href="#">Earrings</a></li>
<li><a href="#">Diamond Rings</a></li>
<li><a href="#">Loose Diamond</a></li>
<li><a href="#">Shoes / Boots </a></li>
</ul>
</div>
</div>

{$copyRight_txt}

Store information

Frontend Appearance:

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.

displayFooterPayment

Store information

Frontend Appearance:

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.

3.2 Homepage 2

SP Top Deals Layout 2

Top Deals

displayCustomHtml9

SP Custom HTML – Category Customer

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="clearfix bonus-menu-2">
<ul>
<li class="col-md-4 item home">
<div class="icon"></div>
<div class="text"><a>100 S Manhattan St, Amarillo,</a><a> </a>
<p><a>TX 79104, North America</a></p>
<a> </a></div>
</li>
<li class="col-md-4 item mail">
<div class="icon"></div>
<div class="text"><a class="name" href="#">Sales@MagenTech.Com</a>
<p>( +123 ) 456 7890</p>
</div>
</li>
<li class="col-md-4 item delivery">
<div class="icon"></div>
<div class="text"><a class="name" href="#">Free Delivery</a>
<p>On order over $89.00</p>
</div>
</li>
</ul>
</div>

displayCustomHtml10

SP Custom HTML – Scoll category

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="scoll-cate list_diemneo">
<ul>
<li class="neo1">Hotdeal</li>
<li class="neo2">Spa</li>
<li class="neo3">Fashion</li>
<li class="neo4">Travel</li>
<li class="neo5">Digital</li>
</ul>
</div>

displayCustomHtml11

SP Custom HTML – Scoll category

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="clearfix bonus-menu bonus-menu-3">
<ul>
<li class="item free col-md-3">
<div class="icon"><img alt="#" src="../themes/sp_topdeals/assets/img/icon/icon-ship-2.png" /></div>
<div class="text">
<h5><a href="#">Free shipping</a></h5>
<p>Free shipping on oder over $100</p>
</div>
</li>
<li class="item secure col-md-3">
<div class="icon"><img alt="#" src="../themes/sp_topdeals/assets/img/icon/icon-sec-2.png" /></div>
<div class="text">
<h5><a href="#">Secure Payment</a></h5>
<p>We value your security</p>
</div>
</li>
<li class="item support col-md-3">
<div class="icon"><img alt="#" src="../themes/sp_topdeals/assets/img/icon/icon-support-2.png" /></div>
<div class="text">
<h5><a href="#">Online support</a></h5>
<p>We have support 24/7</p>
</div>
</li>
<li class="item payment col-md-3">
<div class="icon"><img alt="#" src="../themes/sp_topdeals/assets/img/icon/icon-pay-2.png" /></div>
<div class="text">
<h5><a href="#">Payment on Delivery</a></h5>
<p>Cash on delivery option</p>
</div>
</li>
</ul>
</div>

displaycountdownproductslider

SP Coundown Product Slider – Weekly Deal

Frontend Appearance:

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

The others are the same as Homepage 1

3.3 Homepage 3

SP Top Deals Layout 3

Top Deals

displayCustomHtml12

SP Custom HTML – Text Html

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="text-html">
<p>Get an extra 10% off on select hotels with Member Pricing. Join now!</p>
</div>

displayCustomHtml13

SP Custom HTML – Category

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<div class="text-html">
<p>Get an extra 10% off on select hotels with Member Pricing. Join now!</p>
</div>

displayCustomHtml14

SP Custom HTML – Category

Frontend Appearance:

Backend Setting:

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 illustration

Copy and paste the following code into the content:


<p><a href="#">Letv</a> <a href="#">Formal Shoes</a> <a href="#">Vivo Mobiles</a> <a href="#">Reebook</a> <a href="#">Micromax</a> <a href="#">Travel Vacation</a> <a href="#">Hotel</a> <a href="#">Restaurant</a></p>

The others are the same as Homepage 1

SP Theme Configuration

3.1 General Settings

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

3.2 Layout Settings

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

3.3 Background Settings

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

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

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


body


.breadcrumb .breadcrumb-container ul li a, .post-page , #submitComment, .product-prices, #product-availability, .product-reference, .product-quantities, #product .product-variants, .product-price-and-shipping, .sp-megamenu .navbar-nav li a, .sp-megamenu .home a, div.sp_supercategory .category-wrap-cat .sp-cat-slider .cat_slider_inner .item .cat_slider_title a, .text-html-2, .sp-vermegamenu .navbar-nav  li  a


h1,h2,h3,h4,h5,h6


.title-404

SP Megamenu Configuration

SP Memgamenu (displayMenu)

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

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

Step1: Create menu "Shop" level 1. Scroll down you could configure Menu Information as follows:

Step2: Create Menu Item.
- Create submenu item (Parent ID is "Shop"). In this step, you can do the same to create other items.

- Create banner image. Do the same with image 2.

Copy and paste the following code into the content HTML:

<p><img src="/themes/sp_topdeals17//themes/sp_topdeals/assets/img/cms/image-thum-1.jpg" width="540" height="220" alt="" /></p>

Step 4: After each step, click "Save config" button and finally go to the front-end to view.

SP Vertical Megamenu Configuration

SP Vertical MegaMenu (displayverticalmenu)

Top Deals

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

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

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

5. Examples. Create vertical megamenu as the demo.

bestshop

Step1: Create menu "Electronic" level 1. Scroll down you could configure Menu Information as follows:

Step2: Create Submenu.
- Create a menu parent "Box Category 1" to contains all submenu

- Create submenu item (Parent ID is "Box Category 1"). In this step, you can do the same to create other items.

Step3: Create banner image.

Copy and paste the following code into the content HTML:

<p style="margin-bottom: 0;"><img src="/themes/sp_topdeals17/themes/sp_topdeals/assets/img/cms/ver-img-3.jpg" alt="custom image" width="362" height="495" /></p>

+) Thumbnails Type

Choose type display of thumbnails block on product page.

Vertical Thumbnails
Horizontal Thumbnails

Backend Settings:

Top Deals

Frontend Appearance:

-Vertical Thumbnails

Top Deals

-Horizontal Thumbnails

Top Deals

+) Display thumbnails

Number of thumbnails be displayed.

Backend Settings:

Top Deals

+) Display Product SKU

Show/Hide Product SKU.

Backend Settings:

Top Deals

Frontend Appearance:

Top Deals

+) Display Product Attribute

Show/Hide Product Attribute.

Backend Settings:

Top Deals

Frontend Appearance:

Top Deals

+) Display Product Availability

Show/Hide Product Availability.

Backend Settings:

Top Deals

Frontend Appearance:

Top Deals

+) Share buttons

Show/Hide Share buttons.

Backend Settings:

Top Deals

Frontend Appearance:

Top Deals

+) Short Product Description

Show/Hide Short Product Description.

Backend Settings:

Top Deals

Frontend Appearance:

Top Deals

Blog Page

Top Deals

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

Look for Smart Blog file.
Look for SmartBlog Home Latest file.

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

- Smart Blog

Top Deals

- SmartBlog Home Latest

Top Deals

Please read more guide for Smartblog at here. SmartBlog Module

Contact Page

Top Deals

Store information

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

Top Deals

DisplayFooterContact

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.

- Frontend Appearance:

About us Page

Frontend Appearance:

Top Deals

Backend Setting:

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

Step 2: In the “Pages” configuration page, click Top Deals 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="about-wrap">
<div class="about-us">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="about-image"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals/themes/sp_topdeals/assets/img/cms/about-us-1.jpg" alt="#" /></div>
</div>
<div class="col-md-6 col-sm-12">
<div class="about-text">
<h2>Hello, We are Topdeal Established 2017 - Paris Fashion Show</h2>
<p>Lorem Khaled Ipsum is a major key to success. Eliptical talk. The key to more success is to get a massage once a week, very important, major key, cloth talk. Mogul talk. Cloth talk. I’m giving you cloth talk, cloth. Special cloth alert, cut from a special cloth. In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. Surround yourself with angels.</p>
<p>They key is to have every key, the key to open every door. We don’t see them, we will never see them. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. They never said winning was easy. Some people can’t handle success, I can. I’m giving you cloth talk, cloth. Special cloth alert, cut from a special cloth.</p>
<a class="contact-us" href="#">Contact Us</a></div>
</div>
</div>
</div>
<!--end about-us -->
<div class="why-choose clearfix">
<div class="col-sm-4 col-xs-12 item shipping">
<div class="content">
<div class="icon"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals/themes/sp_topdeals/assets/img/cms/about-item-1.png" alt="#" /></div>
<div class="text">
<h4><a href="#">Strategy & Marketing</a></h4>
<p>Lorem Khaled Ipsum is a major key to success. Eliptical talk. The key to more success is to get a massage once a week, very important, major key, cloth talk.</p>
<!--end text--></div>
<!--end content--></div>
<!--end item--></div>
<div class="col-sm-4 col-xs-12 item money">
<div class="content">
<div class="icon"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals/themes/sp_topdeals/assets/img/cms/about-item-2.png" alt="#" /></div>
<div class="text">
<h4><a href="#">interaction design </a></h4>
<p>Lorem Khaled Ipsum is a major key to success. Eliptical talk. The key to more success is to get a massage once a week, very important, major key, cloth talk.</p>
<!--end text--></div>
<!--end content--></div>
<!--end item--></div>
<div class="col-sm-4 col-xs-12 item support">
<div class="content">
<div class="icon"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals/themes/sp_topdeals/assets/img/cms/about-item-3.png" alt="#" /></div>
<div class="text">
<h4><a href="#">WEb Development</a></h4>
<p>Lorem Khaled Ipsum is a major key to success. Eliptical talk. The key to more success is to get a massage once a week, very important, major key, cloth talk.</p>
<!--end text--></div>
<!--end content--></div>
<!--end item--></div>
<!--end why-choose--></div>
<div class="our-team">
<div class="title">
<h2>Meat the Team</h2>
<p>Lorem Khaled Ipsum is a major key to success. Eliptical talk. The key to more success is to get a massage once a week</p>
</div>
<div class="out-team-content owl-carousel">
<div class="content-inner">
<div class="image"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals//themes/sp_topdeals/assets/img/cms/about-team-1.jpg" alt="#" /></div>
<h3 class="name">Share Portman</h3>
<h5 class="job">Ceo</h5>
<div class="socials"><a class="fb" href="#">Facebook</a> <a class="tw" href="#">Twitter</a> <a class="google" href="#">Google</a><a class="dribbble" href="#">Dribbble</a><a class="linkedin" href="#">Linkedin</a></div>
</div>
<div class="content-inner">
<div class="image"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals//themes/sp_topdeals/assets/img/cms/about-team-2.jpg" alt="#" /></div>
<h3 class="name">Jimmy Carter</h3>
<h5 class="job">Director</h5>
<div class="socials"><a class="fb" href="#">Facebook</a> <a class="tw" href="#">Twitter</a> <a class="google" href="#">Google</a><a class="dribbble" href="#">Dribbble</a><a class="linkedin" href="#">Linkedin</a></div>
</div>
<div class="content-inner">
<div class="image"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals//themes/sp_topdeals/assets/img/cms/about-team-3.jpg" alt="#" /></div>
<h3 class="name">Warrent Buffet</h3>
<h5 class="job">Deverlopment</h5>
<div class="socials"><a class="fb" href="#">Facebook</a> <a class="tw" href="#">Twitter</a> <a class="google" href="#">Google</a><a class="dribbble" href="#">Dribbble</a><a class="linkedin" href="#">Linkedin</a></div>
</div>
<div class="content-inner">
<div class="image"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals//themes/sp_topdeals/assets/img/cms/about-team-4.jpg" alt="#" /></div>
<h3 class="name">Jame Bone</h3>
<h5 class="job">Designer</h5>
<div class="socials"><a class="fb" href="#">Facebook</a> <a class="tw" href="#">Twitter</a> <a class="google" href="#">Google</a><a class="dribbble" href="#">Dribbble</a><a class="linkedin" href="#">Linkedin</a></div>
</div>
<div class="content-inner">
<div class="image"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_topdeals//themes/sp_topdeals/assets/img/cms/about-team-2.jpg" alt="#" /></div>
<h3 class="name">Mary Stone</h3>
<h5 class="job">Designer</h5>
<div class="socials"><a class="fb" href="#">Facebook</a> <a class="tw" href="#">Twitter</a> <a class="google" href="#">Google</a><a class="dribbble" href="#">Dribbble</a><a class="linkedin" href="#">Linkedin</a></div>
</div>
</div>
</div>
</div>

Languages

Management Languages

1. Add new Language

Step 1:

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

Top Deals

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

- You can edit or delete language on your store

Top Deals

Step 2:

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

Top Deals

Currencies

Management Currencies

Step 1:

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

Top Deals

Step 2:

- In the "Currencies" configuration page, click button Top Deals 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".

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

- Then click button "Modify"

Top Deals

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

Top Deals

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

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

- Then click button "Modify"

Top Deals

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

Top Deals

Custom Codes

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');

Frontend Appearance

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_topdeals/modules/spcustomhtml/views/css/style.css"

- You can edit css file of theme.

Example:

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

+) "../themes/sp_topdeals/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_topdeals/_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

Click here to view changelog.

Navigation

Extensions

Pages

Customize Data

Customize Display

System Update

Getting Started

1.1 Introduction!

1.2 System Requirements

1.3 PrestaShop Guide

Installation

2.1 Quickstart Installation

2.2 Theme Installation

SP Top Deals Theme Installation

Besides

2.3 Layout Settings

Management & Pages

3.1 Homepage 1

3.2 Homepage 2

3.3 Homepage 3

SP Theme Configuration

3.1 General Settings

3.2 Layout Settings

3.3 Background Settings

3.4 Fonts

SP Megamenu Configuration

SP Memgamenu (displayMenu)

SP Vertical Megamenu Configuration

SP Vertical MegaMenu (displayverticalmenu)

Product Listing Page

Product Listing Page

+) Show number of products in current category

+) Product title

+) Show product description

+) Show Quick view

+) Show product price

+) Show product label (New/Sale)

Product Detail Page

Product Detail Page

+) Thumbnails Type

+) Display thumbnails

+) Display Product SKU

+) Display Product Attribute

+) Display Product Availability

+) Share buttons

+) Short Product Description

Blog Page

Blog Page

Contact Page

Contact Page

About us Page

About us Page

Languages

Management Languages

1. Add new Language

Step 1:

Step 2:

2. Export Language

Step 1:

Step 2:

3. Import Language

Step 1:

Step 2:

4. Management Language

Step 1:

Step 2:

Currencies

Management Currencies

Step 1:

Step 2:

Step 3:

Translation

Management Translation

1. Translations Theme

Step 1:

Step 2:

2. Translations Modules

Step 1:

Step 2:

Custom Codes