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.