Categories

Featured templates

PrestaShop 1.6.x. How to manage ‘TM MotoPress Slider’ module

Alice Weasley January 30, 2017
Rating: 5.0. From 1 vote.
Please wait...

The following tutorial will show you how to manage TM MotoPress Slider module.

This module provides the ability to add MotoPress Slider to your HTML page. It can be installed like any other PrestaShop module in Admin panel -> Modules and Services -> Modules and Services, you can check this tutorial for more details: PrestaShop 1.6. How to install a module.

  1. To manage it, click on the MotoPress Slider tab in the admin panel sidebar.

  2. Now you are able to add new slider (1) or edit the existing one (2).

    PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_1
  3. When you click on the Add Slider button, there’s an option to choose if it should be ‘Custom Slider’ or ‘Product Slider’.

    PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_2

    The difference between these two types is the following: Product slider is created from the products of your store, though in Custom Slider you can add as many slides as you wish, customizing them according to your needs.

  4. You can configure the following MotoPress settings:

    1. Slider settings

      • Slider title – the title of the slider (example: Slider1); it is required when you have several sliders and have to distinguish them.

      • Slider alias – the unique alias that will be used in shortcodes for embedding the slider (example: slider1); must be unique.

      • Slider shortcode – copy this shortcode and paste to your page.

      • Force full width – enable this option to make this slider stretch to fullwidth.

      • Force full height – enable this option to make this slider fullheight.

      • Force full size grid – makes grid stretch to parent container (but you still need to set grid width and height).

      • Layers grid size – allows to set initial width and height of the layers.

      • Enable slideshow – enable/disable the slideshow.

      • Slideshow delay – the time one slide stays on the screen; is measured in milliseconds.

      • Slideshow animation – choose the animation for changing slides.

      • Slideshow duration – animation duration in milliseconds.

      • Slideshow easings – easings on slide changing.

      • Start with slide – first slide index.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_3
    2. Controls

      • Show arrows – show/hide arrows.

      • Show bullets – show/hide bullets.

      • Show slideshow timer – show/hide timer.

      • Show slideshow play/pause button – show or hide play/pause button.

      • Hide controls when mouse leaves slider – hide controls when mouse is not on slider area.

      • Pause on hover – allows to pause slideshow while hover the slider.

      • Reverse order of the slides – animate slides in the reverse order.

      • Show counter – enable to display the number of slides.

      • Enable swipe – turn on swipe on desktop.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_4
    3. Appearance

      • Display on – hooks where the slider should be displayed.

      • Visible – min. and/or max. screen resolutions when the slider is visible (can be set using the presets: phone / tablet / desktop).

      • Initialization delay – the delay before slider initialization (should be set in milliseconds).

      • Initialize slider on scroll – choose if you want the slider to be initialized on scroll.

      • Slider custom class name – name of custom class which is used for slider.

      • Slider custom styles – custom CSS styles can be added directly in this textarea.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_5
    4. Content

      This menu appears only for the Product Slider. Press the ‘Create’ button (1) when it’s configured.

      • Link slides to product page – enable if you want the product page to be opened after the click

        on slide with the product.
      • Open in new window – enable this option to open the product page in new window.

      • Categories – categories with products to show in slider (Ctrl + click to select several categories).

      • Tags – tags to be included.

      • Only display in-stock products – only products in stock will be displayed.

      • Only display on sale products – only products on sale will be displayed.

      • Exclude products – add Product IDs, separated by comma.

      • Include products – add Product IDs, separated by comma.

      • Products number – number of products to be displayed.

      • Number of first results to skip (offset) – the number of first slides which will not be shown.

      • Order by – type of order to be applied.

      • Order direction – descending or ascending order direction.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_6

      Below there’s a list of products to be displayed in slider. After you’ve made any changes in settings, press the ‘Preview products’ button (1).

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_7
    5. After the slider has been configured, press the Save button.

  5. After pressing Edit for the individual slide, you will see the following settings:

    • General

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_8
    • Color

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_9

      If you choose gradient, select gradient color 1, gradient color 2 and the gradient angle.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_10
    • Image

      Background image can be attached from the Media Library or from the external URL.

      Image can also be added from your local folder to the Media Library. To do this press the ‘Browse’ button (1).

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_11

      Then choose ‘Upload New’ (2) tab and click on the selected area or simply drag the images into it.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_12
    • Video

      You can add video to your slide. To add video choose sources for different video formats and set other parameters for video display. You’ll need to upload a video in MP4, WEBM or OGG format and provide the video file URL in Video tab.

      Settings for video display can also be adjusted.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_13
    • Link

      Link tab allows adding a link to your slide, assign the id, class, add link title and relation:

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_14
    • Visibility

      Slide visibility options can be managed from the Visibility tab:

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_15
    • Misc

      Misc section allows assigning a CSS class or id to the slide.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_16

    Click on a Save slide button when you are done making the changes.

  6. Under the image you can see the Content management.

    Here you can add texts, images, buttons and video to each slide.

    It is divided into two main sections: ‘Layer Settings’ (1) and ‘Layers Sorting’ (2).

    Above the ‘Layer Settings’ area there are four tabs for adding the needed content (3).

    After you’ve chosen what element you want to add, you can go further with the detailed customization.

    The great feature is that these contents are added as individual layers, so you can drag them up and down to set their order in the ‘Layers Sorting’ section (2).

    Layers can be deleted separately (4) or all at once (5).

    PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_17

    For more detailed settings, please, check the following guide.

  7. To export the slider, perform the following steps:

    1. Go to MotoPress Slider in your admin panel (1, 2).

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_18
    2. Click on the ‘Export’ button (3).

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_19
    3. Choose sliders you want to export (4) and click ‘Export sliders’ button (5).

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_20
    4. You’ll be prompted to save the exported .json file to your PC.

  8. To import the slider, perform the following steps:

    1. Press Import in the MotoPress Slider section.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_21
    2. Select the exported .json file from your PC clicking the ‘Browse’ button, and press ‘Import’.

      PrestaShop_1.6.x._How_to_manage_TM_MotoPress_Slider_module_22

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to manage “TM MotoPress Slider” module

And don’t forget to browse our brand new PrestaShop Templates that extend the functionality of your website.

Prestashop Templates
This entry was posted in PrestaShop Tutorials and tagged module, Prestashop, slider, TM, TM Motopress slider. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.