This article applies only to layouts created with Build from scratch. The Interactions and Settings tabs described here are not available for layouts built with the Agent.
Add an action
An action controls what happens when a shopper clicks or taps an element.
Select an element on the canvas.
Open Interactions in the Design panel.
Select + in the Action section.
Choose the action.
Complete any settings shown for that action.
Available actions depend on the selected element and its Shopify context. They can include opening a link, going to checkout, opening the cart, toggling an overlay, adding a product to the cart, selecting a product option, or loading more products.
An action applies at every screen size.
Add an interaction effect
Effects change how an element looks when a shopper interacts with it or when it enters a particular state.
Select the element.
Open Interactions.
Select + in the Effects section.
Choose a trigger, such as Mouse hover, Mouse press, Focused, or Scroll into view.
Add the visual properties you want to change.
Set the animation easing, speed, or delay when needed.
Use the preview control on the effect to check it on the canvas. Hover effects do not run on touchscreens, so also check the default and pressed appearance.
Add conditional visibility
Conditional visibility decides whether an element renders based on Shopify data or cart state.
Select the element.
Open Settings.
Find Conditional visibility.
Select Add condition.
Under Show when:, choose a type, operator, and value.
Conditions can use product availability, product options, selling plans, inventory quantities, metafields, cart amounts, and cart rewards. The options shown depend on the selected element and its Shopify context.
Use Preview on the condition to check both outcomes on the canvas.
Connect the required Shopify content
Product and collection actions or conditions need the relevant Shopify context. If the options you expect are missing, connect Shopify content to a parent container and keep the selected element inside it.
Conditional visibility is different from changing Opacity. Opacity makes an element transparent while it remains on the page; conditional visibility decides whether it renders.