How to style Back in Stock buttons and forms for free Shopify themes

Estimated 3 minute read

|

Updated Jul 7, 2025, 12:00 AM EST

Table of contents

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.

  1. 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.
  2. Use the example below as a reference. Update or add settings within the trigger: {} and modal: {} 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.
  3. For example, for Crave, add both the font import and font family shown in the Crave snippet to your modal settings.
  4. 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 @import rules before other CSS rules.
  5. Save your changes in the theme file.
  6. 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.

textCopy

<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

textCopy

trigger: {
 product_page_class: 'button'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Archivo');",
 font_family: '"Archivo", serif;'
}

Dawn

textCopy

trigger: {
 product_page_class: 'button'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Assistant');",
font_family: '"Assistant", sans-serif;'
}

Studio

textCopy

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Electra", serif;'
}

Colorblock

textCopy

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Futura", sans-serif;' }

Sense

textCopy

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Harmonia Sans", sans-serif;'
}

Taste

textCopy

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

textCopy

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

textCopy

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Avenir Next", sans-serif;'
}

Refresh

textCopy

trigger: {
 product_page_class: 'button'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Questrial');",
 font_family: '"Questrial", sans-serif;'
}

Simple

Beauty

textCopy

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Serif');",
 font_family: '"PT Serif",serif;'
}

Pop

Bone

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

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

textCopy

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
 font_family: '"Arapey",serif;'
}

Minimal

Modern

textCopy

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Serif');",
 font_family: '"PT Serif",serif;'
}

Vintage

textCopy

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Fashion

textCopy

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

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.

Was this article helpful?

YesNo

Use this form only for article feedback. Learn how to contact support.

Explore more from Klaviyo

Community

Connect with peers, partners, and Klaviyo experts to find inspiration, share insights, and get answers to all of your questions.

Visit Community

Partners

Hire a Klaviyo-certified expert to help you with a specific task, or for ongoing marketing management.

Hire a partner

Support

Access support through your account.

Email support (free trial and paid accounts) Available 24/7

Chat/virtual assistance Availability varies by location and plan type

Log in