Articles on: Troubleshooting

Pop-up populates behind cart drawer


Understanding Z-Index and How to Resolve Display Issues with MinCart


What is Z-Index?


Z-index is a CSS property that determines the stacking order of overlapping elements on a webpage. Elements with higher z-index values will appear in front of elements with lower z-index values.


The z-index property accepts integer values. The higher the number, the higher the stacking priority. For example:


  • An element with a z-index of 1 will appear in front of an element with a z-index of 0.


Common Issue: Pop-Up Displaying Behind the Cart Drawer


If your warning pop-up appears behind your cart drawer, the issue might be related to z-index values. By default, MinCart uses a high z-index value to ensure its pop-ups appear correctly. However, in some cases, your cart drawer might also be using an equally high or higher z-index, causing it to overlap the pop-up.


Modern browsers generally handle higher z-index values well, but adjusting this property excessively may lead to compatibility issues with older browsers.


Solution

Preferred Approach: Adjust the Cart Drawer’s Z-Index

If possible, have a developer reduce the cart drawer’s z-index value to avoid conflicts. This ensures better compatibility and minimizes potential issues with older browsers.


Alternative Approach: Adjust the Pop-Up’s Z-Index in MinCart

You can also increase the z-index of the MinCart pop-up to resolve the issue. Here's how:


  1. Open MinCart’s Custom CSS section.
  2. Add the following code:
#mincart-popup-container {  
z-index: [Enter a higher numerical value than the cart’s z-index];
}


Replace [Enter a higher numerical value than the cart’s z-index] with a number greater than your cart drawer’s z-index value.


Note

While adjusting the z-index should resolve the issue, the preferred approach is to reduce the cart drawer’s z-index if you have access to a developer.


Updated on: 12/12/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!