SP Parna

This guide will help you install SP Parna Theme step by step.

1 Preparations - Back to top

The PrestaShop e-commerce engine requires a MySQL database to store data. Prior to installing PrestaShop, please make sure you have already created a MySQL database. This can be done through your hosting control panel using the phpMyAdmin tool.

Please check the detailed tutorial on how to create a MySQL database. If any issues occur, please contact your hosting provider for further assistance. While installing your MySQL database, you will need to specify the database name, username, password and the database server. Remember these details as you will need them for PrestaShop installation.

2 Server Requirement - Back to top

Please make sure your hosting server meets the PrestaShop requirements:

System: Unix, Linux or Windows. Unix is highly recommended.
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: PrestaShop will work with PHP 5.1 or later, but the versions lower than 5.2 have bugs which might prevent some functions from working as expected (like invalid date timezone).

3 How To Download Pretashop - Back to top

To install PrestaShop, you need to download the PrestaShop engine package from the official website at prestashop

Just insert your name and e-mail into the Download box input and click the ‘Download’ button.

Please make sure your version of PrestaShop engine matches the template requirements (SP Parna Theme is Compatible with Pretashop version 1.6.x). All versions of PrestaShop are available at SourceForge.

4 How To Extract Files - Back to top

Once the PrestaShop engine package is downloaded, you will need to extract its files and folders from the archive.

This can be done with any archive manager like WinZip(PC), StuffitExpander(MAC), etc.

Please note: if your hosting control panel has the option to ‘Extract’ files, you can use it to extract the files directly on your server after the .zip file is uploaded.

5 How To Upload PrestaShop engine files - Back to top

If you have extracted the files locally to your computer, you will need to upload them to your hosting server.

This can be done using the hosting control panel File Manager or third party FTP Manager applications like FileZilla, TotalCommander, CuteFTP, etc.

6 How To Install - Back to top

There are two ways to install SP Parna Theme

Quickstart Installation: By using this package, you will set the theme exactly as our Demo with sample data.
Manual Installation : Include of themeinstallator Package and Theme Installation Package.

6.1 Quickstart Installation

We provide SP Parna 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 a quickstart package
Step 2: Extract the downloaded package “sp_parna_quickstart_p16_v1.0.0” in your localhost (or your hosting). 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 Pretashop installer. Please follow each step of the Installer so that the installation process can be set.

Installation Assistant (Choose your language)

Please select the installation language

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

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

Installation Assistant (License agreements)

Please check the license agreement.

License Agreements

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

System Compatibility

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

System Compatibility

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

Store Information

Now add required information for your store: Shop name, Main activity, Country, Shop timezone and add the account info: first name, last name, email and password. The information is very important so please make sure you store it somewhere. Click “Next” to next step.

Store Information

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

System Configuration

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

System Configuration

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

Create Database

Database is created successfully, copy the database name, paste database name in the “Database name” field and then you can test to see if database configuration is correct or not. Database configuration is connected, click “Next” to move to next step.

System Configuration2

Finish installation: This process could take you some time

Finsh Installation

And finally, go to the frontend or backend as you want:

Finish

For security reasons you need to delete the /install/ directory on your hosting server.

NOTE: If you want to set the URL for Home layout 2 (or Home Layout 3) in the Quickstart Installation, please follow the steps below:

1. In your Administrator, please go to >> ADVANCED PARAMETERS >> Multistore

Multistore

2. In the Multistore Tree, click “Welcome to SP Parna“.

3. After click the link “click here to set URL for this shop” to set URL for SP Parna Layout2

4. Select your “Shop”; set “Virtual URL” and press “Save”

Virtual Url Layout2

5. Finally, click the URL to view the changes

Changes

Note: Set the URL for the Home Layout3 the same with layout2.

6.2 Full Width Layout Installation

Step 1: Install “themeinstallator” Module.

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

Add New Module

2. Select your module.zip file “themeinstallator.zip” and click “Upload this module” button

Upload Module

3. The uploading process will be started. You will see the message that the module has been successfully downloaded.

Install Module Successful

4. The new module will be located in the modules list. Search the name of module and Click on the Install button to install the module.

Install Module

5. Finally, you will see a notice message: “Module(s) installed successfully”.

Module Install Successful

Step 2: Install Layout 1 Theme

Note: To install theme, firstly you must extract the theme folder and get “theme.zip” file to install.

1. Find to the module that you have installed and clicked on Configure button to configure the module.

Config Module

2. Navigate to “Import from your computer” >> choose the zip file in theme folder as named “sp_parna_template_p16_v1.0.0” unzipped file >> Next.

Choose File Temp

3. Click on “Next” button.

Next Variations

4. Click on “Next” button.

Next Native

5. List of the module installed will be showed out and click on “Finish” button.

Finish Install Theme

Note: You will see a warning “Copy/Paste errors if you want to manually set the image type”. Please the following steps:

Step 1: In your Administrator, please navigate to PREFERENCES >> Images

Step 2: Find to REGENERATE THUMBNAILS tab >> Click on “Regenerate Thumbnails” button

Step 3: Finally, you will see a notice message: “The thumbnails were successfully regenerated.”

Step 3: With “img” folder, Copy all data in folder “cms” and “l” one by one into the installation folder. For example: copy all data files in “cms” folder into the installation folder “\xampp\htdocs\prestashop_1.6.0.14\prestashop\img\cms”. And Copy folder “overwrite” into the installation folder.

Step 4: Install the module “smartblog” and “smartbloghomelatestnews” the same with the “themeinstallator” module installation.

7 Basic Tutorials - Back to top

7.1 How to change store name

In order to change your store title, open the PrestaShop admin panel and go to Preferences > Store Contacts, the Contact details section. In the Shop name field, type in your store name and click the Save button to save your changes.

Contact Details

7.2 How to edit slider

To edit slider images, find the Image slider for your homepage module on the Modules page of your PrestaShop store. It is located in the Front Office Features modules section. Click the Configure button to edit the module.

Image Slider Homepage

8CONFIGURATION - Back to top

8.1 How To Create Categories Menu

Step 1: Creating a new category

Log into your PrestaShop Admin Panel.
Navigate to the Catalog >> Categories menu.
To create a new category, click the Add New button.

Addnew Categories

When the page with the category settings appears, enter the data required:
- Name: give your category a name. You can also put category titles for different languages in this field if you’re using a multi-language store.
- Displayed: choose to enable or disable your category.
- Parent Category: if you wish to create a subcategory for a category other than the home page, choose the category under which it will appear.
- Description: add the content you need to the new category. You can use the visual editor to format your text, insert images, and turn on the source HTML code of the description.
- Image : click the Add file button to upload an image from your computer.
- Thumbnails : you can add three thumbnail images that will be shown in the menu drop down on your front end.
- Meta title: the title that will appear on the search engines when a request is made by a customer.
- Meta description: your category description that will appear in search engine results.
- Meta Keywords: keywords to make your store recognizable by search engines. You can enter several of them, separated by commas, as well as expressions which must be indicated in quotation marks.
- Friendly URL : enables you to rewrite the addresses of your categories as you wish.
- Group access : the option to restrict access to the category and its products for certain customer groups.

Click the Save button to save your new category. For illustration as below:

Backend Bath Baby

Step 2: Adding a new category link to the top menu

Navigate to Modules -> Modules and look for Top horizontal menu.

Click the Configure button to access the module configuration page.
The left column displays current menu elements and the right one displays available menu elements. You will see the list of all your categories, CMS pages, manufacturers and suppliers as well as the option to add the link to the product page. You may also add custom links to the menu list using the Add a new link section.

Add New Link

To add a new element to the frontend menu, you should select the required element on the right and click the Add button.

Click Save to confirm adding a new menu item for the top menu.

Please check your web-store front-end. We added a new category and linked it to the top menu successfully.

Frontend Mainmenu

8.2 How To Configure Extensions

Note: Please readmore here about How to work with prestashop modules

Home Layout 1 - Full Width

postion home layout1
List of modules position are used in SP Parna Theme - Full Width Layout:

SP Custom HTML
User info Block
Curencies Block
Languages Block
SP Vertical Menu
SP Imageslider
Quick Search Block
Cart Blog
SP Slider
Smart Blog Home Latest News
SP Categories Tab
Home Content
SP Manufacture
Block contact Info
SP Social Block
SP BLock Newsletter
Categories Block
CMS Block
My Account Block

Welcome

Frontend Appearance:

Fontend Welcome

Backend Settings:

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

Backend Spcustomhtml

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

Step 3: The configuration of “Welcome” Module as the illustration.

Config Welcome

Demo Menu

Frontend Appearance:

Fonend Demo

Backend Settings:

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

Backend Spcustomhtml

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

Step 3: The configuration of “Demo Menu” Module as the illustration.

Config Demo Menus

User Info Block

Frontend Appearance:

Fontend Userinfo

Backend Settings:

Backend User Info

Note: With the “Currency Block“, “Language Block“, you also practice the same as above to enable these blocks.

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “user info block” module >> click arrow down in the right corner, it will display a list box that you can configure such as “Disable on mobiles, Disable on tablets, Disable on computers, Reset, Uninstall, Mark as favorite, Delete”.

Disable on mobiles: This will disable the front-office view of the module only for mobile devices (smartphones, etc.).
Disable on tablets: This will disable the front-office view of the module only for tables.
Disable on computers: This will disable the front-office view of the module only for desktop computers.
Reset: This will restore the module’s settings to their defaults.
Uninstall: This will disable the module and delete its data
Mark as favorite: This will add the module to your Favorites list
Delete: This will remove the module from the modules list, and delete its files and folders from your server.

Currency Block

Frontend Appearance:

Fontend Currentblock

Backend Settings:

Backend Currencyblock

Language Block

Frontend Appearance:

Fontend Languageblock
Backend Settings:

Backend Settings:
Backend Language

Bonus Menu

Frontend Appearance:

Fontend Bonusmenu

Backend Settings:

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

Backend Spcustomhtml

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

Step 3: The configuration of “Bonus Menu” Module as the illustration.

Vertical Menu

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Vertical Menu” module >> click “Configure” button to configure.

Step 2: The configuration of “SP Vertical Menu” Module as the illustration.

SP Image Slider

Frontend Appearance:

Fontend Image Slider

Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Image Slider” module >> click “Configure” button to configure.

Backend Image Slider

Step 2: The configuration of “SP Image Slider” Module as the illustration.
Config Image Slider

Quick Search Block

Frontend Appearance:

Fontend Quicksearch

Backend Settings:

Backend Quicksearch

Cart Block

Frontend Appearance:

Fontend Cartblock

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “Cart Block” module >> click “Configure” button to configure.

Backend Cart Block

Step 2: The configuration of “Cart Block” Module as the illustration.
Config Cart Block

Best Seller

Frontend Appearance:

Fontend Bestseller

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Slider” module >> click “Configure” button to configure.

Backend Sp Slider

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

Step 3: The configuration of “Best Seller” Module as the illustration.

Config Bestseller

Smartblog Home Latest

Frontend Appearance:

Fontend Smartblockhomelatestnew

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “Smartblog Home Latest” module >> click “Configure” button to configure.

Backend Smartbloghomelatest

Step 2: The configuration of “Smartblog Home Latest” Module as the illustration.
Configure Smartbloghomelatest

SP Categories Tab

Frontend Appearance:

Fontend Categories Tab

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Categories Tab” module >> click “Configure” button to configure.

Backend Categoriestab

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

Step 3: The configuration of “SP Categories Tab” Module as the illustration.

Config Categoriestab

Banner Right and Banner Right2

Frontend Appearance:Baner Right
Fontend Banertright

Frontend Appearance:Banner Right2
Fontend Baner Right2

Backend Settings:

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

Backend Spcustomhtml

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

Step 3: The configuration of “Banner right and Baner Right2″ Module as the illustration.

Banner Right

Banner Right2

Featured Products

Frontend Appearance:
Fontend Featured Product

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Slider” module >> click “Configure” button to configure.

Backend Sp Slider

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

Step 3: The configuration of “Featured Products” Module as the illustration.

Config Featuredproducts

New Arrivals

Frontend Appearance:
Fontend Newarrived

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Slider” module >> click “Configure” button to configure.

Backend Sp Slider

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

Step 3: The configuration of “New Arrivals” Module as the illustration.

Config Newarrials

Banner Center

Frontend Appearance:
Fontend Banercenter

Backend Settings:

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

Backend Spcustomhtml

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

Step 3: The configuration of “Banner Center” Module as the illustration.

Banner Center

Sale Products

Frontend Appearance
Fontend Saleproducts

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Slider” module >> click “Configure” button to configure.

Backend Sp Slider

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

Step 3: The configuration of “Sale Products” Module as the illustration.

Config Saleproducts

SP Manufacturer Slider

Frontend Appearance:

Fontend Manufacture

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Manufacturer Slider” module >> click “Configure” button to configure.

Backend Menufacturer

Step 2: The configuration of “SP Manufacturer Slider” Module as the illustration.
Config Manufacturer

Contact Infomaton Block

Frontend Appearance:

Fontend Contactus

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “Contact Infomaton Block” module >> click “Configure” button to configure.

Backend Contactifo

Step 2: The configuration of “Contact Infomaton Block” Module as the illustration.
Config Contactifo

SP Social Block

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Social Block” module >> click “Configure” button to configure.

Step 2: The configuration of “SP Social Block” Module as the illustration.
Config Social

SP Newsletter Block

Frontend Appearance:

Fontend Newsletter

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Newsletter Block” module >> click “Configure” button to configure.

Backend Newletter

Step 2: The configuration of “SP Newsletter Block” Module as the illustration.
Config Newsletterblog

Information

Frontend Appearance:

Fontend Info

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “CMS block” module >> click “Configure” button to configure.

Backend Cmsblog

Step 2: In the “CMS Blog” configuration page, click New Blog button in the right corner to “NEW BLOCK”.

Step 3: The configuration of “Information” Module as the illustration.

Config Infomation

My Account

Frontend Appearance:

Fontend Myaccount

Backend Settings:

Backend Myaccount

Custom Service

Frontend Appearance:

Fontend Service

Backend Settings:

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

Backend Spcustomhtml

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

Step 3: The configuration of “Custom Service” Module as the illustration.

Config Cutomerservice

8.3 How To Edit Logo

Frontend Appearance:

In your Administrator Page, navigate to PREFERENCES >> Themes >> in Logo tab, you add logo image file as you want.

Add File Theme

9Support – Back to top

Thank you so much for purchasing this theme. If you have any questions that are beyond the scope of this help file, please send us via: Support Tickets System

Thanks so much!