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 the Filter Menu, and the list of products. You can find this by right-clicking on your store, and going to Select Element in your browser. 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 initialise 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 that doesn't work for your theme and the page keeps reloading, please, let us know!

Did this answer your question?