How to style Back in Stock buttons and forms for free Shopify themes – Klaviyo - Help Center

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 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 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 How to 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
1. For example, if you have the Simple: Light theme, you only need to add the the following line within the modal section: font_family: '"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-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: "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;'

}

Outcome

You've now updated the styling of your Back in Stock button and form on your Shopify store.

Additional resources