Skip to main content
Solved

The Back in stock button showing is not in Dawn 15 after input code from Klaviyo.


iftekhirul
Contributor I
Forum|alt.badge.img+1

I am not a developer; I do Klayvio template design and run campaigns on Klayvio. One of my clients needs the Klaviyo back-in-stock flow setup . I have followed Klaviyo documentation for back-in-stock flows. I have input code theme.liquid, but I am not seeing any button or text refer to

"Notify me when available",

Basically, code is doing nothing for me. Please help me as I want to learn this.
Thank you.

I have used this code: 

 

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: 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: '',
     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: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

Best answer by marika-t

Hi ​@iftekhirul!

I found a similar community article that may be helpful. Check it out and let me know if it helps! :)

Good luck!

Marika 

View original
Did this topic or the replies in the thread help you find an answer to your question?

4 replies

marika-t
Problem Solver II
Forum|alt.badge.img+3
  • Problem Solver II
  • 11 replies
  • Answer
  • January 7, 2025

Hi ​@iftekhirul!

I found a similar community article that may be helpful. Check it out and let me know if it helps! :)

Good luck!

Marika 


Christiannoerbjerg
Expert Problem Solver II
Forum|alt.badge.img+12

Hi ​@iftekhirul 

Thank you for posting in the Community!

For it looks like, that the Back-in-stock code doesn’t have your public API key setup correctly. Try with the following code, when you have inputted your public API key. 

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script> <script> var klaviyo = klaviyo || []; klaviyo.init({ account: "INCLUDE YOUR PUBLIC_API_KEY HERE", platform: "shopify" }); klaviyo.enable("backinstock",{ trigger: { product_page_text: "Notify Me When Available", product_page_class: "button", product_page_text_align: "center", product_page_margin: "0px", replace_anchor: 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: '', 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: "#439fdb", close_button_color: "#ccc", error_background_color: "#fcd6d7", error_text_color: "#C72E2F", success_background_color: "#d3efcd", success_text_color: "#1B9500" } }); </script>

Hope that helps! :-) 

Christian Nørbjerg Enger
Partner & CPO
Web: Segmento.dk
LinkedIn: @christianfromsegmento
Voldbjergvej 22b, 8240 Risskov


Amos Peace
Problem Solver III
Forum|alt.badge.img+5
  • Problem Solver III
  • 56 replies
  • January 7, 2025

Hello ​@iftekhirul,

Give this a try to fix your Klaviyo back-in-stock issue:

  1. Verify Code Placement: Add the back-in-stock code where the "Add to Cart" button or out-of-stock message appears in theme.liquid or product templates.

  2. Include Klaviyo JavaScript: Add Klaviyo’s embed code to your site:

     

    html

    Copy code

    <script async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_API_KEY"></script>

  3. Insert Back-in-Stock Button: Use the following code for the button:

     

    html

    Copy code

    <div class="klaviyo-bis-trigger" data-product="{{ product.id }}" data-variant="{{ current_variant.id }}"> Notify me when available </div>

  4. Check for Theme Conflicts: Use browser developer tools to confirm the button is rendered and styled properly.

  5. Enable in Klaviyo: Ensure the back-in-stock flow is active, and the integration with your e-commerce platform is connected.

  6. Test: Set a product to "Out of Stock" and check if the button appears.

If it still doesn’t work, inspect for caching issues or theme conflicts.

Let me know where you're stuck!


MANSIR2094
Problem Solver IV
Forum|alt.badge.img+13
  • Problem Solver IV
  • 184 replies
  • January 8, 2025

Hello ​@iftekhirul 

The issue might stem from incomplete integration or missing elements in the theme. Ensure the following:

 

1. Verify the PUBLIC_API_KEY in your code matches your Klaviyo account's public API key.

 

2. Confirm the Klaviyo "Onsite JavaScript" snippet is installed and properly working on your Shopify store.

 

3. Check if the back-in-stock feature is enabled in your Klaviyo account settings.

 

4. Inspect the product pages where the button should appear, ensuring there are no conflicts with your theme's CSS or JavaScript.

 

If these steps don't resolve the issue, the code or placement might need customization to align with your Shopify theme structure. Feel free to reach out for help with implementation.