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
thank you very much
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
thank you but that didnt work for me
this is the code I have in my theme.liquid
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!
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:
you absoulte legend!!!
thank you very much, that has worked perfectly