For dev - Advanced Definition of Theme Setup
In this article
- Overview
- For the core files
- For the filter feature
- 3.1. Add Filter Tree
- 3.2. Update the necessary elements: Product list, Pagination, Sorting
- 3.3. Update the extra elements: Display type (grid/list), Limit of product, Total number of product, Collection title/description
- 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:
- Doesn't change any files
- Auto detect the
input name="q"
div on the page to generate instant search. - See also: Instant Search Input Component, Instant Search Result Component
We will update the templates/search.liquid file like the collection-template.liquid file above
- To show the filter on search result page.