How to install Back in Stock for Shopify

You will learn 

Learn how to install Klaviyo's back in stock feature for Shopify so that your customers can subscribe to back in stock alerts. Setting up back in stock consists of creating a flow in Klaviyo and adding a customizable code snippet to your Shopify store. 

Before you begin

Please note that Klaviyo does not provide custom coding assistance. If you need developer assistance, consider reaching out to one of Klaviyo's partners. 

About Klaviyo’s Back in Stock feature

Klaviyo's Back in Stock feature for Shopify has 2 key components:

1. Back in Stock flow
   When someone subscribes to a back in stock alert, a Subscribed to Back in Stock event will be tracked on their Klaviyo profile. This is the event you will use to trigger your back in stock flow. Shoppers will enter the flow when they subscribe to a product and will be contacted when their item of interest is restocked.
2. Website button
   You will need to add a snippet to your Shopify theme that will automatically show a "Notify Me When Available" button when items go out of stock. As soon as you install the snippet, the following will occur:
   • When a shopper browses a product and the product is out-of-stock, a "Notify Me When Available" button will appear directly next to, or below, the "Sold Out" button.
   • 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.

Klaviyo monitors your inventory on a variant level, which means that shoppers can subscribe to receive alerts about specific product variants. For example, if a customer finds you're out of their favorite pink t-shirt in a size medium, they can subscribe to this specific variant and Klaviyo will make sure they will only be notified once you've restocked this size and color.

Before installing the snippet

Before you install the snippet via the instructions below, do the following:

• Check that you’ve enabled Klaviyo’s onsite tracking on your Shopify store (including Viewed Product), either via Klaviyo’s app embed or manually. 
• Make sure that either an Add to Cart button or a contact form need to be present on your product page. Some Shopify themes may remove the Add to Cart button when there is no stock. In this case, confirm that when there is no stock, your Shopify Theme displays a Sold Out button, to ensure that the Klaviyo code will work.

Back in Stock for Shopify video

Install the snippet

Add the code snippet below to your theme.liquid file. These instructions apply to both Shopify 2.0 users and those using vintage themes. 

1. From your Shopify Admin click Online Store > Themes.
2. Click your theme’s Actions dropdown and select Edit Code.
3. Search for the theme.liquid file, and click to open it in the editor.
4. Copy the JavaScript snippet below and paste it into your theme.liquid file directly above the </body> tag. 

   <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>

5. 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.
   
6. You can stop here and save your theme.liquid file to use the default configuration, or learn how to customize your back in stock button and settings below.

Customize your form and button

The Klaviyo "Notify Me" button and form are highly configurable. You can change the colors, fonts, text, and other elements according to your design preferences.

The default values included in the above snippet above are explained below. If you make updates, make sure to update the value and not the label itself.

Trigger settings

The trigger is the button that populates when an item goes out of stock. This button will say, "Notify Me" by default, but can be configured to say whatever you would like. The default code (within the snippet you copied) for the trigger is below.

trigger: {
    product_page_text: "Notify Me When Available",
    product_page_class: "button",
    product_page_text_align: "center",
    product_page_margin: "0px",
    alternate_anchor: "AddToCart",
    replace_anchor: false
    }, 

The parameters are:

• product_page_text
  The text that is displayed inside the button that populates when an item goes out of stock.
• product_page_class
  This class will determine what the button looks like; the default value 'button' will ensure this button matches other basic buttons in your theme.
• product_page_text_align
  The alignment of the text inside the back in stock button (i.e., center, right, or left).
• product_page_margin
  The margin added around the button, between the text and the button.
• alternate_anchor
  If your Shopify theme uses an element other than an "Add to Cart" button, replace this text with the ID of the element.
• replace_anchor
  When this is set to false, you will see both a "Sold Out" and a "Notify Me" button. When this is set to true, the "Notify Me" button will replace the "Sold Out" button.

Trigger visibility settings

If you would like to curate which products display the back in stock button on the product page, you can include those parameters below. Be sure to include either include_on_tags or exclude_on_tags, but not both.

Here is an example of the Klaviyo.init section of the snippet with include_on_tags added:

klaviyo.init({
    account: "PUBLIC_API_KEY",
    platform: "shopify",
    include_on_tags: "dog, cat"
});

• include_on_tags
  This tag will ensure that the back in stock button displays only on items that include the specified tags. In the example above, only products tagged with "dog," "cat," or both will have a back in stock button.
• exclude_on_tags
  This is the inverse of the above. Using exclude_on_tags will ensure that the back in stock button is displayed on all products except those specified.

Modal settings

The modal is the popup form that appears when someone clicks the button to be notified once an item is back in stock.

These are the default settings in the snippet that you can adjust:

• headline
  The headline that appears at the top of the popup; by default, we'll dynamically populate the headline as the product name using Shopify's {product_name} variable
• body_content
  The text that appears inside the popup instructing the customer what to do
• email_field_label
  The placeholder text inside the Email field
• button_label
  The text within the submit button for this popup form
• subscription_success_label
  The message that appears when someone successfully submits the popup form
• footer_content
  Optional text that will appear in the footer, below the submit button
• close_label
  The text of the close button; default is "Close"
• background_color
  The background color of the popup form; default is white
• text_color
  The text color of the popup form; default is black
• button_text_color
  The text color of the button on the popup form; default is white
• button_background_color
  The background color of the form's submit button; default is blue
• error_background_color
  The background color of an error box that shows when there is an error submitting the form; default is pale red
• error_text_color
  The text color of the error message that shows when there is an error submitting the form; default is red
• success_background_color
  The background color of the success box that shows after someone submits the form successfully; default is pale green
• success_text_color
  The text color of the success message that shows after someone submits the form successfully; default is green
• font_family
  The name of the font family your text is formatted in; Times New Roman is an example of a font family
• headers_font_family
  The name of the font family your header text is formatted in; Helvetica is an example of a font family

Customizing the location of the "Notify Me" button

The following snippet can be used to change the location of the "Notify Me" button. By default, the button will appear next to, below, or replace the current Add To Cart/Sold Out button. With this code, you can place the button below the description, at the bottom of the page, under the image, etc. To do this, place the snippet in your product.liquid file where you want the button to appear, and make sure to update the button text if you changed it to something other than “Notify Me When Available”. 

<a class="klaviyo-bis-trigger" style="display:none;" href="#">Notify Me When Available</a>

Optional: prompt customers to opt in to marketing

When someone subscribes to a back in stock alert, this does not mean they expect to be subscribed to your main newsletter list.

If shoppers ask to be alerted when an item is restocked, but then start receiving regular marketing content from you, they are likely to unsubscribe. In this scenario, you lose out on the possibility of nurturing these shoppers into loyal customers because they may opt-out early on after getting unwanted emails.

To capture those who do want to opt-in to receive marketing emails from you, you can add a checkbox like this one to your Back in Stock Form:

To implement this, you'll need to make one addition to your snippet by adding your List ID in the "klaviyo.init" section after your Account ID.

1. The "klaviyo.init" section will look like this:

   klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
   });

2. Replace YOUR_LIST_ID with the ID for the Klaviyo list you want to add subscribers to. Typically, this should be your main newsletter list.
3. The snippet with this addition (see Line 5) will look as follows:

   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
       });
       klaviyo.enable("backinstock",{ 
          trigger: {
            ...
          },
          modal: {
            ...
          }
       });
   </script>

4. If you would like to customize what the checkbox says, you can add the text you'd like to display into the "modal" section. By default, this checkbox will say, "Add me to your email list." You'll want to make sure this text is very clear so those who opt-in know they will begin receiving marketing emails from you.

   modal: {
       newsletter_subscribe_label: "Add me to your email list."
           ...
       }

5. If you would like to control whether this box is checked or unchecked, you can add "subscribe_checked" as a parameter to the "modal" section. True will check the box by default, while false will leave it unchecked and require the user to manually select it.

   modal: {
       subscribe_checked: true
           ...
       }

Can I use Shopify's "continue selling when out of stock" setting and Klaviyo's back in stock?

Klaviyo’s back in stock flow works by detecting when there is a change in your inventory levels from zero to a certain amount set by your minimum inventory rule. When you enable the Shopify setting "Continue selling when out of stock", this makes the product available to purchase despite not having any listed inventory, so the “Notify Me” button will not appear. 

In this scenario, Klaviyo’s back in stock flow will not send any emails to those who have subscribed to this product since the inventory level has not changed. Back in stock emails are only sent to customers once your product’s inventory level rises to your minimum inventory rule set. 

In addition, when the “Continue selling when out of stock” setting is enabled, this will mark the product as available so Klaviyo’s back in stock modal will not appear onsite for this product as the product is available to purchase regardless of inventory levels.

Troubleshooting tips

The appearance of the back in stock button will vary based on the particular Shopify theme that your store uses. If you're using a custom theme, you may need to customize your theme code to ensure that the Back in Stock feature functions properly.

Set up your flow

Next, set up your back in stock flow in Klaviyo, which will trigger whenever someone subscribes to be notified that an item is restocked. 

Test your back in stock installation

To test that your back in stock installation is working, do the following:

1. Set up a test product on your store.
2. Set the inventory of that product to zero.
3. Check the product page to see if the “Notify Me” button appears.
4. Click the “Notify Me” button and fill out the form.
5. Add enough inventory to meet the back in stock rules in your account settings. 
6. Check to make sure that you receive the back in stock message you created.

Outcome

You've now installed Klaviyo's Back in Stock feature on your Shopify store.

Additional resources

• How to style Back in Stock buttons and forms for free Shopify themes
• How to set up Back in Stock via API