With Actions, you select what happens when a customer triggers the selected Element where an action has been applied to.
Actions can:
Link to a page on your site or an external URL
Link to a specific section on the current page
Prompt the customer’s default email app to create a new email
Add a specific product variant to the cart and:
Redirect to the cart or checkout
Perform a custom cart action, e.g open the cart drawer (see "Custom cart actions")
Selecting variant options
Selecting selling plans
Actions are an important part of Button elements, but you can also apply them to other layers such as columns, rows, icons and text elements.
How to use Actions
Actions can be added to columns, rows, images, icons and text elements in Instant and will also apply to all the nested layers within the layer unless you add another action to a child layer.
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.
Actions can be added by navigating to the Interactions panel in the right sidebar, here you find the options to add Actions or Effects. Proceed by clicking on the '+' icon next to Action.
Here you can select the following actions:
General actions
Go to link
Go to section
Email to
Product actions
Add to cart
Go to product
Select variant option
Select selling plan
General actions
General actions can used within any layout that you create within Instant and are meant for general purpose use.
Go to link
When adding a general link, you can insert any URL to link to, additionally you can define if the link has to open when triggered in a new tab or not.
Go to section
When selecting Go to section, your action when triggered scrolls the user to the defined section that you have selected. Only parent layers can be selected (Top level layers in the layer panel).
Email to
With the Email to option you can insert an email address for your action that will open the mail client defined within the operating system of your customers to send an email to. Additionally you can set a Subject that will be prefilled when triggering this action.
Product related actions
These actions are meant to interact with the product of your store. For these to function it is mandatory to connect your content with Shopify. You can read more on connecting & making use of Shopify content here.
Add to cart
With the Add to cart action, the product that is selected on the parent layer will be added to cart when triggered. You can define properties such as what the trigger does such as Redirect or Custom. Scroll down to learn about custom add to cart actions.
Under Add option you can set an automatic Discount code, quantity to add to the cart for each trigger and a Clear cart action.
Go to product
With the Go to product action, your button will navigate to the selected product when triggered. Additionally you can set if it should open in a new tab or not.
Select variant option
With the select variant option, your button will be turned into a variant selector, this will allow your visitor to select a product variant which they then can add to their cart.
Under Option you can select the variant category such as Color, Size or the custom options you have defined in Shopify.
With Selected you can preselect a variant that acts as the default.
Select selling plan
With the select selling plan option, your button will be turned into a selling plan selector when utilizing subscriptions for your products. For this it is mandatory to have at least 1 selling plan defined for the selected product.
Custom cart actions
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.
Below we highlighted a few of the main themes and cart apps to make the implementation easier. If your theme is not listed, or if you need help, please reach out to [email protected] and we are happy to support on the implementation!
All implementations are based on the following script:
<script>
document.addEventListener("instant:add-to-cart", () => {
// ... Add code specific to your theme
});
</script>
We recommend to add the script somewhere before the closing body tag in your theme.liquid file.
Theme: Dawn
<script>
document.addEventListener("instant:add-to-cart", () => {
fetch("/cart/update.js", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ updates: {}, sections: ["cart-drawer", "cart-icon-bubble"] }),
})
.then((res) => res.json())
.then((cart) => {
document.querySelector("cart-drawer").renderContents(cart);
document.querySelector("cart-drawer.drawer").classList.remove("is-empty");
});
});
</script>
Note: Make sure you set the "Cart type" in "Theme settings > Cart" to "Drawer".
Theme: Flex
<script>
document.addEventListener("instant:add-to-cart", () => {
Shopify.theme.jsAjaxCart.showDrawer();
Shopify.theme.jsAjaxCart.updateView();
});
</script>
Theme: Focal
<script>
document.addEventListener("instant:add-to-cart", () => {
fetch("/cart.js")
.then((res) => res.json())
.then((cart) =>
document.documentElement.dispatchEvent(
new CustomEvent("cart:refresh", { bubbles: true, detail: { cart: cart, openMiniCart: true } })
)
);
});
</script>
Theme: Impact
<script>
document.addEventListener("instant:add-to-cart", () => {
const cartDrawer = document.querySelector("#cart-drawer");
fetch("/?section_id=cart-drawer")
.then((res) => res.text())
.then((text) => {
const sectionHTML = new DOMParser().parseFromString(text, "text/html");
const cartInnerHTML = sectionHTML.getElementById("cart-drawer").innerHTML;
cartDrawer.innerHTML = cartInnerHTML;
cartDrawer.setAttribute("open", "");
});
});
</script>
App: Rebuy
<script>
document.addEventListener("instant:add-to-cart", () => {
Rebuy.SmartCart.show();
});
</script>
App: Monster Upsells
<script>
document.addEventListener("instant:add-to-cart", () => {
window.monster_refresh();
});
</script>
App: Slide-Cart & Cart Upsells
<script>
document.addEventListener("instant:add-to-cart", () => {
window.SLIDECART_UPDATE();
window.SLIDECART_OPEN();
});
</script>