Klaviyo Script for Add to Cart Trigger Flow

Excursionist
19 0 10

Hi,

 

I'm trying to add Klaviyo's code for creating a custom true Abandoned Cart email flow. I've followed their instructions here. But with no success. I believe I have to use the alternate script for the add to cart button with a class notation. I'm using the Atlantic theme. I have not heard back from Klaviyo support. Any help would be appreciated.

 

Thank you.

0 Likes
Shopify Expert
230 28 37

it should work, maybe there is a line of the code on your product.liquid, that is blocking that code... could you paste your product.liquid code in here or if you want we could have a deeper look for you. Just write us at info@webmefy.com and we would love to help you.

We help you achieve your Goals! Visit us on: Webmefy.com
0 Likes
New Member
1 0 0

Im also having this issue 

 

Followed instructions exactly as explained on klaviyos site

 

Here is what is in my product.liquid

Ive bolded the snippet i had to change in order to reflect my the "class" from the button on my site

(below this product.liquid is the code from 'inspect" that i got off the add to cart button.)

 

{% section 'product-template' %}
{% section 'related-products' %}
{% section 'recently-viewed-products' %}

<script src=https://widget.sezzle.com/v1/javascript/price-widget/initial?uuid=7f6f8fd1-cc1b-4968-a366-a8b8ac21e7...>

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=7f6f8fd1-cc1b-4968-a366-a8b8ac21e753"></sc...>

<script text="text/javascript">
var _learnq = _learnq || [];

var item = {
Name: {{ product.title|json }},
ProductID: {{ product.id|json }},
Categories: {{ product.collections|map:'title'|json }},
ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
URL: "{{ shop.secure_url }}{{ product.url }}",
Brand: {{ product.vendor|json }},
Price: {{ product.price|money|json }},
CompareAtPrice: {{ product.compare_at_price_max|money|json }}
};

_learnq.push(['track', 'Viewed Product', item]);
_learnq.push(['trackViewedItem', {
Title: item.Name,
ItemId: item.ProductID,
Categories: item.Categories,
ImageUrl: item.ImageURL,
Url: item.URL,
Metadata: {
Brand: item.Brand,
Price: item.Price,
CompareAtPrice: item.CompareAtPrice
}
}]);
</script>

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

 

FROM INSPECT:

<button type="submit" class="ProductForm__AddToCart Button Button--full Button--secondary" data-action="add-to-cart"><span>Add to cart</span></button>

 

 

Please let me know if im missing something?

Theme is prestige 

0 Likes
Shopify Expert
230 28 37

Hey Ruben,

 

just answer to your mail. Let me know if that helps, so we can post the answer here too! :)

We help you achieve your Goals! Visit us on: Webmefy.com
0 Likes
New Member
1 0 0

I'm having the same issue as both people above can you help me?

0 Likes
Tourist
8 0 2

Ditto - did anyone get a resolution to this?

0 Likes
New Member
1 0 0

Hi, 

 

I am having the same issue and cannot add the script for "Add to Cart" but have followed Klaviyo's instructions to paste the "class" from my inspect into their snippet. My theme is Context and below code is what shows up from inspect: 

 

<button type="submit" name="add" class="bttn bttn--full bttn--secondary " data-add-to-cart="">
<span class="w-100" data-add-to-cart-text="">

Add to Cart

</span>
</button>

 

I'm new at all this, hoping someone can help! 

 

Thanks

0 Likes
New Member
5 0 0

Hi Guys,

 

i had the same problem.
After i opened my Website in a private window and inspected the Add to Cart ID/Class I realized it was a different one compared to when I opened the window in a normal tab.
So I used the ID from the private window and it worked.
Hopefully it will work for you as well.

Best,
Mohamed

0 Likes
New Member
1 0 0

I am also facing the same issue. I followed this 

 

https://help.klaviyo.com/hc/en-us/articles/115001396711-Create-a-Custom-Added-to-Cart-Event-for-Shop...

 

And i have this: 

Nicolas60_0-1609683473118.png

 

here is the code in product.liquid:

{%- include 'css-product-page' -%}
{%- case settings.productpage -%}
{%- when 'product-1' -%} {%- section 'product-template-1' -%}
{%- when 'product-2' -%} {%- section 'product-template-2' -%}
{%- when 'product-3' -%} {%- section 'product-template-3' -%}
{%- when 'product-4' -%} {%- section 'product-template-4' -%}
{%- when 'product-5' -%} {%- section 'product-template-5' -%}
{%- when 'product-6' -%} {%- section 'product-template-6' -%}
{%- when 'product-7' -%} {%- section 'product-template-7' -%}
{%- when 'product-8' -%} {%- section 'product-template-8' -%}
{%- when 'product-9' -%} {%- section 'product-template-9' -%}
{%- when 'product-10' -%} {%- section 'product-template-10' -%}
{%- else -%}
Missing liquid
{%- endcase -%}

{%- section 'subscription-box' -%}
{%- section 'subscription-box2' -%}
{%- section 'video-product' -%}

<script type="text/javascript">
var _learnq = _learnq || [];

var item = {
Name: {{ product.title|json }},
ProductID: {{ product.id|json }},
Categories: {{ product.collections|map:'title'|json }},
ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
URL: "{{ shop.secure_url }}{{ product.url }}",
Brand: {{ product.vendor|json }},
Price: {{ product.price|money|json }},
CompareAtPrice: {{ product.compare_at_price_max|money|json }}
};

_learnq.push(['track', 'Viewed Product', item]);
_learnq.push(['trackViewedItem', {
Title: item.Name,
ItemId: item.ProductID,
Categories: item.Categories,
ImageUrl: item.ImageURL,
Url: item.URL,
Metadata: {
Brand: item.Brand,
Price: item.Price,
CompareAtPrice: item.CompareAtPrice
}
}]);
</script>


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

 

 

Best

0 Likes