What is z-index?
The z-index is a CSS property used to define the stacking order of elements on a web page. Elements with higher z-index values are displayed in front of elements with lower values. When multiple elements are shown at the same time within a store, the stacking order relative to their parent elements is determined by their respective z-index values.
Example Issues Caused by z-index
The easyPoints widget is typically set with a z-index of 999, which ensures it appears in front of most elements. However, this value can be adjusted as needed.
For instance, if the widget’s z-index is higher than that of a side cart, it may overlap with buttons and interfere with usability. Similarly, conflicts may arise with other store pop-ups, creating UI issues. In such cases, modifying the widget’s z-index is recommended.
How to Change the Widget’s z-index
You can change the z-index using the following methods:
Change It via the Widget Customization Screen
Within the theme customization settings, you can choose the z-index value for the widget.
Navigate to:
“App Embeds” → “easyPoints Widget” → “Layer (z-index)”
Available options:
- Default: 999
- Increased: 9999
- Maximum: 99999
Set a Custom Value
If more flexibility is needed, you can add custom CSS in the Shopify theme settings to define a specific z-index value for the widget class.
Example (setting z-index to 10):
.epwa-container {
z-index: 10;
}