PrestaShop 1.7.x. How to manage “JX Mosaic Products” module

  1. In your PrestaShop admin panel go to Modules -> Modules and Services section. Choose Installed modules tab and find JX Mosaic Products module. Click the Configure button: 
  2. You can see the main menu of the module with the required blocks with category products, banners, video, HTML content, and sliders.
Adding a block
  1. To add a new category, click the Add new item button: 
  2. Set the following options:
    • Select category – choose a category to add products, banners, video, HTML content, and slider to.
    • Use custom name – custom category status.
    • Custom name – category title.
    • Status – item status.
  3. Click ‘Add row‘ button to add a new row. Choose the layout you want: 
  4. You may add product, banners, video, HTML content or slider to a particular section:
  5. You can fill in the layout with different blocks: 
  6. The category with chosen layouts will be shown up in the blocks list. You can edit or delete it by clicking on the corresponding buttons: 
Adding a banner
  1. To add a new banner, click Add new banner button: 
  2. Set the following options:
    • Select a file – choose the image for your banner.
    • Title – the name of the banner.
    • URL – link path.
    • Description – banner description.
    • Specific class – custom CSS class.
Adding a video
  1. To add a new video, click Add new video button: 
  2. Fill in the required options:
    • Enter video name – the title of the video.
    • Video Link/Path – link to the video (it can be youtube, Vimeo or custom videos).
    • Allow autoplay – defines if the 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.
Adding HTML content
  1. To add new HTML content, click Add new HTML button: 
  2. Set the following options:
    • Enter HTML item name – the HTML content title.
    • Specific class – custom CSS class.
    • HTML content – the content. 
Adding a slider
  1. To add a new slider, click the Add new slider button: 
  2. Set the following options:
    • Enter Slider item name – slider title.
    • Control – show/hide slider navigation.
    • Pager – show/hide slider pagination.
    • Auto scroll – enable/disable slider autoplay.
    • Specific class – custom CSS class.
    • Carousel speed – slides transition duration.
    • Pause – the period between slides switching.

Hopefully, this tutorial was helpful for you.