Install Back in Stock in Your Shopify Theme

read

Overview

Klaviyo's Back in Stock feature for Shopify 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 Shopify 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 Shopify theme.liquid file 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 next to 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 monitors your inventory on a variant level, which 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.

2018-03-21_18-43-24-1.gif

Install the Snippet

Add the following JavaScript snippet into your theme.liquid file in your Shopify store, directly above the </body> tag. Note that this snippet is supported with all Free Shopify themes. If you have a custom theme, it may not be fully compatible out-of-the-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 "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.

Customizing Your Form & 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.

Note

If you're interested in matching the styling of your Shopify theme, check out this doc.

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: 'btn',
    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 '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 (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 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 When Available" button. When this is set to true, the "Notify Me When Available" 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 the parameters below. Be sure to include either include_on_tags or exclude_on_tags, but not both. 

klaviyo.init({
    account: 'AccountID',
    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.

Additionally, 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 editing display_on_policy_continue.

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

By default, Klaviyo will not show the back in stock 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 back in stock button is displayed regardless. If you have this option selected, shoppers will see both a "Add to Cart" and a "Notify Me When Back in Stock" 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 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 "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 he/she expects 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.

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

klaviyo.init({
        account: 'AccountID',
        list: '$ListID',
        platform: 'shopify'
});

Replace $ListID 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: 'AccountID',
        list: '$ListID',
        platform: 'shopify'
    });
    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.

Troubleshooting

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.

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.

Customizing the Location of the "Notify Me" Button

If a Shopify store uses custom button classes, you'll have to change `product_page_class: 'btn'` in the snippet to match your theme's button classes. This will allow the "Notify Me" button to automatically adopt the same styling as all other theme buttons.

Also, if you're not happy with how the button displays dynamically, you can add a conditional in your liquid template and add:

{% unless current_variant.available %}
<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>
{% endunless %}

Klaviyo will detect if a button is already on the page and bind to that button.

Add to Cart Form Requirements

Either the Add to Cart button or the Add to Cart form need to be present on the product page in order for the Klaviyo Back in Stock code to work. Some themes may remove these by default when there is no stock, which means the Klaviyo code won't work.

Themes that Hide a Product if All Variants are Sold Out

If your Shopify theme hides a product if 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.

Was this article helpful?
9 out of 25 found this helpful