Skip to main content
Solved

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


Forum|alt.badge.img

I have circle popup as a teaser in signup form, but on my shopify site it’s above all other popup, like mini cart popup or quick buy popup.

I have found that the z-index for the popup is 90000, how can I decrease or add custom z-index so atleast it should not show above the ajax cart?

I have tried adding the code in the theme.liquid for the same but it didn’t affect the z-index.
How can I fix this?

Best answer by emma.owens

Hi ​@sahilessor ! 

Thank you for reaching out to the community! 

You are correct that you will need to decrease the z-index of the form so that it is lower than 90000. This will ensure that it doesn’t stack on top of the other two forms. To edit this, I would suggest working with your developer who can locate the HTML element in your theme CSS that represents the popup, and then adjust the z-index from there. 

I hope this helps! 

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

4 replies

emma.owens
Community Manager
Forum|alt.badge.img+9
  • Community Manager
  • 42 replies
  • Answer
  • February 5, 2025

Hi ​@sahilessor ! 

Thank you for reaching out to the community! 

You are correct that you will need to decrease the z-index of the form so that it is lower than 90000. This will ensure that it doesn’t stack on top of the other two forms. To edit this, I would suggest working with your developer who can locate the HTML element in your theme CSS that represents the popup, and then adjust the z-index from there. 

I hope this helps! 

 


Forum|alt.badge.img
  • Author
  • Contributor I
  • 1 reply
  • February 5, 2025

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?


MANSIR2094
Problem Solver IV
Forum|alt.badge.img+13
  • Problem Solver IV
  • 172 replies
  • February 5, 2025

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.


emma.owens
Community Manager
Forum|alt.badge.img+9
  • Community Manager
  • 42 replies
  • February 5, 2025

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