Carousel with products on CMS page

If you're looking for a free solution to build a carousel for cms pages in your shop - this is the tutorial you have to read. Whole tutorial is based on my free module to show products on cms pages , but of course you can use also extended one: module shortcodes for prestashop. 

How to create carousel on PrestaShop's CMS page?

Whole process is very easy and based on 3 main steps. First is modification of PrestaShop rich text editor, we need to use extended one because we will insert some special code to CMS page contents. Second is a free module installation, and last step is an edit process of CMS page.

First step
very important for whole tutorial. We need to use some special code on CMS page to run the carousel. Due to the fact that default rich text editor does not allow to use javascripts - we need to extend the editor. Below links where you can read tutorial.

1. PrestaShop 1.6 extend your prestashop's v1.6 rich text editor
2. PrestaShop 1.7 extend your prestashop's v1.7 rich text editor.

Second step
Install free module to show products on cms pages. Thanks to this module you will be able to build list of products on CMS page with special shortcode. List of products will be witoug carousel. Carousel we will build in third step.

Third step

As you already know with module to show products on cms pages you can create a list of products on any cms page you want. To creat such list of products you have to use special shortcode {products:x,y,z} where x,y,z are ID numbers of products from your shop. So just use shortcode there, where you want to show the carousel. I will use for this tutorial purposes shortcode: {products:1,2,3,4,5,6,7}. Then open source code tool and at the end of the code paste the code i share at the bottom of this guide

Code 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>

Code for PrestaShop 1.7

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

After this, just save contents of your PrestaShop cms page, the result will be a carousel that will show 4 items per line, it will be responsive (different view on desktop, tablet and mobile device). You can see it on the video below.