Elements from my product page are bleeding through

Support
#1

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

I’ve seen something odd happen while I’m testing, and I don’t know 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. Is this a flaw in the website builder that I have to live with for now, or do you recognize the problem and know how to avoid it? On the product pages, every item is a layer, if that contributes to the problem.

image
image1078×557 60.4 KB

#2

The Sparkle support team tells me that this is a problem on Snipcart’s end — which surprised me; I thought it was going to be something they generated.

At first, I suspected that Snipcart had a limit on how many layers it could cover. I have 16 elements on the screen (and Sparkle puts each element into its own layer). But this page always has 6 artifacts bleed through — and what bleeds through changes as I move the layers around. But I have another page with 13 elements, and it always has a single element bleed through.

Any advice would be very welcome.
Chuck

#3

Seems to me that there is a problem with CSS z-index values. You may have to overwrite some Snipcart-CSS.

#4

That’s not a good answer for me, because I’m using Sparkle to generate the website, and I don’t have access to change the CSS it generates — or the knowledge on what to change.

Fortunately, I also had a note from the Snipcart support team, and they’re aware of the problem now. I think/hope this will be something they want to correct.

#5

Hey @fbcc,

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. You might be able to work something out with their feature documented here: Advanced Editing | Sparkle Documentation.