Strange shadow on product card

Topic summary

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.

I didn’t put this site together and shopify is new to me so would appreciate your help!

Theme name and website url, password if there is any please

Hmm.
Not seeing this:

1 Like

@Sun38 can you please share this page link?

1 Like

Theme is Dawn

I’m not sure of the password

@Sun38 can you please mark what exactly are you seeing in the screenshot? I am not able to see any shadow

1 Like

@Sun38 no it is not visible, I checked on home page, product page and gift card page

any other place than these?

1 Like

That is so strange because I can see it on all of those pages plus the about page.

1 Like

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.

1 Like

@Sun38 welcome, do let me know if you need any further updates

If you see something out of place or that shouldn’t be there, double check it in incognito mode and/or different device to rule out cache issue.

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.

.product-grid li:nth-child(3n+1):before {
  background-image: url(/cdn/shop/files/Group_1376156509_1.png?v=1757570906);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 120px
}

.product-grid li:nth-child(3n+2):before {
  background-image: url(/cdn/shop/files/Group_1376156507.png?v=1757570950);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 120px
}

.product-grid li:nth-child(3n+3):before {
  background-image: url(/cdn/shop/files/Group_1376156509.png?v=1757570975);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 120px
}


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?

Code for those is also in the same asset I mentioned above:

.product-grid .card__information:before {
  position: absolute;
  content: "";
  background-image: url(/cdn/shop/files/Ellipse_1018.svg?v=1757571082);
  width: 159px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  left: 25%;
  bottom: 30%;
}

You can comment this code by wrapping it with /* and */

If you need a dev, I can accept some of your products as a payment :rofl:

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).

Thanks Tim, I really appreciate your help. Sorry, I am new to this, I’m not sure what you mean by comment it out?