How to install and activate add-to-cart trigger in klaviyo

Introduction:

Learn how to install and activate add-to-cart trigger in klaviyo for Shopify that tracks when a customer adds an item to a cart, which you can use to trigger an abandoned cart flow. This is different from the Checkout Started event from Klaviyo’s built-in Shopify integration, which trigger abandon checkout flow not abandon cart flow.

How to check added to the cart metric [Trigger] in klaviyo?

• Go to the analytics option from klaviyo left side options bar
• Click on METRICS
• Search ADDED TO CART in the search bar

• Click on ADDED TO CART
• If you can see the graph line then good to go

• Not working? [ When you see no fluctuation in the graph as in the below image]

• Make it functional first

How to activate added to cart metric for Shopify in klaviyo?

Follow steps:

But make sure, your viewed product metric is working before installing add to cart snippet in klaviyo

Find out cart button is class-supported or Id supported.

For that :

• Go to store
• Click on any product
• Right-click on the CTA button
• Click on Inspect

• see if either button is class-associated or Id [ Below image showing CTA is class supported]

>If the CTA is class-supported then:

If you see your add-to-cart button is class supported then use below and replace add-to-cart with the class of your add-to-cart cta….like in the above image our class is [btn btn–full add-to-cart]

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

So updated snippet for the class is:

From above image, we see class equal btn btn–full add-to-cart   so then updated snippet :

 

<script type="text/javascript">

var _learnq = _learnq || [];

var classname = document.getElementsByClassName("btn btn--full add-to-cart");

var addToCart = function() {

_learnq.push(['track', 'Added to Cart', item]);

}; for (var i = 0; i < classname.length; i++) {

classname[i].addEventListener('click', addToCart, false);

}

</script>

 

>If Id supported then:

If you see your add-to-cart button is ID supported then use the below snippet and replace AddToCart [id] with id of your add-to-cart CTA..

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});</script>

In this image, id of the add-to-cart button is addToCart-product-template so needs to replace with AddToCart [Id] in snippet.

Snippet after replacing id

So after finalizing your snippet, copy the code and go to your shopify admin dashboard.

• Go to the theme section
• Edit Code
• Search Theme. liquid

 

Then paste your copied snippet before or after </body> tag [ Sometime it works before and sometime after ] at the end of already code there

”Actually your CTA and snippet Id or class must be the same.”

After pasting the add to cart snippet :

• go to store
• past this [?utm_email=example@gmail.com ] after URL
• Press ENTER
• Add any product to the cart and close the store
• go back to klaviyo and refresh it
• check either metric is working or not
• If working then fine if not again do the same for any other product
• and you can replace =example@gmail.com with your email in above link [?utm_email=example@gmail.com ] as ?utm_email=henry@gmail.com

→Click here to check out ‘how to set up abandon cart flow in klaviyo from scratch’

Hope you loved this article ‘how to install and activate add-to-cart trigger in klaviyo’ : )

”Wanna take your E-commerce business to next level with proven email marketing strategies? You’re just ONE step away. DM ‘Klaviyo consultation’ at info@alixemail.com”

Don’t forget to subscribe our YouTube channel [ Marketing Chamber ] for klaviyo tutorials. For Urdu/Hindi klaviyo tutorials click here. For English klaviyo tutorials click here.”

FAQs:

1] How to create an “Added to Cart” event for Shopify?

Answer: This is one of the most frequently asked questions, and we have published a comprehensive article addressing it. You can find our detailed guide here.

2] What is the correct trigger set up for the ADD TO CART metric on Flows?

Answer: I would recommend adding some filters to your browse abandonment flow (triggered by the viewed product event) and your added to cart flow (triggered by the custom added to cart event) to prevent users from receiving the wrong messaging.

3] How to create an abandoned cart flow?

Answer: Here is our complete step-by-step guide to set up abandon cart flow from scratch.

4] What are the main reasons for cart abandonment?

Answer: The main reasons for cart abandonment include unexpected shipping costs, complicated or lengthy checkout processes, concerns about payment security, comparison shopping, and distractions during the checkout process.

5] How can I recover abandoned carts and increase conversions?

Answer: To recover abandoned carts and increase conversions, use tactics like personalized email reminders with incentives, retargeting ads, exit-intent pop-ups, and offering live chat support to assist customers with any questions or concerns they may have during the checkout process.

 

• In Urdu/Hind:

• In English: