Website Building » Squarespace » How Do I Create a Filter in Squarespace?

How Do I Create a Filter in Squarespace?

Last updated on October 1, 2022 @ 1:19 am

There are a couple different ways that you can create a filter in Squarespace. One way is to use the Filter Block, which is a pre-built content block that you can add to your page.

The other way is to use custom code to create a filter. In this article, we’ll show you how to do both.

Option 1: Using the Filter Block

The Filter Block is a pre-built content block that you can add to your page. To add a Filter Block, click on the “+” icon in the content editor and select the “Filter” block from the list of options.

Once you’ve added the Filter Block, you’ll need to configure it. To do this, click on the gear icon in the upper-right corner of the block. In the configuration menu, you’ll be able to select which content types will be filtered, as well as other options such as sort order and number of items per page.

PRO TIP: This article is outdated and no longer applies to Squarespace 7.0. We recommend checking out our help center for more current articles.

Option 2: Using Custom Code

If you’re comfortable working with code, you can also create a filter using custom code. This method gives you more control over how your filter works, but it does require some knowledge of HTML and CSS.

To create a custom filter, you’ll first need to add a div element to your page with the following class: .sqs-filter-wrapper. This class is what tells Squarespace that this element should be treated as a filter.

Inside that div, you’ll need to add two more elements: an input field and a ul. The input field is what visitors will use to enter their search terms, and the ul element is where the results will be displayed. Each result should be wrapped in an li, like this:

.

You can style these elements however you like using CSS.

In order for your custom filter to work, you’ll also need to add some JavaScript code. This code will tell Squarespace how to take the search terms entered by the user and find matching items in your content. You can find more detailed instructions on how to do this in our documentation.

Creating a custom filter gives you more control over how it works, but it does require some knowledge of HTML and CSS. If you’re not comfortable working with code, we recommend using the Filter Block instead.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.