For Dev - How to customize product item on collection/search page after filtering (App Lib V2)

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

When installing the filter, you will find the 2 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.

In this article

  • Displaying the basic product information & product metafield information on the product item
  • Custom functions after an Ajax call (Callback function)
  • Custom Styling CSS
Attention: 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 debug issues on your store much more conveniently and faster.

Displaying the basic product information & product metafield information on the product item

Understand 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  snippets/boost-pfs-filter-html.liquid, you will find the product item template in the assets/boost-pfs-filter.js file, as below.

Understand Product Item

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.vendor}}
{{product.url}}
{{product.available}}
{{product.compare_at_price}}
{{product.compare_at_price_min}}
{{product.compare_at_price_max}}
{{product.description}}
{{product.handle}}
{{product.id}}
{{product.price}}
{{product.price_min}}
{{product.price_max}}
{{product.template_suffix}}
{{product.percent_sale_min}}
{{product.type}}
{{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 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 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 API
  • this.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.

Related Articles