Brewing demand: How Cometeer turned customer excitement into rapid sales
If you’ve set up a Back in Stock Flow, you might be wondering which products have the most requests. With Klaviyo you can generate a report of product requests from your Back in Stock Flow and subscribe to it to get regularly updated reports. To do so, navigate to your flow and click on the back in stock delay in the flow. From here, click on "View Back in Stock Product Request Report." This takes you to the report for the back in stock flow. On this page, you can click on "Subscribe" to receive weekly report emails that contain the latest products your customers requested via back in stock. If you’ve created a report like this and want to share how you use it for your business, please join the conversation below! Or if you’re having trouble generating your report, let us know.
Hi all, We've been using Klaviyo's back-in-stock functionality for about a year now, and it has worked really well. However, we now need to upgrade our 'Prestige' theme since it has been a while since our last update. After updating, I wanted to check if everything was still working properly, but I noticed that the back-in-stock button doesn't appear when selecting an out-of-stock variant. It does show up when the page initially loads, but if I select a different variant and then go back to the out-of-stock one, the button doesn’t reappear. When switching it only shows the sold out button. We've added the exact same script as before, but unfortunately, it’s not working. Our preview store URL with the updates version is: https://iakjl0i30483c5ja-81196679476.shopifypreview.com You can search for Jamie Col Knit Bordeaux to see an out of stock variant. Has anyone encountered this issue before or found a solution? Any help would be greatly appreciated!
Hi there, When an item comes back in stock, I’d like to make sure the specific variant the customer was waiting for are mentioned in the email. Currently, if for example, a vest comes back in stock, it will just say “The vest is back in stock”! I want it to say “The Medium Blue Vest is back in stock!” So customers are reminded exactly what they were waiting for. Thanks for any help!
Hi, I have implemented the Klaviyo Back in Stock snippet on multiple Shopify themes using the guide. There's a bug when changing variants - the button disappears because JavaScript replaces parts of the page differently than in Shopify’s Dawn theme. One solution is to reload the page after switching variants, however that’s not the best user experience. Most themes have events you can listen to, so if I could use something like `klaviyo.refresh()`, that would be great. I tried to put initialization code in a function and rerun it, but that did not work. Does the script provide a way to rerun the Back in Stock initialization? I hope you have some ideas. Thank you! Wiebe
Hello! Is it possible to get the Back in Stock button to trigger on a Shopify collection page in addition to the product page? I’ve played around with it a little bit with no luck – I’m guessing a function within onsite.js would need to be modified, but wondering if anyone has experience with doing this before attempting anything. Thanks, Chris
We have back in stock notifications set up with our Shopify store but we have multiple store locations where inventory is tracked. We have an Online store (where online orders are fulfilled) and a retail store where inventory is separated for retail. I noticed that when we marked a product in stock at our retail location (that we didn’t want to restock at our online location) a customer was alerted. (They went to the product page and it was still listed as sold out). Is there a way I can only alert people when something is restocked at our online store location. I imagine this can be a dynamic event variable on the product detail in the code. For example, similar to variant URL (below) there could be one for “Location”. Thanks so much for your help! :) Variant URL {% catalog event.VariantId integration='shopify' %}{{ catalog_item.url }}?variant={{ catalog_item.variant.id }}{% endcatalog %}
Hey!I'm setting up a Back In Stock flow and trying to add the snippet as shown in this article: https://help.klaviyo.com/hc/en-us/articles/360001895651#h_01HCX4Z4RDXTNP8KKGBN114N48 Unfortunately, no additional buttons like Sold Out or Notify me when available are visible on the product page even if all the shops' items inventories are set to 0-zero.Also, if I try to create a new flow, it shows this message even if the snippet is already there: "This flows requires first installing Klaviyo's special Back in Stock snippet." Could you please let me know if anyone experienced something like this and how should be fixed?
I am not a developer; I do Klayvio template design and run campaigns on Klayvio. One of my clients needs the Klaviyo back-in-stock flow setup . I have followed Klaviyo documentation for back-in-stock flows. I have input code theme.liquid, but I am not seeing any button or text refer to "Notify me when available", Basically, code is doing nothing for me. Please help me as I want to learn this.Thank you. I have used this code: <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script><script> var klaviyo = klaviyo || []; klaviyo.init({ account: "PUBLIC_API_KEY", platform: "shopify" }); 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 availa
Hi Klaviyo Community! I wonder how I can add the back-in-stock button, trigger, and metric in Klaviyo using the Impact Shopify theme. Following this guide: Klaviyo Help, I learned that it’s for free Shopify themes, while Impact is not one. Can you help me install this snippet on my Impact theme? Secondly, I use the Timeact app for my preorders. However, I don’t want to use their back-in-stock feature because it’s unattractive and not sent by Klaviyo. So basically, all my products are "available" due to preorders, but the stock behind can go to negative numbers. I want the back-in-stock button to appear when my product stock is 0 or in negative numbers. Now you have all the information. If you need more details to help me, please let me know. Thanks to those who provide their help.
I just started using Klaviyo for a work around in Shopify. I am using “notify when back in Stock”. This is to eliminate unnecessary chargebacks for items that will not be available, shopify charges credit processing fees regards if the sale completes or not. My Website Developer told me to use this features however when installing this I have noticed that it Suspends the price of the Item. This is a huge deal Breaker as how does one shop for a item if there is not Price Shown? How would they want to proceed based on no Pricing Information? Help let me know if this is a waste of my time with this feature. Thank you,
Hey Klaviyo Team! I recently released a large scale open-source Nuxt4 project called Nitrogen, supported by the Nuxt team. This is somewhat more minimal rebuild of Shopify Hydrogen with all core storefront API features, but in a Nuxt4 environment. I am integrating Klaviyo into this template and have everything set up very well, with successful responses in my “Create Client Subscription” and “Create Back In Stock Subscription” requests. However, the issue is that I receive the correct email notification for my Client Subscription (newsletter) response, but I don't get any emails for the Back in Stock Subscription response (even when I manually update the product variant quantity in the Shopify admin to make it “back in stock”). Perhaps I need to update some setting on my Klaviyo admin side of things? Not sure… Essentially I have it like this: 1. My /server/api/klaviyo.ts API proxy: /** * Handles requests to the Klaviyo API through an API proxy. * @param event - The H3 event containing
Hi, I am trying to add back in stock in Shopify using new Klaviyo api as previous one is depreciated and not working but i am getting Cors policy error. Following is the code please help me what I am doing wrong. const settings = { async: true, crossDomain: true, url: 'https://a.klaviyo.com/api/back-in-stock-subscriptions', method: 'POST', headers: { accept: 'application/vnd.api+json', revision: '2024-10-15', 'content-type': 'application/vnd.api+json', Authorization: 'XBfV5N pk_0d7d1911eb8824c6ee8265ac16f16bcf9f' }, data: { "type": "back-in-stock-subscription", "attributes": { "profile": { "data": { "type": "profile", "attributes": { "email": "matt.kemp@klaviyo-demo.com" } } }, "channels": ["EMAIL"], }, "relationships": { "variant": { "data": { "type": "catalog-variant", "id": "$shopify:::$default:::40800102350963" } } } } }; $.ajax(settings).done(res => { console.log(res);
Hi there, I’ve set up this button for years but for the first time it’s not working for one of our clients. We’re using the Label theme and I’ve added the code as below but nothing is showing up. website password: chaos Have I completely overlooked something here? The klaviyo widget is toggled on in the editor too. Thanks!
I’m looking to access the list of back in stock requests past and open via API, but I can only find documentation around adding to the subscription. Is there an automated way to do this? I found a thread from 3 years ago saying it wasn’t possible, I’m hoping that’s changed.
Hi guys, By default the ‘Back in Stock’, pop-up form just captures a person’s email. Is it possible to add a first name field? If it is, how do I do that? Thanks!
Hello, Is there anyone out there that might be able to help me out with this issue? Problem: When selecting a product that is sold out - #1 the notify me when back in stock button is not showing up. #2 But, when the product page is refreshed it does show up - #3 however it will show up even for products that are in stock (right under the add to cart button) I attached a few screen shots of the code and what the buttons looks like. 1,2,3 If someone has experienced this and can help me out it would be super helpful. Thanks in advance!
G’day. I’ve set up Back In Stock flow and added the snippet of code onto my theme liquid, but for some reason the button doesn’t want to appear. I even assigned id addtocart on the red box, if what I’m reading regarding alternate_anchor is correct (yes, i want to remove the get a sample button as well). I initially used render tag to keep my codebase clean, but I’ve tried by directly pasting the code onto theme.liquid and it still refuses to show the button. I’ve done the flow and turned on the onsite tracking, what else I’m missing here? Cheers
Hello everyone. I’m in the middle of trying to add a Back in Stock automation for our shopify shop : https://nobaanimal.com/ I had no problem addind the code the the liquid section. But when I arrived in the flow section. I took the template, added our logo. But it seems the Catalog event trigger doesn’t work or the link just don’t seem to work. Is there a connection problem with my shopify? Do I have to change something in the template to make it show the item that should be back in stock? I did preview and Test and that’s were I saw all the link were not functioning. Thanks for the help.
Hello ! I just installed the Back in Stock to notify the client on my website. Everything works great with the snippet in the custum liquid. I was wondering if there was. way to get the button and pop up in another language? my website is bilingual and the english version apeared in the french version too. I have the Adapt and Translate from shopify, I don’t know if it’s possible to do it from there? Thanks for your help ! https://nobaanimal.com/fr
Hi everyone, I am using the Neue Hass Unica font family on my shopify store and would like to have the same font in the style of the ‘back in stock’ modal. When installing the snippet it seems that the Google font Helvetica Neue is default: additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');", drop_background_color: "#000", When I try to put font_family: "New Hass Unica" in the code - nothing happens. Can anyone help? Much appreciated, Luisa x https://www.rayascollective.com/
You will learn Learn about how back in stock flows work, how contacts move through them, and how they appear different from most other metric-triggered flows. For instance, they have the back in stock delay component, which is unique to this type of flow. If you haven't set up back in stock in your Klaviyo account or store yet, learn How to build a back in stock flow. Klaviyo currently supports back in stock flows for accounts with Shopify, BigCommerce, Magento 2, or PrestaShop integrations, as well as accounts with inventory-aware custom catalog feeds. Triggering the flow When a customer subscribes to an out of stock product on your site, you'll see an event tracked on their profile: Subscribed to Back in Stock. Those that subscribe to a back in stock alert will automatically enter your flow triggered off this Subscribed to Back in Stock event. Back in stock delay component After triggering the flow, you will see the contact added to the Waiting list of recipients at the back in stock delay component. To explore who is waiting at this step, click View details in the Performance section of the details sidebar for this delay. Sending to back in stock subscribers When a product comes back into stock, you'll see those waiting on this item move into the "Moved to Next Step" category. Depending on your back in stock settings, some or all of the contacts will receive a message alerting them that the item is available. Your flow's message status must be set to live or manual for subscribers to be added to the waiting list for the back in stock delay. If the message after the delay is set to draft, no one will be put in the waiting list. To view recipient activity around your stock alert email or SMS, click on the message itself. Here, in the Performance section of the sidebar, you will see a summary of activity over the last 30 days. Click View details to explore activity over a longer, or custom, timeframe. Note that it's not possible to check if the item is still in stock before sending a second message. After the initial message is sent, Klaviyo cannot check the inventory for the item to see if the item has gone out of stock again. Adding past profiles to back in stock flows Adding past profiles to back in stock flows typically won't bring in new people. Back in stock flows are triggered by the Subscribed to Back in Stock metric, and metric-triggered flows add past profiles based on time delays. Since back in stock flows are best without time delays (and the back in stock delay functions differently), adding past profiles won't have any effect. If you wish to reach out to those in a back in stock report, we recommend sending a campaign. That said, if your back in stock flow does contain a time delay, adding past profiles will work similarly to how other metric-triggered flows add past profiles. The only difference is that with back in stock flows, someone in the waiting queue will be notified as soon as the product is back in stock. Additional resources Learn more about back in stock flows How to create a back in stock flow How to configure back in stock emails How to add SMS to a back in stock flow Read about How contacts move through a flow
You will learn Learn how to use pre-built templates or configure a custom template for a back in stock flow email. When creating a back in stock flow email, it's important to set up the message so that it shows the right product data. Klaviyo supports back in stock flows for accounts with Shopify, BigCommerce, Magento 2, and PrestaShop integrations, as well as accounts with inventory-aware custom catalog feeds. The instructions below cover Shopify, BigCommerce, and Magento 2 integrations. If you are using a custom integration, learn how to set up back in stock via API. Use pre-built templates The pre-built back in stock flows you'll find in the Flow Library come configured with default email content. If you've built your own flow, to help get you started, you will find a pre-built back in stock email template in the Email templates tab. Simply search "back in stock" when configuring your stock alert email. Create your own back in stock email To configure your email content, you will need to use a specific set of dynamic event variables. Given it may be days, weeks, or even months before an item is restocked, we realize that details about the item (for example, images or price) may change. For this reason, Klaviyo uses a special set of dynamic event variables for this email that will look up the restocked product in your catalog at send time and populate the most up-to-date details available. Note that the table block within the email template must be set to static, not dynamic, in order to function. Shopify stores Product Detail Dynamic Event Variable (Shopify Stores) Product Title {% catalog event.VariantId integration='shopify' %} {{ catalog_item.title }} {% endcatalog %} Product URL {% catalog event.VariantId integration='shopify' %}{{ catalog_item.url }}{% endcatalog %} Product Price {% catalog event.VariantId integration='shopify' %}{% currency_format catalog_item.variant.price|floatformat:2 %}{% endcatalog %} Variant Image {% catalog event.VariantId integration='shopify' %} {{ catalog_item.variant.featured_image.full.src|default:catalog_item.featured_image.full.src }} {% endcatalog %} Variant Title {% catalog event.VariantId integration="shopify" %} {{ catalog_item.variant.title }} {% endcatalog %} Variant URL {% catalog event.VariantId integration='shopify' %}{{ catalog_item.url }}?variant={{ catalog_item.variant.id }}{% endcatalog %} BigCommerce stores If you are having an issue with incorrect items appearing in your BigCommerce back in stock emails, it could be caused by some of your products having a VariantID that matches another item's ProductID in BigCommerce. To solve this, replace VariantID with ProductID when using the dynamic event variables below in your emails. Making this replacement should solve the incorrect item issue, though variant-specific information will no longer be shown. Product Detail Dynamic Event Variable (BigCommerce Stores) Product Title {% catalog event.VariantId integration='bigcommerce' %} {{ catalog_item.title }} {% endcatalog %} Product URL {% catalog event.VariantId integration='bigcommerce' %}{{ catalog_item.url }}{% endcatalog %} Product Price {% catalog event.VariantId integration='bigcommerce' %}{% currency_format catalog_item.metadata.price|floatformat:2 %}{% endcatalog %} Variant Image {% catalog event.VariantId integration='bigcommerce' %} {{ catalog_item.variant.featured_image.full.src|default:catalog_item.featured_image.full.src }} {% endcatalog %} Variant Title {% catalog event.VariantId integration="bigcommerce" %} {{ catalog_item.variant.title }} {% endcatalog %} Variant URL {% catalog event.VariantId integration='bigcommerce' %}{{ catalog_item.url }}?variant={{ catalog_item.variant.id }}{% endcatalog %} Magento 2 stores Product Detail Dynamic Event Variable (Magento 2 Stores) Product Title {% catalog event.VariantId integration='magento_two' %} {{ catalog_item.title }} {% endcatalog %} Product URL {% catalog event.VariantId integration='magento_two' %}{{ catalog_item.url }}{% endcatalog %} Product Price {% catalog event.VariantId integration='magento_two' %}{% currency_format catalog_item.variant.price|floatformat:2 %}{% endcatalog %} Variant Image {% catalog event.VariantId integration='magento_two' %} {{ catalog_item.variant.featured_image.full.src|default:catalog_item.featured_image.full.src }} {% endcatalog %} Variant Title {% catalog event.VariantId integration="magento_two" %} {{ catalog_item.variant.title }} {% endcatalog %} Variant URL {% catalog event.VariantId integration='magento_two' %}{{ catalog_item.url }}?variant={{ catalog_item.variant.id }}{% endcatalog %} Example Here's what a template will look like inside the Template Builder with dynamic event variables, with a comparison of what this same template will look like when previewed with real event data: Additional resources Check out other articles on back in stock flows How to create a back in stock flow Understanding how back
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. 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. 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. From your BigCommerce Admin, navigate to Storefront > Script Manager. 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 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> Click Save. You've now added the
You will learn Learn how to install Klaviyo's back in stock feature for Shopify so that your customers can subscribe to back in stock alerts. Setting up back in stock consists of creating a flow in Klaviyo and adding a customizable code snippet to your Shopify store. Before you begin Installation of back in stock is only supported for certain free Shopify themes, and not for Shopify stores using custom themes. At this time, Klaviyo support cannot assist with implementing back in stock for stores using custom themes. To check which Shopify theme your store is using, you can use a Shopify theme detector. Please note that Klaviyo does not provide custom coding assistance. If you need developer assistance, consider reaching out to one of Klaviyo's partners. About Klaviyo’s Back in Stock feature Klaviyo's Back in Stock feature for Shopify has 2 key components: Back in Stock flowWhen someone subscribes to a back in stock 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 product and will be contacted when their item of interest is restocked. Website buttonYou 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. As soon as you install the snippet, 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, or below, the "Sold Out" button. When someone clicks the "Notify Me" button, a form will pop up that allows the shopper to enter their email 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. Klaviyo monitors your inventory on a variant level, which means that 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. If you have not already, read our guide on getting started with Shopify for step-by-step instructions on integrating, before continuing with this article. Before installing the snippet Before you install the snippet via the instructions below, do the following: Check that you’ve enabled Klaviyo’s onsite tracking on your Shopify store (including Viewed Product), either via Klaviyo’s app embed or manually. Make sure that either an Add to Cart button or a contact form need to be present on your product page. Some Shopify themes may remove the Add to Cart button when there is no stock. In this case, confirm that when there is no stock, your Shopify Theme displays a Sold Out button, to ensure that the Klaviyo code will work. Back in Stock for Shopify video Install the snippet Add the code snippet below to your theme.liquid file. These instructions apply to both Shopify 2.0 users and those using vintage themes. From your Shopify Admin click Online Store > Themes. Click your theme’s Actions dropdown and select Edit Code. Search for the theme.liquid file, and click to open it in the editor. Copy the JavaScript snippet below and paste it into your theme.liquid file directly above the </body> tag. <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script> <script> var klaviyo = klaviyo || []; klaviyo.init({ account: "PUBLIC_API_KEY", platform: "shopify" }); 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: "#439fdb", close_button_color: "#ccc", error_background_color: "#fcd6d7", error_text_color: "#C72E2F", success_background_color: "#d3efcd", success_text_color: "#1B9500" } }); </script> You'll need to replace the PUBLIC_API_KEY text in the snippet with your Klaviyo public API key. Learn how to find your account's public API key. If you use multiple Klaviyo accounts, make sure you are using the key from the correc
You will learn Learn what key changes to make for each free Shopify theme to quickly ensure your Back in Stock button and form match your theme's styling. 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. Installation of back in stock is only supported for certain free Shopify themes, and not for Shopify stores using custom themes. At this time, Klaviyo support cannot assist with implementing back in stock for stores using custom themes. To check which Shopify theme your store is using, you can use a Shopify theme detector. Before you begin If you have not already, read our guide on getting started with Shopify for step-by-step instructions on integrating, before continuing with this article. To learn about more generally about the Back in Stock feature and how to enable it, read our guide on install back in stock for Shopify. How to style your button and form When you're installing your snippet, find the styling snippet for your free theme in this article. The default snippet is shown below. Update (or add) line items within the trigger: {} and modal: {} sections of the default snippet according to what's shown in the styling snippet For example, if you have the Crave theme, you only need to add the the following line within the modal section: font_family: '"Archivo", serif;' Make any other desired styling updates to the line items as you see fit. <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script> <script> var klaviyo = klaviyo || []; klaviyo.init({ account: "PUBLIC_API_KEY", platform: "shopify" }); 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/css2?family=Roboto+wght@400;700&display=swap');", 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> Crave trigger: { product_page_class: 'button' }, modal: { font_family: '"Archivo", serif;' } Dawn trigger: { product_page_class: 'button' }, modal: { font_family: '"Assistant", sans-serif;' } Studio trigger: { product_page_class: 'button' }, modal: { font_family: '"Electra", serif;' } Colorblock trigger: { product_page_class: 'button' }, modal: { font_family: '"Futura", sans-serif;' } Sense trigger: { product_page_class: 'button' }, modal: { font_family: '"Harmonia Sans", sans-serif;' } Taste trigger: { product_page_class: 'button' }, modal: { font_family: '"Anonymous Pro", sans-serif;' } Craft trigger: { product_page_class: 'button' }, modal: { font_family: '"Quattrocento Sans", sans-serif;' } Ride trigger: { product_page_class: 'button' }, modal: { font_family: '"Avenir Next", sans-serif;' } Refresh trigger: { product_page_class: 'button' }, modal: { font_family: '"Questrial", sans-serif;' } Simple Beauty modal: { font_family: '"PT Serif",serif;' } Pop Bone trigger: { product_page_class: 'btn btn--full' }, modal: { additional_styles: "@import url('https://fonts.googleapis.com/css?family=Raleway');", font_family: '"Raleway","HelveticaNeue","Helvetica Neue",sans-serif;' } Toy trigger: { product_page_class: 'btn btn--large btn--full' }, modal: { additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');", font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;' } Black & White trigger: { product_page_class: 'btn btn--large btn--full' }, modal: { additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');", font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;' } Vibrant trigger: { product_page_class: 'btn btn--large btn--full' }, modal: { additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');", font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;' } Venture Snowboards trigger: { product_page_class: 'btn btn--full' }, modal: { additional_styles: "@import url('https://fonts.googleapis.com/css?family=Karla');", font_family: '"Karla","HelveticaNeue","Helvetica Neue",sans-serif;' } Outdoo
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
Sorry, our virus scanner detected that this file isn't safe to download.