Solved

Slightly modify back in stock Modal styling


Badge +2

Hi there,

i am using Shopify and i would like to make some slight modifications to the back in stock modal, not a complete custom solution but:

  • Make the heading in bold letters
  • Gray-out the variant dropdown
  • Add letter spacing in the button
  • Change some of the font sizes
  • ideally change the size of the modal

Is this doable through some extra variables? if not what’s a good solution? I was hoping there was a designer tool like the sign up forms but it doesn't seem like. 

icon

Best answer by jallain 2 July 2021, 20:57

View original

3 replies

Userlevel 4
Badge +10

Hello @lif-ab , we have some information on how you can customize the back in stock features in this article: https://help.klaviyo.com/hc/en-us/articles/360001895651-How-to-Install-Back-in-Stock-for-Shopify

Badge +2

Hello @lif-ab , we have some information on how you can customize the back in stock features in this article: https://help.klaviyo.com/hc/en-us/articles/360001895651-How-to-Install-Back-in-Stock-for-Shopify

 

Hi @jallain thanks, but actually that is clear to me. That document shows how to change names and colors but I would like to change font sizes, formatting and ideally gray out the dropdown.

Badge

@lif-ab 

 

Hello! In order to provide custom styling, the issue is the Klaviyo BIS is wrapped in an Iframe, and the Iframe gets overridden with the Config settings you pass into the Klaviyo object every time the “Notify me when back in stock” button is clicked. In order to achieve custom styling you can do the following:

 

1.) Create a css Stylesheet in your Assets Folder within Shopify.

 

2.) Update the “additional_styles” property found within the “klaviyo” variable under “modal” “klaviyo.modal.additional_styles”

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: "PUBLIC_API_KEY",
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.",
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: "#439fdb",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}
});
</script>

 

3.) Put the “CSS” styles you desire in the “klaviyo-bis-modal.css” file.

 

When the user clicks the “Notify me when back in stock” Klaviyo will then reach out and grab that Stylesheet from Shopify and then inject those styles into the Iframe, styling the BIS Modal how you require.

 

Hope this helps!

Reply