Magento 2 with Slick Carousel

Related Inchoo Services

Slick is a great Carousel plugin good for any product list like Most Popular, Featured, Upsell, Cross sell products, or any other custom product list. I will guide you with step by step on how to add Slick Carousel and apply it on product list widget on Homepage.

Lets get started!

Installing Slick

  1. Slick. Version in time of writing this tutorial is 1.6.0.
  2. Unzip downloaded folder and copy slick.min.js to
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/js/
  3. Create or edit requirejs-config.js file in
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/
  4. Open requirejs-config.js and copy/paste this code:
    var config = {
        paths: {
            slick:        'js/slick'
        },
        shim: {
            slick: {
                deps: ['jquery']
            }
        }
    };
  5. Create “vendor” folder in
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/css/source/

    Copy slick.less and slick-theme.less into it.

  6. Clear cache and deploy files
  7. Open frontend, view source code and find in <head> tag below code
    <script type="text/javascript" src="http://_YOURDOMAIN_/pub/static/_VERSION_/_requirejs/frontend/_YOUR_VENDOR_/_YOUR_THEME_/en_US/requirejs-config.js"></script>

    In the bottom of the document you should see a code we added in step 4.

Apply Slick to product list widget

It below steps, we will initialise Slick to product list widget template file.

  1. Create “Magento_CatalogWidget” folder in the root of your theme and copy below folder in it.
    vendor/magento/module-catalog-widget/view/frontend/templates
  2. Open
    app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_CatalogWidget/templates/product/widget/content/grid.phtml
  3. Initialise Slick Carousel before closing <?php endif; ?> with example code below
    <script>
        require([
            'jquery',
            'slick'
        ], function ($) {
            jQuery(document).ready(function () {
                jQuery(".widget-product-grid").slick({
                    dots: true,
                    infinite: true,
                    speed: 300,
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    responsive: [
                        {
                            breakpoint: 1280,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                    ]
                });
            });
        });
    </script>

Create and insert product list widget in Homepage

  1. Open Magento Admin → Content → Pages → Home Page
  2. Content → Show/Hide Editor → Insert Widget → Widget Type(Catalog Products List) → Populate fields and choose Conditions (choose category you want or products for example)
  3. Save widget & save page
  4. Check your Homepage and you should have Slick carousel for product list widget
  5. Last step is to customise Slicks CSS for your needs!

Thanks for reading!

Vanja Devcic

- Frontend Developer

Vanja is Certified Frontend Developer, designer in soul and in job, who likes to use his skills to change the world through digital experience creating responsive, multi-languages web sites

Read more posts by Vanja / Visit Vanja's profile

2 comments

  1. Thanks for sharing this. Can you please guide how can we use Slick Slider to build a slider to display “Similar Products from the same collection/category” like on this website: https://www.lulifama.com/viva-cuba-crystallized-wavey-triangle-top-viva-cuba-full-ruched-back-bottom.html

    This website is also using Slick Slider. You can check it’s code with Inspect Element. They have developed some custom script I guess to display “more products from the same collection”.

    Thanks in advance!

  2. Magento does some weird shit when I put requirejs-config.js inside app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/ (it replaces the file content with generated code) so I recommend putting it at the root of your theme app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/.

    Thanks for this simple tutorial =)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.