The Interactions Panel is your gateway to programming component behavior, allowing you to trigger Flows or execute built-in actions based on user input, system events, or component state changes.

The Interactions Panel

The Interactions Panel is where you define the cause (Event) and the effect (Action) for any selected component or Layout. This interface allows you to define functional logic directly on the component.

Available Actions

For every Interaction Event, you can choose one of the following built-in actions. These define the "effect" that occurs when the event is triggered:

• Flow Execution: Executes a specific Flow you have created in your project (e.g., Load Product Information). This is the most common action.
• Toggle: Executes the built-in Toggle action, which opens or closes a specified Accordion component or changes the state of a Toggle component.
• Modals - Open / Modals - Close: Opens or closes any active Modal component in your application.
• Modals - Open Mega Menu: Opens the specified Mega Menu Layout defined in your project settings.
• Modals - Preload Layout: Initiates the loading of all assets and data for a specified Layout, optimizing the speed of the subsequent navigation action.
• Unset: Explicitly removes any assigned action from the event.

Interaction Events: Definitions and Categorization

Events define when an action should be triggered. They are grouped into three logical categories.

Lifecycle Events (System and Rendering)

These events manage a component's presence in the application view and are vital for data management.

• On Initialize: Triggers automatically the moment a component is rendered on the screen.
• • Use Case: Crucial for data fetching. Use this on a Layout to execute a Flow that loads necessary data from an API (e.g., "Load Product Information").
• On Destroy: Triggers when a component is removed from the screen (e.g., when the user navigates away or a component is conditionally removed).
• • Use Case: Use this to execute a Flow that cleans up resources or logs analytics data before a view is closed.

Pointer and Press Events (User Interaction)

These events respond directly to mouse, finger, or keyboard actions.

• On Press: Triggers when a user completes their tap or click (finger lifted/mouse button released).
• • Use Case: The standard action for activating a button or navigating a Link.
• On Press In: Triggers when a user initiates the act of pressing or clicking down on a component.
• • Use Case: Use this to apply an immediate visual change (e.g., a darker background color) for user feedback.
• On Press Out: Triggers when a user lifts their finger or mouse button after pressing a component.
• • Use Case: Use this to restore the visual style just before the main On Press action executes.
• On Long Press: Triggers when a user presses or mouses down on a component for an extended duration (typically over 500ms).
• • Use Case: Use this to expose a hidden context menu (e.g., "Quick Look" on a product image).
• On Hover In: Triggers when the user’s cursor enters the component's bounding box (Web/PWA only).
• • Use Case: Use this to expose a flyout menu or apply a subtle highlight color.
• On Hover Out: Triggers when the user’s cursor exits the component's bounding box (Web/PWA only).
• • Use Case: Use this to restore the default style or close a flyout menu.

Input and Focus Events (Form and Data)

These events monitor changes in data, value, or focus for input-based components.

• On Inputs Changed: Triggers when the value or data associated with the component changes. This is the universal event for data change.
• • Use Case: Use this on components like List when their bound data source is updated.
• On Change Text: Triggers immediately when a user types a character or deletes text within a text input field.
• • Use Case: Best for real-time validation or dynamic searching/filtering as the user types.
• On Submit: Triggers when a user submits a form, typically by pressing the 'Enter' key or clicking a designated submit button.
• • Use Case: Execute a Flow that handles form data collection and API submission.
• On Focus: Triggers when the input field gains focus (e.g., user taps the text box).
• • Use Case: Use this to display an instruction message or change the border style to indicate the field is active.
• On Blur: Triggers when the input field loses focus (e.g., user taps outside the text box or tabs to the next field).
• • Use Case: Best for field-level validation (e.g., check if the email format is valid only after the user leaves the field).
• On Change Selection: Triggers specifically when a user selects a new item within a component.
• • Use Case: Use this on a SelectionGroup to immediately trigger a filter Flow when the user changes a filter option.

Complete Interactions Reference

An outline of all component types and the specific events they support.

Standard Event Set (Most Components)

The vast majority of display, media, and link components support a Standard Event Set, which includes all Lifecycle Events and all Pointer and Press Events defined above. They also support the general data change event, On Inputs Changed.

Components supporting the Standard Event Set include:

• Accordion
• Background Image
• Carousel
• Data Zone
• Grid
• Image
• Link
• List
• Price Slider
• Progress Bar
• Rating
• Scroll View
• Select
• ShopifySmartImage
• Text
• Toggle
• Video
• View
• Virtual List
• Web View
• Zoom View

Input and Focus Components (Extended Events)

These components are designed for user input and include the full Standard Event Set plus the unique Input and Focus Events for granular form control.

• Date Input, Text Area, TextInput
• • Standard Events (On Destroy, On Initialize, all Press/Hover events, On Inputs Changed)
  • Unique Events:
  • • On Blur
    • On Change Text
    • On Focus
    • On Submit

Unique and Passive Components

These components have specific deviations from the standard model.

• SelectionGroup
• • Unique Event: On Change Selection (Triggers specifically when the user selects a different option within the group).
  • Other Events: Supports the Standard Event Set.
• HTML View
• • Events Supported: None. This component is passive and is unable to generate interaction events.