How to customize product item on collection page (App Lib v1)

Here is the guide that helps you to customize your product items on a collection page with the help of Boost Product Filter & Search app.

When you install the filter, these files will be added to the theme assets folder:

  • bc-sf-filter-lib.js (Please don't unzip this file and modify it directly)
  • bc-sf-filter.js (If you do not find this file, please create a new one assets/bc-sf-filter.js)
  • bc-sf-filter.scss.liquid

Also, you can find the Asset files from this Zip package:

Understand Product Item

product filter javascript

After product filtering, the product item is rendered from the JavaScript code rather than the Liquid files of the theme.

In the  bc-sf-filter.js file, you will find the product item template as below.

javascript product filter


If the bcSfFitlerTemplate variable does not exist in bc-sf-filter.js, please look at the collection.liquid or collection-template.liquid. In this case, the main code of the product item layout will be in the bc-sf-filter-html.liquid

liquid custom filterThe above image is an example. Each theme will have a different template. You will find a function that builds the product item in the template below.

liquid custom filter

The  data parameter is the data of a single product (JSON data type). The structure is just like the product Liquid object (Get more information about our API here):

product item

The  buildProductGridItem 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 code below, we replace the Title in the template by the product's title.

itemHtml = itemHtml.replace(/{{itemTitle}}/g, data.title);

While modifying the template and the buildProductGridItem 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  bc-sf-filter.js file.

BCSfFilter.prototype.buildAdditionalElements = function(data, eventType) {
	// 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:

  • data: all products JSON data returned from the API
  • 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  bc-sf-filter.scss.liquid file to overwrite the filter's styling.

Still need help? Contact Us Contact Us