[tutorial] Create responsive products carousel on cms page

[vekia]

This is totally free guide that will work both with PrestaShop 1.6 and also 1.7. Detailed explanations you can find on tutorial page here: create carousel with products on PrestaShop cms pages

 

Just follow steps:

1. install free module to show products on cms page
2. extend your rich text editor with this tutorial: extend rich text editor
3. go to your shop back office and edit target CMS page
4. to your cms page cotnents put shortcode to show them (this is a feature available in free products cms module), for exmaple:
   

   {products:1,2,3,4,5,6,7}

5. open "edit source code" feature in rich text editor
6. paste there code to init carousel:
   

    

   for prestashop 1.6:

   <style>
   ul.product_list.grid > li.first-in-line {
        clear: none!important;
   }
   </style>
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />
   <script src="//cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
   <script>
   $('document').ready(function(){
   $('.cmsproducts ul').lightSlider({
           item:4,
           loop:false,
           slideMove:2,
           easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
           speed:600,
           responsive : [
               {
                   breakpoint:800,
                   settings: {
                       item:3,
                       slideMove:1,
                       slideMargin:6,
                     }
               },
               {
                   breakpoint:480,
                   settings: {
                       item:2,
                       slideMove:1
                     }
               }
           ]
       });
   });
   </script>
   

7. and save changes for this cms page, the result will be nice carousel on cms page as i show on the video
   
   

[rachel01]

Hello,

Thanks for this tip but the code is not working.

The products are not in ul / li and the class .cmsproducts doesn't exist.

How modify this code for a carousel products ?

Thanks