⚠️ 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.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].