📖 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.
⚠️ 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
Carousel: This layout presents items horizontally, enabling customers to navigate using left and right arrows.
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). |
Here's how the different models/types of recommendation widgets are supported:
Model | Type | Carousel (Slider) |
Frequently bought together | ✔️ |
Related items | ✔️ |
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 by 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:
Default design settings: Preserve the saved settings as the default.
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 the 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.
3. 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 prompted to complete the General step to access the Widget design step.
4. Click Save and next.
5. 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 [email protected].