⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Overview
Theme Setup is the process by which we install our app's script on a specific theme.
In this process, we will add our own scripts/css files, and update the following files/elements in the theme:
- theme.liquid 
- templates/search.liquid 
- sections/collection-template.liquid 
For the core files
We update theme.liquid to include the core files
At the bottom of the header, right before the </head> tag, you will see
<head>
....
{% include 'boost-pfs-style' %}
</head>
The snippets/boost-pfs-style file will include all CSS files for the app:
- boost-pfs-init.scss.liquid: Core CSS file 
- boost-pfs-general.scss.liquid: Core CSS file 
- boost-pfs-instant-search.scss.liquid: Core CSS file 
- boost-pfs-custom.scss.liquid: CSS file for customization 
⚠️ We split the CSS into many files for more efficient loading, only loading the necessary CSS when needed.
At the bottom of the body, right before the </body> tag, you will see
<body>
....
{% include 'boost-pfs' %}
</body>
The snippets/boost-pfs will:
- Initialize some variables for the app to use 
- Include all JS files for the app. 
- boost-pfs-vendor.js: Core JS file 
- boost-pfs-core.js: Core JS file 
- boost-pfs-core-instant-search.js: Core JS file 
- boost-pfs-instant-search.js: JS file to customize instant search 
- boost-pfs-filter.js: JS file to customize filter 
⚠️ Like the CSS, we split the JS into many files for more efficient loading.
For the Filter feature
For the filter feature, we update sections/collection-template.liquid file.
Note: depending on the section name called in templates/collection.liquid, this can be
- sections/collection.liquid 
- sections/template-collection.liquid 
- sections/boost-pfs-filter-collection-template.liquid (for cases where we don't support a theme yet, and need to use our own section template). 
Add Filter Tree
In this file:
- We add the filter tree with this code 
<!-- Vertical Filter Tree -->
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>
<!-- Horizontal Filter Tree -->
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h"></div>
<!-- Button to show/hide the filter tree on mobile -->
<div class="boost-pfs-filter-tree-mobile-button"></div>
The code for filter tree will usually be at the top of product list.
Our app lib will scan the page for the above <div> and render the filter tree there.
Update the necessary elements: Product list, Pagination and Sorting
For the filter feature to work, we need to update these elements in file sections/collection-template.liquid:
- Product List 
- Pagination 
- Sorting 
For product list, we will find the liquid loop of the products and update it with the class boost-pfs-filter-products .
For example, if the product loop looks like this:
<div class="product-list">
{% for product in collection.products %}
{% include 'product-item' %}
{% endfor %}
</div>
It will be updated to this
<div class="product-list boost-pfs-filter-products">
{% for product in collection.products %}
{% include 'product-item' %}
{% endfor %}
</div>
The same is true for pagination with the class boost-pfs-filter-bottom-pagination, and sorting with the class boost-pfs-filter-top-sorting
⚠️ In the file assets/boost-pfs-filter.js, you will find functions to rebuild the above elements (product list, pagination, sorting) to work with the filter app.
Update the extra elements: Display type (grid/list), Limit of product, Total number of product, Collection title/description
For the extra features, we need to update these elements in file sections/collection-template.liquid:
- Display type 
- Limit of products per page 
- Total number of products 
- Collection title/description 
- Breadcrumbs 
These elements are just extra; some themes have them and some don't.
They work the same as the above components; just add different classes to the theme's element:
- Display type: - boost-pfs-filter-display-type
- Limit: - boost-pfs-filter-top-show-limit
- Collection title/description: - boost-pfs-filter-collection-header,- boost-pfs-filter-collection-description
- Breadcrumbs: - boost-pfs-filter-breadcrumb
⚠️ In the file assets/boost-pfs-filter.js, you will find functions to rebuild the above elements to work with the filter app.
For the Instant Search feature
For the instant search, our app is:
- Doesn't change any files 
- Auto-detect the - input name="q"div on the page to generate instant search.
We will update the templates/search.liquid file like the collection-template.liquid file above
- To show the filter on search result page. 

