How to Install Back in Stock for Shopify

read
Last updated at:

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. 

Resources

Installation of back in stock is not supported for Shopify stores using custom themes. For a list of supported themes, see our article on back in stock styling code snippets for free Shopify themes. At this time we cannot assist with implementing back in stock for stores using custom themes.

In addition to Shopify, Klaviyo supports back in stock for BigCommerce, and back in stock for custom catalog feeds. Back in stock for other ecommerce platforms that integrate with Klaviyo (such as WooCommerce and Magento) is not supported, and Klaviyo does not provide custom coding assistance. 

If you need developer assistance, consider reaching out to one of Klaviyo's partners

Back in Stock for Shopify Video

Walkthrough showing how to add Klaviyo’s back in stock snippet to your Shopify store

About Klaviyo’s Back in Stock Feature

Klaviyo's Back in Stock feature for Shopify has two 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 You Begin

 Knowledge Check

If you have not already, read our guide on How to Integrate with Shopify for step-by-step instructions on integrating, before continuing with this article.

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.
  • Set up your back in stock flow in Klaviyo first. This flow triggers whenever someone subscribes to be notified when an item is restocked. 

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: "btn",
      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>
  1. You'll need to replace the PUBLIC_API_KEY text in the snippet with your Klaviyo public API key. You can find it by navigating to your Klaviyo account, clicking your account name, then selecting Account > Settings > API Keys. 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. Klaviyo’s API Keys page with Create Private API Key in a blue button and Public API Key circled in red
  2. 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.

If you're interested in matching the styling of your Shopify theme, check out Back in Stock Styling Code Snippets for Free Shopify Themes.

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: "btn",
    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 'btn' 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.

Tags are case sensitive. If you use tag parameters, type the tag exactly as it appears in Shopify.

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.

Out of Stock Purchasing 

Note: The following override functionality is only compatible with Shopify stores created before December 5th, 2017.

You can override Klaviyo's default behavior where the "Allow customers to purchase this product when it's out of stock" option has been selected by adding display_on_policy_continue: true.

klaviyo.init({
    account: 'PUBLIC_API_KEY',
    platform: 'shopify',
    display_on_policy_continue: true
});

By default, Klaviyo will not show the “Notify Me” button for items where you have selected the option "Allow customers to purchase this product when it's out of stock." Including display_on_policy_continue: true will ensure that the “Notify Me” button is displayed regardless, meaning shoppers will see both an "Add to Cart" and a "Notify Me" button.

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:

Back in stock popup modal before customization, with headline, body_content, email_field_label, and button_label with a blue background

  • 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" 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:

Back in stock popup modal after customization, showing the product name, email address text box, plus notify me when available with a blue background

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.

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

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.

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.

Are you using the Retina theme?

The Retina theme (from Out of the Sandbox) comes with a "Notify Me" form built into the product page. You will need to disable the default button that comes with your theme in order for the Klaviyo code to function.

Are you using a theme that hides a product if all variants are sold out?

If your Shopify theme hides a product when all the variants are sold out, you'll need to identify this area of the code in your product.liquid file and edit it to display all products, regardless of stock level.

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

Additional Resources

x
Was this article helpful?
1094 out of 1706 found this helpful