Setting up the app on an OS 1.0 theme

📖 In the very first steps of App setup, you can successfully set up your theme with the desired filter and search functions. In case you want to update and alter the OS 1.0 theme of your store with the current app features integrated, here is the setup guide you can follow.

On this page

Set up the app on an OS 1.0 theme

Similar to Shopify OS 2.0 theme setup, There are 2 methods to run a theme setup on your OS 1.0 theme

  • Auto setup
  • Manual setup

Auto theme setup flow

Before integrating the app's features into the target theme, you need to make sure to back up the theme to avoid any compatibility conflict. To eliminate any theme display error, it is unable for you to set up our app's features on your live theme.

To implement our app on a new theme:

  1. From the app’s admin, go to Integration menu > select Shopify Integration > Set up new theme

  1. Select [Target Theme].


If your theme is not supported in our supported themes library, our default theme will be applied with complete features instead of your current theme's layout.

  1. Select the features you want to install on  [Target Theme].

  1. Select your preferred filter layout. You can have a look at demos of vertical layout and horizontal layout before selecting your preferred one.

  1. If you select the recommendation feature to install, you are required to select recommendation widgets that were added to the recommendation feature settings.

  1. Click Run Setup. Wait until the process is complete.

Manual Setup Flow

Step 1: Enable Boost Core - app embed

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

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

Step 2: Create the backup file

  1. Create the 2 new files templates/collection.boost-sd-original.liquid & templates/search.boost-sd-original.liquid .
  2. Copy the content of 2 files templates/collection.liquid & templates/search.liquid to those files for backup purposes.
  • templates/collection.liquid to templates/collection.boost-sd-original.liquid
  • templates/search.liquid to templates/search.boost-sd-original.liquid

Step 3: Create the app file:

  1. Create the new file snippets/boost-sd-app.liquid .
  2. Copy the following content to a new file:
{% 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 %}

Step 4: Add the following code in the file base on the features want to install:

  • Product filter:
    • Add the following code at the end of the file templates/collection.liquid or templates/search.liquid :
{% render 'boost-sd-app', type: 'product-filter' %}

Please notice that you might need to add all your previous code in the file in the block {% comment %} {% endcomment %} so the layout can run smoothly.

  • Recommendation:
    • Add the following code at the end of the file templates/collection.liquid , templates/index.liquid , templates/product.liquid or templates/cart.liquid 
{% render 'boost-sd-app', type: 'recommendation', widgetId: 'Replace widgetId here' %}

Step 5: Create 2 new custom file:

  1. Create 2 following file in the source code of the theme, these files are for customize our app purpose:
    • assets/boost-sd-custom.js
    • assets/boost-sd-custom.css

Preview & publish a theme having the app's features

To preview the newly integrated theme:

  1. Once the setup process is finished, choose Preview the filter.
  2. Back to the Theme Setup page > At [Target Theme], select Preview.
  • Note: To preview the new theme on mobile, choose Share Preview > Copy link and reopen it in a mobile browser. This preview link will expire after 14 days.

To publish the new theme:

  1. From Shopify's App Admin > Online Store > Themes.
  2. Click Show All > At [Target Theme], choose Publish.


If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at support@boostcommerce.net.