Actions allow you to add interactive functionality to elements in your Instant layouts. From linking to pages to adding products to cart, actions make your designs functional and engaging.
Overview
Actions are behaviors triggered when users interact with elements like buttons, images, or containers.
It is possible to add actions to child layers of a parent that already has an action applied to it. In select cases this can be helpful but in many cases it also can lead to unintended behavior.
Action Categories
Category | Actions |
General | Link to, Go to checkout, Go to section, Email to, Open cart |
Triggers | Toggle overlay, Toggle dropdown |
Product | Add to cart, Go to product, Select variant option, Select selling plan, Set quantity |
Getting Started
Select an element on your canvas (e.g., a button)
In the right sidebar, navigate to Interactions (second menu item)
Under Action, click the plus icon (+)
Select the action you want to add
General Actions
Link To
Link to any page, product, collection, or URL.
Click on Link to
A popover appears with options:
Option | Description |
Page | Link to a page in your Shopify store or Instant |
Product | Link to a product detail page |
Collection | Link to a collection page |
Article | Link to a blog article |
Account | Link to the customer account page |
URL | Link to external pages outside your store |
Dynamic Links
Click the database icon next to the dropdown to dynamically link to content such as Metafield URLs.
New Tab Setting
Define whether the link opens in a new tab:
Setting | Behavior |
Yes | Opens in new browser tab |
No | Opens in same tab |
Go to Checkout
Clicking the element takes the user directly to the checkout page.
Go to Section
Link to a section on the same layout. Useful for single-page navigation.
Note: This only works for top-level sections on a page. You can link to any parent-level section.
Email To
Opens the user's email client with a pre-filled recipient address.
Add the Email to action
Enter the destination email address
Open Cart
Triggers the cart on your store when clicked.
Cart Option | Description |
Cart Page | Navigates to the cart page |
Instant Cart | Opens the Instant cart drawer |
Custom Cart | Opens your custom cart implementation |
Trigger Actions
Toggle Overlay
Show or hide an overlay on your page.
Add the Toggle overlay action
In the popover, select which overlay to toggle
Toggle Dropdown
Show or hide a dropdown element.
Add the Toggle dropdown action
Select which dropdown to toggle
Product Actions
Product actions require the element to be inside a container connected to a product.
Add to Cart
Adds the connected product to the cart.
On Click Options
Option | Description |
Go to cart | Redirects to cart after adding |
Go to checkout | Redirects to checkout after adding |
Open Options
Option | Description |
Cart page | Opens the cart page |
Instant cart | Opens the Instant cart drawer |
Custom cart | If you want to trigger a custom action in your theme based on the Instant add to cart action, such as opening the cart drawer or showing a cart popup, you will need to add a bit of code to your Shopify theme. This is required because every Shopify theme is different, and there are many different ways to implement this.
|
Additional Options
Click Add option to access more settings:
Option | Description |
Discount | Apply a discount code |
Quantity | Set the quantity to add |
Clear cart | Clear the cart before adding |
Go to Product
Navigates to the product detail page for the connected product.
Requirement: Must be within a container connected to a product.
Select Variant Option
Allows users to select a variant option (like size or color) when clicked.
Configuration
Setting | Description |
Option | The variant type (e.g., Size, Color) |
Selected | The specific variant value (e.g., Small, Medium, Large) |
Example
Option Type | Selected Values |
Size | Small, Medium, Large |
Color | Red, Blue, Green |
Size and Color | Combined options |
Select Selling Plan
Select a subscription or selling plan for the product.
Useful for products with subscription options.
Set Quantity
Define the quantity for the add to cart action.
Quick Reference
Task | Action |
Add action | Select element → Interactions → Plus icon → Choose action |
Link to page | Link to → Page → Select page |
Link to product | Link to → Product → Select product |
Link externally | Link to → URL → Enter URL |
Dynamic link | Link to → Database icon → Select metafield |
Open in new tab | Link to → New tab → Yes |
Add to cart | Product → Add to cart |
Toggle overlay | Triggers → Toggle overlay → Select overlay |
Select variant | Product → Select variant option → Choose option and value |
Action Categories Summary
Category | Best For |
General | Navigation, links, email, cart access |
Triggers | Showing/hiding overlays and dropdowns |
Product | Ecommerce functionality (cart, variants, plans) |