Manual Setup Instruction for any theme

Please note that this Setup Instruction is only for Advanced Developer who is experienced in HTML, CSS, Liquid, Javascript. 

Step 1: Upload asset files

- Download Asset files from this Zip package:

https://d23ky75bisor86.cloudfront.net/uploads/product-filter-search-assets-v.zip

- Extract the downloaded file

- Upload:

  + All files in snippets folder into Snippets folder.

  + All files in assets folder into Assets folder.

Step 2: Update theme.liquid file

Go to Layouts folder and open theme.liquid file.

Before the </head> tag, add the following scripts:

{% include 'bc-sf-filter-style' %}

Before the </body> tag, add the following scripts:

{% include 'bc-sf-filter' %}

Step 3: Update collection-template.liquid file (if your theme does not have this file, please use collection.liquid instead)

1. Copy all content of the file bcSfFilterConfig.liquid and paste it to the bottom of the file.

  • Note: The usage of this script is to get Settings of your current theme and the translation texts from Liquid files, then use them in the Javascript file to rebuild the elements in the Collection page.

2. Add the  Filter Tree block

Add Filter Tree block into the area you would like to display the Filter Tree:

<div id="bc-sf-filter-tree-mobile"></div>
<div id="bc-sf-filter-tree"></div>
  • Note: bc-sf-filter-tree-mobile is used to render the Refine By button in mobile display.

3. Rebuild the  Product list after filtering (See more at Step 4)

Put the id bc-sf-filter-products to the container of the product loop.

  • For example:

 + If your product list looks like this:

<div class="grid grid--uniform grid--view-items">
    {% for product in collection.products %}
        {% include 'product-item' %}
    {% endfor %}
</div>

You could change it to:

<div id="bc-sf-filter-products" class="grid grid--uniform grid--view-items">
    {% for product in collection.products %}
        {% include 'product-item' %}
    {% endfor %}
</div>

     + If your product list likes this:

<ul class="product-list">
    {% for product in collection.products limit: productsPerPage %}
        {% include 'product-item' %}
    {% endfor %}
</ul>

You could change it to:

<ul id="bc-sf-filter-products" class="product-list">
    {% for product in collection.products limit: productsPerPage %}
        {% include 'product-item' %}
    {% endfor %}
</ul>
  • Note: After filtering, our app will render the products list by the Javascript code. This means you need to analyze the structure of product item of your theme in the file bc-sf-filter.js and update the new data to bc-sf-filter-products.

4. Build the Pagination block (See more in Step 5)

Replace the Pagination block of the theme by our block:

<div id="bc-sf-filter-bottom-pagination"></div>
  • Note: The default pagination and sorting of your theme do not work with our app. We need to replace the theme's pagination and sorting block by our blocks.

5. Build the Sorting block

Replace the Sorting block of the theme by our block:

<div id="bc-sf-filter-top-sorting"></div>

Step 4: Rebuild the products list after filtering

Go to bc-sf-filter.js file.

Find productGridItemHtml and you will see our sample of a product item's HTML template.

Rebuild the template based on the product item of the theme in the liquid file (usually in Snippets folder)

Go to the function buildProductGridItem and apply our API data.

Step 5: Build pagination

Go to bc-sf-filter.js file.

Find the Pagination Template as below:

With: - previousActiveHtml     : the previous button when it is active (current page is greater than 1)

         - previousDisabledHtml : the previous button when it is disabled (current page is greater than 1)

        - nextActiveHtml             : the next button when it is active (current page is not the last page)

        - previousDisabledHtml  : the next button when it is disabled (current page is the last page)  

        - pageItemHtml               : the page numbers when it is not selected.

        - pageItemSelectedHtml : the page numbers when it is selected. 

        - pageItemRemainHtml   : three dots to show that there are a lot of pages.

        - paginateHtml                 : the container of  Pagination

Rebuild the template to match with the Pagination of the theme.

Step 6: Customise the styling by editing the file bc-sf-filter.scss.liquid in the Asset folder