Skip to main content
Setting up the app on an OS 1.0 theme

In this article, we guide you on how to set up the app on OS 1.0 theme

Kady avatar
Written by Kady
Updated over 4 months ago

๐Ÿ“– 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.


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 must back up the theme to avoid compatibility conflict. To eliminate any theme display error, you can't 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

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

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

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

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

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

Manual Setup Flow

Step 1: Enable Boost Core - app embed

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

b. 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 'filter-product-list-turbo' %}
<div class="boost-sd__filter-product-list"></div>
<script>
if (window.boostSDTaeUtils && window.boostSDTaeUtils.initCollectionFilter) {
window.boostSDTaeUtils.initCollectionFilter();
}
</script>
{% when 'recommendation-turbo' %}
<div id="boost-sd-widget-{{- widgetId -}}"></div>
{% endcase %}

Step 4: Add the following code in the file based on the features you 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-turbo', 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 customizing 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 [email protected].

Did this answer your question?