# Pts Diana Documentation

Live Demo

## Getting Started

We would like to thank you for purchasing Pts Diana and chosen it for your website. We outline all kinds of good information, and provide you with all the details you need to use the theme your way.

If you are unable to find your answer here in our documentation, feel free to ask for help from our support team, all you have to do is login and making a question via our Support System.

#### Introducing Pts Diana Prestashop theme

Pts Diana is a responsive Prestashop theme developed with PrestaBrain Framework version 2, SASS (Syntactically Awesome Style Sheets), it integrates Bootstrap 3, Font Awesome, supports HTML5 and CSS3. Pts Diana menu system is powerful with Megamenu, Verical Megamenu and Off-canvas.

The multi-purpose responsive Prestashop theme is SEO optimized that makes your site friendly with Search Engines, CSS and JS compression helps to improve your site performance to max.

PTS Diana supports a lot of modules, here is the list, click on the module name to go to its configuration section:

- Ps Page Builder
- Ps Megamenu
- Pts Related Products
- Ps Slider Layer for your homepage
- Pts Theme Control Panel
- Pts Map Locator
- Pts Bootstrap Testimonial

You can replicate our Demo site and build up your own E-commerce website in some simple steps with the sample data included when you install the theme

## Download and Installation

The instruction is to help you with installation of the Pts Diana.

### Download package

Once the download is complete, unzip the file and you would see the following packages:

- Guides - detail documentation for the theme
- Theme folder - for manual installation
- Modules - the installation packages of all modules used in the theme
- Source - the PSD files of the theme
- Licensing - the theme license

### System Requirement

Prestashop requires certain technical requirements to be met for the store to operate properly. First, a web server must be created to make the Prestashop store publicly available on the web. Domain names and hosting services can easily be purchased for an affordable price.

When selecting a hosting service, you should check to see that these server requirements are provided and installed on their web servers:

- Supported operating system: Windows, Mac and Linux
- Wamp (for Windows) or Xampp (for Windows and Mac)
- PHP 5.1+ installed and enabled
- MySQL 5.0+ installed with a database created

PHP configuration:

- "memory_limit" should be at least "64M"
- "file_max_upload_size" to "16M"
- “allow_url_fopen” should be set to “on”
- "register global" should be set to "off"
- "safe_mode" should be set to "off"

Optional PHP extensions:

- GD
- CURL
- SimpleXML
- SOAP

Permissions:

- Permissions for all files should be set to "664"
- Permissions for all folders should be set to "755"

If you don't know how to check these requirements, ask your hosting provider.

### Theme Installation

Before you install this theme, please read our checklist below:

1. Read our complete instruction to install theme
2. Make sure you have installed and running the correct version of Prestashop: Prestashop 1.6.x
3. Take a FULL BACKUP for your site

We recommend to use this theme on a new, clean installation or existing shops without custom core modifications.

#### Steps to install Pts Diana Theme manually:

1. Navigate to PREFERENCES → Themes in your Prestashop admin dashboard.
2. Click the Add New Theme button at the top of the page and go for the Import option. ( you can import from your janus, from web or from FTP)
3. Click Add file from "IMPORT FROM YOUR COMPUTER" option. For the file upload, pick Theme package/ name_theme.zip in the theme package and click Save.

Please watch our video guide to know more.

## Theme Configuration

### Supported themes/layouts

Pts Diana is Prestashop theme, each site uses different layouts built from Prestabrain Page Builder

Theme/layout

### Activate Theme

Once the theme is uploaded, in your Prestashop admin dashboard, navigate to: PREFERENCES > Themes. Go to Select a theme for the "Your Store Name" shop, click Use this theme as you want.

Check module before installing.

Theme has been successfully activated. You may have to generate images to fit new theme.

### Select Default

You can select any theme/layout for your Prestashop site in one click. After activate Pts Diana theme as your default theme, in General Setting tab of Theme Control Panel setting, select Default, Home2 or Home3 or Home4 or Home5 layout as your default layout, Save and you would have corresponding style.

### Setup Logo

Pts Diana supports 2 types of logo: Logo Prestashop and Logo in theme.

To configure Logo for your store, navigate to PREFERENCES → Themes in your Prestashop admin dashboard. Go to Logo tab to set up your logo.

Logo in theme often is changed follow themes/layouts. In default theme, change your logo image logo.png in folder /themes/pf_Diana/img .

### Image Size Adjustment

In your Prestashop admin dashboard, navigate to: PREFERENCES > Images to configure the image size for category, manufacturer, supplier, product thumbnail, product popup, etc that fit your layout best.

1. Image size

You can choose the type of product images that will suit your products the best. Images can be vertical rectangular (a form well suited for fashion), square (the best for shoes, accessories, electronics, etc.) or horizontal rectangular (furniture, auto, etc.).
We advise you to set the rectangular image dimensions according to the following screenshot:

2. Image quality

Set image quality to use on your site.

3. Generate thumbnails

To see the changes after you update the image sizes, image quality you need to re-generate the images is using in your site. Select option then click button Regenerate thumbnails

## Theme Control Panel setting

Pts Diana supports Theme Control Panel module that allows you to manage and customize your theme easily based on the powerful, intuitive and friendly admin panel with tons of built-in functionality.

From your Prestashop admin dashboard, go to Admin > Modules, in MODULES LIST section search PTS Theme Control Panel module, click on Configure to configure or just click button Theme Config on top of screen, choose Theme Control Panel.

### General Settings

In the General setting, there are four main configuration sections.

Here are the main things that you can do with the General setting.

### Theme Settings

- Logo Type - You can set logo in theme or logo of prestashop
- Store Copyright - Setting up your store copyright.

### Footer And Page Builder Profiles Assignment

To active function building home layout by page builder and footer builder. In addition, you can choose layout profiles created in Pts Page Builder for each home skin.

### Customizations Settings

To customize your site by adding custom css or js. Please sure you know about them.

Use Live Theme Configurator one of powerful tool that created by PrestaBrain team to edit your site directly.

### Module Settings

### Tool Settings

This setting panel allows you to install sample data to replicate our demo site in your existed store.

1. Import Sample Configure: to install configuration of modules for activated Theme.
2. Import Sample Queries: feature is only used for module(s) which have not even installed or tables and records of module(s) is empty
3. Restore: After Backup your configuration (modules and theme), you can use Restore option to restore all your backup configuration
4. Re-Assign Modules - Hooks: re-assign position setting of module after you modify it.
5. Backup All Module Using To Restore Old: Backup your settings to restore
6. Re-Assign All Modules - Hooks: re-assign all positions of modules

## Page Builder Setting

Pts Page Builder is one of the latest modules of PrestaBrain to build layouts for homepage more quickly, easily. It has a collection of widget used as modules, the drap-drop interface, supporting for screen responsive, multi profiles for homepage layouts.

There are two builders: Page Builder and Footer Builder.

To configure the module, in your Prestashop admin dashboard, navigate to MODULES → Page Builder Profiles (Footer Builder Profiles) or click button Theme Config on top of screen, choose Page Builder Profiles (Footer Builder Profiles).

### Page Builder

Used to build main content of homepage layout. It often contains slide show, product list, banner, categories, blog, etc... Check out the video below to see how the builder works:

#### 1. Manage Profile

Pts Page Builder manages homepage layouts through profiles. You can use available profiles, creat new profile

or import profiles.

#### 2. Responsiveness Configuration

The module support responsive design for screen sizes as wide screens, desktops, tablets, phones. This is responsive design for Default layout.

#### 3. Manage Widget

Pts Page Builder has a collection of widgets having funtions similar modules. You can add a widget into any positions and configure widget in this module. To create a widget, firstly, add a row, then add a column. In each column, you can edit style, add a row or add a widget.

There are more than 30 widgets you can choose for your layout. Here are widgets used in layouts.

##### a. Home default

Default layout profile setting screenshot - Download the profile

### Footer Builder

Footer builder is to build content for footer. It often contains contact info, cms block, newsletter, social links, etc...

#### 1. Manage Profile

There is footer layout profiles having same structure similar to homepage layout profiles in page builder. Here are the footer profile used for Pts Diana demo site.

Footer default

#### 2. Responsiveness configuration

These are responsive designs for footer of Default layout.

#### 3. Manage Widget

Please import the profile and you can check the setting of block, column and widget easider.

Footer default profile - Download the profile

## Prestabrain Module Configuration

The module configuration is based on Diana demo site (Default Layout), if you use other layouts, the module configuration is expected to be the same.

Pts Diana use module Pts Page Builder to build main layout, and supports a lot of Prestashop modules that help you build a full Ecommerce functionality and help with content building for your site without Page Builder. Here is the instruction to use the extensions and the way they are used in Pts Diana demo site.

### Ps Megamenu module

PrestaBrain Theme includes the fantastic Megamenu built from Ps MegaMenu module. The Megamenu module comes with visual configuration panel, no coding is required. In PTS Megastore, we build up Megamenu.

#### Megamenu

To configure the module, go to MODULES → Modules, in the MODULES LIST, search Ps MegaMenu module then click on Configure.

The module comes with visual configuration panel that allow you to build menu your way easily.

Follow our video guide below. Please note that the video is the same for both Megamenu

### Ps Layer Slider

To edit database of module, in your Prestashop admin dashboard, navigate to MODULES → Modules. Go to MODULES LIST section, search Leo Slider Layer for your homepage module then click on Configure.

If you use Page Builder, please refer to Ps Page Builder module to configure information and position of the module.

- Download Slideshow Default

#### 1. General Setting

Parameter explanation.

- Add new group: create unlimited groups, each group includes multiple slideshow items.
- Manage group: all created groups will be listed here, you can edit any group and manage sliders in each group
- Choose file: you can browse an back-up file to import
- Override group or not: when you import a group, if the group is duplicated with any group, you can select to override or not.

#### 2. Group Setting

Parameter explanation.

- Group title: add title of group, it's to manage groups easily.
- Active: enable this option to publish the group so that you can get the group displayed in front-page
- Show in hook: select hook the module will be displayed in
- Auto play: select whether to auto display slideshow items
- Delay: set the delay duration for the auto play
- Slideshow with mode: select mode to display slideshow: boxed, fullsize, fullscreen
- Medium and Large Desktops Width: set the width size of slideshow in medium and large desktop layout
- Small tablets width: set the width size of slideshow in small tablet layout
- Touch mobile: if enable, touch option will be enabled in mobile layout for slideshow
- Stop on hover: enable this option if you want to pause the auto play when user hover slideshow
- Shuffle Mode: enable or disable shuffle mode

#### 3. SliderSetting

In the general setting, click on Manage Sliders of group that you want to configure.

In the setting panel, it lists out all sliders of the group. You can select to configure/delete/duplicate any slider. You can create new slider by clicking on the "+" button on the right top corner.

Parameter explanation.

- Slider title: add slider title
- Active: enable to publish the slider and it can be displayed in front-page
- Transition: select transition for the slider, it supports many transition types
- Slot amount: set number of slots for slider when transitioning
- Transition rotation: set rotation for transition
- Transition duration: set duration for transition
- Enable link: enable link so that you can add link for slider.
- Link: add link for the slider
- Thumbnail: you can browse any image to be displayed as thumbnail for the slider.
- Video: you can enable video embed for slider, it supports 2 video types: vimeo and youtube.

Please follow our video guide to build professional slideshow your way

### Pts Related Products

To configure the module, in your Prestashop admin dashboard, navigate to MODULES → Modules. Go to MODULES LIST section, search Pts Related Products module then click on Configure.

- Module Detail setting screenshot

### Pts Map Locator

There is a map display in contact page.

To configure the module, in your Prestashop admin dashboard, navigate to MODULES → Modules. Go to MODULES LIST section, search Pts Map Locator module then click on Configure.

- Module Detail setting screenshot

## Default Prestashop Modules

These are default Prestashop modules but it's style has been customized to fit the theme design.

### Categories block

The module is to display list of categories in your Prestashop category page.

In your Prestashop admin dashboard, navigate to MODULES → Modules. Go to MODULES LIST section, search Categories block module then click on Configure.

- Module Detail setting screenshot

### Layered navigation block

The module allows you to display products follow filters and searching product groups quickly.

In your Prestashop admin dashboard, navigate to MODULES → Modules. Go to MODULES LIST section, search Layered navigation block module then click on Configure.

- Module Detail setting screenshot

## Getting Support

If you are unable to find your answer here in our documentation, please go to our forum and post up a new topic with all the details we need. Please be sure to include your site URL as well or send us an email.

### Our support scope

Our support covers configuration, building site as demo, trouble using any features, and bug fixes. We don't provide support for customizations or 3rd party extension.

### Our support time

We try our best to monitor the email around the clock, however, this is not always possible due to different time zones. We will try to reply you as fast as we can.

Our working time is 8.00 AM - 5.30 PM, Monday to Friday (GMT+7). So if ask for help in the weekend, you may have to wait a little bit for support and please be patient.