How to install Back In Stock for BigCommerce

You will learn

Learn how to install Klaviyo's Back in Stock feature on your BigCommerce store. This feature has two key components - a flow, and a button on your website. 

1. Back in Stock flow: When someone subscribes to a restock 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 restock alert and wait at a "Back in Stock Delay" until their item of interest is restocked.
2. Website button: You will need to add a snippet to your BigCommerce theme that will automatically show a "Notify Me When Available" button when items go out-of-stock. When shoppers click this button, they will fill out a form and subscribe to a restock alert.

Before you begin

This guide will focus on installing Klaviyo's Back in Stock snippet in your BigCommerce script manager so shoppers can subscribe to restock alerts. Before starting, you will want to have a Back in Stock flow already set up in your account to both capture these subscribers and then automate the back in stock alert process.

Please note that our Back in Stock button is not supported within the Quick View modal accessed from a Collections page. The button must only be placed on the product page.

How does the snippet work?

As soon as you install the snippet provided below, 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 where the "Sold Out" button that would normally show.
• When someone clicks the "Notify Me..." button, a form will pop up that allows the shopper to sign up 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.
• Then, the Back in Stock flow you've already set up will alert shoppers when the item they subscribed to is back in stock.

Klaviyo tracks your inventory inside your Klaviyo account and refreshes products every 3 hours, and variants every hour. Because of this delay, there can be instances where products that have gone out of stock in your store are not yet reflected in Klaviyo. There can also be instances where a product that has come back in stock in your store has not been reflected in Klaviyo.

Klaviyo also monitors your inventory on a variant level. This means 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.

Install the snippet

To install the Klaviyo back in stock snippet, you'll add it to a new script in your Script Manager.

1. From your BigCommerce Admin, navigate to Storefront > Script Manager.
2. Click Create a Script. Use the following settings:
   • Name of script: Klaviyo back in stock
   • Location on page: Footer
   • Select pages where script will be added: Store Pages
   • Script type: Script
3. Next, update the script below with your Klaviyo public API key, and paste the updated script into the script box.
   • You can copy your 6-character public API key from Klaviyo. To find it, click your account name in the lower left corner, then navigate to Settings > API keys. In the script, your public API should replace the text reading PUBLIC_API_KEY.
     

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
        var klaviyo = klaviyo || [];     
        klaviyo.init({   
             account: 'PUBLIC_API_KEY',    
             platform: 'bigcommerce'  
        });  
        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: "#4787ed",  
             close_button_color: "#ccc",   
             error_background_color: "#fcd6d7",   
             error_text_color: "#C72E2F",  
             success_background_color: "#d3efcd",  
             success_text_color: "#1B9500"  
             } 
        });
   </script>

4. Click Save. You've now added the Klaviyo back in stock button to your store.
   

Customize your form and button

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

The default values included in the above snippet above are listed and 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 when available" by default, but can be configured to say whatever you would like. The default code for the trigger is:

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

• 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 (e.g. center, right, or left).
• product_page_margin
  The margin added around the button, between the text and the button.
• alternate_anchor
  If your 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 When Available" button. When this is set to true, the "Notify Me When Available" button will replace the "Sold Out" button.

Modal settings

The modal is the message box that pops up when someone clicks the button to be notified once an item is restocked. These are the default settings 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 BigCommerce'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 "success" message that appears in green when someone successfully submits the popup form.
• footer_content
  (optional) Text that will appear in the footer, below the submit button close_label: "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.

Prompt customers to opt-in to marketing

When someone subscribes to a back in stock alert, this does not necessarily 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 opt-out early on after getting emails they never indicated they wanted.

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 primary 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: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
   });
   

2. Replace YOUR_LIST_ID with the with the six-character ID for the Klaviyo List you want these subscribers to be added 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: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
       });
       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 param 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
           ...
       }

Outcome

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

Additional resources

• Getting started with BigCommerce
• How to create an Added to Cart event for BigCommerce