Interaction Essentials

Triggers, actions and targets

Each interaction consists of a trigger, an action and a target. All set through an easy-to-use visual interfact. Typical interactions are open a popup, show or hide content, toggle classes or attributes on scroll, click, hover, viewport enter or leave, and more.

Learn more about Interactions
A collage showing the interaction trigger dropdown content containing click, hover, focus, blur and more triggers along some product cards.

Interaction Trigger

Choose from a vast selection of user and browser events that you want to create an interaction for. Such as responding to clicks, hovers, scrolls,  content loaded, and many more.

A collage showing the interaction action dropdown content containing show/hide element, set/remove/toggle attribute, start animation and more actions along some product cards.

Interaction Action

Perform specific and highly customizable actions in response to your interaction trigger. Actions like show/hide an element or popup, setting HTML attributes, running animations, or dynamically loading query loop results.

A collage showing a product popup containing the product image, product information and an add to cart button besides a popup settings screenshot.

Interaction Target

Specify the element that your interaction should target. Whether it's the element itself, a custom CSS selector, or a popup – you control the impact of your interactions with absolute precision.

A small but fine selection of common  interactions

Hover me
Click me
(open popup)
Click to show/hide
(toggle attribute)

I am an alert. Visible as you’ve clicked on the toggle interaction above. Click the toggle again to hide me.

A collage showing the interaction conditions: if the browser storage key matches a certain value, the popup is displayed.
Interaction Conditions

Get even more granular with interaction conditions

Not only can you set up unlimited interactions, you can also define interaction conditions. So your interactions are only performed when those conditions are met.

Unlock advanced capabilities by setting conditions based on browser storage (window, sessionStorage, localStorage).

Learn more about interaction conditions

Just a popup

Triggered by a "click" interaction. Click the close icon, popup backdrop or press ESC to close this popup.

Explore popups