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.
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.
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: 'AccountID',
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_sold_out: 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: '',
close_label: 'Close',
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
font_family: '"Helvetica Neue", Helvetica, Arial, sans-serif;',
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;'
}