Documentation

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

Files structure

The template package you have downloaded consists of several folders. Let's see what each folder contains:

  • screenshots - contains template screenshots. Not for production
  • sources.zip - contains template source files
    • sources
      • psd - template Adobe Photoshop source files (.psd)
  • theme - contains PrestaShop theme files
    • manual_install - contains files for manual installation
      • img - images for manual installation
      • modules - modules for manual installation
      • themes - theme files for manual installation
      • dump.sql - sample data file for manual installation
    • sample_data - contains files used for sample data installation with sampledatainstall module
    • themeinstallator - contains an archive for automatic theme installation
      • theme####.zip - theme archive. Contains all theme files. It is installed using standard PrestaShop installation method
  • fonts_info.txt - contains links where the template custom fonts can be downloaded
  • info.txt - 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 complete the following preparation steps:

Editing software

To feel comfortable working with your PrestaShop template, we recommend that you download all applications required. 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:

  1. First of all, you need the right applications to extract the password protected sources_#########.zip archive. You can use WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac).
  2. 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.
  3. To edit the template source code files, you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text, etc.
  4. To upload files to the hosting server, you may need an FTP Manager like Total Commander, FileZilla, CuteFTP, etc.

Server requirements

Please make sure your hosting server meets the PrestaShop requirements:

  1. System: Unix, Linux or Windows. Unix is highly recommended.
  2. Web server: Apache Web server 1.3 or later, Microsoft's IIS Web server 6.0 or later, and nginx 1.0 or later.
  3. PHP 5.2* or later.
  4. MySQL 5.0 or later.
  5. At least 32 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.2 have bugs which might prevent some functions from working as expected (like invalid date timezone).

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, MAMP, 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.

Please make sure your version of PrestaShop engine matches the template requirements. All versions of PrestaShop are available at SourceForge.

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(PC), StuffitExpander(MAC), etc.

Please check the following tutorials on how to extract files from the archives with WinZip(PC) and StuffitExpander(MAC).

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.

Step 1: 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.

When you are done, click the 'Next' button.

Step 2: Installation Assistant (License agreements)

Please check the license agreement.

When you are done, click the 'Next' button.

Step 3: 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.

Step 4: 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.

Step 5: 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.

Step 6: Installation is complete

This is the final step of the installation.

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.

If you face any difficulties, please check the official PrestaShop installation manual.

Template installation

1. Import theme

Note: this method does not provide sample data installation.

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

2. Installation.

Log into your PrestaShop admin panel and navigate to Preferences -> Themes. At the top of the page click Add new theme button.

Click Add file button in Import from your computer section. Navigate to previously unzipped template package and open themeinstallator folder.

Select your theme .zip file and click Save.

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.

You should see the screen with the information of the modules used in the theme, the number of modules that are turned on and off. Click Save in order to continue.

After this you will see the pop-up with the message about successful theme activation: the theme has been installed successfully, images have been re-generated up to the defined in theme dimensions. To finish installation click Finish button.

2. Automatic installation with demo data (Sample data installer)

After installing sample data, you'll get your PrestaShop store appear the same as at the template live demo. It will contain all demo products, categories, modules and store settings.

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_. Only if your PrestaShop engine matches the specified version, install sample data.

In order to install sample data using the Sample data installer module, please follow instruction from the step 1 (Theme import) of this manual. Then in your store admin panel you'll see Sample data installer module.

Using this module you can easily install store sample data in few easy steps. Please do the following:

  1. From the admin panel menu click "Install Demo Store" item.

  2. Select and upload sample data files from 'sample_data' directory of your template package. You can do this using the "Browse local files" button or dragging sample data files to the browser window.

  3. Wait till files are uploaded.

  4. Then click "Continue Install" button.

  5. Then Sample data installer will automatically configure your store and other modules. This can take several minutes.

  6. When sample data is installed successfully, you need to perform the last step - regenerate images. Click "Go To Regenerate Page" button.

  7. To regenerate images click "Regenerate thumbnails" button.

Congratulations, your demo store is installed.

3. Manual template installation with sample data

After installing the Sample data, you'll get your PrestaShop store appear the same as at the template live demo. It will contain all sample products, store settings, modules settings, etc.

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_. Only if your PrestaShop engine matches the specified version, install sample data.

1. Uploading template files

To upload the template to your server:

  1. Open the template package.
  2. Then go to the /theme/manual_install/ folder.
  3. Upload /img/, /modules/ and /themes/ folders to PrestaShop root directory.

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

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

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.

When you are done with installing the dump.sql file, you will need to activate the template.

From the PrestaShop admin panel, go to Preferences > Themes, choose your template in the Themes section and click Save.

3. Adding languages to online store.

After the multi-language template has been 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 'Localization > 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 'Localization > Languages' menu.

4. Installing template over existing store

You can use this method of installation if you have a running PrestaShop website and just want to install a new template.

1. Uploading template files and theme activation

  1. Open the template package.
  2. Then go to the /theme/manual_install/ folder.
  3. Upload /modules/ and /themes/ folders to PrestaShop root directory.

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

  4. In your PrestaShop admin panel navigate to Preferences > Themes, select the theme you installed (you can also use the enabled theme, it will not cause any issues for your enabled theme). Click Advanced settings button.

  5. On the appeared screen select the directory with your new theme name and click Save button.

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

1. In your PrestaShop admin panel, select Modules > Modules from the main menu.

On the Modules page you can see the list of available PrestaShop modules. You may need to install some of them.

To install a module, locate it in the list and click the 'Install' button.

Using the module links you can activate/deactivate them (Enable|Disable links), reset their settings to default (Reset link), delete a module (Delete link) or configure it (Configure link).

2. After activating the necessary modules, you need to assign them to correct positions.

In PrestaShop admin panel, select Modules > Positions from the top menu. To place a module in the required position, just drag it to the position section of the modules list.

3. 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 Preferences > Images and set the image dimensions as described on Configuration Page at the template live demo.

Basic tutorials

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.

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.

On the module settings page you can change the slider options (such as width, speed, etc.) and edit slides (slide images, URLs, descriptions, etc.).

Custom modules and extensions

Smart Blog

Smart blog - a set of modules that allows creating blog in your store. It consists of the following modules: Smart Blog, RSS Smart Blog Feed, Smart Blog Archive, Smart Blog Categories, Smart Blog Home Latest, Smart Blog Latest Comments, Smart Blog AddThis Module, Smart Blog Popular Posts, Smart Blog Recent Posts, Smart Blog Related Post, Smart Blog Search, Smart Blog Tags. It also has its hooks where the blog modules can appear on the site, they can also show up in the standard hooks (only columns).

Smart Blog

This is the main module that contains many settings for blog functionality. After its installation the Blog menu tab will show up in the main menu of your admin panel where you can add/remove/edit the posts/categories or select the type of images and their dimensions used in the posts (types and dimensions of post images are different from product images settings in your store). To add the frontend settings of the module, please navigate to Smart Blog (Modules->Front Office Features->Smart Blog) and add all the parameters.

Description of parameters:

  1. Meta Title - the title of your blog that will show up on all its pages.
  2. Meta Keyword - keywords that will be used by search engines for better SEO optimization.
  3. Meta Description - description of your blog used by search engines for better SEO optimization.
  4. Main Blog Url - the URL of your Blog.
  5. Use .html with Friendly Url - enable/disable adding .html to the blog pages URLs using Friendly Urls.
  6. Number of posts per page - number of posts that show up per page (category/archives pages, etc.).
  7. Auto accepted comment - enable/disable the auto accepted user comments, if enabled, comments will be available without admin moderation.
  8. Enable Captcha - enable/disable Captcha under Leave Comment form on products pages.
  9. Enable Comment - enable/disable leaving comments by users.
  10. Show Author Name - enable/disable showing posts author on the blog pages and post single pages/li>
  11. Show Post Viewed - enable/disable showing number of times the users viewed the post. It will show up under the post on the blog pages and blog single pages.
  12. Show Author Name Style - changing the format of the author name.
  13. AVATAR Image: - adding the standard avatar image for all users.
  14. Show No Image - enable/disable the image. No Image is set if there is no image for post/category, etc.
  15. Show Category - enable/disable the category image and description on the blog category pages.
  16. Blog Page Column Setting - setting the display of Blog related modules. It often requires additional settings, therefore it is recommended that you install additional modules in the same way that standard PrestaShop modules are installed.
  17. Custom CSS - you can add additional styles in this field. Be careful using the classes that are already used in the theme, since some conflicts may occur.
  18. Delete Old Thumblr - is used to regenerate blog images in case image dimensions were changed or the new type of image was added. To regenerate, select Yes and click Regenerate.
ONLY AFTER THIS other blog related modules can be installed. The process of removal is opposite FIRST, YOU SHOULD DELETE ALL RELATED MODULES and only then delete Smart Blog module.
RSS Smart Blog Feed

The module generating the new feed for your Blog.

Has several settings in the admin panel:

  1. Update Period - allows to display posts from specific time period (hour/day/week/month/year).
  2. Update Frequency - allows to set the frequency of update (1 week, 2 hours, etc.).

At the top there is a file path where news will be generated. It consists of the website URL + /modules/smartblogfeed/rss.php.

Smart Blog Archive

This block shows up in the left/right column and is used to sort posts by period of time (month) .

It does not have any additional settings.

Smart Blog Categories

This block shows up in the left/right column and is used to sort posts by category.

It does not have any additional settings.

Smart Blog Home Latest Posts

This block shows up only in homepagecontent hook and is used to display latest posts on the home page.

Settings:

  1. Number of posts to display in Latest News - number of posts that will show up on home page.
Smart Blog Latest Comments

This block shows up in the left/right column and is used to display the latest comments added for the Blog posts.

Settings:

  1. Number of Comments to Show - numbers of comments shown in the block.
Smart Blog AddThis Module

This block shows up on the post single page and allows to share this post in social networks.

It does not have any additional settings.

Smart Blog Recent Posts

This block shows up in the left/right column and is used to display the latest posts.

Settings:

  1. Show Number Of Recent Posts - numbers of recent posts shown in the block.
Smart Blog Tag

This block shows up in the left/right column and is used to display tags used in the blog.

Settings:

  1. Number of Tag to Show - number of tags shown in the block.

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 way 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 are not limited in quantity, custom HTML blocks are 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.

  1. 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 gives its name from the default language. Field is mandatory.
  2. Active - active/inactive tab.
  3. 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.
  4. Sort order - the order of tabs to be displayed.
  5. Specific Class - the class which is added to emphasize the item (CSS class).
  6. Enter tab badge - is filled in depending on multi-languages.
  7. It is Mega Menu - given tab sub-menu is a Mega Menu. *
  8. Use simple menu - given tab sub-menu is a simple menu. **

* It is Mega Menu. If this option is selected, there will be a form to create a complex menu (Mega Menu).

Complex menu consist 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

The pop up window appears, where you need to specify the column class (from 2 to 12). The column itself appears next where you need to set necessary settings,

here you can change the column class, add CSS class, and also the required content from the list provided. You can add/remove content by double clicking the required item, or by highlighting required 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.

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

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 to which you can 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.

  1. Enter HTML item name - HTML block name, is mandatory to be filled in for the default language.
  2. Specific class - block's CSS class.
  3. HTML content - HTML content.

Added block will appear in the list of blocks, as well as in the list of available content while creating menu blocks.

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 to which you can 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.

  1. Enter Link name - link name, is mandatory to be filled in for the default language.
  2. Enter Link URL - link URL, is mandatory to be filled in for the default language.
  3. Specific class - block's CSS class.
  4. Open in new window - open link in a new window.

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 to which you can 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.

  1. Select a file - select a file, is mandatory to be filled in for the default language.
  2. Enter Banner name - banner title, is mandatory to be filled in for the default language.
  3. Enter Link URL - link URL, is mandatory to be filled in for the default language.
  4. Specific class - block's CSS class.
  5. Open in new window - open link in a new window.

Added banner will appear in the list of banners, as well as in the list of available content while creating menu blocks.

Media Parallax Module

What is parallax effect?

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. Web designers began incorporating parallax scrolling in 2011, using HTML5 and CSS3. Websites with parallax backgrounds are becoming an increasingly popular strategy, as advocates argue it is a simple way to embrace the fluidity of the Web. Additionally, proponents use parallax backgrounds as a tool to better engage users and improve the overall experience that a website provides. Parallax scrolling allows for the creation of dynamic, interactive user experience that has the potential to improve visual appeal.

This module allows to add parallax effects to your website without any additional skills and effort. It is possible to add both images and background video.

Settings: (only for Google Chrome)

  1. Enable smooth scroll for Google Chrome browser - enable additional effect.
  2. Smooth scroll time - time of smooth scroll effect.
  3. Smooth scroll distance - distance of smooth scroll effect.

Adding Media parallax module

  1. It is required to add the id or class in the content of your HTML page. You can also use a unique tag, this element should not be repeated.
  2. Create the image of the required size(it is desirable to create the image of larger size than the block where the effect will be added). In case you want to add the video, you will have to prepare it in 3 formats: .mp4,.webm and .ogv, and also to add the preview image of the same size(.png, .jpg and .gif)
  3. Click Add container button in the Add new block.

  4. In the appeared screen add all the required settings.

    Settings:

    1. Selector - element where the effect will be added (id or unique tag).
    2. Parallax type - type of effect that will be used (image or video).
    3. Media files - upload all the required files.
    4. Click Save button.

Media parallax module customization

  1. In the list of Parallax blocks find the required block and change the settings.

Media parallax module removal

  1. In the list of Parallax blocks find the required block and click Delete button.

Video Background Module

This module allows to add the background video to any block in your HTML page (there should be the id or unique tag).

To add the background video, you can follow the steps below:

  1. Upload the video files and preview images to modules/tmvideobackground/video folder (or any other folder on server) via FTP. The video should be uploaded in 3 formats: .mp4, .ogv, .webm, all files having the same names (ocean.mp4, ocean.ogv, ocean.webm). Preview images should be also in 3 formats: .jpg, .gif, .png and have the same names (ocean.jpg, ocean.gif, ocean.png).
  2. In your admin panel open Video background module (Modules->Front Office Features->Video background module) and perform the required settings.

    Settings:

    1. Video selector - element of HTML page where the background video will be added (id or unique tag (body, header, footer, etc.).
    2. Video path - path to your video files (the path should have / at the end), the files can be located in any folder on server, but we recommend that you upload them to modules/tmvideobackground/video/ folder.
    3. Video files name - names of your video files. Only name should be added (there is no need to write the format. For example,"ocean").
    4. Click Save button.
To display the video, there should be no other background added for this element.

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.

To add the content, you should follow the steps below:

  1. Navigate to Modules->Front Office Features->TM HTML Content (if it is not installed, install it).

    1. Click Add new button.
    2. The list of available languages. You can view the available elements for all languages by switching the language tabs.
    3. The list of elements added for specific position and language.
  2. Adding the element. Click Add item button and fill in the required settings (none of the fields are mandatory).

    1. Language - select the required language from the drop-down list.
    2. Title - title of the element.
    3. Use title in front - display the title of the element at the frontend (the title will show up in front of the element).
    4. Hook - position where the element is added.
    5. Image - upload the image from your computer.
    6. Image width - image width shown at the frontend.
    7. Image height - image height shown at the frontend.
    8. URL - add the link (the whole block will be wrapped in the link).
    9. Target blank - open link in new tab.
    10. HTML - HTML code (except the link if you have added it in the URL field) or text.
    11. Save - click to save the element.
    All elements of one language added to the same position will be displayed as a list at the backend and frontend.
  3. Editing and removing the element

    When you add the element, it shows up in the corresponding list.

    1. The language where the elements were added.
    2. Position where the elements were added.
    3. Edit button with the drop-down list.
    4. Delete button.

     

    Editing

    1. Click Edit button to modify the element.

      In the appeared screen change all the required fields.

      1. Enable - display the element at the frontend.
      2. Image title - title of the element.
      3. Use title in front - show up title at the frontend.
      4. Hook to which the image should be attached - position of the element.
      5. Load your image - image of the element.
      6. Image width - image width at the frontend.
      7. Image height - image height at the frontend.
      8. Target link - assign link to the element.
      9. Open link in a new tab/page - Open link in new tab.
      10. Optional HTML code - edit HTML code.
      11. Save - save changes.
  4. Changing order of elements in the list

    To change the order of elements, you should just drag the element to the position you need.

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.

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. Attention! You can add only one badge for each category. 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).

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

TM Google Map

This module allows to add Google map with your stores location and short description about them on your front page. The map will show up the addresses of all stores related to your online shop. You can edit your stores details under Preferences->Store Contacts tab.

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 configure the style and elements of your map.

Select the map style from the first list (all styles are taken from Snazzymaps). You can also add the style from this website. Find instructions on adding them at the end of this instruction.

Select the view type from the second list (satellite view or street view).

You can also select the zoom ratio for your map from 1 to 17.

Zoom option if scrolling on the map area.

You can disable the map control and ability to view the streets.

The module supports the multi-stores. You can change the map styles for each store.

Adding custom styles

You can add any custom style from Snazzymaps to your module. To do this, you should select the style from the website, copy JavaScript Style Array to .js file and save it in the module folder /js/styles/(for the file name use the style name replacing the spaces with underscores and removing all special characters. For example: for Subtle Grayscale style - subtle_grayscale.js file, for Apple Maps-esque style - apple_maps-esque.js file). Then, navigate to your module configuration page and select the required style from the styles drop-down list.

TM Manufacturers Block

This module shows up manufacturers available in your store. The list of manufacturers may consist of the 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.

  1. Display name - show the manufacturer's name.
  2. Display image - show the image of the manufacturer.
  3. Number of elements to display - select the number of elements displayed in the module.
  4. Image Type - select the image type (you can select the image from the images related to the manufacturer).
  5. Use carousel - show up the list as a carousel.
  6. * Visible items - number of visible manufacturers.
  7. * Items scroll - number of manufacturers shown in one carousel scroll.
  8. * Slide Width - the width of the element in the carousel.
  9. * Slide Margin - the margin of the element in the carousel.
  10. * Auto scroll - automatic scrolling.
  11. * Carousel speed - speed of the carousel.
  12. * Pause - pause between scrolls(if "Auto scroll" is enabled).
  13. * Random - carousel start from the random element.
  14. * Carousel loop - carousel returns back to the beginning when all elements have been scrolled.
  15. * Hide control on end - hide next/previous buttons.
  16. * Pager - show pagination.
  17. * Control - show next/previous buttons.
  18. * Auto control - show play/pause buttons.
  19. * Auto hover - pausing when hovering over carousel elements.

* - settings are available only if carousel is enabled.

The module supports multi-stores.

TM Products Slider

The module shows up store products in the slider.

Installation and deleting

The module is installed and deleted like any other Prestashop module.

After installation you can change its settings on the module configuration page.

You can set the order of products in your slider using drag-and-drop method. You can also enable/disable product display in the slider.

You can set the width of slider, sliding effect, slider speed, pause, auto scroll, pause when hovering over carousel elements, slider control, next/previous buttons, play/pause buttons.

After module installation you will see the new tab in your product configuration page (Catalog-> Product-> select any product - TM Products Slider).

Here you can set whether the product will show up in the slider or not. After making the changes, click Save/Save and Stay button to save them.

The module supports multi-stores. You can change settings for each store, group of stores or all stores at a time.

TM Product Videos

This module allows to add unlimited number of videos to any product in any language and store.

Installation and deleting

The module is installed and deleted like any other Prestashop module. It has no configuration page and supports multi-stores.

After module installation you will see the new tab in your product configuration page (Catalog-> Product-> select any product - TM Product Videos).

To add a video to any product, you should fill in the required fields (the link field is mandatory). The module is multilanguage, so you will have to fill in the fields for all languages this video is related to. If the Link field is not filled for any language, then the video will not be added for this language. The module is supposed to show up videos from Youtube and Vimeo, so you need to add links only from these resources. After making the changes, click Save/Save and Stay button to save them.

Examples of links

To display video properly, the links should have the following format:

  • Youtube - https://www.youtube.com/v/K6VcTyaym90

  • Vimeo - http://player.vimeo.com/video/66140585

If the product has video related to this language, you will see the list of videos below.

To save, delete or edit the list, there is no need to click Save/Save and Stay button. Use the buttons located in the video blocks. To change the order of videos, use drag-and-drop method to change their position. To enable/disable the video, use the button next to video. To edit the videos, fill in the fields with required data and click Update button.

To remove the video from the list, click Remove video button.

While switching languages, only the list of videos related to the language will show up.

To view the video in zoomed format, click Zoom button under the video you want.

TM Social Feeds

This module loads the social networks feeds on your website. It enables the site visitors to be aware of the latest news and posts shared on the social networks.

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.

In the upper form you should add global settings for each social network. Different social networks have different settings.

Twitter

It is enough to add a Widget ID which can be taken from your Twitter account.

Facebook

Paste the full path to the Facebook page which feeds will be loaded. The page should be public.

Pinterest

For Pinterest paste the full path to the page which feeds will be loaded.

Instagram

Client ID - a unique ID assigned during widget registration on Instagram.

User Name - username used to link the owner's page.

Selection type: you can set whether the images are loaded from specific user or by tag.

Tag by which images are loaded.

Id of the user whose images will be loaded.

Instagram access token - access token of the user whom the page belongs.

In the second part of the module configuration page you can add the required module to the position you want. There are 4 positions. You can add the block settings for each position. The only global setting is the data of social networks which feeds will be loaded.

Each social network has its own settings.

Twitter

  1. Add block to position - display block in specific position.
  2. Select theme - color scheme of the block for this position.
  3. Sort order - sort order (order number of the block in this position).
  4. Widget width - block width in this position.
  5. Widget height - block height in this position.
  6. Widget feeds limit - number of feeds in the block.
  7. Enable header - show block title.
  8. Enable footer - show footer of the block.
  9. Enable border - show border of the block.
  10. Show replies - display replies to the posts.
  11. Show scroll - show block scroll.
  12. Show background - add block background or leave it transparent.
Facebook

  1. Add block to position - display block in specific position.
  2. Select theme - color scheme of the block for this position.
  3. Sort order - sort order (order number of the block in this position).
  4. Widget width - block width in this position.
  5. Widget height - block height in this position.
  6. Enable header - show block title.
  7. Enable border - show footer of the block.
  8. Show faces - show photos of users who liked the page.
  9. Show posts - show posts from the page.
Pinterest

  1. Add block to position - display block in specific position.
  2. Sort order - sort order (order number of the block in this position).
  3. Widget width - block width in this position.
  4. Widget height - block height in this position.
  5. Widget column width - width of the block column
Instagram

  1. Add block to position - display block in specific position.
  2. Sort order - sort order (order number of the block in this position).
  3. Widget feeds limit - number of feeds displayed in the block.

The module supports multi-stores.

TM Header Account

This module displays the login form and some available user account elements in the site header. It allows to log into your account staying on the active page. The module serves as a drop-down block.

Installation and Deleting

The module can be installed and deleted like any other PrestaShop module.

Module configuration

The module does not have any additional settings.

TM Product List Gallery

The module displays a gallery of all available product images on the products list pages.

Installation and Deleting

The module can be installed and deleted like any other PrestaShop module.

Module configuration

The module does not have any additional settings.

Additional actions

To enable the module functionality you should add the following line of the code:

{hook h='displayProductListGallery' product=$product}

to the product-list.tpl file in the root folder of your theme after the closing tag </a> with the .product_img_link class.

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.

  1. Use carousel - enable/disable carousel
  2. Number of elements to display - the number of items to display
  3. Items scroll - the number of items to scroll
  4. Item Width - width of an item of the carousel list
  5. Item Margin - margin between items in the carousel list
  6. Carousel speed - item transition duration
  7. Pause - the amount of time between each auto transition (if the "Auto scroll" option is enabled)
  8. Auto scroll - enable carousel auto scroll
  9. Random - start carousel on a random item
  10. Carousel loop - carousel returns back to the beginning when all elements have been scrolled
  11. Hide control on end - hide the navigation (next/previous) buttons on last slide
  12. Pager - show pagination
  13. Control - show next/previous buttons
  14. Auto control - show play/pause buttons
  15. Auto hover - pause the carousel when mouse hovers over carousel items

TM Related Products

Given module was designed in order to add and display the related products on the product page.

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.

  • 1. Display product price.
  • 2. Amount of products to display.

You can add or remove related products for the main product in the product settings Catalog->Products.

  • 1. Navigate to TM Related Products

  • 2. In the product search field start input the title of the product, and choose it from the offered variants;
  • 3. In order to remove the product from the list click the X before the product;
  • 4. Once all the configuration have been made click Save and Stay or Save button

TM Social Login

This module allow to register and sign in with the help of the clients pages data in Social networks such as Facebook and Google.

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 get required data for module configuration you need to create corresponding application on the needed resource.

More detailed information you can get by following the links: Google App and Facebook App.

It is not necessary to use both variants of sign in (Google, Facebook) simultaneously, you can use one of them only.

Facebook Fields
  • 1. ID of your App.
  • 2. Secret key of your App.
Google Fields
  • 1. ID of your App.
  • 2. Secret key of your App.
  • 3. Redirect path after sign in (your shop URL+index.php?fc=module&module=tmsociallogin&controller=googlelogin).
    Redirect path must coincide with the one which you have indicated while creating Google App.

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.

  • 1. Live mode - enable/disable the module.
  • 2. Would you like to send a verification email after subscription? - enable/disable confirmation email send.
  • 3. Timeout for guests - set timeout for popup reminding subscription for guests.
  • 4. Timeout for customers - set timeout for popup reminding subscription for customers.
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.

Cookies Policy

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

For your convenience, we have added a Cookieslaw module to our theme.

Its configuration is very easy.

  1. Find it in manual_install folder located in the template package (if you performed Manual template installation with sample data, then the module will be added automatically).
  2. Then find it in the list of modules in your admin panel (Cookieslaw module among the "Front Office Features" modules) and click Install button.

  3. After installation (ignore this step if you were automatically directed to the module configuration page) click Configure button.

  4. Add all the required settings and click Save button.

    Settings:
    • - Display at the top of the page(by default). If you untick this option, the module will show up at the bottom of the page.
    • - Cookies Policy link.
    • - Link to the page where the user is redirected in case he does not accept the Cookies Policy.

Also, we can recommend the following ones:

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:

Help and Support

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:

  1. Open \themes\theme****\header.tpl file.

  2. 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" /> 
  3. 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" />

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.