Site Header Overlaps Upcart

This article explains how to fix an issue where the Upcart widget is hidden behind your site header when opened.

Why This Happens

In some Shopify themes, the header has a higher z-index than Upcart, causing the cart to appear underneath it. This can make Upcart look partially hidden or inaccessible when customers open the cart.

---

How to Fix

Follow the steps below to bring Upcart in front of your site header:

1. Copy the code provided at the bottom of this article.
2. In your Shopify admin, go to Upcart > Cart Editor > Settings > Advanced Settings > Custom HTML.
3. Click the HTML dropdown and select Scripts (Before Load).
4. Paste the code into the field.
5. Click Save changes.
6. Refresh your storefront and test your cart.

After completing these steps, the cart should display correctly above your site header.

---

Code Required:

<script>  
	// Find UpCart  
	let upcart = document.querySelector("#upCart");  
  
	// Find the site's body  
	let body = document.body;  
	  
	// If we found both  
	if(upcart && body)  
			// Move upcart to the top of the body's children so it takes priority over site header  
	    body.firstChild.before(upcart)  
</script>