📖 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
Copy this snippet code:
{% 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.
Step 4: Add the Recommendation feature's code to your theme
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
(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.
If you encounter any issues during the process, please don't hesitate to contact our support team for further assistance at [email protected].