User Tools

Site Tools



See how the Automatic Related Products extension works.

Guide for Automatic Related Products for Magento 2

Motivate customers to purchase more from your store using special blocks with cross-sells, up-sells, or related products. Automatically promote products with smart algorithms for product relation and increase the average order value.

  • Create attractive product offerings using smart relation algorithm
  • Utilize various conditions to differentiate products display
  • Show related items based on customers' views or purchases
  • Exclude out-of-stock products from the display
  • Use automatic relation results instead of manual configuration

General Settings

To configure the extension please go to Stores → Configuration → Amasty Extensions → Automatic Related Products and expand the General section.

Provide shoppers with the functionality to easily return or exchange products with the Magento 2 RMA extension.

Data Gathered Period (days) - specify a time period for stats data gathering that will be used in related, up-selling, cross-selling, ‘bought together’ and ‘viewed together’ products.

Order Status - specify the order status that needs to be considered when the system selects matching products for the 'Bought together' condition.

Ignore Anchor Categories in 'Same As' Condition - If enabled, the rule condition 'Category is the same as Current Product Categories' will consider only non-anchor categories the product belongs to.

[Narrow case] Please note that the condition rule you created will be ignored (all store products will be applied) if both of the conditions below are applied:
  • the product you're configuring belongs to an anchor category ONLY;
  • the setting 'Ignore Anchor Categories in 'Same as' Condition' is enabled.

Bundle Packs

In the Bundle Packs section, you can fine-tune the main settings of product bundle packs.

Display Position - choose the position to display product bundle packs: below product info, on a product tab, or in a custom position.

Tab Title - when displaying bundle packs on a product tad, specify a custom title for the tab.

Choose CMS Page - Choose a CMS page to show bundle packs on.

Add Bundle Packs Link to Top Menu - choose the position for a bundle packs link on the top menu.

Bundle Packs Item Label - specify the bundle packs item label that will be used for a link in the top menu.

Display Upsell Message in Cart - display one random hint message in a cart, telling a customer which products to add to get the Bundle Pack discount.

Display Bundle Pack in Cart - display one random Bundle Pack in a cart, telling a customer which Bundle Pack he can add to get a discount.

If you want to set a custom position for Bundle Pack Display, copy the necessary embedding code and paste in a suitable position.

To create rules for linking products, please go to Catalog → Amasty Related Products → Related Product Rules.

On the product rules grid, you can see all existing rules for displaying related, up-sell and cross-sell items on different pages and in various positions in your store.

The rules are sorted by the ID and the Name. You can see the Status of each rule and change it right from the grid by clicking the necessary rule and setting the Enable Rule option to Yes or No.

All the rules are provided with the information about the Store View, Rule Type, its Position on the frontend. You can also check the Priority of each rule.

Only one rule can be applied in one position. If there are several rules, the rule with the highest priority will be executed.

Check the progress and effectiveness of each product block performance by tracking the number of Views, Clicks, CTR, Orders Made and the final Revenue.

When a related products block appears, it is counted as Views. When any product from the block is clicked, it is counted as Clicks. Firstly, all views are placed in a temporary table, and then the info is transferred to a permanent one via Cron jobs. After that, the temporary info is cleared.

Cronjob tasks:



pref_mostviewed_view_temp - cleared
pref_mostviewed_click_temp - cleared
pref_mostviewed_analytics - contains data

Change the columns’ position with a handy drag-and-drop function.

The dropdown menu allows to Delete, Enable, Disable, Duplicate or Edit each rule or several rules in one click.

Create rule for linking products

Check the video guide to learn how to create a new related product rule step-by-step

To create a new algorithm for displaying relevant products automatically, click Add New Rule button and expand the Rule Information tab.

Enable Rule - set to Yes to activate the rule.

Rule Name - create the rule title that will be displayed on your backend settings so that you could easily manage it from the grid.

Priority - only one rule can be applied in one position, but if some products fall under several rules, the extension will execute the rule with the highest priority. Here 1 is the highest priority.

Stores - set up products display according to the particular store.

Customer Groups - specify particular customer groups for which the block will be visible.

Recommend products on various pages

Go to the ‘Where to Display’ Conditions tab.

Block Position - customize the location for your related products block. Choose its position on the Product Page, Shopping Cart Page or Category Page.

You may also configure a Custom Position for the block with related products. This option provides a custom code to be inserted into layout. Thus you can place the block anywhere on your website. To use the option create a New Rule, choose 'Custom Position' in Block Position window and save the rule. A custom code will appear in the 'Block Embedding' window. Copy the code to the xml file with needed page layout (commonly xml files are located here: your_magento_instance_folder/design/layout/catalog_product_view.xml Use before/after tags to indicate the exact position of the widget. You may also add the code to any product or category page by inserting it into the 'Layout Update XML' window in Design section.

For 'Shopping Cart Page' the conditions are applied only to the latest added item.

If Add into Native Up-sells Block on a product page or Add into Native Cross-sells Block on a shopping cart page is chosen, you will have an option to specify the Replace Type.

The extension matches related products automatically. However, you can not only replace manually added products, but also append to them.

See how to add related products manually here.

After specifying the position, choose the conditions to define the products the “related items” block will be displayed according to color, size, price, category, etc. You can use the combination of the attributes if needed.

Show only for ‘Out of Stock’ Products - enable this option to display related products block for ‘out of stock’ products and provide customers with the items they can purchase.

Check the products that fall under the conditions created by clicking the Preview Products button.

You can see the Thumbnail, the Name, the Type and other additional information about each product. Use handy filters to find necessary products according to the name, type, price, status, visibility, etc.

If you are not satisfied with the list of products, change the conditions and hit the Preview Products button again.

Choose products to display

To sort the items that will be shown at the related products block, expand the Products to Display tab.

Conditions - select the attributes according to which the products will be shown.

Click Preview Products to check the products list if needed.

Note that preview does not show products based on frontend variable parameters: 'Viewed Together', 'Bought Together', 'Same As' and 'Current category only' Conditions.

If you want to show related products block on a product page, specify the Source Type.

Source Type - choose the way for related products to be assorted.

Only Product Conditions - choose this source type to display the items that fall under the conditions specified.

Viewed Together - enable this type to let the system show the products according to the history of views based on the statistical data.

Bought Together - this type displays products according to the statistical data of purchases.

Please enable 'Product View' report at the Configuration > General > Reports for the 'Viewed Together' data source works properly.

Apply “Same As” Condition - enable this option to select products by the same attribute value to display in the block.

For ‘same as’ condition you can set any attribute value: category, material, size, color, price and etc. For example, you can choose how to show products: display from any category or only from the same category with the selected item. The price is also variable.

If you would like to show related items on a category page, you also may enable the option to display the products from the current category only.

Sort products to show

To customize the related products block according to your needs, go to the Display Settings tab.

Block Title - add a custom title to capture customers' attention.

Sort by - define the way to display the products: sort them by name, price, newest or leave it random.

Block Layout - choose the style of the block: grid or slider.

Display “Add to Cart” Button - enable this option to let your customers add products to the cart right from the block.

Max Products to Display - specify the suitable for your website max number of products displayed in a product block.

Show “Out of Stock” Products - exclude out-of-stock items from displaying to provide your customers with the products they can purchase immediately.

The extension is compatible with read-only GraphQL. It allows to expose product data like SKU, name, link, image, price etc. in order to build PWA/JS based frontend.

Replace Items Manually

According to the rules, the extension matches related products automatically. However, you can replace or add related items manually in each product block.

Go to the Catalog → Products.

Choose the product needed and expand the Related Products, Up-Sells, and Cross-Sells tab.

To add items to the necessary category, click the Add Related/Up-Sell/Cross-Sell Products button.

Choose the items and hit the Add Selected Products button.

On the preview grid you may see the information about the products: the thumbnail, the name, active status and attribute set, SKU, price.

Also, you can Remove them in one click if needed.

Bundle Packs

To configure and manage product bundle packs, please, go to Catalog → Bundle Packs.

Here, you can easily manage all existing bundle packs and get the necessary information on each of them (including Main and Bundle Pack Products, Discount Amount and Discount Type, the date of creation, etc.).

Create New Bundle Pack

To create a new bundle pack, please, go to Catalog → Bundle Packs → Add New Pack button.

Status - set to Yes to make the bundle pack active.

Enable From - specify the period during which the bundle pack will be active. The bundle will be automatically enabled and disabled on the specified date and time.

Bundle Pack Name - define the name of a bundle pack (for internal use only).

Store - choose the store views to show a bundle pack for.

Customer Groups - select customers groups to show a bundle pack for.

Title - specify the bundle pack title that will be displayed on the products page.

Discount Type - choose a discount type for a bundle pack^ a fixed or percentage one.

Discount Amount - specify the discount amount.

The discount for bundle packs products will be applied above the special price if it is set.

Apply Discount to the Main Product - enable the option to apply the discount to the main product in a bundle pack.

Upsell Message - specify the upsell message that will be displayed in a shopping cart. Use variables: {product_names}, {discount_amount}. The upsell message will appear only when the Bundle Packs > 'Display Upsell Message in Cart' setting is enabled in the configuration.

On the Bundle Pack Products and Main Products grids, you can choose the main and bundle pack products accordingly. Choose the order of bundle pack products on the appropriate grid via drag-and-drop and specify each bundle pack product quantity.

Bundle Packs do not work with Grouped and Gift Card product types.

Cron Tasks List

To manage all existing cron tasks, please, go to System → Cron Tasks List.

Here, you can see all the existing cron tasks and their statuses. Run cron tasks and generate their schedule by clicking the ‘Run Cron’ button. Also, delete tasks in bulk, apply filtering and sorting options when it is needed.

Automatically show highly demanded items on a product page.

Increase revenue with up-selling products based on specified parameters.

Get more orders by showing cross-selling products on a shopping cart page.

Speed up the search, catalog and related products with improved indexing with the Elastic Search extension.

Show Bundle Packs on the Frontend

Here's how product bundle packs display on the frontend:

1. On the product tab:

With adjusted bundle pack products quantity:

2. After product description:

3. In the shopping cart:

4. On a CMS page:

Find out how to install the Automatic Related Products extension via Composer.

The extension also works smoothly on mobile devices if combined with a ready-made PWA solution, due to which store admin can significantly improve the user shopping experience on smartphones.

The feature can be enabled only after purchasing the PWA for Automatic Related Products Add-On. Also, you need to install a PWA theme first.

If the add-on is installed, Venia theme will be displayed for this extension in the following way:

Products in a bundle on Venia storefront:
Products in a related items block on a product page with Venia:
Find out more about Magento PWA integration here.

Before you start further configuration, please read the following instructions on Venia configuration components here.

You can freely add new components like blocks with related products or bundles on any place in your Venia-based store. For this, please navigate to store backend and configure the related product items display by specifying the following in the extension parameters:

For the blocks with the related products you need to specify:

  • categoryId - ID of the category or product for which the related offering will be displayed;
  • Position - you need to specify the position where the related offering will be displayed on the front.

Please have a look at the list of the available positions for this extension working in combination with the PWA add-on:

  • 'product_before_related',
  • 'product_after_related',
  • 'product_into_related',
  • 'product_before_upsell',
  • 'product_after_upsell',
  • 'product_into_upsell',
  • 'product_content_top',
  • 'product_content_tab',
  • 'product_before_tab',
  • 'product_content_bottom',
  • 'product_sidebar_top',
  • 'product_sidebar_bottom',
  • 'cart_before_crosssel',
  • 'cart_after_crosssel',
  • 'cart_into_crosssel',
  • ‘cart_content_top',
  • 'cart_content_bottom',
  • 'category_content_top',
  • 'category_content_bottom',
  • 'category_sidebar_top',
  • 'category_sidebar_bottom',
  • 'custom'

For the bundle packs you need to specify:

  • Id - the ID of the product for which the bundle packs’ display is configured.
Please note that the option of placing bundle packs on the shopping cart is currently unavailable due to the limited Venia theme functionality as per now.
Please note that bundle packs are currently working only for configurable and simple types of products due to the limited Venia theme functionality as per now.
Please note that it’s currently unavailable to place and manage bundle packs on the CMS pages due to the limited Venia theme functionality as per now.

Here’s an example of how to add the related product components on the Cart page:

Please note that as per the moment of creation of this guide the Shopping Cart page on Venia theme is not fully developed yet.

1. Copy the component’s folder of the search page into the folder with our components:

cd myproject
mkdir -p src/lib/components/
cp -R node_modules/@magento/venia-ui/lib/components/CartPage src/lib/components/

Edit the component searchPage.js. Change all relative ways of components import to absolute:


for example:

import Button from '../Button';


import Button from '@magento/venia-ui/lib/components/Button';

Add import of the component Related Products import RelatedProducts from


Choose the place where to place the component:

<RelatedProducts categoryId={3} position={'cart_content_bottom'}/>

As a result, the file searchPage.js should look like the following below:

import React, { useMemo } from 'react';

import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';

import { Title } from '@magento/venia-ui/lib/components/Head';
import Button from '@magento/venia-ui/lib/components/Button';

import PriceAdjustments from '@magento/venia-ui/lib/components/SearchPage/PriceAdjustments';
import PriceSummary from '@magento/venia-ui/lib/components/SearchPage/PriceSummary';
import ProductListing from '@magento/venia-ui/lib/components/SearchPage/ProductListing';
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import defaultClasses from '@magento/venia-ui/lib/components/SearchPage/cartPage.css';
import { GET_CART_DETAILS } from '@magento/venia-ui/lib/components/SearchPage/cartPageQueries';
import RelatedProducts from '../../components/AmRelatedProducts';

const CartPage = props => {
   const talonProps = useCartPage({
       queries: {
           getCartDetails: GET_CART_DETAILS

   const {
   } = talonProps;

   const classes = mergeClasses(defaultClasses, props.classes);

   const signInDisplay = useMemo(() => {
       return !isSignedIn ? (
               {'Sign In'}
       ) : null;
   }, [classes.sign_in, handleSignIn, isSignedIn]);

   const productListing = hasItems ? (
       <ProductListing setIsCartUpdating={setIsCartUpdating} />
   ) : (
       <h3>There are no items in your cart.</h3>

   const priceAdjustments = hasItems ? (
       <PriceAdjustments setIsCartUpdating={setIsCartUpdating} />
   ) : null;
   const priceSummary = hasItems ? (
       <PriceSummary isCartUpdating={isCartUpdating} />
   ) : null;

   return (
       <div className={classes.root}>
           <Title>{`Cart - ${STORE_NAME}`}</Title>
           <div className={classes.heading_container}>
               <h1 className={classes.heading}>Cart</h1>
           <div className={classes.body}>
               <div className={classes.items_container}>{productListing}</div>
               <div className={classes.price_adjustments_container}>
               <div className={classes.summary_container}>
                   <div className={classes.summary_contents}>
               <div className={classes.recently_viewed_container}>
                   <a href="">
                       Recently Viewed to be completed by PWA-270.

           <RelatedProducts categoryId={3} position={'cart_content_bottom'}/>

export default CartPage;

2. Add the edited file into the override map of standard components componentOverrideMapping.js

[`@magento/venia-ui/lib/сomponents/CartPage/cartPage.js`]: 'src/lib/сomponents/CartPage/cartPage.js',
module.exports = componentOverride = {
   [`@magento/venia-ui/lib/RootComponents/Category/category.js`]: 'src/lib/RootComponents/Category/category.js',
   [`@magento/venia-ui/lib/RootComponents/Product/product.js`]: 'src/lib/RootComponents/Product/product.js',
   [`@magento/venia-ui/lib/сomponents/CartPage/cartPage.js`]: 'src/lib/сomponents/CartPage/cartPage.js',

3. Run the Watch command: ‘yarn watch’.

Rate the user guide
 stars  from 2 votes (Details)
magento_2/automatic_related_products.txt · Last modified: 2020/09/30 09:03 by hfedulova