⚠️ Please note that the below Manual Setup steps are only for Advanced Developer who is experienced in HTML, CSS, Liquid, Javascript.

This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.

Upload asset files

1. Download and extract the Asset files from this Zip package: https://bit.ly/BoostManualSetupAssets

For setting up only filter feature, use the folder boost-pfs-filter
For setting up both filter and search feature, use the folder boost-pfs-filter-search

2. Upload the following files:

All files in snippets folder into Snippets folder.
All files in assets folder into Assets folder.

Update theme.liquid file

1. Go to Layouts folder and open theme.liquid file.

2. Before the </head> tag, add the following script:

{% include 'boost-pfs-style' %}

3. Before the </body> tag, add the following script:

{% include 'boost-pfs' %}

Update your collection template file (section/collection-template.liquid)

If your theme does not have this file, please use templates/collection.liquid instead

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

⚠️ 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.

<script>
  // Declare boostPFSThemeConfig variable
  var boostPFSThemeConfig = {
    label: {
      sorting: {% assign temp = 'collections.sorting.title' | t %} {% unless temp contains 'translation missing' %} {{ temp | json }} {% else %} "Sorting" {% endunless %},
      sorting_best_selling: {% assign temp = collection.sort_options[1].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Best Selling" {% endunless %},
      sorting_manual: {% assign temp = collection.sort_options[0].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Featured" {% endunless %},
      sorting_title_ascending: {% assign temp = collection.sort_options[2].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Alphabetically, A-Z" {% endunless %},
      sorting_title_descending: {% assign temp = collection.sort_options[3].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Alphabetically, Z-A" {% endunless %},
      sorting_price_ascending: {% assign temp = collection.sort_options[4].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Lowest Price" {% endunless %},
      sorting_price_descending: {% assign temp = collection.sort_options[5].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Highest Price" {% endunless %},
      sorting_date_ascending: {% assign temp = collection.sort_options[6].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Date, Old to New" {% endunless %},
      sorting_date_descending: {% assign temp = collection.sort_options[7].name %} {% unless temp == nil %} {{ temp | json }} {% else %} "Date, New to Old" {% endunless %},
      sorting_relevance: {% assign temp = 'collections.sorting.relevance' | t %} {% unless temp contains 'translation missing' %} {{ temp | json }} {% else %} "Relevance" {% endunless %},
      sale: {{ 'products.product.on_sale' | t | json }},
      sale_price: {{ 'products.product.sale_price' | t | json }},
      sold_out: {{ 'products.product.sold_out' | t | json }},
      vendor: {{ 'products.product.vendor' | t |json }},
      regular_price: {{ 'products.product.regular_price' | t | json }},
      items_with_count_one: {{ 'collections.general.items_with_count.one' | t | json }},
      items_with_count_other: {{ 'collections.general.items_with_count.other' | t | json }},
      current_page: {{ 'general.pagination.current_page' | t | json }},
    },
    custom: {
      products_per_page: 20,
      product_grid_class: '',
    }
  };

  // Declare Templates variable
  var boostPFSTemplate = {
    soldOutClass: ' sold-out',
    saleClass: ' on-sale',
    soldOutLabelHtml: {% render 'boost-pfs-filter-html', layout: 'soldOutLabelHtml' %},
    saleLabelHtml: {% render 'boost-pfs-filter-html', layout: 'saleLabelHtml' %},
    tagLabelHtml: {% render 'boost-pfs-filter-html', layout: 'tagLabelHtml' %},
    vendorHtml: {% render 'boost-pfs-filter-html', layout: 'vendorHtml' %},
    productGridItemHtml: {% render 'boost-pfs-filter-html', layout: 'productGridItemHtml' %},
    productListItemHtml: {% render 'boost-pfs-filter-html', layout: 'productListItemHtml' %},
    previousActiveHtml: {% render 'boost-pfs-filter-html', layout: 'previousActiveHtml' %},
    previousDisabledHtml: {% render 'boost-pfs-filter-html', layout: 'previousDisabledHtml' %},
    nextActiveHtml: {% render 'boost-pfs-filter-html', layout: 'nextActiveHtml' %},
    nextDisabledHtml: {% render 'boost-pfs-filter-html', layout: 'nextDisabledHtml' %},
    pageItemHtml: {% render 'boost-pfs-filter-html', layout: 'pageItemHtml' %},
    pageItemSelectedHtml: {% render 'boost-pfs-filter-html', layout: 'pageItemSelectedHtml' %},
    pageItemRemainHtml: {% render 'boost-pfs-filter-html', layout: 'pageItemRemainHtml' %},
    paginateHtml: {% render 'boost-pfs-filter-html', layout: 'paginateHtml' %},
    sortingHtml: {% render 'boost-pLabelHtml': {% render 'boost-pfs-filter-html', layout: 'sortingHtml' %},
    showLimitHtml: {% render 'boost-pfs-filter-html', layout: 'showLimitHtml' %},
    breadcrumbHtml: {% render 'boost-pfs-filter-html', layout: 'breadcrumbHtml' %},
    breadcrumbDivider: {% render 'boost-pfs-filter-html', layout: 'breadcrumbDivider' %},
    breadcrumbItemLink: {% render 'boost-pfs-filter-html', layout: 'breadcrumbItemLink' %},
    breadcrumbItemSelected: {% render 'boost-pfs-filter-html', layout: 'breadcrumbItemSelected' %}
  };
</script>

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

Vertical filter tree in desktop display

<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>

Horizontal filter tree in desktop display

<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h"></div>

Refine by button in mobile display

<div class="boost-pfs-filter-tree-mobile-button" ></div>

3. Rebuild the Product list after filtering (See more at Step 4): put the class boost-pfs-filter-products to the container of the product loop.

For example:

If your product list looks like this:

<div>
    {% for product in collection.products %}
        {% include 'product-item' %}
    {% endfor %}
</div>

You could change it into:

<div class="boost-pfs-filter-products">
    {% for product in collection.products %}
        {% include 'product-item' %}
    {% endfor %}
</div>

After filtering, our app will render the products list by the Javascript code. This means you need to analyze the structure of the theme's product item in the file assets/boost-pfs-filter.js and update the new data to boost-pfs-filter-products.

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

Replace the Pagination block of the theme by our block:

<div class="boost-pfs-filter-bottom-pagination"></div>
<div class="boost-pfs-filter-load-more"></div>

⚠️ The default pagination and sorting of your theme do not work with our app. We need to replace the theme's pagination and sorting blocks by our blocks.

5. Build the Sorting block

Replace the Sorting block of the theme by our block:

<div class="boost-pfs-filter-top-sorting"></div>

Rebuild the products list after filtering

1. Go to snippets/boost-pfs-filter-html.liquid file, find productGridItemHtml and you will see our sample of a product item's HTML template.

manual setup for product filter & search app

2. Rebuild the template based on the theme's product item in the liquid file (usually in Snippets folder)

Go to ProductGridItem.prototype.compileTemplate function and apply our API data.

Build pagination

1. Go to snippets/boost-pfs-filter-html.liquid file, find the Pagination Template as below:

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.

2. Rebuild the template to match with the theme's Pagination in the function ProductPaginationDefault.prototype.compileTemplate, and bind pagination events in ProductPaginationDefault.prototype.bindEvents.

Build Sorting option

1. Go to snippets/boost-pfs-filter-html.liquid file, find the Sorting Template as below:

sortingHtml : the html of Sorting.

2. Rebuild the template to match with the theme's Sorting in the function ProductSorting.prototype.compileTemplate, and bind sorting events in ProductSorting.prototype.bindEvents.

Customize the styling

Go to assets/boost-pfs-custom.scss.liquid file and add your custom css.

Customize JS with callback functions

Callback function after the filter API is called, and the filter tree is rendered on the DOM:

FilterResult.prototype.afterRender = function() {
    // The filter data returned from API
    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() {
    // The product list data returned from API
    var data = this.data;

    // Your code here
};

If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].

For dev - Advanced Definition of Theme Setup (App Lib V2)

For dev - Advanced Setup (Match theme's collection page layout) (App Lib V2)

For dev - How Theme Setup works (App Lib V2)

For dev - Pagination Component (App Lib V2)

For dev - Product Sorting Component (App Lib V2)