Universal Filter's New Mobile Layout

eCommerceSquarespace pluginsSquarespace Web DesignSquarespace Help

Jun 20

Universal Filter has now a Navigation style for Mobile View!

But you need to tweak the CSS of the Mobile Layout for the Navigation if you’re gonna use it. So. some CSS knowledge is a requirement if you’re implementing this on your website.

This is how It looks:

Michael’s been working on this for a while as it has mostly been requested and asked about. And why not? You can say that it’s necessary for websites today to have a mobile layout. especially for e-commerce and online businesses.

How to Add Mobile Layout for Universal Filter

Just paste this code to the mobilePanel section of the Universal Filter code on your Squarespace website (i.e. in the Page Code Header Injection).

mobilePanel: {
  useNavStyle: true,// enable nav-like style
  title: 'Filter & Sort',// panel title
  triggerButtonName: 'Filter & Sort', // trigger button text
  align: 'center', //align the mobile filter button and panel
  closeButtonPosition: 'right', // close button position: left, right, bottom
  closeOnSelect: false, // mobile panel closed just after user selected something
  closeOnSearch: false, // mobile panel closed if user searced something in searc field
  closeOnOutsideClick: false // if true, mobile panel will be closed if user clicks outside it
},

This code has only been recently added, so bugs might be found here and there. Nevertheless, it’s a working a progress and the code will be updated and improve over time.

Just send us a message or hit us up on Slack if you find yourself in a pinch.

Dont forget to check out our other Squarespace Plugins.

UpdatePluginUniversal Filter