Search Empty State

Displays an empty design when searching multiple Catalog Display components returns no results.

Last updated

August 14, 2026

How to use

On each stacked Catalog Display that should count toward the shared empty state, enable Search and give them all the same Group id under Search — "search-results", for example. Set each one's No Results to Hide, so individual lists disappear quietly and only the group-wide empty design shows.
Place this component on the same page, beside or under the stack.
Set its Group to the same id, and Lists to how many Catalog Displays are in the group.
Connect your empty design to (L) Empty — and, if you want a different design per breakpoint, use States with the (M)/(S)/(XS) Empty tiers and the Display control, like other responsive Butter components.

For a design that shows before the customer has searched, use a Catalog Display's No Query set to Initial state — that's a per-list setting, separate from this component.

When it shows

This component exists for pages that stack several Catalog Displays as search sections — products, collections, articles — where each list's own empty state would fire as soon as that list is empty, even while another list still has matches. Catalog Search Empty stays hidden until the search comes back completely empty across the whole group:

Before the customer searches — hidden.
While any list in the group still has matches — hidden.
When every list in the group has finished searching and found nothing — your empty design appears.

Because it waits for all Lists before showing, it never flashes on screen while results are still loading. On the canvas it always shows your connected design so you can style it.