Klaviyo x Dawn theme 'notify me when back in stock' button

[massmonster]

Hello wizards

im having trouble with the styling of the Klaviyo 'notify me when back in stock' popup

the fonts used in the pop-up do not match my theme...
my theme font is Archivo, however, this pop-up is showing what seems to be Times New Roman
Is anyone able to help

www.sundaymass.store

thank you very much

[Sweans]

Hi @massmonster,

Styling discrepancies between Klaviyo's "Notify Me When Back in Stock" pop-up and your Shopify theme can be frustrating, especially when it breaks the uniformity of your site's design. The issue you described, where the pop-up shows Times New Roman instead of your desired Archivo font, can typically be resolved with some custom CSS. Let's walk through how to fix it.

Step 1: Go to the "Edit Code" section in Shopify Backend → Sales Channel → Online Store → Click on the three dots near the active theme customize button → Select "Edit Code"

Step 2: Search for base.css, global.css, or theme.css in the search bar. At the end of the CSS, add the following code :

#klaviyo-bis-modal *,
#klaviyo-bis-modal input,
#klaviyo-bis-modal button,
#klaviyo-bis-modal textarea {
font-family: 'Archivo', sans-serif !important;
}

Step 3: Save and check the result

If you need further assistance, feel free to reach out!

Regards,
Sweans

[massmonster]

thank you but that didnt work for me

this is the code I have in my theme.liquid
<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: '',
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>

[Sweans · Accepted solution]

Hi @massmonster ,

Since you're already using a Klaviyo script in your theme.liquid, you can inject some CSS directly through Klaviyo's options, using the additional_styles field. Let's add custom CSS to force the Archivo font to be applied.

Modify the additional_styles Option

You can directly include CSS styles within the Klaviyo initialization script:

<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: `
/* Apply Archivo font to all elements within the Klaviyo modal */
#klaviyo-bis-modal *,
#klaviyo-bis-modal input,
#klaviyo-bis-modal button,
#klaviyo-bis-modal textarea {
font-family: 'Archivo', sans-serif !important;
}
`,
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>

[massmonster]

you absoulte legend!!!

thank you very much, that has worked perfectly

[Keshan97]

Hi there,

This issue can happen because the Klaviyo ‘Notify Me When Back in Stock’ popup is an iframe. Since iframes are isolated from the main webpage, they won’t be able to pick up the theme fonts automatically.

You’ll need to configure the popup’s font directly from the Klaviyo end to match your theme’s font, Archivo. You can usually do this within Klaviyo’s popup customization settings.

If you need further assistance with this, feel free to let me know!