What is the Notify me?
Customers can sign up for alerts when a desired item is out of stock on e-commerce sites by clicking the “Notify Me” button. The customer gets reminded to make a purchase when the product is restocked. By doing this, merchants may increase client confidence and hold onto sales.
Step 1: First, from the Shopify app store, install the Klaviyo: Email Marketing & SMS app.
Step 2: Open the app and you can see this login page.
Here, add your email and password and log in to the klaviyo account; if you do not have an account with Klaviyo, then click on ‘Let’s Get Started’ and create the account.
Step 3: After logging in, you can see the klaviyo dashboard as below.
Now, first we need to add the flow into klaviyo for back in stock.
Step 4: Go to flows in the Klaviyo and select Build your own.
Step 5: Search back in stock and choose the standard version, then you can show back in stock flow model, and click on create flow.
Now we create a shopify “Notify Me” button.
Products that are out of stock will display this. The “add to cart” button will be replaced by this button. This will display the “notify me when it’s available” button. When the consumer clicks it, a form asking for their email address will come up, adding them to the queue and allowing Klaviyo to notify them when a product is restocked.
Now we add back in stock code, first, check you have enabled klaviyo on-site tracking on your shopify store.
Step 6: On the shopify home page, click on the online store, and Theme, then under the menu select edit code.
7
Step 7: Within the layout folder, click on theme.liquid file and scroll to the bottom of the page
Step 8: Add the below code before the closing </body> tag.
<script src=”https://a.klaviyo.com/media/js/onsite/onsite.js”></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: ‘PUBLIC_API_KEY’,
list: ‘YOUR_LIST_ID’,
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>
Step 9: here we need to replace the code that says public API key with your klaviyo public API key.
To find your public API, Go to your klaviyo account name in the bottom left and select settings.
Within the account settings, under settings, click API keys, you can see the API key, the six-digit key. copy this key and replace the Public API key with your API key.
Now let’s create a list for him so that customers can subscribe to it, and we will find him in that list.
Step 10: Click on Audience, select List and Segment, then click on Create New.
Step 11: Then click on Create List, name the list back in stock and create it.
Step 12: After that, go to that list and click on its settings, you will see the ID of the list, copy it and replace it with your list ID in your code.
Now we have to check back in-stock functionality.
If you have selected a product that is out of stock, the Notify Me button will appear only in products that are out of stock. It will look like below.
Now click on that button, then an option appears, one model. add email, click on notify when available, and submit the email.
Now you will receive one email to confirm the subscription. then click on Yes, I want to subscribe.
Now you can see the email in the back in stock list.
Note: You can see the email of the customer who has subscribed to the email, and the customer who has not is not visible.
When the product is in stock, then that subscribed user gets the email as below.
