Skip to main content
All CollectionsFilter MenuDesign customisation
How do I enable AJAX reloading of the filters
How do I enable AJAX reloading of the filters

Enable AJAX to prevent the page from reloading when you click the filters.

Brad Rees avatar
Written by Brad Rees
Updated over 4 years ago

Advanced

This requires knowledge of CSS/HTML, and possibly Javascript.

You can enable AJAX in your Shopify Admin -> Online Store -> Themes -> Customize -> Collection Pages -> Theme Settings -> Filter Menu -> Ajax. 

It should prevent the page from reloading every time you select a new filter. Note however this usually does not work in the theme editor in Shopify, it only works in the theme preview or the live site. 

This may not work for all themes by simply checking the checkbox, as it may need the jQuery/CSS selector of a <div> or other HTML element that contains both the Filter Menu and the list of products.

You can find this by right-clicking on the Filter Menu in your store, then click on "Inspect" in the pop-up that appears. This will allow you to find a selector that we can use in the settings.

For example it could be #main for an element with id="main", or .MyClass for a div with class="MyClass". 

Be sure to check that there is only one element that matches this selector, or you may get odd results.

Additional Scripts

When the page is reloaded, some themes may require that some Javascript is re-run to initialize the page, such as showing lazy-load images. You may need to find a way to call this code again, and then add this to the Additional Scripts setting. Your theme developer may be able to help you, as this can be tricky to find.


If you have any additional questions, please contact support through the live chat in the app, or at support@powertoolsapp.com

Did this answer your question?