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
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)

How to change the Mobile breakpoint for displaying the filter

  • 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.