Klaviyo Script for Add to Cart Trigger Flow

[EG1264]

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.

[gseilei]

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.

[Rubencamposjr]

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 

[gseilei]

Hey Ruben,

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

[Llcfitnessco]

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

[KateTilbury]

Ditto - did anyone get a resolution to this?

[Dana19]

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

[Hamada]

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

[Nicolas60]

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: 

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