This article will guide you through setting up a product slider at the bottom of your product landing pages.

Step 1: Creating the Product Slider

First, we need to create the product slider.

  1. Login to the Magento Admin Panel.
  2. Go to Content > Elements > Blocks.
  3. Click Add New Block. You should be directed to a page that looks like the below image:
    1. 53646172.png
      1. Enabled: this toggle sets whether the product slider will show or not. Click the toggle to switch it to Yes.
      2. Block Title: this field sets the alias for the product slider which you will need to reference later in this guide. Enter a memorable name such as "Product Page Slider".
      3. Identifier: this field is what the website uses to reference the slider. You will want to label it similar to Block Title.
        1. Using Product Page Slider as an example, this would be set as "product_page_slider".
      4. Store View: this field determines which store view the slider will show on. For most websites, you will want to select All Store Views.
  4. Next, we will add the product slider code.
    1. There are a few different product sliders that come with the theme for your site.
      1. Latest
        1. This will show the products most recently added to the site.
        2. Click Expand Source on the right to see the code to add the default latest slider:
          1. Latest Slider
            <style>

.page-layout-1column .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}

[class*='.page-layout-2columns'] .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}

</style>



<div id="latest-slider">

    <h2>Latest Products</h2>

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



<script>

require([

'jquery',

'owl.carousel/owl.carousel.min'

], function ($) {

    $("#latest-slider .owl-carousel").owlCarousel({

        autoplay: true,

        autoplayTimeout: 5000,

        autoplayHoverPause: true,

        dots: false,

        nav: true,

        navRewind: true,

        animateIn: 'fadeIn',

        animateOut: 'fadeOut',

        loop: true,

        lazyLoad: true,

        navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],

        responsive: {

            0: {

                items: 1

            },

            768: {

                items: 2

            },

            992: {

                items: 2

            },

            1200: {

                items: 4

            }

        }

    });

});

</script>
      2. Featured
        1. This will show the products marked as featured.
        2. Click Expand Source on the right to see the code to add the default featured slider:
          1. Featured Slider
            <style>

.page-layout-1column .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}

[class*='.page-layout-2columns'] .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}



</style>



<div id="featured-slider">

    <h2>Featured Products</h2>

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



<script>

require([

'jquery',

'owl.carousel/owl.carousel.min'

], function ($) {

    $("#featured-slider .owl-carousel").owlCarousel({

        autoplay: true,

        autoplayTimeout: 5000,

        autoplayHoverPause: true,

        dots: false,

        nav: true,

        navRewind: true,

        animateIn: 'fadeIn',

        animateOut: 'fadeOut',

        loop: true,

        lazyLoad: true,

        navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],

        responsive: {

            0: {

                items: 1

            },

            768: {

                items: 2

            },

            992: {

                items: 2

            },

            1200: {

                items: 4

            }

        }

    });

});

</script>
      3. Bestsellers
        1. This will show the products that are purchased the most on your site.
        2. Click Expand Source on the right to see the code to add the default bestsellers slider:
          1. Bestsellers Slider
            .page-layout-1column .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}

[class*='.page-layout-2columns'] .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}



</style>



<div id="bestsellers-slider">

    <h2>Bestselling Products</h2>

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



<script>

require([

'jquery',

'owl.carousel/owl.carousel.min'

], function ($) {

    $("#bestsellers-slider .owl-carousel").owlCarousel({

        autoplay: true,

        autoplayTimeout: 5000,

        autoplayHoverPause: true,

        dots: false,

        nav: true,

        navRewind: true,

        animateIn: 'fadeIn',

        animateOut: 'fadeOut',

        loop: true,

        lazyLoad: true,

        navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],

        responsive: {

            0: {

                items: 1

            },

            768: {

                items: 2

            },

            992: {

                items: 2

            },

            1200: {

                items: 4

            }

        }

    });

});

</script>
      4. Sale
        1. This will show the products that are on sale.
        2. Click Expand Source on the right to see the code to add the default sale slider:
          1. Sale Slider
            <style>

.page-layout-1column .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}

[class*='.page-layout-2columns'] .block.widget #product-slider .products-grid .product-item {

    width: auto;

    padding-left: 10px;

    padding-right: 10px;

}



</style>



<div id="sale-slider">

    <h2>On Sale</h2>

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



<script>

require([

'jquery',

'owl.carousel/owl.carousel.min'

], function ($) {

    $("#sale-slider .owl-carousel").owlCarousel({

        autoplay: true,

        autoplayTimeout: 5000,

        autoplayHoverPause: true,

        dots: false,

        nav: true,

        navRewind: true,

        animateIn: 'fadeIn',

        animateOut: 'fadeOut',

        loop: true,

        lazyLoad: true,

        navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],

        responsive: {

            0: {

                items: 1

            },

            768: {

                items: 2

            },

            992: {

                items: 2

            },

            1200: {

                items: 4

            }

        }

    });

});

</script>

    2. If you need to filter by category, you can add the category_id option to the block as shown below:

      1. {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" category_id="3"product_count="5" aspect_ratio="0" image_width="250" image_height="250" template="Smartwave_Filterproducts::owl_list.phtml"}}
        1. You can find a category's ID under Catalog > Categories. You'll see the ID next to the category name.
          1. 45449591.png
  5. Press Save in the upper right hand corner to save the slider.

Next, we will be adding the slider to the bottom of the product page.

Step 2: Add the Slider to the Product Page

  1. In the navigation menu on the left, navigate to Content > Widgets.
  2. Click Add Widget in the upper right hand corner.
  3. For Type, select CMS Static Block:
    1. 45449592.png
  4. For Theme, select Smartwave Porto CPC:
    1. 45449593.png
  5. Click Continue.
  6. For Widget Title, type in Product Page Slider.
  7. For Assign to Store Views, most websites can select  All Store Views.
    1. If you have multiple websites with CPCommerce and only want to select one store, click on the respective store in the list.
  8. For Sort Order, you can leave this blank.
  9. Under Layout Update, click Add Layout Update.
  10. Next to Display On, select All Product Types.
  11. Under Container, select Before Page Footer.
  12. On the left hand side, click Widget Options.
    1. 45449594.png
  13. Click Select Block and then click on the product slider title you setup earlier.
  14. Press Save.