Slightly modify back in stock Modal styling

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.

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

THANK YOU for this! I had no idea we could import custom CSS sheets. This is exactly what I needed (and a game changer)!

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

Are you comfortable with writing and editing CSS and HTML code? If not, do you have a developer or designer who can assist you with making these modifications?

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

The desired modifications to the back-in-stock modal in Shopify can be achieved by directly editing the relevant CSS styles within the theme files. While Shopify doesn't offer a dedicated designer tool for customizing the modal, with some CSS and HTML knowledge, you can make these adjustments to enhance the modal's appearance and user experience.

Remember to create a backup or duplicate of your theme before making any changes.

To slightly modify the styling of a back-in-stock modal, you'll typically need to make changes to the CSS (Cascading Style Sheets) that govern the appearance of the modal. Here's a general approach you can follow:

1. Identify the modal element: Inspect the HTML of the back-in-stock modal to identify here https://validwords.com/ the specific HTML element(s) that make up the modal. Look for classes or IDs that uniquely identify the modal container.

2. Target the modal with CSS: Once you've identified the modal element(s), you can target them using CSS selectors. This allows you to apply styling rules specifically to the modal.

3. Modify the styling: Write CSS rules to modify the styling of the modal. Here are some common modifications you can make:

   • Adjust the background color, border, or box-shadow properties to change the overall appearance of the modal.
   • Modify the font size, color, or typography properties to adjust the text inside the modal.

Did you found solution or not.?