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:

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:

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.

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).

To customize the widgets, follow these steps:

1. 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.

2. In the visual editor, you also can edit the "Widget Name" (which is already set in the step “General”).
3. Select the layout type (Carousel, Grid, or Bundle).
4. 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
5. 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.

1. 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.

2. Using HTML placeholder.

3. 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.

1. 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”.

   

2. On the Setup widget screen, select and edit the field you want.