How can I eliminate the glow effect from my product picture?

Store Design

Topic summary

A user seeks to remove an unwanted glow effect appearing around product images on their Shopify store.

Root Cause:
The glow is created by a CSS box-shadow property applied to product images.

Recommended Solutions:

  • Check theme settings first: Look in the theme editor’s global settings or product template sections for options labeled “shadow,” “highlight,” or “border effect” that can be disabled without coding.

  • CSS override method: If theme settings don’t resolve it, multiple responders suggest adding custom CSS code to remove the shadow:

    • Navigate to: Online Store → Theme → Edit Code
    • Locate the base.css file
    • Add this code at the bottom: .product-media-gallery__item { box-shadow: none !important; }
    • Save changes

One responder also suggests placing code in the theme.liquid file above the closing </body> tag, though the CSS file approach is more commonly recommended. All solutions target the same CSS property controlling the glow effect.

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

Hello,

i was wondering how i can remove the glow around my product picture.

sixdreamz_0-1693002401906.png
sixdreamz_0-1693002401906.png1635×791 83.2 KB

URL: sixdreamz.com

2

It’s done using CSS box shadow.

First double check either the theme editor global settings ,

or settings for the product template and it’s sections ; for something called shadow or highlight or border effect, etc.

After exhausting that in the theme editor settings for the product template use custom css

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.global-media-settings:after {
 box-shadow: none;
}
3

Hi @sixdreamz ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

.product-media-container .global-media-settings:after{box-shadow:none !important}

PageFlyOliver_0-1693011743044.png
PageFlyOliver_0-1693011743044.png2944×1620 166 KB

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

4

Hi @sixdreamz

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
.global-media-settings:after {box-shadow: none !important;}

Regards,

San

5

Hey @sixdreamz

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed