A space to discuss online store customization, theme development, and Liquid templating.
Hello!
I'm having trouble getting the Klaviyo 'Notify me when back in stock' button to appear on Dawn (version 4.0.0). I tried using the default code provided by Klaviyo (Dawn is not listed at their supported themes page), but I can't get it to show up. Here is the code:
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: 'KLAVIYO PUBLIC API REMOVED',
platform: 'shopify'
});
klaviyo.enable('backinstock',{
trigger: {
product_page_text: 'Notify Me When Available',
product_page_class: 'button button--full-width',
product_page_text_align: 'center',
product_page_margin: '0px',
alternate_anchor: "AddtoCart",
replace_sold_out: false
},
modal: {
headline: '{product_name}',
body_content: 'Register to receive a notification 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: '',
close_label: 'Close',
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
font_family: '"Helvetica Neue", Helvetica, Arial, sans-serif;',
drop_background_color: '#000',
background_color: '#fff',
text_color: '#222',
button_text_color: '#fff',
button_background_color: '#439fdb',
close_button_color: '#ccc',
error_background_color: '#fcd6d7',
error_text_color: '#C72E2F',
success_background_color: '#d3efcd',
success_text_color: '#1B9500'
}
});
</script>
Googling the issue I found an article that suggested replacing the:
<div class="product-form__buttons">
to include the alternate anchor ID in the main-product.liquid file:
<div class="product-form__buttons" id="AddtoCart">
However, it doesn't show up. Disabling/enabling the dynamic check out buttons makes no difference.
Any help would be greatly appreciated!
having the same issue 😞
Hello. I am using Dawn 5.0 so you might need to update.
What I did was replaced this line
product_page_class: 'button button--full-width',
to
product_page_class: 'button',
and change this one
replace_sold_out: false
to true, this will replace the "sold out" button to "notify me", but it is the only way that I could make it work, otherwise the "notify me" button is showing up under price and no matter what I tried I could not make it show under the sold out button. Hope it helps.