Power Plus - List State Button Module

The List State Button module provides a one-click action to reset or set the state of a list. The most common use is a “Clear Filters” button that removes all active filters, sort selections, and search terms with a single click — bringing the list back to its default, unfiltered state.

You can also use it to create preset buttons that apply a specific combination of filters in one click. For example, a “Show Electronics” button on a homepage that jumps the visitor to a pre-filtered product listing.

Configuration

Field	Type	Description
List Name	Text	The Name of the List module this button controls. Must match exactly.
Action	Choice	`Reset` — clears all filter, sort, and search state (equivalent to setting the state to `{}`). `Manual` — sets the list to a specific state that you define as a JSON object.
Manual State (JSON)	Text	Only visible when Action is `Manual`. A JSON object representing the desired state. This JSON describes which filter options should be selected, which sort should be active, and what search term should be entered.

Translations

Field	Description
Label	Rich text (HTML) label for the button. Default: `Reset Filters`. You can include HTML formatting like `<strong>Clear All</strong>` or use icon fonts.

Style Options

Field	Description
Style	`Button` — renders as a CTA button using the POWER THEME’s button styles. `Text` — renders as a plain text link (more subtle, blends into content).
Activated Style	Controls what happens when the list’s current state already matches the button’s target state (i.e. there’s nothing to reset or the preset is already applied). `Disabled` — the button appears but is grayed out and not clickable. `Hidden` — the button disappears completely. `Invisible` — the button takes up space in the layout but is visually invisible (prevents layout shifts).
Button Style	Only for Button style. Choose the CTA style (solid, outline, ghost, etc.), size (small, regular, large), and alignment (left, center, right) from the POWER THEME’s CTA system.
Color Scheme	`Light` or `Dark`.

Example: Clear All Filters

The most common use case — a “Clear Filters” link that only appears when there are active filters:

State Button Module:
  List Name:       product_list
  Action:          Reset
  Label:           Clear Filters
  Style:           Text
  Activated Style: Hidden

When the list has active filters, sort, or search state, the “Clear Filters” text link appears. Clicking it clears everything. When the list is already in its default state (no filters, no sort, no search), the link disappears because Activated Style: Hidden hides it when there’s nothing to clear.

Example: Content Library with Invisible Clear Button

Using Invisible instead of Hidden prevents layout shifts — the button stays in the layout flow even when not needed:

State Button Module:
  List Name:       content_library_list
  Action:          Reset
  Label:           Clear Filters
  Style:           Text
  Activated Style: Invisible

This is useful when the button is placed in a fixed position (e.g. next to filter controls) and you don’t want other elements to jump around when it appears or disappears.

Example: Quick Filter Preset

Using the Manual action, you can create a button that applies a specific filter state when clicked:

State Button Module:
  List Name:     product_list
  Action:        Manual
  Manual State:  {"filters":{"category_filter":["electronics"]}}
  Label:         Show Electronics
  Style:         Button

When clicked, this sets the category_filter to ["electronics"] — the same as if the visitor had selected “Electronics” from the category dropdown. This is useful for creating shortcut buttons on a homepage or marketing landing page that link visitors directly to a pre-filtered view.

The JSON structure for the manual state mirrors the internal state format:

{
  "filters": {
    "filter_name": ["selected_option_name_1", "selected_option_name_2"],
    "another_filter": ["option"]
  },
  "sorts": {
    "sort_name": ["sort_option_name"]
  },
  "searches": {
    "search_name": "search query text"
  }
}

You only need to include the parts of the state you want to set — omitted controls will be cleared.

Example: Combined Preset with Sort

Apply both a filter and a sort at once:

State Button Module:
  List Name:     product_list
  Action:        Manual
  Manual State:  {"filters":{"category_filter":["shoes"]},"sorts":{"product_sort":["price_asc"]}}
  Label:         Cheapest Shoes
  Style:         Button

This selects the “shoes” category filter AND the “price ascending” sort in one click.

How It Works Under the Hood

Reset action: Calls list.loadState({}) on the connected list, which clears all control selections and reloads the data from the datasource with no filters, no sort, and no search.
Manual action: Calls list.loadState(parsedJSON) with the JSON you provide. The list distributes the state to all connected controls (each control receives its portion of the state object), then reloads the data.
The Activated Style compares the list’s current state with the button’s target state on every state change. If they match (meaning clicking the button would have no effect), the button enters its “activated” style — disabled, hidden, or invisible.
You can also create reset links inside other content (like the list’s empty state message) by adding the CSS class listStateButton and a state attribute to any <a> tag: <a class="listStateButton" state="{}">Clear all filters</a>.