Step 3: How to add Boost Widgets to your Shopify Theme
📖 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.
On this page
- Overview
- How to access Setup Widgets
- Set up widgets for Theme OS 2.0
- Set up widgets for Theme OS 1.0
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
- 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
- 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.
- 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.
- 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
- 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.
- 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.
- 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
- 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 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.
- 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
- 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 into 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.
- 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
- 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.
- Create 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 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
- (Optional) Create 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
- Add code of Boost product filters for your collection page
- Locate the
collection.liquid
file, 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' %}
- 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
- (Optional) Create 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
- Add code of Boost product filters for your search page
- Locate the
search.liquid
file, 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' %}
- 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
- 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 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.
- 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
- 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.
- 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 support@boostcommerce.net.