Overview
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. To learn about more generally about the feature and how to enable it, read our guide How to Install Back in Stock for Shopify.
This guide shares the key changes to make for each free theme to quickly ensure your Back in Stock button and form match your theme's styling.
Installation of back in stock is not supported for Shopify stores using custom themes. At this time, Klaviyo support cannot assist with implementing back in stock for stores using custom themes.
Before You Begin
Knowledge Check
If you have not already, read our guide on How to Integrate with Shopify for step-by-step instructions on integrating, before continuing with this article.
The Default Snippet
The default values are listed below. These can be updated by editing each line item within the trigger: {} and modal: {} areas of the theme.liquid snippet, shown below.
Make sure to replace AccountID on the 5th line below with the public API key for your Klaviyo account.
<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: "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>Simple
Light
modal: {
font_family: '"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;'
}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;'
}Outdoors
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}Boxing
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');",
font_family: '"Source Sans Pro","HelveticaNeue","Helvetica Neue",sans-serif;'
}Debut
Default
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Work+Sans');",
font_family: '"Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}Light
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Muli');",
font_family: '"Muli","HelveticaNeue","Helvetica Neue",sans-serif;'
}Supply
Light
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}Blue
trigger: {
product_page_class: 'btn btn--large btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Montserrat');",
font_family: '"Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;'
}Narrative
Warm
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Avenir');",
font_family: '"Avenir","HelveticaNeue","Helvetica Neue",sans-serif;'
}Light
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}Cold
trigger: {
product_page_class: 'btn btn--full'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Lato');",
font_family: '"Lato","HelveticaNeue","Helvetica Neue",sans-serif;'
}Brooklyn
Classic
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
font_family: '"Arapey",serif;'
}Minimal
Modern
modal: {
font_family: '"PT Serif",serif;'
}Vintage
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}Fashion
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}