Install Back In Stock for BigCommerce

read

Overview

Klaviyo's Back in Stock feature for BigCommerce stores has two key components:

  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.

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

What Happens When I Install This Snippet?

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

You will want to first set up a Back in Stock Flow within Klaviyo that triggers whenever someone subscribes to be notified when an item is restocked. This flow will alert shoppers when the item they subscribed to is back in stock. Learn how to set up this flow.

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.

2019-03-13_12-15-52.gif

Install the Snippet

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

From your BigCommerce Admin navigate to Storefront > Script Manager and click to 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

Next, update the script below with your Klaviyo Public API key, and paste the updated script into the script box.

Note

This code block automatically populates line 5 with the Klaviyo public API key for the Klaviyo account you are currently logged in to. If you use multiple Klaviyo accounts, check that the correct public API key has been added the code block. If you see "KLAVIYO_PUBLIC_API_KEY", then your public API key has not loaded, and you'll have to manually update it. Copy your 6-character public API key from the Accounts > Settings > API Keys tab in your Klaviyo account.

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

Customizing 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_title}} 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:

bigcommerce-bis-modal-optin.png

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.

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

klaviyo.init({
        account: 'KLAVIYO_PUBLIC_API_KEY',
        list: 'YOUR_LIST_ID',
        platform: 'bigcommerce'
});

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.

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>

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.

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

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.

 

x
Was this article helpful?
4 out of 7 found this helpful