The Interactions tab in the Design panel controls what happens when visitors interact with an element — and how it looks and moves during those moments. Select an element and open Interactions. A dot appears on the tab label when an element has effects or an action configured.
The tab has two parts: an Action section for click behavior and an Effects section for state-based styling and animation.
Actions
The Action section defines what happens on click or tap. Click + to choose an action. Options are grouped by context:
General — Link to, Go to checkout, Go to section, Email to, Open cart
Triggers — Toggle overlay, Toggle dropdown, Toggle lightbox
Product — Add to cart, Go to product, Select variant option, Select selling plan, Toggle add-on, Set quantity
Collection — Go to collection, Clear filters, Load more products
Product and collection actions need Shopify content connected; when it isn't, Instant prompts you to connect content. An action applies across all breakpoints — it isn't responsive.
Effects (states)
Effects let an element change appearance under different conditions. Click + on the Effects section to add one. Triggers are grouped:
Mouse — Mouse hover, Mouse press
Other — Active, Disabled, Focused
Page — Scroll into view
Each effect can override visual properties such as Fill, Border, Shadow, Opacity, Scale, Offset, Rotate, and filters. Use Add property inside an effect to reveal more properties.
Effects share an Animation block — easing, speed, and delay — that controls the transition between the base style and the effect. Use the preview toggle on an effect to see it in the builder.
Combining with Style and Settings
A typical interactive element is built in layers:
Set the default look on the Style tab.
Add effects and an action on the Interactions tab.
Use Settings → Conditional visibility if the element should only appear under certain conditions.
For example, an "Add to cart" button might use a brand fill by default, a darker fill on Mouse hover, an Add to cart action, and Conditional visibility that hides it when the product is sold out.
Performance tips
Keep animation durations short for UI feedback, and avoid stacking heavy blur filters on animated effects. Hover doesn't apply on touch devices, so make sure pressed or default styles still communicate that an element is interactive.