This article will guide you on how to setup the different types of product sliders.

Pre-requisites

Adding the Styles

Before adding a slider, you will want to add the following styles under Stores> Configuration> Porto> Porto - Settings Panel> Customization Settings> Custom Style 2:

[id*='productlist-']{margin-top: 1rem;}.page-layout-1column [id*='productlist-'].products-grid .product-item {width: auto;padding-left: 10px;padding-right: 10px;}[class*='.page-layout-2columns'][id*='productlist-'].products-grid .product-item {width: auto;padding-left: 10px;padding-right: 10px;}

Make sure to press Save Config and clear the cache after adding the styles to the text area.

Featured Slider

The featured slider will show the group of products you've marked as Featured. 

Marking Items as Featured

To mark an item as Featured, follow these steps:

1. In the Magento Admin Panel, navigate to Catalog> Products.
2. Search for the product you want to mark as featured and in the table, click on the row for that product.
3. Locate the Is Featured setting and click the toggle to change it to Yes.
4. 
5. In the upper right-hand corner, click Save.

Adding the Slider

To add the slider to a page, follow these steps:

1. In the Magento Admin Panel, navigate to Content> Pages.
2. Search for the page you want to edit and in the row for that page, under the Actions column click Select> Edit.
3. Open the Content section and locate where you want to add the slider.
   1. Enter the following snippet:

<div id="productlist-featured"><h4>Featured</h4>{{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="5" aspect_ratio="0" image_width="250" image_height="250" template="Smartwave_Filterproducts::owl_list.phtml"}}</div><!-- Featured Configuration --><!--autoplay sets whether the slider automatically rotates through the items.autoplayTimeout sets the interval in milliseconds between rotations.autoplayHoverPause sets whether the carousel stops when a customer hovers an item.dots sets whether navigation dots will show on the slider.nav sets whether previous and next arrows will show on the slider.navRewind sets whether the slider will slide back to the beginning when the final item is reached.navText sets the HTML for the previous and next arrows.loops sets whether the slider will show the first item when the final item is reached.responsive allows you configure the options above on different device widths.--><script>require(['jquery','owl.carousel/owl.carousel.min'], function ($) {$("#productlist-featured .owl-carousel").owlCarousel({autoplay: false,autoplayTimeout: 5000,autoplayHoverPause: true,dots: true,nav: true,navRewind: true,navText: ["<em class='porto-icon-angle-left'></em>","<em class='porto-icon-angle-right'></em>"],loop: false,responsive: {0: {items: 1},768: {items: 2},992: {items: 2},1200: {items: 4}}});});</script>

Finally, press Save.

Latest Slider

The latest slider will show the products most recently added to the website.

Adding the Slider

To add the slider to a page, follow these steps:

1. In the Magento Admin Panel, navigate to Content> Pages.
2. Search for the page you want to edit and in the row for that page, under the Actions column click Select> Edit.
3. Open the Content section and locate where you want to add the slider.
4. Enter the following snippet:
   1. Latest Slider Snippet   

<div id="productlist-latest"><h4>Latest</h4>{{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" product_count="5" aspect_ratio="0" image_width="250" image_height="250" template="Smartwave_Filterproducts::owl_list.phtml"}}</div><!-- Featured Configuration --><!--autoplay sets whether the slider automatically rotates through the items.autoplayTimeout sets the interval in milliseconds between rotations.autoplayHoverPause sets whether the carousel stops when a customer hovers an item.dots sets whether navigation dots will show on the slider.nav sets whether previous and next arrows will show on the slider.navRewind sets whether the slider will slide back to the beginning when the final item is reached.navText sets the HTML for the previous and next arrows.loops sets whether the slider willshow the first item when the final item is reached.responsive allows you configure the options above on different device widths.--><script>require(['jquery','owl.carousel/owl.carousel.min'], function ($) {$("#productlist-latest .owl-carousel").owlCarousel({autoplay: false,autoplayTimeout: 5000,autoplayHoverPause: true,dots: true,nav: true,navRewind: true,navText: ["<em class='porto-icon-angle-left'></em>","<em class='porto-icon-angle-right'></em>"],loop: false,responsive: {0: {items: 1},768: {items: 2},992: {items: 2},1200: {items: 4}}});});</script>

Finally press Save.

Bestsellers Slider

The bestsellers slider will show the products that are sold the most on your website.

Adding the Slider

To add the slider to a page, follow these steps:

1. In the Magento Admin Panel, navigate to Content> Pages.
2. Search for the page you want to edit and in the row for that page, under the Actions column click Select> Edit.
3. Open the Content section and locate where you want to add the slider.
4. Enter the following snippet:
   1. Bestsellers Slider Snippet
      

      Bestsellers Slider Snippet

      <div id="productlist-bestsellers"><h4>Bestsellers</h4>{{block class="Smartwave\Filterproducts\Block\Home\BestsellersList" name="bestsellers_product" product_count="5" aspect_ratio="0" image_width="250" image_height="250" template="Smartwave_Filterproducts::owl_list.phtml"}}</div><!-- Featured Configuration --><!--autoplay sets whether the slider automatically rotates through the items.autoplayTimeout sets the interval in milliseconds between rotations.autoplayHoverPause sets whether the carousel stops when a customer hovers an item.dots sets whether navigation dots will show on the slider.nav sets whether previous and next arrows will show on the slider.navRewind sets whether the slider will slide back to the beginning when the final item is reached.navText sets the HTML for the previous and next arrows.loops sets whether the slider will show the first item when the final item is reached.responsive allows you configure the options above on different device widths.--><script>require(['jquery','owl.carousel/owl.carousel.min'], function ($) {$("#productlist-bestsellers .owl-carousel").owlCarousel({autoplay: false,autoplayTimeout: 5000,autoplayHoverPause: true,dots: true,nav: true,navRewind: true,navText: ["<em class='porto-icon-angle-left'></em>","<em class='porto-icon-angle-right'></em>"],loop: false,responsive: {0: {items: 1},768: {items: 2},992: {items: 2},1200: {items: 4}}});});</script>

      
      
      

Finally press Save.

Sale Slider

The sale slider will show the products that are on sale.

Adding the Slider

To add the slider to a page, follow these steps:

1. In the Magento Admin Panel, navigate to Content> Pages.
2. Search for the page you want to edit and in the row for that page, under the Actions column click Select> Edit.
3. Open the Content section and locate where you want to add the slider.
4. Enter the following snippet:
   1. Sale Slider Snippet

      Sale Slider Snippet

      <div id="productlist-sale"><h4>On Sale</h4>{{block class="Smartwave\Filterproducts\Block\Home\SaleList" name="sale_product" product_count="5" aspect_ratio="0" image_width="250" image_height="250" template="Smartwave_Filterproducts::owl_list.phtml"}}</div><!-- Featured Configuration --><!--autoplay sets whether the slider automatically rotates through the items.autoplayTimeout sets the interval in milliseconds between rotations.autoplayHoverPause sets whether the carousel stops when a customer hovers an item.dots sets whether navigation dots will show on the slider.nav sets whether previous and next arrows will show on the slider.navRewind sets whether the slider will slide back to the beginning when the final item is reached.navText sets the HTML for the previous and next arrows.loops sets whether the slider will show the first item when the final item is reached.responsive allows you configure the options above on different device widths.--><script>require(['jquery','owl.carousel/owl.carousel.min'], function ($) {$("#productlist-sale .owl-carousel").owlCarousel({autoplay: false,autoplayTimeout: 5000,autoplayHoverPause: true,dots: true,nav: true,navRewind: true,navText: ["<em class='porto-icon-angle-left'></em>","<em class='porto-icon-angle-right'></em>"],loop: false,responsive: {0: {items: 1},768: {items: 2},992: {items: 2},1200: {items: 4}}});});</script>

finally press Save.

Filtering by Category

Often times you want a slider that only shows products from a particular category.

To limit a slider to a category, you can add category_id=# to the block, where # is the category ID on the website. You can find what the ID is for a category in the website's admin panel under Catalog> Categories.

Then you will see the ID next to the category name.

As an example, below shows how you would limit the Featured Slider to the Apparel category above:

{{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="5"category_id=40aspect_ratio="0" image_width="250" image_height="250" template="Smartwave_Filterproducts::owl_list.phtml"}}