Phantom Photo Glow

Store Design

Topic summary

A user encountered an unwanted green border/overlay appearing around product photos on their Shopify store that they couldn’t remove through standard customization attempts.

Root Cause Identified:
The issue stemmed from CSS code in the assets/xidax.css file, specifically targeting .header-product .product__media-item elements with an #effbef (light green) background color.

Solution Provided:

  • Locate the problematic CSS rule in xidax.css
  • Change the background color from #effbef to #fff (white) to match the product image backgrounds
  • The CSS also includes border-radius: 5px and padding: 10px properties that can be adjusted as needed

Status: Resolved - the user confirmed the solution worked successfully.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Can’t Remove this phantom green border/overlay from my theme no matter what I try…

store URL https://shop.xidax.com/

RyanCrowther_0-1729697933041.png
RyanCrowther_0-1729697933041.png3072×1536 570 KB

2

Please always share store url in any query.

3

Hi @RyanCrowther

It is this code in your assets/xidax.css

.header-product .product__media-item.grid__item.slider__slide.scroll-trigger.animate--fade-in.is-active {
    background: #effbef;
    border-radius: 5px;
    padding: 10px
}

It is background so you can just change it to white to match image’s backgrounds

.header-product .product__media-item.grid__item.slider__slide.scroll-trigger.animate--fade-in.is-active {
    background: #fff;
    border-radius: 5px;
    padding: 10px
}
4

amazing thank you

1 Like