How to customize the display of the product item

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

  • bc-sf-filter-lib.js
  • bc-sf-filter.js
  • bc-sf-filter.scss.liquid

Product Item

Originally, the product item is rendered from the Liquid files of the theme. After filtering, the product item is rendered from the Javascript code instead of the Liquid files of the theme. 

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

The above image is just an example. Each theme will have a different template. You will find a function which builds the product item in the template below

The function is BCSfFilter.prototype.buildProductGridItem = function(data)

The data parameter is the data of a single product (JSON data type). The structure is just like the product Liquid object:

For more information, you can check the API's response from the Network tab of the browser's Developer Tool. You will find that the app calls an API like this:

The function buildProductGridItem will build the product HTML code based on the template (as mentioned above). In the function, you will find that we replace the variables in the template by the product JSON data. For example, in the below code, we replace the Title in the template by the product's title.

While modifying the template and the function buildProductGridItem, you could customize the display and the function of the product item as you wish.

Custom functions after an Ajax call

If you would like to run some functions after a filtering, you could add this function to the end of the file bc-sf-filter.js

BCSfFilter.prototype.buildAdditionalElements = function(data, eventType) {

// your code here


In this 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 file bc- sf -filter.scss.liquid to overwrite the filter's styling.