Skip to main content

For dev - How to set up Recommendation feature manually for Theme OS 1.0

In this guide, we show developers how to manually setup Recommendation feature for Theme OS 1.0.

Written by Thomas Ta

šŸ“– This article will help you learn how to set up Boost AI Search & Discovery's Recommendation feature on your Shopify OS 1.0.

Using Shopify Theme Editor

Step 1: Enable Boost Core - app embed

  • In your Shopify admin, go to Online Store > Themes > Customize.

  • Enable/Disable Boost core In Shopify's theme editor, click App embeds on the left.

Step 2: Create a new Snippet your theme

  • In your Shopify admin, go to Online Store > Themes > Actions > Edit code.

    • In folder Snippets, create a new liquid file named: boost-sd-app.liquid.

Step 3: Insert our manual code to the file

For V3

  • Copy this code snippet:

{% comment %} PLEASE DO NOT EDIT THIS FILE {% endcomment %}
{% case type %}  
{% when 'product-filter' %}		
<div class="boost-sd__product-filter-fallback">	    
<div class="boost-sd__filter-block"></div>    </div>  
{% when 'recommendation' %}    
<div id="boost-sd-widget-{{- widgetId -}}"></div>
{% endcase %}

  • Then paste it in the boost-sd-app.liquid file that we just created.

For TURBO

  • Copy this code snippet:

{% comment %} PLEASE DO NOT EDIT THIS FILE {% endcomment %}
{% case type %}
  {% when 'filter-product-list-turbo' %}
    <div class="boost-sd__filter-product-list"></div>
    <script>
      const hasFilterBlock = document.querySelector('.boost-sd__filter-product-list');
      const boostWidgetIntegration = window.boostWidgetIntegration;
      const app = boostWidgetIntegration && boostWidgetIntegration.app && boostWidgetIntegration.app['production'] ? boostWidgetIntegration.app['production'] : null;
      const placeholderFilterTree = app && app.template && app.template.placeholderFilterTree ? app.template.placeholderFilterTree : null;
      if (hasFilterBlock && placeholderFilterTree) {
        hasFilterBlock.innerHTML = placeholderFilterTree;
      }
      if (window.boostSDTaeUtils && window.boostSDTaeUtils.initCollectionFilter) {
        window.boostSDTaeUtils.initCollectionFilter();
      }
    </script>

  {% when 'recommendation-turbo' %}
    <div id="boost-sd-widget-{{- widgetId -}}"></div>
{% endcase %}

Step 4: Add the Recommendation feature's code to your theme

For V3

  • To add the Recommendation widgets to your store, please copy the code snippet below:

{% render 'boost-sd-app', type: 'recommendation', widgetId: 'Replace widgetID here' %}

In the code snippet above, please replace Replace widgetID here with your Boost Recommendation's widget ID. For example:

  • {% render 'boost-sd-app', type: 'recommendation', widgetId: 'homepage-326800' %}

(To find your Widget ID, go to Boost AI Search & Discovery > Recommendation >Recommendation widgets)

  • Go back to your Theme's code editor by going to Online Store > Themes > Actions (ā‹Æ) > Edit code.

  • Locate the folder Templates and add the copied code snippet above in to the liquid file of the page you'd like to display your Boost Recommendation widget.

    • For example, to display your Recommendation widget on Collection page, we add the copied code snippet at the end of the collection.liquid file:

  • The same step applies if you'd like to add the

    • Homepage: index.liquid

    • Collection page: collection.liquid

    • Product page: product.liquid

    • Cart page: cart.liquid

For TURBO

To add the Recommendation widgets to your store, please copy the code snippet below:

 {% render 'boost-sd-app', type: 'recommendation-turbo', widgetId: 'Replace widgetID here' %}

Replace Replace widgetID here with your Boost Recommendation Widget ID.
For example:

 {% render 'boost-sd-app', type: 'recommendation-turbo', widgetId: 'homepage-326800' %}

āš ļø Note: You can find your Widget ID by navigating to Boost AI Search & Discovery ā†’ Recommendation ā†’ Recommendation Widgets.

(Optional) Step 5: Create the custom files

šŸ’” If you have already added custom codes before or the files already exist, please skip this step.

  • In your Shopify admin, go to Online Store > Themes > Actions > Edit code.

  • Create these new files:

    • boost-sd-custom.js

Click Add a new asset > Create a blank file > Extension: js > File name: boost-sd-custom

  • boost-sd-custom.css

Click Add a new asset > Create a blank file > Extension: css > File name: boost-sd-custom

  • Please add your custom code to these files if you wish to customize any feature related to our app.
    ā€‹

Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.

Related Articles
Did this answer your question?