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:
Slider Styles
[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:
- In the Magento Admin Panel, navigate to Catalog > Products.
- Search for the product you want to mark as featured and in the table, click on the row for that product.
- Locate the Is Featured setting and click the toggle to change it to Yes.
- In the upper right-hand corner, click Save.
Adding the Slider
To add the slider to a page, follow these steps:
- In the Magento Admin Panel, navigate to Content > Pages.
- Search for the page you want to edit and in the row for that page, under the Actions column click Select > Edit.
- Open the Content section and locate where you want to add the slider.
- Enter the following snippet:
Featured Slider 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:
- In the Magento Admin Panel, navigate to Content > Pages.
- Search for the page you want to edit and in the row for that page, under the Actions column click Select > Edit.
- Open the Content section and locate where you want to add the slider.
- Enter the following snippet:
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 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-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:
- In the Magento Admin Panel, navigate to Content > Pages.
- Search for the page you want to edit and in the row for that page, under the Actions column click Select > Edit.
- Open the Content section and locate where you want to add the slider.
- Enter the following snippet:
- Bestsellers Slider SnippetBestsellers 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.
If you have the CP-Commerce Price Rules extension, items that only have a sale price through the extension will not be listed in the sale slider.
Adding the Slider
To add the slider to a page, follow these steps:
- In the Magento Admin Panel, navigate to Content > Pages.
- Search for the page you want to edit and in the row for that page, under the Actions column click Select > Edit.
- Open the Content section and locate where you want to add the slider.
- Enter the following snippet:
- Sale Slider SnippetSale 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.
The block only supports 1 category ID.
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=40 aspect_ratio="0" image_width="250" image_height="250" template="Smartwave_Filterproducts::owl_list.phtml"}}