How to change the Mobile breakpoint for displaying the filter

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 two following files:

1. assets/bc-sf-filter.js

2. assets/bc-sf-filter.scss.liquid

>> Update the file: assets/bc-sf-filter.js

* Change the breakpoint from  767(pixel) to NUMBER(pixel) - (NUMBER is a optional screen size)

- Open the "assets/bc-sf-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 file: assets/bc-sf-filter.scss.liquid

* Change the breakpoint from  767(pixel) to NUMBER(pixel) - (NUMBER is a optional screen size)

- Open the assets/bc-sf-filter.scss.liquid file.

- Find and Change the following variable:

$breakpointMobile: 767px; 

to 

$breakpointMobile: NUMBERpx;

For example, change 767px to 1024px (See below screenshot)

- Search the following code in the content of this file:

@media screen and (max-width: 767px)  

- If the above code is exist on this file, replace it to:

@media screen and (max-width: $breakpointMobile) 

- Save the file to apply all changes.

Double-check your store and If you have any issue, please feel free to let us know ( support@boostcommerce.net), we are happy to help.

Still need help? Contact Us Contact Us