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
- Slick. Version in time of writing this tutorial is 1.6.0.
- Unzip downloaded folder and copy slick.min.js to
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/js/ - Create or edit requirejs-config.js file in
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/ - Open requirejs-config.js and copy/paste this code:
var config = { paths: { slick: 'js/slick' }, shim: { slick: { deps: ['jquery'] } } }; - Create “vendor” folder in
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/css/source/Copy slick.less and slick-theme.less into it.
- Clear cache and deploy files
- 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.
- Create “Magento_CatalogWidget” folder in the root of your theme and copy below folder in it.
vendor/magento/module-catalog-widget/view/frontend/templates - Open
app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_CatalogWidget/templates/product/widget/content/grid.phtml - 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
- Open Magento Admin → Content → Pages → Home Page
- Content → Show/Hide Editor → Insert Widget → Widget Type(Catalog Products List) → Populate fields and choose Conditions (choose category you want or products for example)
- Save widget & save page
- Check your Homepage and you should have Slick carousel for product list widget
- Last step is to customise Slicks CSS for your needs!
Thanks for reading!
