Unexpected shadow appears on product cards across a Shopify store, most noticeable on gift cards. It affects all product cards except those on the home page. The poster initially suspected the background image, but notes the shadow sometimes overlays the product image, suggesting it’s not just in the background.
Context: The site was built by someone else; the poster is new to Shopify (an e‑commerce platform) and seeks guidance on identifying and fixing the issue.
Evidence: A screenshot is provided and is central to understanding the visual problem.
Status: No solutions or causes identified yet; the request is for troubleshooting help. The discussion remains open with unanswered questions about the source of the shadow and how to remove it.
Summarized with AI on December 19.
AI used: gpt-5.
I am not sure where the shadow is coming from or how to fix it? You can really notice it on the gift cards but it is on all of them except for the ones on the home page. I thought it was part of the background image but on some of them it is overlying the product image.
Thank you for looking. I’ve just checked my colleague’s computer and she can’t see it either. It’s a good thing but so strange it is showing up on my computer.
Thanks everyone, thought I was going mad. Just another quick question, where abouts do I change the background image of the product? In this case the coloured arch.
There are these rules in your assets/rothwell.css
The background images are the “label” pictures and should be in your Contents=> Files.
They repeat for every 3 products – green, blue, red.
Also, in fact now I see some images which should be output right where you see your “shadows” – I’ve added red border to show where they are – the code tries to load an SVG image, but it is not available (for us!), but looks like some setting in your browser adds a shadow instead?
Thank you! Ah this all makes sense now. I saw that SVG image in the media folder so I deleted it thinking it would solve the problem. I guess it did kind of, I just needed to clear the cache to see for myself. But it still has a place holder I need to delete?
This is a rule which instructs browser to output an empty 159px x 36 px element and set its background to this image. Basically, a rule to show oval.svg on top of your product card.
Since the image is not there, it should not output anything, but why keep the rule if the image is deleted?
So yes, deleting the rule is what I would do, but for you I suggest to comment it out (just in case).