How to Install Back in Stock for Shopify with Klaviyo
I’ve written an article to introduce with you about the best Shopify Back In Stock apps. If you are using Klaviyo for your Shopify store, I think you don’t need to install any Shopify Back In Stock apps. Because Klaviyo built-in this feature for you.
| Klaviyo is an email marketing platform created for online businesses — featuring powerful email and SMS marketing automation. |
Klaviyo’s Back in Stock feature for Shopify stores has 2 key components:
- 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.
- 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.
Step 1: Add Website Button
Firstly, you must get your public API key. To do this, copy your 6-character public API key from the Accounts > Settings > API Keys tab in your Klaviyo account. If you use multiple Klaviyo accounts, check that the correct public API key has been added to the code block.
Now, you must get ID of the list you want to save the email addresses. You go to Lists & Segments and click on the list you want to choose, go to Settings tab and you can see the List ID.
Next step, you come back to your Shopify admin dashboard.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Layout directory, click theme.liquid.
- Add the following JavaScript snippet into this, directly above the
</body>tag.1234567891011121314151617181920212223242526272829303132333435363738<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script><script>//Generated by [email protected] - HuraTips.Comvar klaviyo = klaviyo || [];klaviyo.init({account: "AAAAAA", //Public API keyplatform: "shopify",list: "BBBBBB" //List ID});klaviyo.enable("backinstock",{trigger: {product_page_text: "Notify Me When Available",product_page_class: "hura-notify-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>Remember replacing your public API key instead of
AAAAAAand List ID instead ofBBBBBB. - Click Save.
Now you go to the product form and add the following script snippet into above the add to cart button.
1 2 3 4 5 | {% unless product.available %} <div style="margin:15px 10px 0 0;"> <a class="klaviyo-bis-trigger" href="#"><button class="hura-notify-btn">Notify Me When Available</button></a> </div> {% endunless %} |
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.
- 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.
Step 2: Set up Back in Stock Flow
Klaviyo has two pre-built back in stock flows available in the Flow Library.
Navigate to the Flow Library by clicking Browse Ideas in the upper right-hand corner of the main flows page. You can find all loyalty- and sales-oriented flows we offer by filtering your view by the following goals: Convert Sales and Build Loyalty. You can also easily find these available Back in Stock flows by searching for “back in stock.”
There are two options available out-of-the-box:
- Standard: A standard flow that will automatically alert customers when items they’re interested in are restocked.
- VIP versus non-VIP: Give VIPs advanced notice when items they’re interested in are restocked —this is a more sophisticated version of the standard flow.
After populating any flow in your account from the library, we recommend reviewing all email content and updating the templates to match your brand.
If you’d like to build a back in stock flow from scratch, you can do this as well.
- Click Create Flow and name your back in stock flow.
- Once in the Visual Flow Builder, choose the trigger option Takes an Action. In the dropdown menu that follows, choose the metric Subscribed to Back in Stock. Do not add any trigger or flow filters, and click Done.
- The next component you’ll want to drag in — directly after the trigger — is the Back in Stock Delay. Recipients that enter your flow will wait at this delay until their item of interest is restocked. After this occurs, they will move on to the next step in your flow (which is typically an email but could be an SMS).
- Typically, you will only need a single message in this flow, as a back in stock flow serves a transactional purpose. Make sure to turn Smart Sending off for this message to ensure everyone gets the alert.
You do not need to add any time delays components to this series, as the back in stock delay will ensure each person that enters your flow waits until the item they subscribed to goes back in stock before moving forward.
There are two key settings you can adjust regarding your back in stock flow:
- Minimum inventory rules
- Customer notification rules
These can be configured in your Account’s email settings. While you could use an SMS to send a back in stock message, these options are not currently available for SMS. Further, you cannot use the same catalog tag to link to products. Thus, using email is a best practice.
Minimum Inventory Rules
Minimum inventory rules refer to how many items need to be restocked before you notify those who subscribed.
Depending on how you handle restocking when inventory runs out, you may only receive a few products in for a given SKU or variant at a time. If this is the case, you may prefer to have a threshold at which you consider the volume significant enough to let people know the item is back in stock.
Under Back in Stock Settings in your account’s Email Settings, you will see Minimum Inventory Rules. This is where you can decide the threshold for notifying customers when an item is restocked.
Customer Notification Rules
Customer notification rules have two subsettings that work together to customize how many and how frequently to send back in stock messages. These settings allow you to send restock notifications all at once or in batches. The two components that you can configure are:
- Customers to Notify: This determines how many customers are notified of each item is restocked. If you have a high-demand item, you might receive hundreds of subscriptions when it goes out of stock. If one item is restocked, you don’t want to email all of those people for that single item.
- Wait Time Between Notifications: This determines how long to wait between batches of emails if you choose to specify the number of emails that are sent out per item that is restocked. If a single item is restocked and “customers to notify” is set to 5, for example, we will message the 5 oldest subscribers. We will then wait for this amount of time before emailing the next 5 oldest subscribers. Emails will continue to be sent in batches until the existing inventory drops below your account’s minimum inventory threshold.
If additional items are restocked during the waiting period, additional emails won’t be sent until the end of the waiting period. At the end of the waiting period, we will determine how many items are in stock for this item and notify the correct number of subscribers.
