Overview

The CROSS-SELL WPO is about cross-selling personalized product recommendations on your basket page and on basket overlays appearing just after the visitor clicked on the add-to-basket button.

If you are not familiar with WPOs, Customer Journey Steps, WPO Levels, Widgets, or Page layouts, please read the introduction: Widget & Page Optimizers (WPO)

Purpose

Conversion Optimization

Conversion Optimization
Additional sales in the Purchase phase
Margin optimization
Sales
Assortment clarification
etc.

How should the widgets appear visually?

The CROSS-SELL widgets typically are displayed with a label (title) on top and a slider or product recommendations (with left and right arrows) as documented as “product slider” in the Check-list: empower your Website Layout with Narratives | Layout Blocks (Templates) Check list. There might be several blocks on the page, one below each other, or in different sections of the page. But other displays (like this screen-shot) can be considered as well.

Key focus: relevance to the products already in the basket

The relevance of the products already in the basket is important here. Therefore, instead of “simply” showing manually defined accessories and basic “often bought together”, you can offer a meaningful logic of the hidden patterns defining what products are good cross-selling matches, even for your long-tail where you don’t have a lot of statistics of what other products are often bought together. Therefore, many of the first Best Practices are from the group Product & Content Context (PCC).

It might be confusing why we speak about the basket page and basket overlay only, while you might want to also have cross-sellings in every display of your Product Detail Page (PDP). The reason is that the UP-SELL WPO covers all the widgets appearing on the PDP directly, while the CROSS-SELL WPO covers all widgets appearing on the basket page on an overlay after the user clicks on the add-to-basket button. So for cross-sellings on the PDP, please look at the UP-SELLING WPO.

Related WPOs

The CROSS-SELL WPO belongs to the PURCHASE customer journey step (4th column of the diagram above) and corresponds to LEVEL 1 as it is solely about products and not other types of content: combine it with EXTEND to also support marketing incentives (like indicating free delivery if a specific level is reached) and BUNDLE to show special cross-selling deals if two or more specific products are bought together.

What widgets should you consider?

One or several product recommendations blocks, each with a specific label, can be integrated.

Each block can display the products in a slider or in a grid (the number of products per block is not limited but is typically less than 20). The number of blocks is also not limited and will be returned in a sequence by our API.

WPO Optimization Strategies

The Widget strategy can be configured in the Widget Strategy Editor and supports all the standard Strategy Use-Cases.

Here is a selection from our Best Practice Strategies in 3 sections (what to configure before your go-live, what could be your first A/B test about and more advanced practices for later stages).

1. What to start with (for the go-live)?

2. What could be a/b tested first?

3. What else could be experimented with?

Expand the list to see all the additional Best Practices of this WPO.

Additional ideas for Widget Strategies

Change the label of your blocks depending on the content of the recommendations (e.g.: “Often bought with” versus “Personalized suggestions for you”)
Segmented personalization (based on the visitor’s traffic source, device, etc.), also for the layout (traffic coming from Google Shopping could see the similar product recommendations at the very top as they need to see if there are any relevant alternatives)
Make sure to display a block of cross-selling recommendations directly after the visitor adds a product to the basket in an overlay (and not only on the basket page) because such overlay typically gets 5x to 10x more click-through and buy-through than the ones on the basket page.

Onboarding project plan

Here are our suggestions for the project management steps of the CROSS-SELL widgets.

	Task	Description	Comment

	Task	Description	Comment
1	Pre-requisites	Make sure the Pre-requisites steps are completed and already deployed in production Data exports Tracker integration	Exports for products and transactions are required, as well as all the standard tracking events.
2	Pages	Define the pages where the CROSS-SELL widgets will be integrated	Example: Add-to-basket overlay Basket page
3	Widgets	Define the CROSS-SELL widgets to be integrated on each page and where they should appear on the page (if you decide that some widgets should not appear for all visitors, define the logic deciding when they will appear or not)	Example names: addtobasket basket
4	Labels	Define the label of each of the CROSS-SELL widgets in each language (the title that appears on top of the product slider)	Examples: Often bought with Accessories Other people also bought/like
5	Integrate API + Configuration	Integrate Boxalino Narrative API and configure your widgets in the Boxalino Admin. Layout Blocks of the templates (typically 2 templates: product slider (container) and product (for each product display) as documented as “product slider” in the Check-list: empower your Website Layout with Narratives \| Layout Blocks (Templates) Check list Widgets strategies with one use case* in the CROSS-SELL WPO in Boxalino Admin with the exact names defined in step 3 A narrative defining the layout of widgets (with positions if separated zones) referring to the names of the widgets as accessors and with the labels defined in step 4	As a result, you should be able to see the widgets appear in your dev/stage front-end showing valid products of the same category but without any other relevant logic in the selection of the products. If you display widgets in separated zones of the page, you can use different positions so the widgets are grouped by positions in the Narrative API response
6	Configure Widget Strategies	Complete the strategy of each of the CROSS-SELL widgets (first in prose and then by configuring the widget in the Boxalino Admin)	Boxalino can support you for the configuration of the widget strategies
7	Test & Deploy	Testing in your dev/stage environment and go-live	In case you have a separate prod and a stage account, make sure to copy your configuration in production before going live

for the initial configuration of your widget, make sure to configure the similar category use-case described in the Integration notes: Widgets configuration.

Integration notes

Pre-requisites: Data exports (products, transactions, and optionally customer data) and Boxalino Tracker integration.
Widgets configuration: you can simply copy the following JSON and import it in your Widget Strategy configuration (it will allow you to see products of the same category which will allow you to validate that the items you provide in your API request are working correctly).
Boxalino Narrative should be configured in Boxalino’s admin on the first appearing widget on the page (which should be the one called in the API request). The Narrative should define the layout of all the widgets (name of the widget to be indicated in the accessor parameter possibly with a hitCount to define how many products should be returned, for example: “topsellers[hitCount=15]”) as well as the labels.
Boxalino Narrative API will return a list of blocks (for each block of product recommendations) each with a list of sub-blocks (with the list of products) as documented here, (make sure to make only one call to our API to retrieve all widgets and not a call per widget which would cause poorer speed performance on your frontend)
The products returned will always include the product ids (which might be all you need) and other product fields can be returned as well if requested in the API calls (see Return Fields)
For the Add-to-basket overlay, you can decide to either make the request in AJAX at the moment the visitor adds the product to the basket or in advance on the PDP page (and only display it in case of an add-to-basket event). Both approaches are fine, as the Boxalino tracker will identify if the overlay was displayed or not and will ignore the many requests which were never shown to the visitor.
The request and the response should not be cached (consider an AJAX call in case you need to cache some parts of your page for performance reasons).
Make sure to tag your HTML with the required classes and entities returned by Boxalino as bx-attributes so the Boxalino tracker can identify automatically the scrolling behavior (including the appearance of the products when using the slider arrows).
Before going live, make sure to control the Tracker Checklist

[
  {
    "useCaseModelSource": "library",
    "useCaseModelId": 20,
    "useCaseModelVersion": 1,
    "useCaseModelSubVersion": 1,
    "name": "Same Product Attributes",
    "order": "8",
    "orGroup": null,
    "fromIndex": -1,
    "toIndex": -1,
    "maxWeight": null,
    "variant": "",
    "scope": "local",
    "overwriteLevel": 1,
    "overwriteLabel": null,
    "globalTargetTags": [],
    "active": true,
    "parameters": [
      {
        "name": "field",
        "value": {
          "format": "FieldParameterValue",
          "value": "category_id"
        },
        "scope": "global"
      },
      {
        "name": "operator",
        "value": {
          "format": "StringParameterValue",
          "value": "matches exactly"
        },
        "scope": "global"
      },
      {
        "name": "required",
        "value": {
          "format": "BooleanParameterValue",
          "value": false
        },
        "scope": "global"
      },
      {
        "name": "orCondition",
        "value": {
          "format": "BooleanParameterValue",
          "value": false
        },
        "scope": "global"
      },
      {
        "name": "boostFilter",
        "value": {
          "format": "BooleanParameterValue",
          "value": true
        },
        "scope": "global"
      },
      {
        "name": "boostWeight",
        "value": {
          "format": "StringParameterValue",
          "value": "500"
        },
        "scope": "global",
        "startval": {},
        "schema": ""
      },
      {
        "name": "role",
        "value": {
          "format": "StringParameterValue",
          "value": "mainProduct"
        },
        "scope": "global",
        "startval": {},
        "schema": ""
      }
    ],
    "segmentationIds": [],
    "segmentationUniqueKeys": [],
    "CPOInitiativeId": null,
    "notes": null,
    "options": {
      "status": null,
      "includeWidgets": null,
      "excludeWidgets": null,
      "allWidgets": null,
      "conditionalSegments": null,
      "conditionalProductSelections": null,
      "ordering": null,
      "parameters": [
        {
          "name": "system",
          "values": [
            "false"
          ]
        }
      ],
      "allLinkedAccounts": null,
      "accounts": null
    },
    "icons": {
      "strategy": {
        "value": "cpo_sales.png",
        "tooltip": "SALES OPTIMIZATION"
      },
      "level": {
        "value": "L1",
        "tooltip": "LEVEL 1 - ONLINE CONVERSIONS"
      },
      "initiative": {
        "value": "fa-folder",
        "tooltip": "EFFECTIVE CONTEXT"
      },
      "character": {
        "value": "",
        "tooltip": ""
      },
      "mode": {
        "label": "",
        "value": "",
        "tooltip": ""
      }
    },
    "sections": [
      {
        "id": "main",
        "label": "Values",
        "active": true
      },
      {
        "id": "advanced",
        "label": "Advanced",
        "active": false
      }
    ],
    "status": true,
    "isSelected": true
  }
]

Boxalino Public Knowledge Base

CROSS-SELL: Product Suggestions on Overlay and Basket Page