Slightly modify back in stock Modal styling

@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!

I’m glad it helped!

I finally got around to creating a more indepth tutorial on it, may be found here if anyone needs in the future!

https://firenetdesigns.ca/post/customizing-klaviyo-modal-styling-in-shopify

Hi there KaisonAndy I am yes! I’ll shoot you a message and see what you’re looking for