Customizing the display of recommendation widgets
On this page
- Design a widget
- Edit widget design
- Note: This feature is only available for App Lib V3, please contact us for further instructions.
Design a widget
Once you have chosen where the widget should be displayed on which page and what recommendation type to use, you can proceed to the widget design step. Here, you can edit and visualize the widget's appearance in the storefront.
The preview will display a list of themes that you have run theme setup for. The design of the product items on the recommendation widget will be obtained from the theme settings. The preview will be the UI in storefront, which means the selected preview theme will also be the selected theme on storefront. Additionally, it will determine the design for product items that will be published on the storefront.
In this step, you can set up the widget layout and widget title.
Widget layout
- We have 3 layouts:
- Carousel: This layout displays horizontally. Customers can slide the left and right arrows to see items.
- Grid: This widget displays a set number of rows in a grid style. Choosing this layout will expose all recommended products.
- Bundle: Bundles are a way to create sub-collections of items that go well together. We have 2 styles for bundle widget:
- Depending on page type and recommendation type, the option layout will be displayed corresponding:
- For each layout and recommendation type, there will be a different maximum recommended products:
- Carousel: max 30 recommended products (except for Hand-picked products type is 15).
- Grid: max 15 recommended products.
- Bundle: max 5 recommended products (Not including source products, it means that if users select max recommendation for bundle = 3 → the recommendation widget will show the source product + 3 recommended products).
|
Model | Type |
Carousel (Slider) |
Grid |
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
|
✔️ | ✔️ | |
Widget title
First time settings Widget design (custom the title)
- You can set the style for widget title with
- Alignment
- Text color
- Font
- Text transform
- Font style
- Font size
- You can set the same widget title format for all widgets by using the checkbox labeled “
- After setting the widget title style as default, next time when you go back to edit this widget or set up widget design for another widget, you will see the 2 options in style:
- Default design settings: By default with the settings saved.
- Customization
- The customized style will be applied to only 1 widget that currently is set up.
- You can choose to save this customization as default. If yes → these settings will overwrite the current default design settings ⇒ All widgets using default design settings in the past will be updated accordingly.
- After setting the widget title style as default, next time when you go back to edit this widget or set up widget design for another widget, you will see the 2 options in style:
- Note: You can translate the widget title by go to Tools > Translation > Recommendation.
Edit widget design
To edit a widget design, go to Recommendation > Manage recommendation widgets.
On the widget list, based on the Widget ID and Widget name to select the recommendation you want to edit by clicking on the “Widget name” or icon “Edit”.
Click to step “Widget design” > button “Open visual editor” to edit the field you want.
In case you see the “Widget design” is disabled as the screenshot, please complete the step General to move to Widget design step.
