SwissUpLabs Logo

Slider Related Products, Slider-Up-Sells, and Slider-Cross-Sells

These instructions help you to dispaly all relationship products as a slider on the product page.


  1. This tutorial assumes that you already created custom theme based on one of Argento themes.

    If you did not — go ahead, it will take 15 minutes.

  2. You should add related products in the configuration of each product.


  • Related Products - Related products are meant to be purchased in addition to the item the customer is viewing.
  • Up-sell Products - items that are similar, but are perhaps of a higher-quality, more popular, or have a better profit margin than the item the customer is considering.
  • Cross-sell Products - offered on the shopping cart page as last-minute purchases before the checkout process begins.

Choose a relation products and set destination on the product page.

  1. Create catalog_product_view.xml file in the following directory:

  2. Set destination for the relation products on the product page:

    <?xml version="1.0"?>
    <page layout="1column" xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="">
            // Add relation products block (e.g.-Upsell products)
            <block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="upsell_products" template="Magento_Catalog::product/list/items.phtml" after="-">
                    <argument name="type" xsi:type="string">upsell</argument>
                <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="upsell.product.addto" as="addto">
                    <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                           name="" as="compare"
        // Set a new destination for Your relation products block
        <move element="upsell_products" destination="set_destination" after="-"/>

Afterwards need to override items.phtml file:

  1. Create items.phtml file in the following directory:

  2. Wrap related products into div with el option and specified slick parameters:

    <div data-mage-init='{"slickwrapper": {"el": ".product-items", "slidesToShow": 5, "slidesToScroll": 5, "dots": true}}'>
        <?php if ($exist):?>
        <?php endif;?>

Clear Magento cache to see the result:

Edit this Page