Step 3: How to add Boost Widgets to your Shopify Theme

On this page

• Overview
• How to access Setup Widgets
• Set up widgets for Theme OS 2.0
  • Enable Boost Core
  • Collection page with filters
  • Search page with filters
  • Instant search widget
  • Recommendation widgets
• Set up widgets for Theme OS 1.0
  • Initial setup steps
  • Collection page with filters
  • Search page with filters
  • Instant search widget
  • Recommendation widgets

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

• Navigate to Shopify Online Store > Themes > Theme Editor > App Embeds.
• Toggle on Boost Core (New) and click Save to save your settings.

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

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

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

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

2. 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' %}

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 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.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' %}

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

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

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 support@boostcommerce.net.