How to customize Recommendation widgets on a theme

đź“– In this article, we will learn how to add and customize your Boost Recommendation widget to your theme.

On this page

âš  This article only works for Boost AI Search & Discovery V3 and above. To find out which version of our app your store's current theme is installed with, please follow this article.

Add a recommendation widget to a theme

Manual flow

đź’ˇ Tips: From our app's dashboard, you can go to Recommendation > Recommendation widgets > click on How to add widget to a theme then follow the instructions to add it...

or check if Boost app or the app block is enabled on your theme, yet.

Add 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 interact without coding.

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.

  • Note: 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

  1. Choose the template (page) you want to add widgets.

  2. On the left-side menu, click Add section and choose the app block Boost Recommendation on section App.

  3. Then you will see the "Boost Recommendation" container on the preview area and the list of settings attached.

  4. Enter widget ID to Widget ID box.
  5. The widget ID is the ID when you created the widget and this always goes with the page name and 6-digits 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.

  6. The container will load and show the Recommendation widget as settings on the app admin.
  7. Change the position of the chosen widget by dragging it up or down.
  8. Edit the spacing, additional classes and custom CSS (If any).
  9. Click Save.

Auto flow

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:

  1. Go to Theme settings > click Set up a new theme.
  2. On step 1 > question 2 “Which features would you like to install?”, select “Recommendation widget”.
  3. On the “What recommendation widgets would you like to install?” step, select the desired recommendation widgets that were previously created on Recommendation menu.
  4. 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 recommendation widget in a theme

  • Remove recommendation widget from App Admin:
    1. On the app admin, go to Recommendation > Manage recommendation widgets.
    2. On the widget list, based on the Widget ID and Widget name to select the recommendation you want to edit by clicking on the icon “Delete”.
    3. 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:
    1. On the Shopify's theme editor > find the recommendation block you want to remove.
    2. Remove this widget by click button “Remove block”. This action will not affect the recommendation widget on app admin.
    3. Click Save. The widget will not display on your storefront.

Enable/disable a recommendation widget on a theme (using theme editor)

To enable/disable a recommendation widget on storefront:

  1. Go to the Shopify's theme editor > find the Boost Recommendation block you want to enable/disable:
    • Enable the block by turning the eye off → on

    • Disable the block by turning the eye on → off

      This action will not affect the recommendation widget on app admin.

  1. 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 support@boostcommerce.net.