The shop was running normally, but conversion suddenly dropped 40% in a single day. Google Analytics showed traffic at normal levels. The problem was invisible to the naked eye – only at a specific screen size did checkout buttons overlap and become unclickable. Diagnosis time: 3 hours, fix time: 30 minutes.
Symptoms
- 40% conversion drop with no obvious technical cause
- Shop looks correct on desktop and popular mobile sizes
- Session recordings (Hotjar) show users clicking on empty areas of the screen
- Problem started after deploying a theme update
Diagnosis
# Check session recordings in Hotjar / Microsoft Clarity # Filter: page = /checkout, clicks = rage clicks (multiple clicks in the same spot) # Check in DevTools at different screen sizes: # Chrome > DevTools > Toggle Device Toolbar > Custom: 375x667 (iPhone SE) # Custom: 390x844 (iPhone 14) # Custom: 412x915 (Pixel 7) # Check console for JS errors
Cause
The theme update changed the z-index of a loading overlay element. On screens 360-400px wide the overlay was covering the “Proceed to checkout” button making it unclickable. The element was transparent so visually invisible.
Solution
# Find the element blocking the click # DevTools > Elements > right-click button > Inspect # Check Styles panel: is anything using position: fixed or z-index above the button
// Debug click targets in browser console
document.addEventListener('click', function(e) {
var el = document.elementFromPoint(e.clientX, e.clientY);
console.log('Clicked element:', el, 'z-index:', getComputedStyle(el).zIndex);
}, true);
# Fix z-index in theme CSS
# Before: .loading-overlay { z-index: 9999; }
# After: .loading-overlay { z-index: 100; pointer-events: none; }
Takeaways
Every frontend deployment requires testing at multiple screen sizes – especially 360px, 375px, 390px, 414px (the most common mobile widths). Session recordings (Hotjar, Clarity – free from Microsoft) should be standard. Conversion monitoring with an alert on drops above 15% catches these problems in hours, not days.
