How to style Back in Stock buttons and forms for free Shopify themes
You will learn
Learn how to style an existing code-based Back in Stock button and form for the free Shopify themes listed below. 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 code-based 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 code-based 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.
If you are setting up a new Back in Stock form or editing one in Klaviyo's form editor, follow How to set up a back in stock form instead. That guide also explains how to remove existing Back in Stock code before switching to the form editor.
How to style your button and form
Use these snippets as starting points, adjusting the button classes and fonts to match your theme settings. The trigger section styles the button on your product page, while the modal section styles the popup form. In the popup, font_family controls the body font and headers_font_family controls the heading font.
The popup loads its own styles. A font must be installed on the shopper’s device or loaded in the popup to appear. For font-only examples, add the font’s stylesheet import or @font-face CSS to additional_styles, using the font provider’s stylesheet or font file URL. Otherwise, the browser uses the next available font in the list.
- Open the theme file containing your existing Back in Stock snippet, then find the styling snippet for your theme below. For help opening and saving theme files, see Shopify's guide to editing theme code.
- Use the example below as a reference. Update or add settings within the
trigger: {}andmodal: {}sections of your existing snippet according to the styling snippet for your theme. Keep your existing account value and other settings, and separate settings with commas.- For example, for Crave, add both the font import and font family shown in the Crave snippet to your
modalsettings.
- For example, for Crave, add both the font import and font family shown in the Crave snippet to your
- Make any other desired styling updates to the line items as you see fit. When updating
additional_styles, keep any custom CSS you still need and put@importrules before other CSS rules. - Save your changes in the theme file.
- Refresh a product page with an out-of-stock variant selected. Click your Back in Stock button (Notify Me When Available in the example) and check the button and form’s text, colors, and fonts.
If you copy the full example below, replace PUBLIC_API_KEY with your Klaviyo public API key (site ID). Do not use a private API key.
The example uses CSS in additional_styles for the popup backdrop and error message colors. Keep those rules when changing the font import if you want to retain those colors.
<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'); body.fadein { background: rgba(0, 0, 0, 0.65); } .alert-danger { background-color: #fcd6d7; border-color: #fcd6d7; color: #C72E2F; }",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#439fdb",
close_button_color: "#ccc",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}
});
</script>Crave
trigger: {
product_page_class: 'button'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Archivo');",
font_family: '"Archivo", serif;'
}Dawn
trigger: {
product_page_class: 'button'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Assistant');",
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: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro');",
font_family: '"Anonymous Pro", sans-serif;'
}Craft
trigger: {
product_page_class: 'button'
},
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans');",
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: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Questrial');",
font_family: '"Questrial", sans-serif;'
}Simple
Beauty
modal: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Serif');",
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: {
additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Serif');",
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;'
}Outcome
You've now updated the styling of your Back in Stock button and form on your Shopify store.
Additional resources
- How to create unique coupon codes for Shopify
Learn how to create single-use coupon codes for your Shopify store so that each customer receives their own unique coupon code for a given promotion on your site. This feature provides an alternative to creating a generic, also known as a static, coupon code, so you don't have to worry about codes being shared.