ON THIS PAGE

Introduction

The Upsell & Cross-sell Widget or Recommendation Widget is an automatically-generated list of product recommendations in your online store. It allows your customers to discover new products easier and increase your sales.

Example of Recommendation Widget:

You can add Recommendation Widget to different pages of your online store:

  1. Manually to any page
  2. Automatically to certain pages:
    • Home page
    • Collection pages
    • Product pages
    • Search Results page
    • Cart page

Types of Recommendation Widget

TypeDescriptionPages for placing
New ProductsIncludes recently added products.Any page
Featured ProductsIncludes products selected manually.Any page
Similar ProductsIncludes products that are similar by one of the options: product type, product options (size and color), tag, vendor, or collections. Your customers will see products that are similar to the product they are viewing at the moment.Product page
Most Popular ProductsIncludes the all-time bestselling products of your online store.Any page
Products by AttributeIncludes random products of a selected product type, vendor or collection, or random products with a selected tag.Any page
Customers Who Bought This Product Also BoughtRecommends products other customers bought together with the viewed product within the same purchase.Product page
Cart page


Adding a Recommendation Widget

  1. Go to the Smart Search & Filter control panel > Upsell & Cross-sell.
  2. Click the + button at the top of the General tab.
  3. Choose the type of widget.
    Note
For the Featured products type you'll need to add products which customers will see on the widget.
For the Products by Attribute type you'll need to choose an attribute on which the selection of products shown to customers will be based.
  4. Optionally, change the Title.
  5. Choose the variant of installation: automatically or manually.

Adding automatically

  1. Choose the Auto option.
  2. Choose pages where you want to show the widget in the Install on setting.
  3. Click the Create widget button at the top.

Your new widget is created. Now you can check out how it looks on the pages you selected.

Adding manually

  1. Choose the Manual option.
  2. Click the Create widget button at the top.

Your new widget is created. As a result, you will see the code which you can insert into your theme template:

Next, follow these instructions to add recommendation widgets to your theme files manually.

Hiding/Showing Recommendation Widget

  1. Go to the Smart Search & Filter control panel > Upsell & Cross-sell.
  2. Click the Edit recommendations button at the top of the General tab.
  3. Change the widget's status from Active to Hidden and vice versa.
  4. Click the Save changes button.

Recommendation Widget's settings

There are some settings for Recommendation Widgets, you can manage them in the Settings tab.

SettingDescription
Show buttonChoose what kind of button to show for the product in the Recommendation Widgets or hide the button.
Display option swatchesIf you select this option, the Recommendation Widgets will show size and color variations.
You should specify all colors in Color families if you want to display them.
Use custom CSSThis option allows writing your own CSS rules for the Recommendation Widget, which will change its appearance.


The image below shows CSS schematics. You can use it for customization.