Skip to main content
All CollectionsTechnical GuidelinesTheme SetupHow Theme Setup Works
For dev - List of files installed into a theme (App Lib V2)
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.

Thomas Ta avatar
Written by Thomas Ta
Updated over 5 months ago

๐Ÿ“– 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. Please contact us for further assistance.


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, etc.)

      • 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>

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.


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'

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

Did this answer your question?