Styler 2

TM Category Products 2.0.0

This module displays category products in displayHome and displayHomeTabContent hooks. The module allows displaying single products, products from a category or all products. Moreover, the module comes with a carousel that works, when the module occupies the displayHome position.

TM Category Products Main Panel

The main panel. Here you can set up the module.

Adding a block

This block allows selecting products in displayHome position.

• Access the module main panel and press the 'plus' (1) button in the blocks list.

  

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

• After configuring all the needed options, press the 'Save' (2) button.

  

Blocks Sorting

You can sort the blocks of the module with the help of drag'n'drop. This allows to change blocks 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:

• Press the 'Add products' (1) button:

  

• In the appeared pop-up, select the needed products (2) and press the 'Add' (3) button:

  

• Now, you can place the added products wherever you want with the help of drag'n'drop (4):

  

• When all the needed products are added and arranged in the desired order, press the 'Save' button.

Deleting Blocks

To delete items, press the drop-down menu next to the needed block (1) and press delete (2). The item will be deleted.

TM Deal of the Day

This module allows you to display the list of products with the discount countdown timer. You can also add a timer to products in the home page tabs, on the category pages and single product pages.

Installation and Deleting

The module is installed and removed the same way as any other PrestaShop module.

Module Settings

After module installation you can add a product discount with the display period and a discount countdown timer.

Adding/removing/editing blocks

• In order to add a new product, press 'Add new' button

  

  • Select a product - select a product to apply the discount and display a timer.
  • Status - item status.
  • Start Date - start date of the product discount period.
  • End Date - end date of the product discount period.
  • Label - product label.
  • Discount price - discount price (absolute or percentage value).

• After saving the item it appears in the list of items of this type.

  

• In order to edit this item, press 'Edit' button.

• In order to remove this item, press 'Delete' button.

• If a special price valid for a certain period was set to the product previously, this product can be added to the module items list.

  

Product display configuration

• In order to change product display mode, press 'Configuration' button.

  

• Then a form with product display configuration will appear.

  

  • Products to display - number of products to display in the home page block.
  • Random products - random products display.

TM Header Account 2.0.0

This module displays login and registration forms on the website. It can take the following positions: website header, left and right column. The module allows to log in and register using such social networks as Facebook, Google+ and VK, which is convenient for website users. Registration or logging in proceeds without reloading the page.

TM Header Account Main Panel

The main panel. Here you can set up the module.

Settings

There are the following settings in the module:

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

    

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

    

• Default avatar - this field appears only if the 'Display avatar' option is enabled. Here you can select the default user avatar.
• 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.
• Use redirect - if this setting is enabled, user registration and password recovery will take place on the default PrestaShop registration/password recovery page.

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

• 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

• 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 https://developers.facebook.com/apps.
• Google+ - to get App ID and App Secret, register your app at https://developers.google.com/accounts/docs/OAuth2/.
• VK - to get App ID and App Secret register your app at https://vk.com/dev.

TM 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:

• Click 'Add new' button.
• The list of available languages. You can view the available elements for all languages by switching the language tabs.
• 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.

• Specific class

  custom class, defines item styling (CSS class).

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

• The language where the elements were added.
• Position where the elements were added.
• Edit button with the drop-down list.
• 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.

• Specific class

  custom CSS class.

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

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.

TM Media Parallax 2.0.0

This module is designed to let you add parallax effect to the DOM items of the page. It allows you to create multi-layered parallax. It also provides a possibility to add a custom background video (you can upload it from your computer to server) or add a YouTube video.

TM Media Parallax Main Panel

Main module panel that allows you to add, edit or remove parallax items.

Creating a new parallax item

In order to create a new parallax item, press 'plus' (1) icon, in the top right corner of the main panel.

Then you will see the following form.

Form options for adding parallax items

• 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

• 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

• 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

• 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

• 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

• 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

• Mobile devices (smartphones, tablets) have parallax effect disabled by default, the uppermost block image layer is used as a background instead
• Forced full width of the parallax block affects page loading speed more critically than a regular fullwidth block loading
• The smaller the size of the uploaded video, the better.

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.

The module includes 6 main tabs that allow to customize the menu.

TM Mega Menu Items

TM Mega Menu items are the basic items which appears in the menu.

In order to create a new item, open the TM Mega Menu module and click Add item button from the top menu or click "+" button in the top right of the table.

In the form that appears, fill in the required fields.

• Enter item 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 item 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 Banner URL

  link URL, is mandatory to be filled in for the default language.

• Specific class

  block's CSS class.

• Public Title

  public banner title.

• Description

  set the description of the banner.

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

TM Mega Menu Video

In this section we will explain how to add a video in the Mega Menu.

The module has a table listing all the available videos. You can also add a new video by clicking the '+' button in the top right of the table.

In the form that appears, fill in the required fields.

• Enter Video Name

  video title (the field is required).

• Enter Video URL - add video link in the formats described below:
  • If this is a YouTube video, click on Embed and copy the code between the quotes for https://www.youtube.com/embed/video_id
  • If this is a Vimeo video, click on Share icon and in the Embed section copy the source code between the quotes for http://player.vimeo.com/video/video_id

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

TM Mega Menu Map

In this section we will explain how to add a map in the Mega Menu.

The module has a table listing all the available maps. You can also add a new map by clicking the '+' button in the top right of the table.

In the form that appears, fill in the required fields.

• Enter Map item name

  the title of the map.

• Enter Map latitude

  set a latitude value.

• Enter Map longitude

  set a longitude value.

• Marker

  adding a custom marker.

• Enter Map scale

  the scale of the map (used 8 by default).

• Map description

  set the description of the map.

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

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.

TM Product Custom Tab

The module serves to create an additional tab on the product page for displaying additional information. The module has an advantage over the existing functionality, due to the ability of adding images, text, video, links, etc.

Installation and removal

The module is installed and removed as any other PrestaShop module.

Module settings

After installing the module, you can add new tabs for the products at the module configuration page, as well as at the product editing page.

Adding tabs through the module configuration:

To add a new tab, press the 'Add new' button (1).

• Adding a tab to one or several products of a previously selected category.

  

  • Tab Heading - name of the tab, required.
  • Tab Description - information about the tab, can include data in the format of an image, text, video, links, etc.
  • Status - the element status.
  • Additional settings - enabling/disabling additional settings.
  • Select category - choosing categories for which the tab should be displayed.
  • Products to display - selecting the products from the previously selected categories.

• Adding the tab to the products that belong to selected categories.

  

• To add a tab to all products, disable the 'Additional settings' option.

  

Changing the tab display position

Drag and drop the needed tab to change its position.

Adding tabs through the product settings:

Navigate to the product page and click the 'TM Product Custom Tab' link in the left menu.

If the 'Additional settings' option is disabled, the tab will be added to the product that was edited earlier. You can also add the tab to the products that belong to selected categories, or you can add it to several products that belong to the previously selected category.

To change the tabs display position, drag-and-drop the blocks. You can edit or remove tabs as well.

TM Product List Gallery 2.0.0

This module displays all the available product images in form of a gallery on product listing pages. Depending on what settings you choose, the module can display images in form of a rollover or slideshow.

Module Installation and Deleting

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

Module settings

After the module is installed, navigate to \themes\classic\templates\catalog\_partials\miniatures\product.tpl. Open this file and find the following code:

and replace it with:

After installing and connecting the module, you can set it up on the module configuration page.

The module has the following main settings:

• Live mode - ability to use the module in live mode.
• Type - select display type: rollover, gallery or slideshow.

If you choose rollover, you can choose the animation effect:

• Opacity slide - opacity changes;
• Horizontal slide - horizontal;
• Vertical slide - vertical.

If you choose gallery, you will find the following settings available:

• Display items - the number of items displayed;
• Visible items in row - the number of items in a row;
• Use carousel - enable/disable the carousel for this block.

If you choose slideshow, you will find the following settings available:

• Display items - the number of items displayed;
• Use pager - pager display in slide show;
• Use controls - controls display in slide show.

TM Product Zoomer

This module is an alternative solution for the standard product image zoom on the single product page. It's fully compatible with the standard additional products thumbnail carousel and product attributes changes. It allows you to choose among the three available options (window/lens/inner) for image zoom with the advanced plugin settings. The module is based on the Elevatezoom Plus plugin.

Installation and removing

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

Module configuration

After the module has been installed you can configure it on the module configuration page.

By default the configuration page shows the simplified set of options.

• Live mode - module is on/off.
• Fancybox - whether to show the enlarged image in the Fancybox on click.
• Change image on hover - switch the main image on thumbnail hover (by default is set to switch on click).
• Responsive - allows to the use adaptive functionality for plugin display on the mobile devices.
• Zoom Type - choose the type of the enlarged image display mode
  • window - the enlarged image shows up next to the main image in one of the available (16) positions
  • lens - the image is zoomed in the lens container, on top of it
  • inner - the image is zoomed inside of main image container, fully covering it.
  The mobile devices (< 768) have "lens" mode activated instantly.
• Extended settings - enables advanced settings for the experienced users. You can see the link to the official documentation for more details next to it.

Extended module configuration

• Scroll Zoom - zoom ratio change on the mousewheel scroll (available for all types).
• Cursor - cursor type on the magnified image hover. The following options are available: default, cursor, crosshair (available for all types).
• Zoom settings - available for all types, if the 'Scroll Zoom' is enabled.

  

  • Zoom Level - the zoom level on the initial hover
  • Min Zoom Level - a minimum zoom level
  • Max Zoom Level - a maximum zoom level
  • Scroll Zoom Increment - magnifying scroll increment
• Easing - the magnified image appearance effect (available for all types).

  

  • Zoom Easing - effect on/off
  • Easing Amount - effect delay value
• Image Crossfade - main image blur outside the hover area (the lens) - available for window, lens.
• Magnified image window settings - available for window.

  

  • Zoom Window Width - window width in px
  • Zoom Window Height - window height in px
  • Zoom Window Offset X - window offset on the X axis
  • Zoom Window Offset Y - window offset on the Y axis
  • Zoom Window Position - window position choice relatively to the main image (the positions available are presented on the image below this field)
  • Zoom Window Bg Color - window background image (for transparent images only)
  • Zoom Window Fade In - the effect of slowing the window appearance
  • Zoom Window Fade Out - the effect of slowing the window disappearance
  • Border Size - window border width in px
  • Border Color - window border color
• Zoom Lens - zoom lens (available for window, lens).

  

  • Zoom Lens - on/off
  • Lens Shape - lens type. It can take the following values: circular/rounded or squared/rectangular
  • Lens Color - lens inner background color
  • Lens Opacity - lens inner background opacity
  • Lens Size - lens size in px
  • Lens Fade In - the speed of lens appearance effect
  • Lens Fade Out - the speed of lens disappearance effect
  • Lens Border - lens border width
  • Lens Border Color - lens border color
  • Contain Lens Zoom - the restriction of the lens overflow outwards the main image container
• Tint - the shade effect on the area outside the lens (available for window).

  

  • Tint - effect on/off
  • Tint Color - the lens outer area background
  • Tint Opacity - the lens outer area opacity
  • Tint Fade In - the appearance effect speed
  • Tint Fade Out - the disappearance effect speed

TM Products Slider 2.0.0

Introduction

This module serves for creating galleries, based on product data and displaying them in form of slides on the website frontend. The module supplies 4 methods of displaying the gallery with individual settings and appearance. Each method has pre-defined functionality. Advanced configuration is also available. The module can display an unlimited amount of products with diverse information.

Installation and removal of the module

The module is installed and removed as any default Prestashop module.

After removal or re-installation of the module, all the settings and filters are discarded.

Adding/deleting/editing a slide

Adding a slide

To add a product to the gallery, go to the needed product in the Catalog -> Products section. Then press the 'Edit' button (1) next to the needed product.

In the appeared window for editing information about the product choose Modules tab (1), navigate to the TM Products Slider (2) and click the Configure button.

Mark (3) that you want the product to be displayed in slider. Save changes by pressing 'Save' button (4).

Slide removal

There are two ways of deleting a slide.

• To exclude a product from the gallery, navigate to the needed product in Catalog -> Products section. Then press the 'Edit' button (1) next to the needed product.

  

  In the appeared window for editing information about the product choose Modules tab (1), navigate to the TM Products Slider tab (2) and remove the check mark (3) which means that you don't want the product to be displayed in slider. Click the Save button (4):

  

• The second way is to navigate to the module configuration page, find the needed product in the Slides list table and press the Delete button (1) next to it.

  

  Then confirm the deletion.

Slides display order

By default, the slides are displayed in the order they were added. To change the display order, navigate to the module configuration page and drag the slide to the needed place in Slides list table.

Disabling slides

Moreover, you can temporarily disable a slide (for the time period that a product is out of stock or for any other reason) without removing it completely. To do this, navigate to the module configuration page and click a tick next to the needed product (if it's active now) or click crosses (if it's inactive) in the Slides list table:

Gallery types and recommended settings

There are four types of gallery display (standard, list, grid, full width). Each of them can be set up independently and you can switch between them if needed.

By default, the gallery uses the following product image types: large_default - for the main image; medium_default - for thumbnails.

Standard

Recommended settings:

• image size (px) - 435*435
• Gallery Width - 1170px
• Gallery Height - 580px
• Extended Settings - off

List

Recommended settings:

• image size (px) - 435*520
• Gallery Width - 1170px
• Gallery Height - 520px
• Extended Settings - off

Grid

Recommended settings:

• image size (px) - 585*750
• Gallery Width - 1170px
• Gallery Height - 750px
• Extended Settings - off

Full width

Recommended settings:

• image size (px) - 435*435
• Gallery Width - 1920px
• Gallery Height - 450px
• Extended Settings - off

Advanced settings

To access extended settings, move the Extended Settings slider to the Yes position.

• Gallery Type - active gallery type
• Gallery Width - active gallery width
• Gallery Height - active gallery height
• Extended Settings - advanced settings; if the option is moved to 'No' position, all the advanced settings will be saved and you can restore them at any time. At the same time, at frontend it will be displayed as by default.
• Slider Duration - the speed of slide changing
• Use navigation - the display of the Prev/Next buttons for slide switching
• Use Thumbnails - using thumbnails with additional information about slides as an element for switching the current slide
• Use Pagination - using pagination as an element for switching the current slide
• Use Image Gallery - using additional product images inside the slides
• Allow autoplay - allow automatic slide switching
• Slider Interval - the time span, after which the slide will switch to another (available only if 'Allow autoplay' is active)
• Allow Loop - allow repeating slides from the beginning after all the slides were shown

After switching the gallery, all the setup of the previously used gallery is saved.

After disabling/enabling advanced settings, the settings are saved and you can go back to them at any time.

FAQ

TM Search 1.1.0

This module is an extended search version that allows you to select a specific category for searching within its content. You can also change the category after defining the query. It also provides a possibility to set the additional product information display (description/price/manufacturer, etc.), and define the search results container layout, e.g., you can divide the results into a few sections with the controls (pagination, next/previous/show all). All the module settings are available in main admin panel.

Installation and Deleting

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

Module configuration

After module has been installed you can set it up on the module configuration page.

• Enable Ajax Search - enables live search in a dropdown.
• Enable Instant Search - enables instant search.
• Minimum query length - number of symbols to start the result display.
• Number of shown results - number of products that shows up in the results section (number of products per page for the "pager" or "navigation" mode).
• Display "Show All" button - displays the 'Show all' button below the results section, the click on it displays all found results.
• Display pager - divides results into pages (depends on the 'Number of shown results' field value) and displays links to them.
• Display navigation - shows the Previous/Next buttons.
• Position of navigation - hook(s), to show the navigation (top/both/bottom options are available).
• Highlight query result - highlights the text that matches search query.
• Display image in Ajax search - shows product images in the results section.
• Display description in Ajax search - shows product description in the results section.
• Display prices in Ajax search - shows product price in the results section.
• Display reference in Ajax search - shows product reference in the results section.
• Display manufacturer in Ajax search - shows product manufacturer in the results section.
• Display suppliers in Ajax search - shows product suppliers in the results section.

Some parameters might differ depending on the combination used.