Anyone seeing elements bleed through to their cart?

You all have helped me a lot so far; I am able to successfully order products on my Snipcart test account.

I’ve seen something odd happen while I’m testing, and I don’t know if the problem is from Snipcart or something generated by Sparkle and if there’s a way to work around it. When I selected the button on one page to add an item to a cart, the Snipcart overlay appeared, but the Add to Cart button from my page still showed.

And I have a button to Show the Cart on one of my pages, and it has several text elements showing over the overlay. I was looking at the items that bled through to see if they’re the top layer (or the bottom layer), but they’re actually in the middle of the layers. So I don’t know if there’s a way around this.

This is a snipcart issue, you should contact them about it.

1 Like


can you please provide some more guidance on this?
Here’s the reply that I got from Snipcart:

Fixing this issue would require us to put a very large z-index value. This could be possible, but we already have a decently high value.

I’m surprised that there’s no way to add custom CSS at all by using Sparkle.

And they suggest that I might be able to use the Embed command to work something out so I don’t have elements bleeding through. I’m guessing that the z-index must refer to a layer and larger values end up on the top. Is there a way to edit the z-index for the elements … maybe assign layers that don’t overlap the same z-index … so that they will be below the snipcart value?

I know I can’t access the z-index values that Snipcart is generating, but I don’t know how to modify the values from Sparkle’s code either.


This is way too technical for this forum. Please forward their entire email to and we’ll look into it.