Customizing Recommendation widgets on a theme

The product items on recommendation widget are obtained from our Theme settings feature. Currently, we only support the PFS default theme and 5 premium themes. For more details, please refer to matching themes article.

• Note: This feature is only available for App Lib V3, please contact us for further instructions.

Add a recommendation widget to a theme

Manual flow

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

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

2. Add recommendation widget by using HTML placeholder

You might need be using HTML placeholder if your store is using Online Store 1.0 themes or Online Store 2.0 themes with Liquid. To add the Recommendation Widget, please follow the steps:

1. Go to Shopify admin > Online store > Themes.
2. Find the theme you want to add the widgets, and then click Actions > Edit code.
3. Copy the HTML placeholder from the step Widget placement. Each widget will have a different code.

   • Note: You need to put the code in the widget placement page to display on the storefront.

     

4. Paste the code to the chosen file in any place you want.
5. Save the changes.

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.

2. Click Save.