⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Overview
When installing the filter, you will find the following files in the Shopify Theme Editor, which are used for customization:
assets/boost-pfs-filter.js
assets/boost-pfs-custom.css.liquid
snippets/boost-pfs-filter-html.liquid (not available for all customers)
Also, you can find the Asset files from this Zip package: https://bit.ly/BoostManualSetupAssets.
For a complete list of files installed on your theme, please refer to this article.
⚠️ Shopify automatically minifies theme JavaScript and CSS when it's requested by the storefront. You could check out this article for greater details. Kindly do not minify our files so we can debug issues on your store much more conveniently and faster.
Displaying the basic product information & product metadata information on the product item
Understand Product Item
💡 After filtering, the product item is rendered from the JavaScript files rather than the Liquid files of the theme.
By default, the product item template will be placed in the file snippets/boost-pfs-filter-html.liquid as the screenshot below.
⚠️ Please note that the below image is just an example. Each theme will have a different template
If you could not find the file in snippets/boost-pfs-filter-html.liquid, you will find the product item template in the assets/boost-pfs-filter.js file, as below.
Displaying the basic product information (without any condition) on the product item
This feature is not available for all customers yet.
In order to show the basic product information without any condition such as product title, product type, product vendor ....You can copy and paste exactly the following attributes into the product item template:
Product Title: {{ product.title }}
Vendor: {{ product.vendor }}
URL: {{ product.url }}
Availability: {{ product.available }}
Compare at Price: {{ product.compare_at_price }}
Compare at Price Minimum: {{ product.compare_at_price_min }}
Compare at Price Maximum: {{ product.compare_at_price_max }}
Description: {{ product.description }}
Handle: {{ product.handle }}
Product ID: {{ product.id }}
Price: {{ product.price }}
Price Minimum: {{ product.price_min }}
Price Maximum: {{ product.price_max }}
Template Suffix: {{ product.template_suffix }}
Sale Percentage Minimum: {{ product.percent_sale_min }}
Product Type: {{ product.type }}
SKU: {{ product.sku }}
Then, your products in the storefront will be displayed as the image below:
Displaying metafields on your product item of collection/search page
⚠️ This feature is not available for all customers yet.
Please refer to the document Displaying metafields on your product item of collection/search page before updating the product item template.
In order to show the product metafield information on the product item, You can copy and paste the following content into the product item template, then change the namespace & key to your metafield information.
{{product.metafields.namespace.key}}
Displaying the extra information on your product item of collection/search page
You will find a function that builds the product item in the template in the file assets/boost-pfs-filter.js. The function is named ProductGridItem.prototype.compileTemplate
The data parameter is the data of a single product (JSON data type). The structure is similar to the product Liquid object (Get more information about our API here):
The ProductGridItem.prototype.compileTemplate function will build the product HTML code based on the mentioned template. In the function, you will find that we replace the variables in the template with the product JSON data. For example, in the below code, we replace the Title in the template with the product's title.
itemHtml = itemHtml.replace(/{{itemTitle}}/g, data.title);While modifying the template and the ProductGridItem.prototype.compileTemplate function, you could customize the display and the function of the product item as you wish.
Custom functions after an Ajax call (Callback function)
To run any function after filtering, you could add the function to the end of the assets/boost-pfs-filter.js file.
Callback function after the filter API is called, and the filter tree is rendered on the DOM:
FilterResult.prototype.afterRender = function() { var data = this.data; // Your code here }Callback function after product list is rendered (this won't be called on page's first load when product list is rendered from liquid):
ProductList.prototype.afterRender = function() { var data = this.data; // Your code here }In the function, you could call the custom functions you need to run after the Ajax call. We also add two parameters for you:
this.data: all products JSON data returned from the APIthis.eventType: the event leads to the filtering, from the Back, Forward button, or from a selection of the filter.
Custom Styling CSS
You could add the custom CSS styling code at the end of the assets/boost-pfs-custom.css.liquid file to overwrite the filter's styling. We highly recommend this practice instead of updating your own CSS file to avoid any difficulties for our further support.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].