⚠️ 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-typeLimit:
boost-pfs-filter-top-show-limitCollection title/description:
boost-pfs-filter-collection-header,boost-pfs-filter-collection-descriptionBreadcrumbs:
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.