Customizing Back in Stock Styling for Free Shopify Themes

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 other 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.

<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;'

}