Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Klaviyo 'Notify me when back in stock' button on Dawn 4.0.0

Klaviyo 'Notify me when back in stock' button on Dawn 4.0.0

bjornbjornbjorn
Tourist
9 0 4

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! 

Replies 2 (2)

lovehuvet
Excursionist
15 0 8

having the same issue 😞

ruizufase
Tourist
6 0 3

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.