Sometimes the Loyalty Widget can overlap with other important elements on your website, such as a cookie consent banner, chat widget, or mobile navigation. This article explains how z-index works and how you can adjust it to make sure everything displays in the right order.
1. What is z-index?
z-index is a CSS property that controls the stacking order of elements on a page — in other words, which elements appear on top of others.
Elements with a higher z-index appear above elements with a lower one.
Elements with a lower z-index appear below elements with a higher one.
You can think of it as layers: the higher the number, the closer the element is to the “top layer” of the screen.
2. Default z-index value in our widget
Typical z-index values on websites range from:
0–10 for basic layout elements
100–1,000 for headers, sticky elements, and menus
1,000+ for modals, popups, and overlays
By default, our widget uses a very high z-index to ensure it remains visible across all themes and layouts. However, this may cause it to appear above other important UI elements, such as cookie consent banners.
3. What to do if the widget overlaps something important
If the widget is covering another critical element, you can lower its z-index in Branding - Widget design:
A good starting point is setting the z-index to 1.
After changing the value, refresh your store and check whether:
The widget is still visible
The overlapping issue is resolved
If the widget is still overlapping some elements, try 0.
4. When there are many elements in the same area
If multiple widgets or banners compete for the same space:
Option 1: Move elements to different corners
Our widget position can be changed (for example, bottom-right → bottom-left), which often solves overlap issues without touching z-index.
Option 2: Fine-tune z-index values
Instead of using very high or very low values, try intermediate ones such as:
500
1,000
Try different values until the stacking order matches what you want users to see first.
Notes:
Always test changes on mobile, where screen space is limited.
Check pages with popups, cookie banners, or chat widgets specifically.
If you’re unsure which value works best for your theme, just reach out to us — we’ll help you fine-tune the display to match your setup.