Advanced Definition of Theme Setup


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.