Related Products, Up-Sells, and Cross-Sells for Commerce 2.1 and Earlier Versions

You can use product relations to create links between products. After doing so, one product displays other linked products. To add a product relation, you must choose from one of the available relation types. Then you can use a product publisher and choose the appropriate relation type to display linked products relative to the product featured on the page.

When placing multiple product publisher widgets on a product detail page, multiple sets of related products may appear. For instance, one widget can display alternatives while another can display accessories to the product featured on the page.

Here is a list of product relations that come with the Minium and Speedwell site initializers:

Up-Sell: products with a higher sale value comparable to the featured product.

Spare: spare parts or components of the featured product.

Related: a catch-all set.

Accessories: add-on products for use in conjunction with the featured product.

Cross-Sell: products complementary to the featured product.

Adding a New Product Relation Type

If you’re not using a site initializer or want more product relations, you can add them as needed.

1. Go to the Control Panel → Configuration → System Settings.

2. Click Catalog in the Commerce section.

3. Click Product Relations on the left menu.

4. Click Add.

5. Enter the new Product Relation in the Type field: Warranties.

6. Click Save.

   

This adds a new product relation.

Creating Relationships Between Products

1. Go to the Control Panel menu → Commerce → Products.

2. Select any product; for example, Brake Pads.

3. Click on the Product Relations sub-tab.

4. Click on Related in the left menu.

   

5. Click Add () to add one or more relationships.

6. Click Add.

   

The two products (Brake Fluid and Brake Rotors) are now associated with the selected product (Brake Pads). This relationship is unidirectional. You can see brake fluid and brake rotors as related products when viewing brake pads. But the opposite is not true. To display product relations, you must configure a product publisher widget.

Displaying Product Relations

You can display product relations on a product display page by configuring a product publisher widget. You must have a product display page in place first.

1. Search for a product (for example Brake Pads).

2. Click Brake Pads to view the Product Details.

3. Scroll to the bottom of the page to view the related products listed in the Product Publisher widget.

   

4. Click Actions () and select Configuration.

5. Select Product Relations related from the Data Source dropdown menu.

   

6. Click Save and close the dialog box.

   

The example above shows how different products could be related, ensuring that customers can see the full range of products that may also be potentially useful.