The template package you have downloaded consists of several folders. Let's see what each folder contains: - sample data file for manual installation

Transcription

1 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 - contains template screenshots. Not for production sources - contains template source files custom_html - custom HTML files psd - template Adobe Photoshop source files (.psd) favicon.png - favicon image theme - contains PrestaShop theme files manual_install - contains files for manual installation theme#### img - images for manual installation modules themes dump.sql - modules for manual installation - theme files for manual installation - sample data file for manual installation themeinstallator theme####.zip installation method - contains an archive for automatic theme installation - theme archive. Contains all theme files. It is installed using standard PrestaShop documentation.txt - contains link to online theme documentation info.txt - contains instructions on extracting source files

2 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: 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). 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. To edit the template source code files, you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text, etc. 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: 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). 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: How to install AppServ web development environment How to install WAMP web development environment How to install XAMP web development environment Downloading To install PrestaShop, you need to download the PrestaShop engine package from the official website at Just insert your name and 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 (Windows), StuffitExpander (Mac), etc. Please check the following tutorials on how to extract files from the archives with WinZip (Windows) 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. 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).

3 PrestaShop engine installation 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. 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. 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. Installation Assistant (License agreements) 1. Please check the license agreement (1). 2. When you are done, click the 'Next' (2) button. 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. 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.

4 Template installation Import theme Note: this method does not provide sample data installation. 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.

5 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. 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. 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). 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 Design > Theme & Logo, choose your template in the Themes section and click 'Save' button.

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

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

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

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

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

11 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. 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. 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. 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. 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. Slides can only be added to saved categories.

12 TM Category Products 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. 1. Navigate to the module main panel and press the 'plus' (1) button in the tabs list. 2. In the appeared form, you'll see the following options: 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. 3. After configuring all the needed options, press the 'Save' (2) button. Adding a block This block allows selecting products in displayhome position. 1. Access the module main panel and press the 'plus' (1) button in the blocks list. 2. In the appeared form, you'll find the following options: 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. 3. After configuring all the needed options, press the 'Save' (2) button. 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: 1. Press the 'Add products' (1) button: 2. In the appeared pop-up, select the needed products (2) and press the 'Add' (3) button: 3. Now, you can place the added products wherever you want with the help of drag'n'drop (4): 4. When all the needed products are added and arranged in the desired order, press the 'Save' button. 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.

13 TM Google Map 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. 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. Google Map display settings 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.

14 TM Header Account 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: 1. Display type - this setting allows to select the way to display the registration form. It can take the following values: 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. 2. Display style after login - this setting allows to change the form view after login/registration. You can use the following values: Two columns - the list is divided into two columns. One Column - the list of links is displayed as one column. 3. Default avatar - this field appears only if the 'Display avatar' option is enabled. Here you can select the default user avatar. 4. 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. 5. Use redirect - if this setting is enabled, user registration and password recovery will take place on the default PrestaShop registration/password recovery page. 6. 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: App ID - your account App ID from the Facebook developer account. App Secret - your app secret from the Facebook developer account. 7. 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: 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 8. 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: 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 Registering apps in social networks: Facebook - to get App ID and App Secret, register your app at Google+ - to get App ID and App Secret, register your app at VK - to get App ID and App Secret register your app at

15 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 1. After you have installed TM Homepage Category Gallery module, you can configure it clicking the corresponding button (1). 2. 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). Adding/Editing item options 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. 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). 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.

16 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

17 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: 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. Adding the element. Click Add item button and fill in the required settings (none of the fields are mandatory). 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. 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 Click Edit button to modify the element. In the appeared screen change all the required fields. 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. Changing order of elements in the list To change the order of elements, you should just drag the element to the position you need.

18 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. PHP 5.4+ PrestaShop 1.6+ 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. 1. In the collections table (the main module panel) click on the plus (1). 2. You will see a form with the next fields: 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. 3. After having filled all the fields, press the 'Save' (2) button. 4. 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. Creating and editing lookbooks 1. After creating a lookbook, press the 'View' (1) button next to the needed collection. 2. In the appeared block press the '+' button (2). 3. You'll see a form with the following options: 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. 4. After filling in all the fields, press the 'Save & Stay' (3) button to continue creating hotspots. Adding and Editing Hotspots After having saved the lookbook, you can add the hotspots. 1. Press the image (in the needed point) (1) in the lookbook form. 2. You will see a form with the following settings: 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. 3. After having selected the needed options, press the 'Save' (2) button, hotspot will be created and displayed on the page. Deleting a hotspot 1. To delete a point, hover over it (1). 2. You'll see a button with a cross, press it (2). 3. The point is deleted. 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.

19 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. 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. * - settings are available only if carousel is enabled. After all options have been set, press 'Save' button (1). The module supports multi-stores.

20 TM Media Parallax 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 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 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 1. Image-background - image used as a parallax background 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 2. Video-background - video used as a parallax background 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 3. Text - text layer which position can be defined with CSS 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 4. Youtube-background - YouTube video used as a parallax background 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 5. Image - image layer which position can be defined with CSS 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 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 1. Mobile devices (smartphones, tablets) have parallax effect disabled by default, the uppermost block image layer is used as a background instead 2. Forced full width of the parallax block affects page loading speed more critically than a regular fullwidth block loading 3. The smaller the size of the uploaded video, the better.

21 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. 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. ** * 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. 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. 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. 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. 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. 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. Added banner will appear in the list of banners, as well as in the list of available content while creating menu blocks.

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