How to add filters to your widget

Allow your visitors to filter data in your widget.

filters

Adding Filters

Filters let visitors narrow down the data displayed in your widget based on specific criteria.

Open your widget in the editor
Go to Filters tab in the right sidebar
Enable filters to start adding filter fields
Add your filters, by selecting which data source field you’d like your users to filter by

Filters only show options that exist in your data. Empty values are automatically excluded.

Pro tip: In your Google Sheet, use comma-separated values if you want an item (row) to match multiple values for a filterable column. E.g. Red, Green

How do multiple filters work?

When visitors use multiple filters, we use AND logic between the filters but OR logic inside one filter.

For example, if you have a filter for Size and a filter for Colour:

Selecting Small and Medium in the Size filter shows items that are Small OR Medium
Then selecting Red in the Colour filter shows only items that are (Small OR Medium) AND Red

This means visitors can select multiple options within a single filter to broaden results, while adding more filters narrows results down.

Filter customisation

Filter Layout

Top - Each filter will side by side along the top (under your search bar if turned on)
Sidebar - Filters will be cond will appear stacked on the left of your widget
Inline - Filters, Search and Sorting buttons will appear inline at the top of your widget

Filters can also be further customised in the Styles and settings dropdown

You can also change the order of filters, by dragging them in the sidebar

filters

Sync Filters with Page URL

Enable Sync with page URL in the Share modal to synchronize filter selections with the browser’s URL. When enabled:

Filter selections are added to the page URL as query parameters
Users can bookmark or share filtered views
The back button navigates through filter history
Pages load with filters pre-applied when accessed via a filtered URL

To enable this feature:

Open the Filters tab
Click the Styles & Settings button
Toggle on Sync with page URL

For embeds, this adds data-sync-url="true" to your embed code:


<script src="https://shareables.ai/api/embed?subdomain=YOUR_SITE_ID" data-sync-url="true"></script>

URL Parameters

You can pre-filter your widget by adding URL parameters. This works whether or not URL sync is enabled.

Format

Add parameters to your page URL using this format:


https://yoursite.com/page?FilterName=Value

Examples

Filter by a single value:


?Status=Active

Filter by multiple values (same filter):


?Category=Tech&Category=Design

Combine multiple filters:


?Status=Active&Category=Tech&Location=Remote

Filter names and values are case-sensitive and must match your data exactly.

No Results Found

When filters return no matching results, you can customise the message shown to visitors. See Empty State for more details.

Filter labels like “Filters”, “Clear all”, and “Reset” automatically adjust based on your widget language setting.

Search - Let visitors search through your widget data
Sorting - Allow visitors to reorder data
Widget Language - Change the language of your widget