How can I style Klaviyo modal pop up for back-in-stock notifications?

Technical Q&A
1

Could anyone help me with styling the klayvio modal pop up for the back-in-stock notification. I am trying to increase the modal-title font size and add a black border around the email form but i seem to be doing something wrong. Thanks

https://www.kidstuff.com.au/collections/bello/products/bello-my-garden

Kstuff_0-1674020742404.png
Kstuff_0-1674020742404.png542×358 26.9 KB

2

hi @Ksoldier , I happen to notice that there’s a “additional_styles” field into the back in stock javascript initializator you’re installing on your webiste, try to put some css rules there (here’s he doc https://help.klaviyo.com/hc/en-us/articles/360001895651-How-to-install-Back-in-Stock-for-Shopify)

Try to reach klaviyo support as well

3

Hello @Ksoldier

Its Artzen Technologies! We will be happy to help you today.

  1. Go to online store > theme > Edit code > Assets > base.css (file) and Paste the below code at bottom of the file → Save
#container p{
  font-size:16px;
}
#klaviyo-bis-modal .form-horizontal .form-group .form-control{
  border: 1px solid black;
}

Let me know if need further assistance

Regards,

Artzen Technologies