How to Fix and Customize Klaviyo’s Back in Stock Button on Shopify

Claudia Howard


          
            How to Fix and Customize Klaviyo’s Back in Stock Button on Shopify

Klaviyo's Back in Stock feature is great—until it isn't. If you’ve ever struggled with the “Join the Waitlist” button not replacing your sold-out button, or the popup button looking totally off-brand, you’re not alone.

In this post, I’ll walk you through a tested, copy-paste setup that fixes the most common issues and makes your Back in Stock (BIS) feature work beautifully on Shopify—including matching your store's design.


Common Problems with Klaviyo Back in Stock on Shopify

  • The sold out button isn’t replaced properly
  • The BIS trigger shows up as plain text, not a styled button
  • The modal button looks off-brand or can’t be styled
  • The email input field won’t round (this one is tricky!)

The Fix: Copy + Paste Working Code

Paste the code below into your Shopify theme. Place it just above the </body> tag in theme.liquid.

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>

<script>
  var klaviyo = klaviyo || [];
  klaviyo.init({
    account: "YOUR_PUBLIC_API_KEY", // ✅ Replace with your Klaviyo public API key
    platform: "shopify",
    list: "YOUR_LIST_ID" // ✅ Replace with your Klaviyo list ID
  });

  klaviyo.enable("backinstock", {
    trigger: {
      product_page_text: "JOIN THE WAITLIST", // ✅ Change this text if needed
      product_page_class: "button", // ✅ Replace with your theme's active button class (used when product is in stock)
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: true
    },
    modal: {
      headline: "{product_name}",
      body_content: "We'll email you as soon as this item comes back in stock.",
      email_field_label: "Email",
      button_label: "JOIN THE WAITLIST",
      subscription_success_label: "You're in! We'll email you when it's back.",
      footer_content: '',
      font_family: '"Avenir Next", sans-serif;', // ✅ Update to match your store font
      drop_background_color: "#000",
      background_color: "#fff",
      text_color: "#222",
      button_text_color: "#fff",
      button_background_color: "#F45024", // ✅ Update to your theme's button color
      close_button_color: "#ccc",
      error_background_color: "#fcd6d7",
      error_text_color: "#C72E2F",
      success_background_color: "#F45024", // ✅ Update to match success state brand color
      success_text_color: "#fff",
      additional_styles: ".btn-success { border-radius: 100px !important; font-family: inherit !important; }" // ✅ Customize button shape and font
    }
  });
</script>

What to Edit for Your Store

  • account: your Klaviyo public API key
  • list: your Klaviyo list ID
  • product_page_class: your theme's active button class (used for "Add to Cart" when in stock)
  • product_page_text: the call-to-action shown on the BIS button (e.g., "Join the Waitlist")
  • Modal text: body_content, button_label, and subscription_success_label
  • Modal colors: match your brand (e.g., button_background_color, success_background_color)
  • Font family: match your store's typeface
  • additional_styles: optional CSS to round modal button or match theme styles

Optional Styling Notes

  • The product page BIS button is styled using the .klaviyo-bis-trigger class
  • The modal button is styled using the built-in class .btn-success via additional_styles

Final Setup Checklist

  • [ ] API key and list ID are updated
  • [ ] product_page_class matches your theme's active button (not the sold-out button)
  • [ ] product_page_text reflects the brand tone (e.g., "Join the Waitlist" or "Notify Me")
  • [ ] Modal text and labels are customized (headline, body, success message)
  • [ ] Modal colours (background, text, button, success) match the store branding
  • [ ] Font family matches the store's typography
  • [ ] Button style uses additional_styles to round the modal button
  • [ ] Code is pasted only once per page
  • [ ] Tested on a sold-out product (button shows, modal triggers, email submits)

Need Help?

I work with Shopify brands every week to set up email flows and implement custom Klaviyo features like this one. Join me at The Social Sales Girls where I coach and teach email marketing strategies.