Overview

Instant Search Component binds events and renders a filter tree on .boost-pfs-filter-tree on the collection/search pages

For example: You will find a div with class boost-pfs-filter-tree in sections/collection-template-boost-pfs-filter.liquid or sections/collection-template.liquid

<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v">{%- include 'boost-pfs-filter-skeleton', type: 'filter-tree' -%}</div>

boost-pfs-filter-skeleton snippet is a placeholder while waiting for the filter tree to render

Settings on DOM attribute

Class boost-pfs-filter-tree-v will show vertical filter tree

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

Class boost-pfs-filter-tree-h will show horizontal filter tree

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

Attribute data-is-mobile will render the filter tree only on mobile screen
Attribute data-is-desktop will render the filter tree only on desktop screen
No attribute: will render on both mobile and desktop

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

Settings in javascript

You can set these settings for the product list in boost-pfs-filter.js , like so

// Override Settings
var boostPFSFilterConfig = {
    general: {
        // Set the limit for products per page based on theme configuration
        limit: boostPFSThemeConfig.custom.products_per_page,
        // Determines whether products should be loaded when the page first loads
        loadProductFirst: true,
        // Style for the scroll-to-top functionality
        styleScrollToTop: 'style2'
    }
};

Filter display settings

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 - Manual Setup Instruction for any theme (App Lib V2)

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

For dev - Pagination Component (App Lib V2)

For dev - Filter Tree Mobile Component