We are using the new Klaviyo Back In Stock feature and I wanted to know if there was any way to add a border-radius to the submit button in the modal window? There are lots of other options that can be configured via the script, but nothing for this property.
modal: {
headline: "{product_name}",
body_content: "Get notified via email when this product is back in stock.",
email_field_label: "Enter your email address",
newsletter_subscribe_label: "Add me to your email marketing list.",
subscribe_checked: true,
button_label: "Notify me",
subscription_success_label: "Great, we will let you know when this is back in stock.",
footer_content: '',
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
drop_background_color: "#3a3532",
background_color: "#FFFFFF",
text_color: "#3a3532",
button_text_color: "#FFFFFF",
button_background_color: "#3a3532",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#3a3532",
success_text_color: "#FFFFFF"
}
Style the button border radius in the BIS modal window
Best answer by bluesnapper
Welcome to the community
To add a 10px radius (for example) around the ‘notify me’ button, you can add the following CSS to your Shopify theme CSS:
.klaviyo-bis-trigger {
border-radius: 10px;
}
However, adding a radius to the modal button requires some additional work to import a custom CSS fle. This is due to the pop-up being contained in an iframe. There’s a great post here on how to achieve this:
Hope that helps
Andy
+45Welcome to the community
To add a 10px radius (for example) around the ‘notify me’ button, you can add the following CSS to your Shopify theme CSS:
.klaviyo-bis-trigger {
border-radius: 10px;
}
However, adding a radius to the modal button requires some additional work to import a custom CSS fle. This is due to the pop-up being contained in an iframe. There’s a great post here on how to achieve this:
Hope that helps
Andy
Ideal - that should solve it. Loading in an additional stylesheet. Thank you for sharing.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.