⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
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) |
Vertical 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
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.
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.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].