Getting Started

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.

Compatible with Prestashop

Rosette PrestaShop Theme is fully compatible with Prestashop version 1.7.x

PrestaShop Information

To install this theme you must have a working version of Prestashop already installed. If you need help installing PrestaShop, follow below sites and tutorials from prestashop.com, hope everything that you need are there.

System Requirements - Required system credentials for your prestashop installation.
Installation Guide - Installation guide that describes how to install prestashop.
Online prestashop guide - Online prestashop documentation that describes about prestashop in detail.
Prestashop Forum - Prestashop forum site.
stackoverflow.com - You can also get some useful articles from stackoverflow.

Installation

Prepare Installation

There are two ways to install SP Rosette Theme

Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
Manual Installation: Include of Theme layout Installation Packages.

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 named as sp_rosette_quickstart_pl_p1.7.6.7_v2.3.0
Step 2: Extract and Upload the whole Quickstart package to your server or localhost. In Quickstart folder you will see the extracted folder that include all sample data
Step 3: Create a Database for your PrestaShop site.

Step 4: Start installation by opening browser and navigate to your URL.
- Installation Assistant (Choose your 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.

rosette Prestashop Theme

Installation Assistant (License agreements)

rosette Prestashop Theme

Checking PrestaShop Compatibility

rosette Prestashop Theme

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.

rosette Prestashop Theme

System Configuration

Enter your database in step 3, then click the “Test your database connection now!” button to make sure that the entered settings are correct. After that, click Next button.

rosette Prestashop Theme

Finish installation: This process could take a few minutes

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

rosette Prestashop Theme

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

Install the “sp_rosette_template_p1.7.x_v2.3.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_rosette_template_p1.7.x_v2.3.0.zip” >> Save.

rosette Prestashop Theme

Note

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

rosette 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_rosette_template_p1.7.x_v2.3.0.zip” >> Save.

rosette 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 . Then Click "Use this theme" button to replace your current theme with SP Rosette theme.

rosette Prestashop Theme

Note: After click button, your site may be broken. If your site was broken, please run this command: chown -R apache:apache sp_rosette

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

Layout Position

Position Home page

Home Style 1

Homepage Configuration

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_rosette/assets/img/bg_popup.jpg"

displayID1CustomHtml

SP Custom HTML

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:

<p><span>Summer Collection Big Sale Discount off 50%! Shop Now</span></p>

displayID1SearchPro

SP Search Pro

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.

display SP BlockCart

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

displayNav

a. SP Currencies Block

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.

display SP BlockUserinfo

Sp Customer "Sign in" link

Frontend Appearance:

Backend Settings:

In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “Sp Customer "Sign in" link” module >> click “Enable" button to enable this module.

displayID1CustomHtml2

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

<ul>
<li class="item item-1">
<div class="icon"></div>
<div class="text"><a class="name" href="#"><span>Official Rosette Shop</span> over 1100 products online</a></div>
</li>
<li class="item item-2">
<div class="icon"></div>
<div class="text"><a class="name" href="#"><span>Free shipping and returns</span> for members</a></div>
</li>
<li class="item item-3">
<div class="icon"></div>
<div class="text"><a class="name" href="#"><span>Same-day dispatch</span> before 8pm (Mon-Fri)</a></div>
</li>
<li class="item item-4">
<div class="icon"></div>
<div class="text"><a class="name" href="#"><span>Online Support</span> Customer 24/7</a></div>
</li>
</ul>

displayHomeslider

SP Home Slider

Frontend Appearance:

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “Sp slider for your homepage 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

displayID1CustomHtml3

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

<p><a class="banner item-1" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-1.jpg" alt="Static Image" /></a> <a class="banner" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-2.jpg" alt="Static Image" /></a></p>

displayID1CustomHtml4

SP Custom 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="col-md-4 col-sm-4 col-xs-12 item-1"><a class="banner" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-3.jpg" alt="Static Image" /></a></div>
<div class="col-md-4 col-sm-4 col-xs-12 item-2"><a class="banner item-2-1" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-4.jpg" alt="Static Image" /></a></div>
<div class="col-md-4 col-sm-4 col-xs-12 item-3"><a class="banner" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-5.jpg" alt="Static Image" /></a></div>

displayID1ListingTab

SP Listing Tab – BEST SELLERS

Frontend Appearance:

Backend Settings:

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

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

Step 3: You could configure this module like the illustration

displayID1CustomHtml5

SP Custom 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="col-md-3 col-sm-3 col-xs-12 item-1"><a class="banner" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-6.jpg" alt="Static Image" /></a></div>
<div class="col-md-3 col-sm-3 col-xs-12 item-2"><a class="banner" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-7.jpg" alt="Static Image" /></a></div>
<div class="col-md-3 col-sm-3 col-xs-12 item-3"><a class="banner" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-8.jpg" alt="Static Image" /></a></div>
<div class="col-md-3 col-sm-3 col-xs-12 item-4"><a class="banner" href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/img-9.jpg" alt="Static Image" /></a></div>

displaycountdownproductslider

SP Countdown Products 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 Countdown Products Slider module.

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

Step 3: You could configure this module like the illustration

displayID1CustomHtml6

SP Custom 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="video-content"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/video.jpg" alt="Video" />
<div class="video-description"><a class="btn-play" href="https://www.youtube.com/watch?v=6b1nADFSqcM" title="Play">Play</a>
<h4 class="hidden-sm-down">Street Style Fashion</h4>
</div>
</div>

displayID1CustomHtml7

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


<p><a href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/secure.png" alt="Static Image" /></a></p>

displayID1CustomHtml8

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


<p><a href="#"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/logo.png" alt="Static Image" /></a></p>

displayFooterLinks

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

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

Men Categories

Frontend Appearance:

Backend Settings:

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

displayFooterLinks3

Men Categories

Frontend Appearance:

Backend Settings:

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

displayFooterSocial

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

display SP Themeconfigurator

SP Theme Configurator – ABOUT US

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.

{$copyRight_txt}

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.

SP Theme Configuration

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.

General Settings

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

Layout Settings

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

Background Settings

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

Fonts

In the SP Theme Configuration, 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, h5.product-name, .price-box, #attributes .attribute_list select, h1.product_name


.sp-megamenu .navbar-nav  li li a


h1,h2,h3,h4,h5,h6,.content_sortPagiBar_top label, .content_sortPagiBar_bottom label,.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span


.title_font

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

rosette

+ Thumbnails Type

Choose type display of thumbnails block on product page.

Frontend Appearance:

-Vertical Thumbnails

rosette

-Horizontal Thumbnails

rosette

+ Display thumbnails

Number of thumbnails be displayed.

Backend Settings:

rosette

+ Display Product SKU

Show/Hide Product SKU.

Frontend Appearance:

rosette

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

Frontend Appearance

- You can input css or javascript.

Examples code css


body{
	background-color: red;
}

Examples code Javascript


alert('This is demo javascript');

Custom Codes

- 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

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

- You can edit css file of theme.

Example:

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

+) "../themes/sp_rosette/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_rosette/_dev/css/themestyles/_content.scss"

Other Modules

SP Theme Configuration

Click here to view Backend Setting

SP Listing Tab

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP Listing Tab module.

SP Footer Links

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP Footer Links module.

SP Slider For Your Homepage

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP Slider For Your Homepage module.

SP One Step Checkout

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP One Step Checkout module.

SP Product Comments

Click here to view Frontend Appearance
Click here to view Backend Setting

SP Search Pro

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP Search Pro module.

SP Extra Slider

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP Extra Slider module.

SP Custom Html

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP Custom Html module.

SP Countdown Product Slider

Click here to view Frontend Appearance
Click here to view Backend Setting
Click here to view documentation of SP Countdown Product Slider module.

SP Newsletter Block

Click here to view Frontend Appearance
Click here to view Backend Setting

SP Shopping Cart

Click here to view Frontend Appearance
Click here to view Backend Setting

SP Currency Block

Click here to view Frontend Appearance

SP Language Selector Block

Click here to view Frontend Appearance

Blog Page

Frontend:

bestshop

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

bestshop

- SmartBlog Home Latest

bestshop

Please read more guide for Smartblog at here. SmartBlog Module

Contact Page

rosette

Backend Setting:

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

rosette

About us Page

Frontend Appearance:

rosette

Backend Setting:

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

Step 2: In the “Pages” configuration page, click rosette 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="image"><img src="/ytc_templates/prestashop/sp_rosette/themes/sp_rosette/assets/img/cms/image-about-us.jpg" alt="#" /></div>
<div class="content">
<div class="title">
<h1>About Us</h1>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis partrient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</div>

Languages

Management Languages

1. Add new Language

Step 1:

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

rosette

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

- You can edit or delete language on your store

rosette

Step 2:

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

rosette

Currencies

Management Currencies

Step 1:

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

rosette

Step 2:

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

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"

rosette

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

rosette

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"

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"

rosette

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

rosette

Other

Support

SUPPORT - If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs - Go to Here to view more the Frequently Asked Questions.

Change Log

Click here to view change log.

Navigation

Extensions

Pages

Customize Data

Other

Getting Started

Introduction!

Compatible with Prestashop

PrestaShop Information

Installation

Prepare Installation

Quickstart Installation

Theme Installation

SP Rosette Theme Installation

Note

Layout Position

Position Home page

Homepage Configuration

SP Theme Configuration

General Settings

Layout Settings

Background Settings

Fonts

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 Pages

+ Thumbnails Type

+ Display thumbnails

+ Display Product SKU

+ Display Product Attribute

+ Display Product Availability

+ Share buttons

+ Short Product Description

Custom Codes

Custom Codes

1. SCSS Compile

2. CSS Format

3. Edit file CSS

SP Megamenu Configuration

SP Megamenu (displayMenu)

Other Modules

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:

Other