Shopify themes, liquid, logos, and UX
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)
<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;
}
Thanks so much!
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
hi there,
the font in the pop up has not changed, so I still need help 🙂
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025