Grey Line Around Product Photo Remove

Shopify Discussion
, ,
1

Hello my website is: thedrakeplushie .com When you click on my product photo on either mobile or pc there is a grey line around my product photo which I want to remove. Is there any way to remove this? Thanks in advance for your help!

Screen Shot 2025-07-25 at 10.21.32 AM
Screen Shot 2025-07-25 at 10.21.32 AM698×838 266 KB

2

@thedrakeplushie ,

Please put this css in bottom of the base.css file.

.product__media-item .product-media-container {
    border: 0;
}
3

Hey @thedrakeplushie,
In order to remove the border on the image you need to paste this coding in the end of base.css file.
Here is how you can find base.css file.
Go to Shopify Admin >> Online Store >> Customize >> Edit code >> base.css

.product-media-container.constrain-height.media-fit-contain {
border: none !important;
}
4

hey dear @thedrakeplushie follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

<style>
.product__media-item .product-media-container {
    border: none !important;
}
</style>
5

Hello @thedrakeplushie Here’s a simple and working solution to remove that grey outline (border) around the product image when clicked (zoomed in or opened in modal/lightbox) on Shopify.

Solution (Add This CSS):

  1. Go to your Shopify Admin

  2. Click on Online Store > Themes

  3. Find your current theme (e.g., Dawn, Refresh, etc.) and click “Customize”

  4. Click the “…” (three dots) in the top-left corner

  5. Select Edit code

Now do this:

In base.css or theme.css (whichever your theme uses):

  1. Find the file:
  2. Look in the assets folder for base.css, theme.css, or styles.css.

Add this CSS at the very bottom:

/* Remove grey outline around product image modal */
.media-modal__content img,
.product__media img {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

What this does:
. box-shadow, border, and outline are all potential reasons why that grey line is showing.

. !important makes sure it overrides any other theme settings.

If it still shows, try inspecting the modal image using your browser’s developer tools (right click > inspect) to check for the class name of the wrapper and apply the same rule there.

if you need any help plz let me know

Thank you :slightly_smiling_face:

6

Hi there,

Please use this css code to fix your issue:

.product__media-item .product-media-container {

border: 0;

}

Sinh Developer, from Tipo