What is Klaviyo Back in Stock Alert?

The Back in Stock Alert feature conveniently notifies customers when a selected item is restocked.

As an e-commerce seller, this step is generally considered mandatory for retaining customers. This is because we want to ensure that some form of contact is made, even if the item in question is not currently available.

Luckily Klaviyo has the ability to monitor inventory levels for you and send a notification to any subscribed customers on your behalf. Considering the snippets are correctly installed.

To enable a "Notify Me When Available" button for out-of-stock items on Shopify, add a snippet to your theme. This will trigger the button to appear automatically and allow customers to receive notifications when the item is back in stock.

  • If a product is out-of-stock when a shopper looks at it, they will see a button that says "Notify Me When Available" next to or below the "Sold Out" button or you can edit this term to suit your needs as in the snapshot.
  • When someone clicks the "Notify Me" button, a form will pop up that allows the shopper to enter their email to be notified when the item is restocked.
  • As soon as the form is submitted, a Subscribed to Back In Stock event will be tracked on that shopper's profile inside Klaviyo.

How To install Klaviyo Back in Stock Alert Snippets

To get into your Shopify Theme editor you’ll need to head to your store's admin area and then find Online Store in the bottom left and Select Themes underneath it.

alternatively https://admin.shopify.com/store/my-shopify-url/themes ..remember to replace (my-shopify) with your store's name from the myshopify URL not the actual domain it's been connected to.

**There's been a recent change where themes do not show straight away and it may try open the top centre search bar and you have to select Online Store there first or themes will not display on the left.

Next we need to find the theme.liquid file in the layout folder

And then you want to make sure you are pasting the code just above the closing tag

as seen below: Make sure not to edit or remove any of the script tags in the code below and copy paste as is or you can create problems with other js on the page.

I've actually modified the code from the Klaviyo tutorial as I found it didn't work and threw an error about the Margin top properties not using the Camel cased names ie “marginTop” so I removed the margin line: product_page_margin: "0px",

I added this custom css in my particular stylesheet which was to get the button to display inline 

a.product__submit__item.klaviyo-bis-trigger {
    display: block;
    margin-top: 20px!important;
    margin-bottom: -50px!Important;
}

After that everything worked great.

<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: "btn",
      product_page_text_align: "center",
      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>

You'll need to replace the PUBLIC_API_KEY text in the snippet with your Klaviyo public API key. Learn how to find your account's public API key. If you use multiple Klaviyo accounts, make sure you are using the key from the correct account. Copy and paste your key into the snippet.

Related Articles