Skip to Content
FeaturesFilters

How to add filters to your widget

Allow your visitors to filter data in your widget.

Adding Filters

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

  1. Open your widget in the editor
  2. Go to Filters tab in the right sidebar
  3. Enable filters to start adding filter fields
  4. 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

Display as Dropdown or Tag

Each filter can be displayed as either a Dropdown or Tag style:

  • Dropdown (default) — The filter appears as a collapsible section with checkboxes. Visitors click to expand, then select options from a list.
  • Tag — The filter options are shown as clickable buttons in a row. Visitors can tap to toggle options on or off instantly, without opening a dropdown.

To change the display style:

  1. Click on a filter in the sidebar to open Edit Filter
  2. Under Display as, choose Dropdown or Tag

Tags work well for filters with a small number of options (e.g. categories, statuses) where you want all choices visible at a glance. If a tag filter has more than 5 options, the extras are hidden behind a Show more link.

The Tag display option is not available when using the Sidebar filter layout.

Multi-select vs Single-select

By default, filters are multi-select — visitors can select multiple options at once (e.g. choosing both “Red” and “Blue” in a Colour filter). Each filter has a Multi-select toggle in its settings.

Turn off the Multi-select toggle to switch to single-select mode. In single-select mode, visitors can only choose one option at a time — selecting a new option automatically deselects the previous one.

To change the selection mode:

  1. Click on a filter in the sidebar to open Edit Filter
  2. Toggle Multi-select on or off

Single-select works well for filters where only one value makes sense at a time, such as a “Sort by” or “View” filter where options are mutually exclusive.

Dynamic Filtering

When you have two or more filters, you can enable Dynamic filtering to make filters context-aware. When a visitor selects a filter value, the options in other filters automatically update to reflect what’s actually available in the remaining results.

For example, if your widget has a Brand filter and a Colour filter, and a visitor selects “Nike” as the brand — the Colour filter will grey out any colours that don’t exist for Nike products. This prevents visitors from selecting filter combinations that return no results.

To enable dynamic filtering:

  1. Open the Filters tab in the editor
  2. Toggle on Dynamic filtering (appears when you have 2+ filters)
  3. Optionally toggle on Show result counts to display the number of matching items next to each filter option

Dynamic filtering works with all filter layouts (Top, Sidebar, and Inline) and supports both large and small datasets.

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:

  1. Open the Filters tab
  2. Click the Styles & Settings button
  3. 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.

Filtering by columns not visible in your widget

URL parameters filter against the data included in your widget. For a column to work as a URL filter, it must be added as a field in your widget configuration.

If you want to filter by a column but don’t want it displayed to visitors, you can hide it:

  1. Go to the Additional Fields section in the editor
  2. Add the column you want to filter by as a new field
  3. Click the eye icon next to the field to toggle it to hidden
  4. Publish your widget

Hidden fields are included in the widget’s data but are not rendered, so they work with URL parameters without affecting your widget’s layout.

If a URL parameter references a column that isn’t added as a field in your widget, the filter will be ignored because the data for that column is not included in the published widget.

Hiding Fields via URL

You can hide specific fields, badges, and buttons from your widget by adding a hide parameter to the URL. This is useful when you want to share the same widget with different audiences — for example, hiding an “Update Status” button from public viewers.

Format

?hide=ColumnName

The hide parameter accepts the column name from your data source (not the display label). To hide multiple columns, separate them with commas:

?hide=Status,Price,InternalURL

How it works

  • Matching is case-insensitive — ?hide=status will hide a field bound to the “Status” column
  • If a column is used in multiple places (e.g. as both a field and a badge), all instances are hidden
  • Hidden fields are removed from both the list view and the detail page
  • The hide parameter works alongside filters, search, and sorting without interference

Using with embeds

Add the hide parameter directly to your embed script URL:

<script src="https://shareables.ai/api/embed?subdomain=YOUR_SITE_ID&hide=Status,InternalURL"></script>

The hide parameter is a static setting — it stays in place regardless of how visitors interact with filters or search. It cannot be changed by the visitor.

Clearing Filters

All filter layouts include a way to clear active filters:

  • Top layout — A “Clear all” link appears next to the filter buttons when any filter is active
  • Sidebar layout — A “Reset” button appears at the bottom of the sidebar
  • Inline layout — A “Clear all” link is inside the filter dropdown panel

No Results Found

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

Widget Language

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
Last updated on
Items & Details PagesSorting