📖 In this article, we will learn how to add and customize your Boost Recommendation widget to your theme.
⚠ This article only works for Boost AI Search & Discovery V3 and older versions. To find out which version of our app your store's current theme is installed with, please follow this article.
💡 For Turbo users, please these articles to add the recommendation widget using app blocks.
Add a recommendation widget to a theme
Manual flow
Firstly, we need to make sure you have enabled Boost core on the theme:
Step 1: From the app's dashboard, select Recommendation > Recommendation widgets.
Step 2: Below the Recommendation widgets header: select How to add widget to theme.
Step 3: Make sure to have enabled Boost core.
Step 4: Select Enable Boost Core to enable Boost Core
Add a recommendation widget by using Theme App Extension
Placing recommendation widgets is super easy when using a Shopify Theme app extension for Online Store 2.0 themes. You can add them without having to use codes.
To add a recommendation widget using a Theme app extension, please follow these steps:
Step 1: Open Shopify's theme editor
In your Shopify admin, go to Online Store > Themes > Find the theme you want to add the widgets > Customize.
Then the screen Theme Editors will appear.
Step 2: Enable the App to embed Boost Core
To ensure that Recommendation widgets work properly, the Boost core app embed needs to be enabled. By default, it is enabled when you install the app. If the Boost core app embed hasn't been enabled yet, please go to Shopify's theme editor, click App embeds then click toggle to enable the Boost core.
⚠️ Make sure you have enabled the app embed Boost Core before setting up the recommendation widget. If this app embed is not enabled, the widget will not appear on the storefront.
Step 3: Add the widgets using app blocks
Choose the template (page) you want to add widgets.
On the left-side menu, click the Add section and choose the app block Boost Recommendation in the section App.
Then you will see the "Boost Recommendation" container in the preview area and the list of settings attached.
Enter the widget ID in the Widget ID box.
The widget ID is the ID when you created the widget and this always goes with the page name and a 6-digit number (Eg:
Note: Please enter the widget ID that matches the page you have selected. For example, if the WidgetID is
homepage-12918, it can only appear on the Homepage.
The container will load and show the Recommendation widget as settings on the app admin.
Change the position of the chosen widget by dragging it up or down.
Edit the spacing, additional classes, and custom CSS (If any).
Click Save.
Autoflow
When setting up a new theme, you can select multiple existing recommendation widgets to add to the theme without having to add them manually one by one. To do this, follow these steps on App admin:
Go to Theme settings > click Set up a new theme.
On step 1 > question 2 “Which features would you like to install?”, select “Recommendation widget”.
On the “What recommendation widgets would you like to install?” step, select the desired recommendation widgets that were previously created on the Recommendation menu.
Click Run theme setup.
After the widgets are installed, they will be placed above the footer on the relevant page by default. To reorder the widget, go to Shopify's theme editor to rearrange the widget placement.
Remove the recommendation widget in a theme
Remove recommendation widget from App Admin:
On the app admin, go to Recommendation > Manage recommendation widgets.
On the widget list, based on the Widget ID and Widget name, select the recommendation you want to edit by clicking on the icon “Delete”.
Click Delete.
Delete a widget from app admin → the widget also will be deleted on all themes on Theme App Extension.
Remove recommendation widget from Theme App Extension:
On Shopify's theme editor > find the recommendation block you want to remove.
Remove this widget by clicking the button “Remove block”. This action will not affect the recommendation widget on the app admin.
Click Save. The widget will not display on your storefront.
Enable/disable a recommendation widget on a theme (using the theme editor)
To enable/disable a recommendation widget on the storefront:
1. Go to Shopify's theme editor > find the Boost Recommendation (for V3) or Recommendation (new) (for Turbo) block you want to enable/disable:
Enable the block by turning the eye on
Disable the block by turning the eye off
This action will not affect the recommendation widget on the app admin.
2. Click Save.
Tutorial video
Watch our tutorial video to see how to add a Product Recommendation Widget to your theme:
If you need any further assistance, please feel free to reach out to our dedicated support at [email protected].