PrestaShop 1.7.x. How to manage “JX Media Parallax” module

JX Media Parallax” module allows adding a background image or video to some blocks on the site with multi-layered parallax effect.

  1. In your PrestaShop admin panel go to Modules -> Modules and Services section. Choose Installed modules tab and find there JX Media Parallax module. Click the Configure button: 
  2. You will see the main module panel. To create a new parallax item, click the ‘plus‘ icon: 
  3. Set the following options:
    • Selector – css selector of the item;
    • Item status – enable/disable the item;
    • Speed – main parallax block speed;
    • Offset – main layer indent on the Y axis;
    • Inverse – parallax direction;
    • Fade – option allows configuring main block fade-out on page scroll;
    • Force full width – forced full width of the parallax block;
    • Addition Content – addition text for the parallax item.
  4. You can view, edit or delete the item by clicking the corresponding button: 
Add Parallax Layout
  1. Click the View button on the item. In this section, you can see Parallax layouts menu. Click ‘plus‘ icon to create a new layout: 
  2. Choose the type of the parallax layout from the drop-down list:
    • image-background
      • Item status – enable/disable the item status;
      • Fade – this option allows configuring main block fade-out on page scroll;
      • Layout speed – defines main parallax block speed;
      • Sort order – layout position;
      • Offset – main layer indent on the Y axis;
      • Inverse – parallax direction;
      • Image – an image, to which parallax effect will be applied. 
    • video-background
      • Item status – enable/disable the item status;
      • Fade – this option allows configuring main block fade-out on page scroll;
      • Layout speed – defines main parallax block speed;
      • Sort order – layout position;
      • Offset – main layer indent on the Y axis;
      • Inverse – parallax direction;
      • Image – additional image;
      • Video format mp4 – video in mp4 format;
      • Video format WebM – video in WebM format.
    • text
      • Item status – enable/disable the item status;
      • Fade – this option allows configuring main block fade-out on page scroll;
      • Layout speed – defines main parallax block speed;
      • Sort order – layout position;
      • Offset – main layer indent on the Y axis;
      • Inverse – parallax direction;
      • Specific class – custom css class;
      • Content – additional text.
    • youtube-background
      • Item status – enable/disable the item status;
      • Fade – this option allows configuring main block fade-out on page scroll;
      • Layout speed – defines main parallax block speed;
      • Sort order – layout position;
      • Offset – main layer indent on the Y axis;
      • Inverse – parallax direction;
      • Image – additional image;
      • Video id – youtube video id;
    • image
      • Item status – enable/disable the item status;
      • Fade – this option allows configuring main block fade-out on page scroll;
      • Layout speed – defines main parallax block speed;
      • Sort order – layout position;
      • Offset – main layer indent on the Y axis;
      • Inverse – parallax direction;
      • Specific class – custom css class;
      • Image – additional image;
  3. You can edit a layout by clicking the Edit button or remove it by clicking the Delete button: Hopefully, this tutorial was helpful for you.