How to add the custom css in signup form for decreasing the Z-index

Hello ​@emma.owens 

Thanks, just wanted to know that there is no option in klaviyo to do that?

We need to add the code in shopify/our site code itself?

Hello ​@sahilessor ,

You can resolve the z-index issue by adding custom CSS to adjust the stacking order of your popups. Try adding the following code to your theme's CSS file (or through the Shopify theme editor's custom CSS section):

#popup-teaser {
  z-index: 9999 !important;
}

This should ensure the teaser popup appears below the Ajax cart and other popups. If you've already tried modifying it in theme.liquid, double-check the CSS specificity or place it at the end of your CSS file to ensure it's applied correctly.

​@sahilessor Yes, this would need to be done in the code itself! 

Took me a while to figure out but I finally got my Klaviyo popup to show up behind my Elementor popup. I started by targeting div[role="dialog"][aria-modal="true"][aria-label="POPUP Form"] and I set the z-index for my Elementor popup to be higher, but that didn’t work on its own. (According to chatGPT) you also have to change the z-index of div[role="dialog"][aria-modal="true"][aria-label="POPUP Form"] > .needsclick because it’s “creating its own stacking context.”

This is what is working for me in my child theme stylesheet:

div[role="dialog"][aria-modal="true"][aria-label="POPUP Form"] {
  z-index: 9000 !important;
}
div[role="dialog"][aria-modal="true"][aria-label="POPUP Form"] > .needsclick {
  z-index: 9000 !important;
  position: relative;
}
.my-elementor-popup-class {
  z-index: 99999 !important;
  position: relative;
}