Product page

Store Design

Topic summary

A user seeks help removing the border/frame around product images on their Shopify store (whynotcity.com).

Solution Provided:
Multiple respondents offered nearly identical CSS-based solutions:

  • Navigate to: Online Store → Themes → Actions → Edit Code
  • Locate the base.css or theme.css file
  • Add CSS code at the bottom to remove the border

CSS Variations Suggested:

  • .global-media-settings { border: 0px !important; } or border: none !important;
  • .product-media-container { border: none !important; }
  • .global-media-settings.gradient { border: none; }
  • body .global-media-settings { border: none !important; }

One alternative approach mentioned using the theme customizer (Settings → Custom CSS) instead of editing code files directly.

Status: Multiple working solutions provided with visual confirmation screenshots. Issue appears resolved, though the original poster hasn’t confirmed which solution they implemented.

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

Website : whynotcity.com pass lahyoo

Hi , can anybody knows how to remove the frame surrounding product image ?

IMG_3775.jpeg
IMG_3775.jpeg4032×3024 3.41 MB

2

Hello @Whynot102

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.global-media-settings {
    border: 0px !important;
}

result

115.png
115.png1440×919 140 KB

Thanks

3

Hi @Whynot102

You can follow the instruction here :

  1. Go to Shopify > Online store > theme > customize

  2. Click to Settings > Custom CSS > Paste this code to the section and save.

.product-media-container {
    border: none !important;
}

LizHoang_0-1736249657937.png
LizHoang_0-1736249657937.png1161×726 185 KB

4

Hi @Whynot102

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file
.global-media-settings {
    border: none !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

websensepro_0-1736249866348.png
websensepro_0-1736249866348.png576×460 78 KB

5

Hello, @Whynot102

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.global-media-settings.gradient {
    border: none;
}

Thanks!

6

Hello @Whynot102 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
body .global-media-settings {
    border: none !important;
}

ZestardTech_0-1736250459950.png
ZestardTech_0-1736250459950.png1450×789 90.3 KB

Let me know if you need further assistance!