📖 Enhance your online store by integrating Boost AI Search & Discovery widgets. This comprehensive guide will walk you through adding and setting up widgets once you've selected a template and enabled the core app embed.
Overview
To enhance your store with Boost's features, follow three key steps: select a template, enable the app embed, and then add widgets through the Shopify Theme Editor. These widgets include:
Products & Filters for both Collection and Search pages
The Instant Search widget
The Recommendation widget.
This structured approach ensures a seamless integration of Boost functionalities into your theme.
How to access Setup Widgets
Step 3: Setup Widget will be shown after you complete Step 2. Enable Boost Core.
There are two methods that you can use to add the widgets:
Automatic: Click the Call-to-action button (Add/Enable/Manage) of the widget type you'd like to work with. It will automatically add the widgets for your selected theme.
Manual: Click the Guide icon button on the left. Then follow the step-by-step in-app guide to add the widget to your theme.
Set up widgets for Theme OS 2.0
Enable Boost Core
⚠️ Widgets on your storefront will only display once the Boost Core (New) app embed is activated.
Navigate to Shopify Online Store > Themes > Theme Editor > App Embeds.
Toggle on Boost Core (New) and click Save to save your settings.
⚠️ Do not attempt to alter the Template ID if you do not wish to apply your settings to a different template.
Collection page with filters
1. Add the Products & Filters widget
Go to Shopify Online Store > Themes > Theme Editor of the theme where you'd like to add the widget.
Navigate to the Template section of your Collection page.
Click Add section > select Products & Filters (New) in the Apps tab. The filter widgets will be displayed under the original Product grid of your theme.
2. Hide the theme's default Collection banner & Product grid
Click the eye icon to conceal your theme’s default collection banner and product grid. This prevents duplicate displays when incorporating Boost’s Products & Filters (New) widget.
Click Save to save your changes.
3. Review your settings
We recommend previewing your storefront to check the correct setup of filters on your collection page. For any adjustments, access App admin > Filters > Filter trees.
Search page with filters
1. Add the Products & Filters widget
Go to Shopify Online Store > Themes > Theme Editor of the theme where you want to add the Boost widget.
Navigate to the Template section of your Search page.
Click Add section > select Products & Filters (New) in the Apps tab. The filter widgets will be displayed under the original Search results of your theme.
2. Hide the theme's default Search results
Click the eye icon to conceal your theme’s default Search results. This prevents duplicate displays when incorporating Boost’s Products & Filters (New) widget.
Click Save to save your changes.
3. Review your settings
We recommend previewing your storefront to check the correct setup of filters on your search page. For any adjustments, access App admin > Filters > Filter trees.
Instant search widget
1. Enable Instant search widget (ISW)
Go to Shopify Online Store > Themes > Theme Editor > App embeds of the theme where you want to add the Boost widget.
Toggle on the Instant Search (New) widget. Once activated, this feature will display as soon as you click the search box on your storefront.
Click Save to save your changes.
2. Review your settings
We recommend previewing your storefront to check the correct setup of ISW on your search page. For any adjustments, access App admin > Search > Standard Search > Instant search widget.
Recommendation widget
1. Add Boost Recommendation widget
Go to Shopify Online Store > Themes > Theme Editor of the theme where you want to add the Boost widget.
Select a Page where you'd like to display the Recommendation widgets.
Click Add section > Select the Recommendation (New) in the Apps tab.
Click on each widget to enter the Widget ID and customize the styles for them. Drag & drop them anywhere on your page.
Click the Save button to save your settings.
⚠️ Ensure the widget ID used matches the one specified in the App admin under Recommendation settings (App admin > Recommendation > Recommendation widget), aligning with the page it’s intended for. For example, WidgetID homepage-12918 should be configured exclusively for the Homepage.
2. Review your settings
We recommend previewing your storefront to check the correct setup of your Recommendation widgets. For any adjustments, access App admin > Recommendation > Recommendation widgets.
Set up widgets for Theme OS 1.0
Initial setup steps
⚠️ Please make sure you have completed the initial setup steps before adding any features.
1. Enable Boost Core
Go to Shopify Online Store > Themes > Theme Editor > App embeds.
Toggle on Boost Core (New) to enable it. The ID of your currently used template is automatically filled in the Template ID field under the Boost Core app embed.
Click Save to save your settings.
2. Create a Boost app file
Go to Shopify Online Store > Themes > Edit code > Snippets folder of the theme where you'd like to add the widget.
In the Snippet folder, create a new liquid file named
boost-sd-app. Then, copy this snippet code below and paste it into the file you've just created.
{% comment %} PLEASE DO NOT EDIT THIS FILE {% endcomment %}
{% case type %}
{% when 'product-filter' %}
<div class="boost-sd__filter-product-list"></div>
<script>
if (window.boostSDTaeUtils && window.boostSDTaeUtils.initCollectionFilter)
{window.boostSDTaeUtils.initCollectionFilter();}
</script>
{% when 'recommendation' %}
<div id="boost-sd-widget-{{- widgetId -}}"></div>
{% endcase %}
Collection page with filters
1. (Optional) Create a collection backup file
This step ensures the safety of your original theme files before implementing Boost filters.
Navigate to Shopify Online Store > Themes > Edit code > locate folder Templates and create a new Liquid file named
collection.boost-sd-original
2. Add code of Boost product filters for your collection page
Locate the
collection.liquidfile, enclose its original code within the specified comment block for safekeeping. Like this:
{% comment %} Original code goes here. {% endcomment %}After that, add the following code at the end of the file
collection.liquid. Click the Save button to save your settings.
{% render 'boost-sd-app', type: 'product-filter' %}
3. Review your settings
We recommend previewing your storefront to check the correct setup of filters on your collection page. For any adjustments, access App admin > Filters > Filter trees.
Search page with filters
1. (Optional) Create a search backup file
This step ensures the safety of your original theme files before implementing Boost filters.
Navigate to Shopify Online Store > Theme > [Target theme] > Edit code > locate folder Templates and create a new Liquid file named
search.boost-sd-original
2. Add code of Boost product filters for your search page
Locate the
search.liquidfile, enclose its original code within the specified comment block for safekeeping. Like this:
{% comment %} Original code goes here. {% endcomment %}After that, add the following code at the end of the file
search.liquid. Click the Save button to save your settings.
{% render 'boost-sd-app', type: 'product-filter' %}
3. Review your settings
We recommend previewing your storefront to check the correct setup of filters on your search page. For any adjustments, access App admin > Filters > Filter trees.
Instant search widget
1. Enable Instant search widget (ISW)
Go to Shopify Online Store > Themes > Theme Editor > App embeds of the theme where you want to add the Boost widget.
Toggle on the Instant Search (New) widget. Once activated, this feature will display as soon as you click the search box on your storefront.
Click Save to save your changes.
2. Review your settings
We recommend previewing your storefront to check the correct setup of ISW on your search page. For any adjustments, access App admin > Search > Standard Search > Instant search widget.
Recommendation widget
1. Add the Boost recommendation code to your page
Navigate to Shopify Online Store > Theme > [Target theme] > Edit code > locate folder Templates
Add the following code at the end of the file in the Templates folder where you'd like to display Boost Recommendation widgets.
For each page type, you need to add the code to its corresponding file. Check the table below to locate the correct file to add to your liking.
Homepage |
|
Product page |
|
Collection page |
|
Cart page |
|
{% render 'boost-sd-app', type: 'recommendation', widgetId: 'Replace widgetId here' %}💡 In the provided code, replace Replace widgetID here with the specific widget ID from your Boost Recommendation settings.
For instance, use {% render 'boost-sd-app', type: 'recommendation', widgetId: 'homepage-326800' %} for a homepage widget.
2. Review your settings
We recommend previewing your storefront to check the correct setup of your Recommendation widgets. For any adjustments, access App admin > Recommendation > Recommendation widgets.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].