How to customize the display of recommendation widgets

📖 In this guide, we will walk you through the process of customizing the display of Boost AI Search & Discovery Recommendation widgets to enhance your storefront's appeal and functionality.

On this page

⚠ This feature only works with Boost AI Search & Discovery V3 and above. To find out which version of our app you are using, please follow this article.

Design a widget

Once you've determined where you want the recommendation widget to appear and which recommendation type to use, you can proceed to design the widget. This step allows you to modify and visualize the widget's appearance on your storefront.

The preview will showcase a list of themes you've set up. The design of product items within the recommendation widget will follow your theme settings. It's important to note that the selected preview theme will also become the active theme on your storefront. Consequently, this theme choice will influence the design of the product items published on the storefront.

In this step, you can set up the widget layout and widget title.


Widget layout

  • We have 2 layouts:
    • Carousel: This layout presents items horizontally, enabling customers to navigate using left and right arrows.

    • Bundle: Bundles create sub-collections of complementary items. There are two styles for the bundle widget:
Bundle layout style 1
Bundle layout style 2
  • The layout and recommended product count vary based on the widget type:
Carousel Max 30 recommended products (except for Hand-picked products, where the max is 15).
Bundle Max 5 recommended products (excluding source products).
An example of a Bundle layout Recommendation widget with 1 source product & 3 recommended products. For Bundle layout, you can add up to 5 recommended products.

Here's how the different models/types of recommendation widgets are supported:

Model | Type Carousel (Slider) Bundle
Frequently bought together
✔️ ✔️(only for product page)
Related items
✔️ ✔️(only for product page)
Newest arrivals
✔️
Trending products
✔️
Bestsellers
✔️
Most viewed
✔️
Recently viewed
✔️
Hand-picked products
✔️
Recently purchased ✔️

Widget title

First time settings: Widget design (customize the title)

  • You have the option to style the widget title with:
    • Alignment
    • Text color
    • Font
    • Text transform
    • Font style
    • Font size

    • You can apply the same widget title format to all widgets ticking the provided checkbox Save widget title settings above as Default.
    • After setting the default widget title style, you'll see two options for style when editing the widget in the future:

      1. Default design settings: Preserves the saved settings as the default.
      2. Customization: Applies the customized style to the current widget only.

⚠ Should you choose to save this Customization as the default, the settings will overwrite existing default design settings. All widgets using the past default design settings will be updated accordingly.

💡 For information on translating widget titles, please refer to our article on how to translate the recommendation widget title.

Edit widget design

To edit a widget design, navigate to Recommendation > Recommendation widgets.

  1. Locate the widget you wish to edit based on Widget ID or Widget name or the Status (Live/Draft/Archive) tabs..
  2. Click on the Widget name or the "⋯" button from the Action column > click Edit.

  1. Proceed to Widget design > with the layouts we provide, you can proceed to make desired modifications.

⚠ If the Widget design option appears disabled, you will be promoted to complete the General step to access the Widget design step.

  1. Click Save and next.
  2. To complete and publish your widget to your live theme, please follow the provided step-by-step guide on the screen > click I'm all done.

That's it! You're now equipped to tailor your recommendation widgets to suit your storefront's aesthetics and enhance customer engagement.

Tutorial Video

Watch our tutorial video to see how to set up Product Recommendation Widget:

Should you have any questions related to the topic, please feel free to reach out to our dedicated support team via support@boostcommerce.net.