For dev - List of files installed into a theme (App Lib V2)

Here is the list of files that Boost AI Search & Discovery app installs into your theme, and an explanation of what they do.

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

On this page

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