📖 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
Create the 2 new files
templates/collection.boost-sd-original.liquid&templates/search.boost-sd-original.liquid.Copy the content of 2 files
templates/collection.liquid&templates/search.liquidto those files for backup purposes.
templates/collection.liquidtotemplates/collection.boost-sd-original.liquidtemplates/search.liquidtotemplates/search.boost-sd-original.liquid
Step 3: Create the app file:
Create the new file
snippets/boost-sd-app.liquid.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.liquidortemplates/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.liquidortemplates/cart.liquid
{% render 'boost-sd-app', type: 'recommendation-turbo', widgetId: 'Replace widgetId here' %}Step 5: Create 2 new custom file:
Create 2 following file in the source code of the theme, these files are for customizing our app purpose:
assets/boost-sd-custom.jsassets/boost-sd-custom.css
Preview & publish a theme having the app's features
To preview the newly integrated theme:
Once the setup process is finished, choose Preview the filter.
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:
From Shopify's App Admin > Online Store > Themes.
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].