Klaviyo Back in Stock - Pop up font

Klaviyo Back in Stock - Pop up font

INFRA
Shopify Partner
252 2 90

Hi,

I'm trying to get the same font on the pop up as on the web page, can anyone point me in the rigth direction?

It's the ITC Avantgarde font (From Adobe, I have a license if needed)

 

Screenshot 2025-06-10 at 16.41.08.png

 

  <script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "XXXXX",
      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_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.",
    newsletter_subscribe_label: "Stay updated on fishing news",
     footer_content: '',
     additional_styles: "@import url('{{ 'klaviyo-bis-modal.css' | asset_url }}');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#000",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

 

CSS file

@font-face {
 font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 500;
font-style: normal; 
}

.klaviyo-bis-trigger {
  width: 100% !important;
  margin-bottom: 1rem !important;
}

#klaviyo-bis-modal .btn.btn-success {
  border-radius: 25px;
}
#klaviyo-bis-modal .product-name {
  font-family: 'itc-avant-garde-gothic-pro' !important;
}

@font-face {
 font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 500;
font-style: normal; 
} 
}
#klaviyo-bis-modal p {
  font-family: 'itc-avant-garde-gothic-pro' !important;
}

 

Website

 

Thanks so much!

Replies 2 (2)

mageplaza-cs
Shopify Partner
549 46 85

Hi @INFRA 

I have checked your website. It seems that the issue has been resolved. If you have any other questions, don’t hesitate to let me know — I’m happy to help.

Mageplaza | Top-Rated Shopify Agency | Trusted by 230,000+ worldwide merchants


If our suggestion works for you, please give it a Like or mark it as a Solution!


Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com

INFRA
Shopify Partner
252 2 90

hi there,

 

the font in the pop up has not changed, so I still need help 🙂