For dev - 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

1

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
2

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'

Related Articles