For dev - Advanced Definition of Theme Setup

In this article

  1. Overview
  2. For the core files
  3. For the filter feature
  4. For the Instant Search feature

1. Overview

Theme Setup is the process that we install our app's script to 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

2. 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 includes 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

Note: We split the CSS into many files for more efficient loading, only load 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:

  • Initializes some variables for the app to use
  • Includes 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

Note: Like the CSS, we split the JS into many files for more efficient loading.

3. 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).

3.1. 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>

<!-- The 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.

3.2. Update the necessary elements: Product list, Pagination, 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 look 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 for pagination with the class boost-pfs-filter-bottom-pagination , and sorting with the class boost-pfs-filter-top-sorting

Note: 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.

3.3. 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

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

4. For the Instant Search feature

For the instant search, our app:

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

  • To show the filter on search result page.

Related Articles