Embed Size (px)
Citation preview
Introduction
What is PrestaShop e-commerce?
PrestaShop is an e-commerce solution which is free for the basic kernel and open source. It supports payment gateways
such as Google checkout, paypal or payments pro via APIs.
PrestaShop is available under the Open Software License and officially launched in August 2007 for dd to medium-sized
businesses. The software, which is based on the Smarty template engine, is used by several thousands of shops
worldwide.
What is PrestaShop template?
PrestaShop template is a theme for PrestaShop e-commerce solution. It provides you with vast variety of customization
opportunities and allows you to create an online store that fully meets your needs.
Template structure
The template package you have downloaded consists of several folders. Let's see what each folder
contains:
screenshots
sources
custom_html
psd
favicon.png
theme
manual_install
theme####
img
modules
themes
dump.sql
themeinstallator
theme####.zip
documentation.txt
info.txt
- contains template screenshots. Not for production
- contains template source files
- custom HTML files
- template Adobe Photoshop source files (.psd)
- favicon image
- contains PrestaShop theme files
- contains files for manual installation
- images for manual installation
- modules for manual installation
- theme files for manual installation
- sample data file for manual installation
- contains an archive for automatic theme installation
- theme archive. Contains all theme files. It is installed using standard PrestaShop
installation method
- contains link to online theme documentation
- contains instructions on extracting source files
Getting started
Preparation
Before you proceed to setting up your PrestaShop e-commerce, please make sure you are fully prepared. Please check the
following points:
Editing software
To feel comfortable working with your PrestaShop template, we recommend you to download all required applications.
You can see the list of required software on the template preview page. Requirements may vary depending on the
template. We're going to tell you in general what's needed:
Server requirements
Please make sure your hosting server meets the PrestaShop requirements:
Using the local server
You can run PrestaShop locally on your computer using the local server. To create a local hosting server, please use the
localhost applications, such as WAMP, AppServ, XAMP, etc. Any of those can be easily installed as any other program
and used to run PrestaShop.
Please check the tutorials below on how to configure a local development environment:
Downloading
To install PrestaShop, you need to download the PrestaShop engine package from the official website at
www.prestashop.com/en/downloads
Just insert your name and e-mail into the Download box input and click the 'Download' button.
Extracting Files
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 (Windows), StuffitExpander (Mac), etc.
Please check the following tutorials on how to extract files from the archives with WinZip (Windows) and StuffitExpander
(Mac).
Uploading PrestaShop engine files
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.
You can check the detailed video tutorial on how to upload files to server using FTP manager and how to upload files to a
server using cPanel (WebHost Manager, WHM).
First of all, you need application to extract the password protected sources_#########.zip archive. You can use
WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac).
1.
You may also need Adobe Photoshop application. It's used to edit .PSD source files and it's necessary if you want to
edit template design graphics and images.
2.
To edit the template source code files, you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text,
etc.
3.
To upload files to the hosting server, you may need an FTP Manager like Total Commander, FileZilla, CuteFTP, etc.4.
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, and nginx 1.0 or later.
PHP 5.4 or later.
MySQL 5.5 or later.
At least 128 Mb of RAM on your server (64 Mb is comfortable, the more the better).
PrestaShop will work with PHP 5.1 or later, but the versions lower than 5.4 have bugs
which might prevent some functions from working as expected (like invalid date
timezone).
How to install AppServ web development environment
How to install WAMP web development environment
How to install XAMP web development environment
Please make sure your version of PrestaShop engine matches the template
requirements. All versions of PrestaShop are available at SourceForge.
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.
PrestaShop engine installation
When you are done with the files upload, you can start the PrestaShop engine installation. Open your web browser and
type in the 'domain name/path to your PrestaShop directory' in the address bar, then reload the current page. You should
see the welcome screen. Please follow the instructions below to install PrestaShop.
Installation Assistant (Choose your language)
Please select the installation language.
When you are done, click the 'Next' button.
Installation Assistant (License agreements)
System Compatibility
Check the PHP settings and directory permissions. In case of any errors, please contact your hosting provider for further
assistance.
If everything is correct, click the 'Next' button.
Shop configuration
This step requires you to enter the store settings like Shop name, activity, country, timezone, etc.
All these settings can be changed later in your PrestaShop administration panel.
System Configuration
If you already have a MySQL database, please enter the database details into the appropriate fields below.
Otherwise, you can get the database details from your hosting control panel or by contacting your hosting provider.
When you are done, click the 'Next' button.
Installation is complete
This is the final step of the installation.
If you face any difficulties, please check the official PrestaShop installation manual.
Please make sure your version of PrestaShop engine matches the specified version in
"Technical Details" tab, mentioned as "PrestaShop Engine: 1.X.X.X".
Also, make sure your database tables prefix is ps_. Install sample data only if your
PrestaShop engine matches the specified version.
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.
Please check the license agreement (1).1.
When you are done, click the 'Next' (2) button.2.
For security reasons you need to delete the /install/ directory on your hosting server.
Starting with version 1.5.4, PrestaShop takes care of renaming the administration
folder for you: it becomes the word "admin" followed by 4 random digits, i.e.
"admin8814." The renaming happens as soon as you reach the "admin" folder for the
first time: PrestaShop renames it, then correctly accesses the renamed folder.
Log into the PrestaShop back office by going to your newly renamed "admin" folder,
and start filling your catalog with your data.
Template installation
Import theme
Template preparation
Before you proceed, please make sure you have already downloaded the template and extracted the files from the
template package. You can check detailed tutorials on how to extract files from the template package using WinZip and
StuffitExpander.
When the files are extracted, you can proceed to uploading the template.
Installation
Log into your PrestaShop admin panel and navigate to Preferences -> Themes. At the top of the page click Add new
theme button (1).
Click Add file button (1) in Import from your computer section. Navigate to previously unzipped template package and
open themeinstallator folder.
Select your theme .zip file and click Save (2).
The uploading process will be started. You will see the message that the theme has been successfully uploaded. Your new
theme preview will appear in the list of installed themes.
In order to activate the theme, hover the cursor over the theme preview icon and click Use this theme.
Note: this method does not provide sample data installation.
Manual template installation with sample data
To make your PrestaShop store appear the same as template live demo, you need to install sample data. It will contain all
demo products, categories, modules and store settings.
Uploading template files
To upload the template to your server:
Installing Sample data
Sample data is provided as an .SQL file. It is located in the theme/manual_install/ of the template package and is called
dump.sql.
The dump.sql file can be installed using the phpMyAdmin tool or some other database management tool in your hosting
control panel. This detailed tutorial on how to install SQL files can help you.
When you are done with installing the dump.sql file, you will need to activate the template.
From the PrestaShop admin panel, go to Design > Theme & Logo, choose your template in the Themes section and click
'Save' button.
Please do not use the sample data for your running website! This will replace all your
store products and store settings.
Please make sure your version of PrestaShop engine matches the specified version in
"Technical Details" tab, mentioned as "PrestaShop Engine: 1.X.X.X".
Also, make sure your database tables prefix is ps_. Install sample data only if your
PrestaShop engine matches the specified version.
Open the template package.1.
Then go to the /theme/manual_install/ folder.2.
Upload /img/, /modules/ and /themes/ folders to PrestaShop root directory.3.
You can check the detailed video tutorial on how to upload files to server using FTP
manager and how to upload files to a server using cPanel (WebHost Manager, WHM).
Before you proceed, please back up your database. You can check the detailed video
tutorial on how to back up a database.
Please make sure your version of PrestaShop engine matches the template
requirements. Otherwise, the database will be damaged.
Adding languages to online store
Once the multi-language template is installed, you will be able to add all languages provided with it (English, French,
Spanish, German, Russian) to the online store platform. It can be done this way:
Go to 'International > Translations' in the admin panel, find 'ADD/UPDATE A LANGUAGE' and add languages by choosing
them from the drop-down menu (1) and clicking the 'Add or update a language' button (2) .
If you do not want to have some languages, you can delete them (2) or turn them off (1) in the 'International >
Localization > tab Languages' menu.
Modules installation
Each template is provided with some specific module settings. To make the modules appear the same as on the demo
preview, you will need to configure them. All modules can be configured in the PrestaShop admin panel.
In your PrestaShop admin panel, select Modules > Modules and Services from the main menu.
The section id divided into 3 tabs - Selection, Installed modules and Notifications.
To install a module, open the 'Selection' tab, locate it in the list and click the 'Install' (1) button.
You can manage your modules in 'Installed modules' tab.
Using the module links you can configure it (Configure link), uninstall the module (Uninstall link), activate/deactivate
them (Enable | Disable links), or reset their settings to default (Reset link).
After activating the necessary modules, you need to assign them to correct positions.
In PrestaShop admin panel, select Design > Positions from the top menu. You can place a module in the required position
by clicking the arrow buttons (1) or dragging it up or down in the modules list.
Configuring images
In PrestaShop you can use predefined image dimensions for product images, category images, manufacturers, etc.
For example, images of the 'home' dimensions are usually used for the product images on category listings, 'large' for
main product image on the product info page.
To configure product image dimensions, open your PrestaShop admin panel, go to Design > Image Settings .
Selection - selection of modules recommended for your shop (based on your country, language and version of
PrestaShop); it includes the most popular modules from Addons marketplace, and free partner modules.
Installed modules - all the modules you’ve added to your shop, either by buying it from PrestaShop Addons, or by
uploading it directly.
Notifications - list of modules which require your attention: you need to take some action to ensure they are fully
operational (configure or update them).
Basic tutorials
How to change info about your store
Open the PrestaShop admin panel, go to Shop Parameters > Contact and open the tab Stores.
First you'll see the list of stores in Stores section. Here you can enable/disable, add/delete or edit each store.
How to change store name
In Contact Details block you can change the main info about your store - its name (1) and other contact details. Don't forget to press the 'Save' button
(2) after editing.
To edit the info on one particular store, choose the store you want to edit in Store Contacts and click 'Edit' (1).
Here you can edit all info concerning your store contacts (such as store's name, address, status, picture, working schedule etc.)
After it's done, click the 'Save' button (1).
How to edit slider
First navigate to Modules -> Modules and Services in the admin panel of your PrestaShop store (1) and open the tab
'Installed modules'. Then find the Image slider module and press the 'Configure' button (2) to edit the module.
On the screen that appears next you'll be able to set the main properties of your slider like speed of changing slides, the
pause on hover and loop option.
After you've changed it, press the 'Save' button (1).
To add a new slide find the '+' button in the top right corner of Slides list section (1) and click it.
If you want to edit the existing slide, click the 'Edit' button (2).
Further process is quite simple. In 'Slide Information' section fill all the required fields and 'Save' (1) it.
Custom modules and extensions
TM Categories Badges
This module allows to add badges to the sidebar categories of the default Prestashop Categories module
("Blockcategories"). The badges can be added to the category of any level and in any language. The text field of the label
is mandatory and should be filled in all languages. If this field is left blank in any language, then it will automatically take
the text of the default language.
Installation and Deleting
The module is installed and deleted like any other Prestashop module.
Module Configuration
After installation you can change its settings on the module configuration page.
You can add badges to any category after selecting it from the drop down list.
Then, you can add text that will show up in the badge and select the style from the drop-down list (the styles may differ in
different templates).
Then press the 'Save' button (1).
You can see the list of existing badges below. Here you can edit or delete badges with the help of corresponding buttons.
The module is multilanguage and supports multi-stores. You can add badges for group of stores or all stores at once.
They will show up in the list as separate elements.
Attention! You can add only one badge for each category.
TM Category Image Slider
Module allows creating multilingual slides for any category of the store. Slider will be displayed on the category pages.
Installation and Removal
The installation procedure is standard, module can be installed and deleted as a regular PrestaShop module.
Module settings
After the module installation, you can set or change the needed options on the module configuration page.
Adding/removing/editing slides
After the module installation, you will see the new field 'Slides' in category settings.
To add a slide, click on the 'Add new slide' button. Fill in the needed fields in the form.
When the slide is saved, it will appear in a category slides list.
In order to make changes to slide, click the 'Edit' button.
In order to delete the slide, click on 'Delete' below the 'Edit' button.
Mode - type of animation (fade, vertical, horizontal).
Speed - animation speed.
Width - slides width (for the correct view, it is recommended using the actual image width).
Height - slides height (for the correct view, it is recommended using the actual image height).
Auto - autoplay when page is opened.
Pause - time before transition to the next slide.
Auto Hover - pause on hover.
Controls - "Next"/"Previous" buttons.
Next Text - "Next" button text.
Prev Text -"Previous" button text.
Auto Controls - "Play"/"Pause" buttons.
Pager - pagination.
Select a file - select your file. You can upload different images for each language. In case there is no image selected
for the specific language, images set for default language will load.
Enter Slide title - type in the slide title.
Enter Slide Url - provide the slide URL.
Enter Slide caption - type in the slide caption.
Open in new window - open in new window.
Status - enable/disable slide.
Slides can only be added to saved categories.
TM Category Products 2.0.0
This module displays category products in displayHome and displayHomeTabContent hooks. The module allows
displaying single products, products from a category or all products. Moreover, the module comes with a carousel that
works, when the module occupies the displayHome position.
TM Category Products Main Panel
The main panel. Here you can set up the module.
Adding a Tab
Tab is a block that displays products in displayHomeTabContent position.
Adding a block
This block allows selecting products in displayHome position.
Blocks/Tabs Sorting
You can sort the blocks of the module with the help of drag'n'drop. This allows to change blocks and tabs positions
quickly.
Selecting Products
If you create an item and enable 'Select products to display' option, you can choose the products that you want to display.
To do this:
Deleting Blocks/Tabs
To delete items, press the drop-down menu next to the needed block/tab (1) and press delete (2). The item will be deleted.
Navigate to the module main panel and press the 'plus' (1) button in the tabs list.1.
In the appeared form, you'll see the following options:2.
Status - this option allows enabling/disabling the tab.
Select category - the category, products of which will be displayed.
Use custom name - this option allows changing the displayed category name. If enabled, the following form will be
displayed:
Name - the custom tab name, displayed on the website.
Select products to display - if disabled, displays the 'Number of products to display' field, which sets the number of
products to display. If enabled, displays the 'Add products' button that allows selecting products to display in the tab.
After configuring all the needed options, press the 'Save' (2) button.3.
Access the module main panel and press the 'plus' (1) button in the blocks list.1.
In the appeared form, you'll find the following options:2.
Status - this option allows enabling/disabling the block.
Select category - the category, products of which will be displayed.
Use custom name - this option allows changing the displayed category name. If enabled, displays the following
form:
Name - the custom tab name, displayed on the website.
Select products to display - if disabled, displays the 'Number of products to display' field, which sets the number of
products to display. If disabled, displays the 'Add products' button that allows selecting products to display in the
tab.
Use carousel - this option allows enabling/disabling the carousel for block products. After enabling the option,
you'll see the following settings:
Visible items - the number of visible items.
Items scroll - the number of items changed with one carousel scroll.
Slide Width - the carousel list item width.
Slide Margin - the carousel list item margin.
Auto scroll - auto scroll of carousel items.
Carousel speed - speed of changing items.
Pause - pause between scrolls (if "Auto scroll" is enabled).
Random - the carousel starts with a random item.
Carousel loop - the loop: when all the carousel items have been displayed, carousel starts from the beginning.
Hide control on end - hide control buttons (Next/Prev).
Pager - display pagination.
Control - display controls (Next/Prev).
Auto control - display controls (Play/Pause).
Auto hover - carousel pauses, if the user hovers a list item.
After configuring all the needed options, press the 'Save' (2) button.3.
Press the 'Add products' (1) button:1.
In the appeared pop-up, select the needed products (2) and press the 'Add' (3) button:2.
Now, you can place the added products wherever you want with the help of drag'n'drop (4):3.
When all the needed products are added and arranged in the desired order, press the 'Save' button.4.
TM Google Map 1.2.0
This module allows adding Google Map with store locations and store short descriptions to the Homepage. The map will
display the addresses of all the stores connected with your online store.
Installation and removal
The module is installed and removed as any other PrestaShop module.
Module settings
After installing the module, you can add stores to the map. After pressing the 'Add new store' button (1), you'll be
redirected to the 'Store contacts' tab, where you can edit your stores.
To add a new store, press the 'Add new' button.
Google Map display settings
Select a store - select the store that you want to add to the map.
Status - the element status.
Marker - adding a custom marker.
Custom text - adding custom text.
Map Style - select the map display style.
Map Type - select the map display type.
Zoom Level - specify the initial level of the map zoom (from 1 to 17).
Zoom on scroll - enable/disable map zoom on scroll.
Map controls - enable/disable map controls.
Street view - enable/disable street view.
Animation marker - enable/disable animation marker.
Popup - enable/disable popup windows with store information.
TM Header Account 2.0.0
This module displays login and registration forms on the website. It can take the following positions: website header, left
and right column. The module allows to log in and register using such social networks as Facebook, Google+ and VK,
which is convenient for website users. Registration or logging in proceeds without reloading the page.
TM Header Account Main Panel
The main panel. Here you can set up the module.
Settings
There are the following settings in the module:
Registering apps in social networks:
Display type - this setting allows to select the way to display the registration form. It can take the following values:1.
Drop down - the form will display as a drop-down below the button opening it.
Popup - the form will appear in a pop-up.
Left side - the form will appear from the left as a sidebar.
Right side - the form will appear from the right as a sidebar.
Display style after login - this setting allows to change the form view after login/registration. You can use the
following values:
2.
Two columns - the list is divided into two columns.
One Column - the list of links is displayed as one column.
Default avatar - this field appears only if the 'Display avatar' option is enabled. Here you can select the default user
avatar.
3.
Display avatar - this setting allows to enable or disable user avatar. If the user logs in to the account on the website
with the help of one of the social networks, the avatar will be taken from the account in this social network, otherwise, the
avatar, loaded by the website admin, will be displayed.
4.
Use redirect - if this setting is enabled, user registration and password recovery will take place on the default
PrestaShop registration/password recovery page.
5.
Use Facebook Login - this setting allows to enable user registration and login with the help of Facebook social
network. When you enable this option, you will see the following settings:
6.
App ID - your account App ID from the Facebook developer account.
App Secret - your app secret from the Facebook developer account.
Use Google Login - this setting allows to enable user login and registration with the help of Google+ social network. If
you enable this option, you will see the following settings:
7.
App ID - your App id from the Google developer account.
App Secret - your App secret from the Google developer account.
Redirect URIs - your online-store url + index.php?fc=module&module=tmheaderaccount&controller=googlelogin
Use VK Login - this setting allows to enable user registration and login with the help of VK social network. If you
enable this option, you will see the following settings:
8.
App ID - your App id from your VK developer account.
App Secret - App secret from your VK developer account.
Redirect URIs - your online-store url + index.php?fc=module&module=tmheaderaccount&controller=vk
Facebook - to get App ID and App Secret, register your app at https://developers.facebook.com/apps.
Google+ - to get App ID and App Secret, register your app at https://developers.google.com/accounts/docs/OAuth2/.
VK - to get App ID and App Secret register your app at https://vk.com/dev.
TM Homepage Category Gallery
The module displays a category gallery on your store Homepage.
It should look something like this:
Here are the main parts of the Category Gallery item, which are marked on the screenshot:
1 - HTML content
2 - category name
3 - category description
4 - button
Customization details you can find below in 'Module configuration' section.
Module Installation
The module can be installed and deleted like any other PrestaShop module.
Module configuration
Adding/Editing item options
When you add new item to the module (or edit the one from the list of items), you have some options to choose. The
detailed description of options you can see below the screenshot. After all options are set, click 'Save' button (1).
After you have installed TM Homepage Category Gallery module, you can configure it clicking the corresponding
button (1).
1.
On the Configuration page you'll see the list of items in this module. You can edit the existing ones (1) or add new item
(2).
2.
Please note: category name, description and image are loaded from the category
properties and there's no need to add them manually. To edit these options, go to
Admin panel -> Catalog -> Categories -> choose category -> Edit.
Select category - here you choose from the dropdown list the category which should be displayed on your page.
Specific class - the specific class can be added to the module item.
Display name - option to show or hide the category name.
Category name length - maximum number of symbols to be displayed in the category name. If the name is longer - the
'..' symbol will be added after the number of symbols that has been set.
Display description - option to show or hide the category description.
Description length - maximum number of symbols to be displayed in the decription. If the decription is longer - the '..'
symbol will be added after the number of symbols that has been set.
Sort order - the order of item in the category gallery.
Display button - the option to show or hide the button 'Shop now' (button text can be different depending on the
template).
Status - the option to show or hide the category
HTML content - the field where some HTML content can be added.
TM Homepage Products Carousel
The module adds a carousel to the main page tabs.
Installation and Deleting
The module can be installed and deleted like any other PrestaShop module.
Module configuration
The installed module settings can be configured on the module configuration page.
Use carousel - enable/disable carousel
Number of elements to display - the number of items to display
Items scroll - the number of items to scroll
Item Width - width of an item in the carousel list
Item Margin - margin between items in the carousel list
Carousel speed - item transition duration
Pause - the amount of time between each auto transition (if the "Auto scroll" option is enabled)
Auto scroll - enable carousel auto scroll
Random - start carousel from a random item
Carousel loop - carousel returns back to the beginning when all elements have been scrolled
Hide control on end - hide the navigation (next/previous) buttons on last slide
Pager - show pagination
Control - show next/previous buttons
Auto control - show play/pause buttons
Auto hover - pause the carousel when mouse hovers over carousel items
TM HTML Content
This module allows to display any content (image, HTML, links, etc.) in the following positions: displayNav, home, top,
topColumn, left and right (displayLeftColumn/displayRightColumn), footer. It is used to expand design opportunities and
add advertisement/information blocks to your store. It is a multilanguage module and can also work in the multistore
website.
Installation and Deleting
The module can be installed and deleted like any other PrestaShop module.
Module configuration
After the module has been successfully installed, open the configuration page.
To add the content, you should follow the steps below:
Adding the element. Click Add item button and fill in the required settings (none of the fields are
mandatory).
Editing and removing the element
When you add the element, it shows up in the corresponding list.
Editing
Click Edit button to modify the element.
In the appeared screen change all the required fields.
Changing order of elements in the list
To change the order of elements, you should just drag the element to the position you need.
Click 'Add new' button.1.
The list of available languages. You can view the available elements for all languages by switching the language tabs.2.
The list of elements added for specific position and language.3.
All elements of one language added to the same position will be displayed as a list at
the backend and frontend.
Language - select the required language from the drop-down list.
Title - title of the element.
Use title in front - display the title of the element at the frontend (the title will show up in front of the element).
Hook - position where the element is added.
Image - upload the image from your computer.
Image width - image width shown at the frontend.
Image height - image height shown at the frontend.
URL - add the link (the whole block will be wrapped in the link).
Target blank - open link in new tab.
HTML - HTML code (except the link if you have added it in the URL field) or text.
Save - click to save the element.
The language where the elements were added.1.
Position where the elements were added.2.
Edit button with the drop-down list.3.
Delete button.4.
Enable - display the element at the frontend.
Image title - title of the element.
Use title in front - show up title at the frontend.
Hook to which the image should be attached - position of the element.
Load your image - image of the element.
Image width - image width at the frontend.
Image height - image height at the frontend.
Target link - assign link to the element.
Open link in a new tab/page - Open link in new tab.
Optional HTML code - edit HTML code.
Save - save changes.
TM Look Book
Requirements:
This module allows to create lookbooks and combine them to collections. In their turn, lookbooks allow to view the
products directly on the model. Also, if a product is marked in the lookbook, the module displays the lookbook link on the
product page.
TM Look Book Main panel
On the main page of the module, you can delete and edit the module collections.
Adding and editing the collection
Collections allow to combine several lookbooks on one page. To add a collection, follow the next steps.
Creating and editing lookbooks
Adding and Editing Hotspots
After having saved the lookbook, you can add the hotspots.
Deleting a hotspot
Changing the hotspot position
To change the point position, drag and drop it to the needed position.
How to navigate to the collections page?
Navigate to the main module page and press the button (1), you'll see a page with all the collections. You can add the links
to the lookbooks to any module that supports custom content.
PHP 5.4+
PrestaShop 1.6+
In the collections table (the main module panel) click on the plus (1).1.
You will see a form with the next fields:2.
Status - this option allows to disable or enable the collection display on the collections page.
Name - the name of the collection that will be displayed on the collections page.
Description - the collection description.
Image - the main collection image.
Template - the template for the lookbooks of this collection. When you select a template, you select the way the
lookbooks of this collection will be displayed on the page.
After having filled all the fields, press the 'Save' (2) button.3.
The collection has been created. You can edit it by pressing the 'Edit' (3) button, or you can proceed to the next step
and create lookbooks for the collection.
4.
After creating a lookbook, press the 'View' (1) button next to the needed collection.1.
In the appeared block press the '+' button (2).2.
You'll see a form with the following options:3.
Status - the lookbook status, the option defines whether the lookbook will be displayed.
Name - the name of the look.
Description - the description of the look.
Image - the main image of the look, here you can mark the products and descriptions.
After filling in all the fields, press the 'Save & Stay' (3) button to continue creating hotspots.4.
Press the image (in the needed point) (1) in the lookbook form.1.
You will see a form with the following settings:2.
Type - this is the point type, it has two values 'Product' and 'Content'. The product type allows to select a product that
will be attached to the point, and content type allows to add content (name, description, html) to the point.
Product - selecting a product for the point. It appears, if the selected type is 'Product'.
Name - the name attached to the point. This field is available, only if the type 'Content' is selected.
Description - the point description or coding. Available only if the type 'Content' is selected.
After having selected the needed options, press the 'Save' (2) button, hotspot will be created and displayed on the
page.
3.
To delete a point, hover over it (1).1.
You'll see a button with a cross, press it (2).2.
The point is deleted.3.
TM Manufacturers Block
This module shows up manufacturers available in your store. The list of manufacturers may consist of image and title.
The list can also show up as a carousel.
Installing and Deleting
The module is installed and deleted like any other Prestashop module.
Module configuration
After installation you can change its settings on the module configuration page.
* - settings are available only if carousel is enabled.
After all options have been set, press 'Save' button (1).
The module supports multi-stores.
Order by - type of sorting items of the block.
Display name - show the manufacturer's name.
Display image - show the image of the manufacturer.
Number of elements to display - type the number of elements displayed in the module.
Image Type - select the image type (you can select the image from the images related to the manufacturer).
Use carousel - show up the list as a carousel.
* Visible items - number of visible manufacturers.
* Items scroll - number of manufacturers shown in one carousel scroll.
* Slide Width - the width of the element in the carousel.
* Slide Margin - the margin of the element in the carousel.
* Auto scroll - automatic scrolling.
* Carousel speed - speed of the carousel.
* Pause - pause between scrolls (if "Auto scroll" is enabled).
* Random - carousel start from the random element.
* Carousel loop - carousel returns back to the beginning when all elements have been scrolled.
* Hide control on end - hide next/previous buttons.
* Pager - show pagination.
* Control - show next/previous buttons.
* Auto control - show play/pause buttons.
* Auto hover - pausing when hovering over carousel elements.
TM Media Parallax 2.0.0
This module is designed to let you add parallax effect to the DOM items of the page. It allows you to create multi-layered
parallax. It also provides a possibility to add a custom background video (you can upload it from your computer to server)
or add a YouTube video.
TM Media Parallax Main Panel
Main module panel that allows you to add, edit or remove parallax items.
Creating a new parallax item
In order to create a new parallax item, press 'plus' (1) icon, in the top right corner of the main panel.
Then you will see the following form.
Form options for adding parallax items
Press 'Save' after filling in all the required fields.
Parallax layers list
In order to see the list of parallax layers, you should press 'View' (1) near the main parallax item.
Then you'll see a table, in which the layers are displayed after they are added.
Adding new layer
In order to create a new parallax layer, press 'plus' (1) icon in the top right corner of the layers panel.
Then you will see the following form.
Press 'Save' after filling in all the required fields.
Parallax layers types and their fields
Uploading video and images to server
In order to upload video or an image to server via File Manager, first you need to press 'file' (1) icon next to the needed
field.
In the following window, in the 'actions' line, choose 'upload' (2).
Then you'll see one more pop-up window, to upload image or video file here.
Warnings and recommendations
Selector - CSS selector of the item with parallax effect applied. For example, '#header .nav'
Item status - item status (parallax will not be displayed if it's disabled)
Speed - digit value from 0 to 2, which defines main parallax block speed
Offset - main layer indent on the Y axis
Inverse - parallax direction
Fade - this option allows to configure main block fade-out on page scroll
Forced full width - forced full width of the parallax block
Image-background - image used as a parallax background1.
Item status - item status (parallax will not be displayed if it's disabled)
Layout speed - digit value from 0 to 2, which defines main parallax block speed
Offset - main layer indent on the Y axis
Inverse - parallax direction
Fade - this option allows to configure main block fade-out on page scroll
Image - link to an image, to which parallax effect will be applied
Sort order - layout position, relative to the rest of items
Video-background - video used as a parallax background2.
Item status - item status (parallax will not be displayed if it's disabled)
Layout speed - digit value from 0 to 2, which defines main parallax block speed
Offset - main layer indent on the Y axis
Inverse - parallax direction
Fade - this option allows to configure main block fade-out on page scroll
Image - link to an additional image
Video parallax mp4 - video in mp4 format
Video parallax webm - video in webm format
Sort order - layout position, relative to the rest of items
Text - text layer which position can be defined with CSS3.
Item status - item status (parallax will not be displayed if it's disabled)
Layout speed - digit value from 0 to 2, which defines main parallax block speed
Offset - main layer indent on the Y axis
Inverse - parallax direction
Fade - this option allows to configure main block fade-out on page scroll
Content - layer content
Specific class - custom CSS class for this layer
Sort order - layout position, relative to the rest of items
Youtube-background - YouTube video used as a parallax background4.
Item status - item status (parallax will not be displayed if it's disabled)
Layout speed - digit value from 0 to 2, which defines main parallax block speed
Offset - main layer indent on the Y axis
Inverse - parallax direction
Fade - this option allows to configure main block fade-out on page scroll
Video id - YouTube video ID
Sort order - layout position, relative to the rest of items
Image - image layer which position can be defined with CSS5.
Item status - item status (parallax will not be displayed if it's disabled)
Layout speed - digit value from 0 to 2, which defines main parallax block speed
Offset - main layer indent on the Y axis
Inverse - parallax direction
Fade - this option allows to configure main block fade-out on page scroll
Image - link to an image, to which parallax effect will be applied
Specific class - custom CSS class for this layer
Sort order - layout position, relative to the rest of items
Mobile devices (smartphones, tablets) have parallax effect disabled by default, the uppermost block image layer is
used as a background instead
1.
Forced full width of the parallax block affects page loading speed more critically than a regular fullwidth block loading2.
The smaller the size of the uploaded video, the better.3.
TM Mega Menu
The module is designed to create complex menus. The module provides the ability to display one item (without sub-menu),
a menu item with a sub-menu and a menu item with sub-menu by means of a multi-row and multi-column block. The
module can be used in different positions, but it will display the same content. Available positions: top (displayTop), left
(displayLeftColumn), right (displayRightColumn), footer (displayFooter). You can add categories (with subcategories),
CMS categories (with subcategories), manufacturers (one or a list), suppliers (one or a list), stores (if multistore is used),
links to any product, information block about the product, custom links (not limited in quantity), custom HTML blocks
(not limited in number) and banners. See below for more details.
TM Mega Menu Tabs
TM Mega Menu tabs are the basic items which are the top menu part.
In order to create a new tab, open the TM Mega Menu module and click '+' in the Tabs list table.
In the form that appears, fill in the required fields.
* It is Mega Menu. If this option is selected, there will be a form to create a complex menu (Mega Menu).
** Use simple menu. If this option is selected, there will be a form to create a simple menu. This is a menu that displays the
selected content in a single column. If the menu has embedded content, the new column is added.
Complex menu consists of rows and columns in rows.
The Row is a part of the Mega Menu structure. It includes the menu columns. The existing row can be removed by
clicking the appropriate button. The row will be removed with the content it includes. The rows quantity is not limited.
The Column is a part of the Mega Menu structure, which is placed inside the rows. (The Class) The width of the column
cannot be less than 2 and more than 12. In order to make the menu display properly, the total column width cannot
exceed 12. The width (class) is a Bootstrap column type, corresponds to the same values.
In order to create the menu, click the 'Add row' button.
In the form appeared, click 'Add column' button.
In the pop up window you need to specify the column class (from 2 to 12). The column itself appears next where you need
to set the required settings.
Here you can change the column class, CSS class and the content from the list provided. You can add/remove content by
double clicking the item, or by highlighting the items and clicking the corresponding button.
Block can be removed by clicking 'Remove block' button in the footer of the block.
By removing the row, the included columns are also removed.
In order to move the content available in the selected menu, double-click or highlight the desired content and press the
corresponding button.
Inactive menu information is saved while switching between menu types and you can always change the type of menu.
TM Mega Menu HTML
In this section we will explain how to create a custom HTML block in the Mega Menu.
The module has a table listing all the available blocks. You can also add a new block by clicking the '+' button in the top
right of the table.
In the form that appears, fill in the required fields.
Added block will appear in the list of blocks, as well as in the list of available content while creating menu blocks.
TM Mega Menu Links
In this section we will show how to create custom links in the Mega Menu.
The module has a table listing all the available links. You can also add a new link by clicking the '+' button in the top right of
the table.
In the form that appears, fill in the required fields.
Added link will appear in the list of links, as well as in the list of available content while creating menu blocks.
TM Mega Menu Banners
In this section we will explain how to create banners in the Mega Menu.
The module has a table listing all the available banners. You can also add a new banner by clicking the '+' button in the top
right of the table.
In the form that appears, fill in the required fields.
Added banner will appear in the list of banners, as well as in the list of available content while creating menu blocks.
Enter tab name - the tab title which is mandatory to be filled in for the default language, if the additional languages
fields are not filled in, the tab takes its name from the default language.
Active - active/inactive tab.
Link - a link that is assigned to this tab. You can enter a custom link, or choose from existing options (categories,
CMS categories). If you leave the field blank, the link of this tab is inactive.
Sort order - the order of tabs to be displayed.
Specific Class - the class which is added to emphasize the item (CSS class).
Enter tab badge - is filled in depending on multi-languages.
It is Mega Menu - given tab sub-menu is a Mega Menu. *
Use simple menu - given tab sub-menu is a simple menu. **
Enter HTML item name - HTML block name, is mandatory to be filled in for the default language.
Specific class - block's CSS class.
HTML content - HTML content.
Enter Link name - link name, is mandatory to be filled in for the default language.
Enter Link URL - link URL, is mandatory to be filled in for the default language.
Specific class - block's CSS class.
Open in new window - open link in a new window.
Select a file - select a file, is mandatory to be filled in for the default language.
Enter Banner name - banner title, is mandatory to be filled in for the default language.
Enter Link URL - link URL, is mandatory to be filled in for the default language.
Specific class - block's CSS class.
Open in new window - open link in a new window.
TM Mosaic Products
This module allows you to display categories with products, banners, video (Youtube, Vimeo and custom video), HTML
content, various sliders with different number of slides and dimensions in any row on the site home page.
Installation and Deleting
The module is installed and deleted like any other PrestaShop module.
Module settings
After module has been installed, you can add the required blocks with category products, previously added banners, video
and HTML content.
Adding/removing/editing Blocks
In order to add a new category, press the "Add new" button.
In order to add the new row, press the "Add row" button. Then choose one of the eight layouts presented in the following
window.
In order to add the layout, click on one of the eight options to pick it, and it will be added to the form.
In order to add items, click on one of the layout cells. You'll see five buttons listing the available items of certain type.
After pressing one of the buttons you will see the form to pick the item of chosen type.
After clicking on one of the items, it will be added to the layout cell. You can fill in the layout with different blocks this way.
After saving the category with chosen layouts, it will show up in the form of the added categories.
In order to remove the item, press the 'Delete' button.
Banner adding/removing/editing
In order to add a new banner, click the 'Add new banner' button. Next, fill in the required fields in the form that appears.
Adding/removing/editing Video
In order to add a new video, click the 'Add new video' button. Next, fill in the required fields in the form that appears.
In order to add custom video, press the 'file' button. Next, you'll be able to add a video via file manager.
Adding/removing/editing HTML content
In order to add new HTML content, press the 'Add new HTML' button. Next, fill in the required fields in the form that
appears.
Adding/removing/editing Slider
In order to add a new slider, press the 'Add new slider' button. Next, fill in the required fields in the form that appears.
Adding/removing/editing Slides
In order to add a new slide, click the 'View' button in the slider form and then press the 'Add new' button in a window that
appears. Then fill in the required fields.
Select category - choose a category to add products, banners, video and HTML content to.
Use custom name - custom category status.
Custom name - category title.
Status - item status.
Select a file - choose a file, this field is required (at least for the default language).
Title - banner title, this field is required (at least for the default language).
Url - link path, this field is required (at least for the default language).
Description - banner description (at least for the default language).
Specific class - block's CSS class.
Enter Video name - video title, this field is required (at least for the default language).
Video Link/Path - link to the video (youtube, vimeo or custom video), this field is required (at least for the default
language).
Allow autoplay - defines if video starts automatically right after the player has been loaded.
Allow controls - defines if player controls are displayed.
Loop - defines if the video playback is in the infinite loop.
Enter HTML item name - HTML content title, this field is required (at least for the default language).
Specific class - block's CSS class.
HTML content - the content.
Enter Slider item name - slider title, this field is required (at least for the default language).
Control - show/hide slider navigation.
Pager - show/hide slider pagination.
Auto scroll - turns on/off slider autoplay.
Specific class - block's CSS class.
Carousel speed - slides transition duration (in ms), this field is required.
Pause - the period between slides switching (in ms), this field is required.
Type - choose the slide type, this field is required.
Banner/Video/Html list - choose the element of the previously selected type, this field is required.
Sort order - slide position.
Item status - status of the element.
TM Newsletter
The module displays a notification with a proposal to subscribe to store newsletter in a pop-up window. The email check
can be enabled in module settings by means of confirmation email. You can also adjust the timeout between reminders
for registered and non-registered users. Registered users can permanently give up on reminders.
Module install/uninstall
This module can be installed/uninstalled as any other PrestaShop module.
Module settings
After module has been installed you can configure it on the module configuration page.
Live mode - enable/disable the module.1.
Would you like to send a verification email after subscription? - enable/disable confirmation email send.2.
Timeout for guests - set timeout for popup reminding subscription for guests.3.
Timeout for customers - set timeout for popup reminding subscription for customers.4.
It is necessary to install and enable 'Newsletter block' for proper work of module.
TM Olark Chat
Module to display Olark Chat on your store front-end.
Module install/uninstall
This module can be installed/uninstalled as any other PrestaShop module.
Module settings
After module has been installed you can configure it on the module configuration page.
In order to configure Olark Chat, which you can see on the live demo of the template, you need to register on the official
website and to get the ID for your website. Input your ID to the field "Olark site ID" and set module under "Live mode". Now
save settings by clicking 'Save' button.
TM Product List Gallery 2.0.0
This module displays all the available product images in form of a gallery on product listing pages. Depending on what
settings you choose, the module can display images in form of a rollover or slideshow.
Module Installation and Deleting
This module can be installed and deleted like any other PrestaShop module.
Module settings
After the module is installed, open the product-list.tpl file in your template root folder, find the following code:
and replace it with:
{capture name='displayProductListGallery'}{hook h='displayProductListGallery' product=$product}{/capture}
{if $smarty.capture.displayProductListGallery}
{hook h='displayProductListGallery' product=$product}
{else}
<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="
{$product.name|escape:'html':'UTF-8'}" itemprop="url">
<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image,
'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}
{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}
{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)}
width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
</a>
{/if}
After installing and connecting the module, you can set it up on the module configuration page.
The module has the following main settings:
If you choose rollover, you can choose the animation effect:
Animation type:
If you choose slideshow, you will find the following settings available:
Type - select display type: rollover or slideshow.
Opacity slide - opacity changes;
Horizontal slide - horizontal;
Vertical slide - vertical.
Display items - the number of items displayed;
Infinite - endless slideshow cycle;
Pager - pager display in slide show;
Controls - controls display in slide show;
Use thumbnails - slideshow thumbnails display;
Pager - pager display in thumbnails carousel;
Controls - controls display in thumbnails carousel;
Position - vertical or horizontal carousel mode;
Center mode - centering the thumbnails carousel view;
Visible items - the number of items in a row;
Items to scroll - the number of scrolled items in thumbnails carousel.
TM Product Zoomer
This module is an alternative solution for the standard product image zoom on the single product page. It's fully
compatible with the standard additional products thumbnail carousel and product attributes changes. It allows you to
choose among the three available options (window/lens/inner) for image zoom with the advanced plugin settings. The
module is based on the Elevatezoom Plus plugin.
Installation and removing
The module is installed and deleted like any other Prestashop module.
Module configuration
After the module has been installed you can configure it on the module configuration page.
By default the configuration page shows the simplified set of options.
Extended module configuration
Live mode - module is on/off.1.
Fancybox - whether to show the enlarged image in the Fancybox on click.2.
Change image on hover - switch the main image on thumbnail hover (by default is set to switch on click).3.
Responsive - allows to the use adaptive functionality for plugin display on the mobile devices.4.
Zoom Type - choose the type of the enlarged image display mode5.
window - the enlarged image shows up next to the main image in one of the available (16) positions
lens - the image is zoomed in the lens container, on top of it
inner - the image is zoomed inside of main image container, fully covering it.
The mobile devices (< 768) have "lens" mode activated instantly.
Extended settings - enables advanced settings for the experienced users. You can see the link to the official
documentation for more details next to it.
6.
Scroll Zoom - zoom ratio change on the mousewheel scroll (available for all types).1.
Cursor - cursor type on the magnified image hover. The following options are available: default, cursor, crosshair
(available for all types).
2.
Zoom settings - available for all types, if the 'Scroll Zoom' is enabled.3.
Zoom Level - the zoom level on the initial hover
Min Zoom Level - a minimum zoom level
Max Zoom Level - a maximum zoom level
Scroll Zoom Increment - magnifying scroll increment
Easing - the magnified image appearance effect (available for all types).4.
Zoom Easing - effect on/off
Easing Amount - effect delay value
Image Crossfade - main image blur outside the hover area (the lens) - available for window, lens.5.
Magnified image window settings - available for window.6.
Zoom Window Width - window width in px
Zoom Window Height - window height in px
Zoom Window Offset X - window offset on the X axis
Zoom Window Offset Y - window offset on the Y axis
Zoom Window Position - window position choice relatively to the main image (the positions available are presented on
the image below this field)
Zoom Window Bg Color - window background image (for transparent images only)
Zoom Window Fade In - the effect of slowing the window appearance
Zoom Window Fade Out - the effect of slowing the window disappearance
Border Size - window border width in px
Border Color - window border color
Zoom Lens - zoom lens (available for window, lens).7.
Zoom Lens - on/off
Lens Shape - lens type. It can take the following values: circular/rounded or squared/rectangular
Lens Color - lens inner background color
Lens Opacity - lens inner background opacity
Lens Size - lens size in px
Lens Fade In - the speed of lens appearance effect
Lens Fade Out - the speed of lens disappearance effect
Lens Border - lens border width
Lens Border Color - lens border color
Contain Lens Zoom - the restriction of the lens overflow outwards the main image container
Tint - the shade effect on the area outside the lens (available for window).8.
Tint - effect on/off
Tint Color - the lens outer area background
Tint Opacity - the lens outer area opacity
Tint Fade In - the appearance effect speed
Tint Fade Out - the disappearance effect speed
If you switch the zoom type, advanced options set is changed accordingly to show
only the available parameters for the type selected.
Be careful when editing the extended settings. If the settings are set incorrectly, the
effect can be ugly.
TM Search 1.1.0
This module is an extended search version that allows you to select a specific category for searching within its content.
You can also change the category after defining the query. It also provides a possibility to set the additional product
information display (description/price/manufacturer, etc.), and define the search results container layout, e.g., you can
divide the results into a few sections with the controls (pagination, next/previous/show all). All the module settings are
available in main admin panel.
Installation and Deleting
The module is installed and deleted like any other Prestashop module.
Module configuration
After module has been installed you can set it up on the module configuration page.
Enable Ajax Search - enables live search in a dropdown.
Enable Instant Search - enables instant search.
Minimum query length - number of symbols to start the result display.
Number of shown results - number of products that shows up in the results section (number of products per page for
the "pager" or "navigation" mode).
Display "Show All" button - displays the 'Show all' button below the results section, the click on it displays all found
results.
Display pager - divides results into pages (depends on the 'Number of shown results' field value) and displays links to
them.
Display navigation - shows the Previous/Next buttons.
Position of navigation - hook(s), to show the navigation (top/both/bottom options are available).
Highlight query result - highlights the text that matches search query.
Display image in Ajax search - shows product images in the results section.
Display description in Ajax search - shows product description in the results section.
Display prices in Ajax search - shows product price in the results section.
Display reference in Ajax search - shows product reference in the results section.
Display manufacturer in Ajax search - shows product manufacturer in the results section.
Display suppliers in Ajax search - shows product suppliers in the results section.
Some parameters might differ depending on the combination used.
Cookies PolicyCookies are small text files which websites place on visitors' computers. They're typically used to identify that particular
visitor and provide them with a better experience. Cookies are a crucial part of many website functions which we take for
granted.
For instance, it's usually cookies which allow online shops to remember what items you have in your shopping trolley.
They're also used to keep you logged in to a website, or to provide valuable usage statistics and information to website
owners.
If you run a website, it almost certainly uses cookies. Their most likely function is to monitor visitor numbers and
behaviours through tools like Google Analytics. They may also be used to display relevant adverts to visitors, or - if you
sell online - to power key parts of your online shopping system.
26th May 2012 - The ICO released a change to the enforcement, "implied consent" is now allowed as long as you make it
clear where your privacy/cookie policy is.
If you want to comply with this policy, you can search for the corresponding modules/extensions at PrestaShop Addons
Marketplace.
Addendum
where to get help, support and additional information
We did our best to make this documentation as clear as possible. However, if you have any difficulties with the
PrestaShop template or any suggestions on improving the template or the documentation, feel free to contact our
support team through the:
Useful resources
Loading data from Google servers
Some countries have issues connecting to Google servers. This can cause issues loading Google Fonts and Java Script
libraries from Google CDN. To resolve these issues please do the following:
Can't load Google Fonts:
W3C validation
Both HTML markup and CSS styles used in our templates are semantically correct and valid. However some W3C errors
still can take place. Making code 100% W3C valid eliminates the usage of modern website technologies as CSS3 features
and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to
break some rules.
PrestaShop official site
Downloads
Addons: modules, themes, etc.
English documentation
Forum
Wiki
Open \themes\theme****\header.tpl file.1.
Locate the line: <link rel="stylesheet" href="http{if Tools::usingSecureMode()}s{/if}://fonts.googleapis.com/css?family=
[---your_web_font_name_here---]" type="text/css" media="all" />
2.
Replace it with the following: <link rel="stylesheet" href="http://fonts.useso.com/css?family=[---
your_web_font_name_here---]" type="text/css" media="all" />
3.
