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.
- Login to the Magento Admin Panel.
- Go to Content > Elements > Blocks.
- Click Add New Block. You should be directed to a page that looks like the below image:
- Enabled: this toggle sets whether the product slider will show or not. Click the toggle to switch it to Yes.
- 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".
- Identifier: this field is what the website uses to reference the slider. You will want to label it similar to Block Title.
- Using Product Page Slider as an example, this would be set as "product_page_slider".
- Store View: this field determines which store view the slider will show on. For most websites, you will want to select All Store Views.
- Next, we will add the product slider code.
- There are a few different product sliders that come with the theme for your site.
- Latest
- This will show the products most recently added to the site.
- Click Expand Source on the right to see the code to add the default latest slider:
- 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>
- Featured
- This will show the products marked as featured.
- Click Expand Source on the right to see the code to add the default featured slider:
- 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>
- Bestsellers
- This will show the products that are purchased the most on your site.
- Click Expand Source on the right to see the code to add the default bestsellers slider:
- 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>
- Sale
- This will show the products that are on sale.
- Click Expand Source on the right to see the code to add the default sale slider:
- 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>
- Latest
If you need to filter by category, you can add the category_id option to the block as shown below:
- {{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"}}
- You can find a category's ID under Catalog > Categories. You'll see the ID next to the category name.
- You can find a category's ID under Catalog > Categories. You'll see the ID next to the category name.
- {{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"}}
- There are a few different product sliders that come with the theme for your site.
- 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
- In the navigation menu on the left, navigate to Content > Widgets.
- Click Add Widget in the upper right hand corner.
- For Type, select CMS Static Block:
- For Theme, select Smartwave Porto CPC:
- Click Continue.
- For Widget Title, type in Product Page Slider.
- For Assign to Store Views, most websites can select All Store Views.
- If you have multiple websites with CPCommerce and only want to select one store, click on the respective store in the list.
- For Sort Order, you can leave this blank.
- Under Layout Update, click Add Layout Update.
- Next to Display On, select All Product Types.
- Under Container, select Before Page Footer.
- On the left hand side, click Widget Options.
- Click Select Block and then click on the product slider title you setup earlier.
- Press Save.