Documentation for Revo Ultimate Prestashop Theme

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

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

Installation

Prepare Installation

There are two ways to install SP Revo 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_revo_quickstart_pl_p1.7.3.0_v2.7.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.
  • Revo Prestashop Theme
  • 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.

Revo Prestashop Theme

  • Installation Assistant (License agreements)

Revo Prestashop Theme

  • Checking PrestaShop Compatibility

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

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

Revo Prestashop Theme

  • Finish installation: This process could take a few minutes

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

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

Revo Prestashop Theme

SP Revo Theme Installation

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

Revo Prestashop Theme

2. Navigate to “Import from your computer>> choose the zip theme file as named “sp_Revo_template_p1.7.x_v2.7.0.zip >> Save.

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

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

Revo Prestashop Theme

- Navigate to “Import from FTP>> choose the zip theme file as named “sp_revo_template_p1.7.x_v2.7.0.zip >> Save.

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

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

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

How to use Elementor

SP Deal – Today Deals

Frontend Appearance:

Revo 17

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

Step 3: You could configure this module like the illustration

SP Listing Tabs – Fashion

Frontend Appearance:

Revo 17

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 Extra Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Clever Elements offers an intuitive design for users. So, you can learn the basics of the editor in a couple of minutes.
Step 1: To use Clever Elements please login Admin panel then go to front-end to start using Clever Elements.
Step 2: To get started click the icon on the right
Revo 17

You’ll enter the Clever Elements page editor. This is what your page will look like:

Revo 17


On the left side, you’ll see the Clever Elements sidebar with all the drag-and-drop features you can use to build your web page. Simply click, hold, and drag a widget to the place where you’d like to add the new module.
The Clever Elements editor consists of three main building blocks: Sections, Columns, and Widgets. Sections are the largest building blocks. Within Sections, you can add groups of Columns, and Widgets are housed within Columns.
The editor will tell you where you can drag a widget by highlighting Sections and Columns in a blue box. Note that you can’t drag a widget into the navigation bar or the heading.

Revo 17

You control the Sections, Columns, and Widgets using the blue handle. Just right click the handle to edit the blocks.

Revo 17

You can change the position of existing boxes by dragging and dropping. You can easily edit the text, images, change the category of the module by clicking icon "edit"

Revo 17

In the Site Settings menu, you can set the default colors and fonts for your pages. You can also configure global settings for your entire website on Clever Elements. Clever Elements comes with a built-in Revision History section. Under the Actions tab, you can trace your changes, moving back and forth between each action. Under the Revisions tab, you can switch between your revisions and revert back to any previous version.

Revo 17

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.

Product Pages

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.

Revo

+ Thumbnails Type

Choose type display of thumbnails block on product page.

Frontend Appearance:

-Vertical Thumbnails

Revo

-Horizontal Thumbnails

Revo

+ Display thumbnails

Number of thumbnails be displayed.

Backend Settings:

Revo

Custom Codes

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

Advanced

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

- You can edit css file of theme.

Example:

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

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

SP Megamenu Configuration

SP Memgamenu (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:

Revo

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

Revo

4. After, scroll down you could configure Menu Information as follows

Revo

5. Click Add New button to add items as you want.

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.

SP Vertical Megamenu Configuration

SP Vertical MegaMenu (displayverticalmenu)

Click Here to view documentation of SP Vertical MegaMenu module.

Frontend Appearance:

bestshop

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:

bestshop

3. You could configure General Options as follows

bestshop

4. After, scroll down you could configure Menu Information as follows

5. Click Add New button to add items as you want.

bestshop

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

bestshop

7. To configure each item, you need to click Edit button.

Other Modules

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

Blog Page

Blog Page

Frontend:

Revo

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

bestshop

- SmartBlog Home Latest

bestshop

Please read more guide for Smartblog at here. SmartBlog Module

Contact Page

Contact Page

Revo

Backend Setting:

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

Revo

About us Page

About us Page

Frontend Appearance:

Revo

Backend Setting:

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

Step 2: In the “Pages” configuration page, click Revo 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="/themes/sp_Revo17/themes/sp_Revo/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

Revo

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"

Revo

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"

Revo

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"

Revo

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

Revo

Step 2:

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

Revo

Currencies

Management Currencies

Step 1:

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

Revo

Step 2:

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

  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"

Revo

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

Revo

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"

  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"

Revo

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

Revo

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

Changelog

Click here to view changelog.