Hello klaviyo
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: "xxxxx",
list: 'xxxxx',
platform: "shopify",
collection_urls: ["/collections/"]
});
klaviyo.enable("backinstock",{
trigger: {
collection_page_text: "Notify Me When Available",
collection_page_class: "btn",
collection_page_text_align: "center",
collection_page_margin: "0px",
collection_page_width: "100%",
alternate_anchor: "AddToCart",
replace_anchor: false
},
modal: {
headline: "{product_name}",
body_content: "Register and you'll get an email when this item comes back in stock.",
email_field_label: "Email",
button_label: "NOTIFY ME WHEN AVAILABLE",
subscription_success_label: "You're in! We'll let you know when it's back.",
footer_content: '',
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
drop_background_color: "#000",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#000000",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}
});
</script>
I am using narrative theme I have added this script in theme.liquid
{% unless product.available %}
<div class='klaviyo-product-container' id='klaviyo-data-handle-{{ product.handle }}' data-klaviyo-handle='{{ product.handle }}'>
<div class="klaviyo-button-container" style="opacity:1">
</div>
</div>
{% endunless %}
and this code in product-grid.liquid file
notify me is working only for product without variants on collection pages it is not working for if variants are not available
when i hover on out of stock product then only button is showing but I do not want to show notify mw when available button on hover i need the flow same as it is working on product pages it is showing directly on product pages wihout hover or I change variant from dropdown
Best answer by David To
View original