For Dev - How to change the Mobile breakpoint for displaying the filter (App Lib V2)
Default breakpoints in our app
By default, the breakpoints in our app was set to 767px (px = pixel)
Filter on the mobile (screen size <= 767px) |
|
---|---|
Filter on the desktop (screen size > 767px) | |
Verticle layout | Horizontal layout |
![]() |
![]() |
How to change the breakpoint for displaying the filter?
To change the breakpoint for displaying the filter, you need to update the following files:
assets/boost-pfs-filter.js
assets/boost-pfs-init.css.liquid
assets/boost-pfs-general.css.liquid
assets/boost-pfs-instant-search.css.liquid
assets/boost-pfs-custom.css.liquid
1
Update the file: assets/boost-pfs-filter.js
Change the breakpoint from 767(pixel) to NUMBER(pixel) - (NUMBER is a optional screen size)
- Open the assets/boost-pfs-filter.js file.
- Add/Change the following code:
breakpointMobile: '767';
to
breakpointMobile: 'NUMBER';
For example, change 767px to 1024px (See below screenshot)
- Save this file to apply all changes.
2
Update the files:
assets/boost-pfs-init.css.liquid
assets/boost-pfs-general.css.liquid
assets/boost-pfs-instant-search.css.liquid
assets/boost-pfs-custom.css.liquid
* Change the breakpoint from 767(pixel) to NUMBER(pixel) - (NUMBER is an optional screen size)
- Open the assets/boost-pfs-init.css.liquid file.
- Find and Change the following variable:
{% assign breakpointMobile = '767px' %}
to
{% assign breakpointMobile = 'NUMBERpx' %}
For example, change 767px to 1024px (See below screenshot):
- Then change the 'breakpointDesktop' :
{% assign breakpointDesktop = '768px' %}
to
{% assign breakpointMobile = '(NUMBER + 1)px' %}
For example, change 768px to 1025px (See below screenshot):
- Do the same for files: assets/boost-pfs-general.css.liquid, assets/boost-pfs-instant-search.css.liquid, assets/boost-pfs-custom.css.liquid
- Besides, in the boost-pfs-custom.css file, please search the following code in the content of this file:
@media (max-width: 767px)
If the above code exists on this file, replace it to:
@media (max-width: {{ breakpointMobile }})<br>
- Save the file to apply all changes.
Double-check your store and If you have any issues, please feel free to let us know ( support@boostcommerce.net), we are happy to help.