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)
Thomas Ta avatar
Written by Thomas Ta
Updated over a week 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.

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?