Basic flow to set up a widget
On this page
- Definition of our recommendation types
- Product recommendation requirements
- Create a recommendation widget
- Edit recommendation widget
Definition of our recommendation types
- Note: This feature is only available for App Lib V3, please contact us for further instructions.
To set up a recommendation widget, you should know about our definition of recommendation type:
Recommendation type | Definition |
---|---|
Frequently bought together | Recommend products that others bought, based on items added to the customer’s cart. |
Related items | Recommends alternative and complementary products that have common attributes as the source product.
|
Newest arrivals | Recommend products that have been recently added and published to the store. |
Trending products | Recommend the favored products that your customers viewed or purchased within 7 days. |
Bestsellers | Recommend popular items based on how many times your customers purchased an item within 30 days. |
Most viewed | Recommend popular items based on how many times your customers viewed an item within 30 days. |
Recently viewed | Recommend products that have been recently viewed by the customer, based on browser history. |
Hand-picked products | Recommend products that have been picked manually by the merchant. |
Product recommendation requirements
A recommended product displays if the following criteria are met:
- It isn't sold out.
- We have two cases of sold-out products: the number of in-stock products equals 0 or the products belong to non-fulfilment stores.
- It has a price higher than $0.00
- We do not recommend products that have a price = $0 or do not have a price.
- It is published to your Online Store sales channel.
These requirements help customers discover and purchase currently available products.
Create a recommendation widget
To create a recommendation widget, from the app’s admin, go to Recommendation > Manage recommendation widgets and follow these steps:
Select the page type → Select the recommendation type → Set up general (widget name, recommended products settings) → Set up widget design → Set up widget placement.
Step 1: Select the page type
- On Manage recommendation widget screen, click button “Add new widget”
- On the Page type section, select a suitable page where you want to place the recommendation widget. Currently, there are 4 pages available: Homepage, Collection page, Product page and Cart page.
- Each page will have a different type of recommendation widget.
Recommendation type
|
Homepage
|
Collection page
|
Product page
|
Cart page
|
---|---|---|---|---|
Frequently bought together
|
|
✔️ |
✔️ |
|
Related items
|
✔️ |
✔️ |
||
Newest arrivals
|
✔️ | ✔️ | ✔️ | ✔️ |
Trending products
|
✔️ |
✔️ |
✔️ |
✔️ |
Bestsellers
|
✔️ |
✔️ |
✔️ |
✔️ |
Most viewed
|
✔️ |
✔️ |
✔️ |
✔️ |
Recently viewed
|
✔️ |
✔️ |
✔️ |
✔️ |
Hand-picked products
|
✔️ |
Step 2: Select the recommendation type
Select the Recommendation type you want to set up based on the recommendation type glossary above, then click Create.
Step 3: Set up general
On the setup widget, input the Widget name and set rules for recommended products > Click Save & Next.
There are some common and quickly set-up recommendation types with no extra rules, such as Bestsellers, Newest Arrivals, Recently Viewed, and Most Viewed. Additionally, we offer some special recommendation types with advanced setup to help merchants meet their specific needs:
- The recommended products displayed in Frequently bought together and Related items can be generated by AI-based or Rule-based (such as collection, vendor, tag, metafield, product type)
- The Hand-picked products widget will be used to recommend products that have been manually selected using the Manual settings feature.
- The Trending products widget can be set up based on customer views and purchase events across the store. It can also be calculated within a time frame from 1 to 7 days.
Step 4: Widget design
On Widget design screen, click Open visual design to edit the widget layout and title style with a preview.
Currently, we support three widget layouts across four pages (except for the Bundle layout, which is only displayed on the Product page).
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
|
✔️ | ✔️ | |
To customize the widgets, follow these steps:
- Select the theme preview on the top of the screen.
The preview will display the list of themes you have run theme setup. The product item design will be obtained from the theme settings.
- In the visual editor, you also can edit the "Widget Name" (which is already set in the step “General”).
- Select the layout type (Carousel, Grid, or Bundle).
- Insert the maximum number of recommendations and the number of products per row (for Carousel and Grid) or bundle style (for Bundle). The maximum number of recommendations is differ between each layout
- Then setup design for widget title and click Save & next.
Step 5: Widget placement
On Widget placement screen, choose the method to add the widget to the storefront.
Using Shopify Theme App Extension.
This method applies to stores using Online Store 2.0 themes only. If you are using Online Store 1.0 themes, please use the second method instead.
- Using HTML placeholder.
By adding the code to your theme, you can place the recommendation widget at the desired location.
For more details, please refer to the article to add/remove/reorder a widget to a theme.
- Note: We also wrote Best practices for setup recommendation widget, please refer to this article.
Edit recommendation widget
To edit a recommendation widget, 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”.
- On the Setup widget screen, select and edit the field you want.