List of files installed into a theme (App Lib v2)
Here is the list of files that Product Filter & Search app installs into your theme, and an explanation of what they do.
In this article
1. Common files
Common files are installed on all themes
- assets/
- boost-pfs-vendor.js: javascript containing jQuery and other 3rd party libs (loaded in collection and search pages)
- boost-pfs-core.js: javascript main file, containing filter & instant search (loaded in collection and search pages)
- boost-pfs-core-instant-search.js: javascript main file, containing only instant search (loaded in pages other than collection and search)
- boost-pfs-init.scss.liquid: css that needs to load first (loaded in collection and search pages)
- boost-pfs-general.scss.liquid: css that can be deferred to load later, containing filter & instant search css (loaded in collection and search pages)
- boost-pfs-instant-search.scss.liquid: css for instant search, containing only instant search css (loaded in pages other than collection and search)
- boost-pfs-custom.scss.liquid: css file for customization
- boost-pfs-init.js: app lib init code
- boost-pfs-loading.gif: loading image
- boost-pfs-no-image.gif: placeholder image for when a product has no image
- snippets/
- boost-pfs.liquid:
- Init boostPFSAppConfig
- Includes javascript assets: boost-pfs.js, boost-pfs-init.js, boost-pfs-instant-search.js, boost-pfs-filter.js
- boost-pfs-filter-skeleton.liquid: placeholder skeleton for product list, filter tree, filter mobile button.
- boost-pfs-style.liquid:
- Contains styles set by user in app admin (filter style, quick view, add to cart style,...)
- Includes boost-pfs.scss.liquid
In theme.liquid, the app is included like this:
<!doctype html> <html class="no-js" lang="{{ shop.locale }}"> <head> <!-- Include style at the end of head --> {% include 'boost-pfs-style' %} </head> <body> <!-- Include script at the end of body --> {% include 'boost-pfs' %} </body> </html>
2. Theme specific files
- assets
- boost-pfs-filter.js: Customize the filter. Used in both horizontal and vertical.
- boost-pfs-instant-search.js: Customize the search. Used in both horizontal and vertical.
- sections
- collection-template.liquid: Vertical collection template. This file is different in horizontal and vertical setup.
- snippets
- boost-pfs-filter-html.liquid: Used in both horizontal and vertical. Only for free themes.
- boost-pfs-quickview.liquid: Used in both horizontal and vertical.
- templates
- search.liquid: Vertical search page. This file is different in horizontal and vertical setup.
- collection.boost-pfs-quickview.liquid: Use for calling quickview modals by ajax. If you see boost-intergration,... please change the name to this.
- product.boost-pfs-quickview.liquid: Used by our app's quick view OTP.
3. Backup files
Back up files are all liquid files in the theme folder that override a theme file (collection-template, search,...).
They have suffix 'boost-pfs-original'