Skip to main content
All CollectionsTechnical GuidelinesTheme SetupDefinition
For dev - Advanced Definition of Theme Setup (App Lib V2)
For dev - Advanced Definition of Theme Setup (App Lib V2)
Updated over 3 weeks ago

⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.


Overview

Theme Setup is the process by which we install our app's script on a specific theme.

In this process, we will add our own scripts/css files, and update the following files/elements in the theme:

  • theme.liquid

  • templates/search.liquid

  • sections/collection-template.liquid


For the core files

We update theme.liquid to include the core files

At the bottom of the header, right before the </head> tag, you will see

<head>
....
{% include 'boost-pfs-style' %}
</head>

The snippets/boost-pfs-style file will include all CSS files for the app:

  • boost-pfs-init.scss.liquid: Core CSS file

  • boost-pfs-general.scss.liquid: Core CSS file

  • boost-pfs-instant-search.scss.liquid: Core CSS file

  • boost-pfs-custom.scss.liquid: CSS file for customization

⚠️ We split the CSS into many files for more efficient loading, only loading the necessary CSS when needed.

At the bottom of the body, right before the </body> tag, you will see

<body>
....
{% include 'boost-pfs' %}
</body>

The snippets/boost-pfs will:

  • Initialize some variables for the app to use

  • Include all JS files for the app.

  • boost-pfs-vendor.js: Core JS file

  • boost-pfs-core.js: Core JS file

  • boost-pfs-core-instant-search.js: Core JS file

  • boost-pfs-instant-search.js: JS file to customize instant search

  • boost-pfs-filter.js: JS file to customize filter

⚠️ Like the CSS, we split the JS into many files for more efficient loading.


For the Filter feature

For the filter feature, we update sections/collection-template.liquid file.

Note: depending on the section name called in templates/collection.liquid, this can be

  • sections/collection.liquid

  • sections/template-collection.liquid

  • sections/boost-pfs-filter-collection-template.liquid (for cases where we don't support a theme yet, and need to use our own section template).

Add Filter Tree

In this file:

  • We add the filter tree with this code

<!-- Vertical Filter Tree -->
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>

<!-- Horizontal Filter Tree -->
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h"></div>

<!-- Button to show/hide the filter tree on mobile -->
<div class="boost-pfs-filter-tree-mobile-button"></div>

The code for filter tree will usually be at the top of product list.

Our app lib will scan the page for the above <div> and render the filter tree there.

Update the necessary elements: Product list, Pagination and Sorting

For the filter feature to work, we need to update these elements in file sections/collection-template.liquid:

  • Product List

  • Pagination

  • Sorting

For product list, we will find the liquid loop of the products and update it with the class boost-pfs-filter-products .

For example, if the product loop looks like this:

<div class="product-list">
{% for product in collection.products %}
{% include 'product-item' %}
{% endfor %}
</div>

It will be updated to this

<div class="product-list boost-pfs-filter-products">
{% for product in collection.products %}
{% include 'product-item' %}
{% endfor %}
</div>

The same is true for pagination with the class boost-pfs-filter-bottom-pagination, and sorting with the class boost-pfs-filter-top-sorting

⚠️ In the file assets/boost-pfs-filter.js, you will find functions to rebuild the above elements (product list, pagination, sorting) to work with the filter app.

Update the extra elements: Display type (grid/list), Limit of product, Total number of product, Collection title/description

For the extra features, we need to update these elements in file sections/collection-template.liquid:

  • Display type

  • Limit of products per page

  • Total number of products

  • Collection title/description

  • Breadcrumbs

These elements are just extra; some themes have them and some don't.

They work the same as the above components; just add different classes to the theme's element:

  • Display type: boost-pfs-filter-display-type

  • Limit: boost-pfs-filter-top-show-limit

  • Collection title/description: boost-pfs-filter-collection-header, boost-pfs-filter-collection-description

  • Breadcrumbs: boost-pfs-filter-breadcrumb

⚠️ In the file assets/boost-pfs-filter.js, you will find functions to rebuild the above elements to work with the filter app.


For the Instant Search feature

For the instant search, our app is:

We will update the templates/search.liquid file like the collection-template.liquid file above

  • To show the filter on search result page.

Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.

Did this answer your question?