Removing product image border in Dawn theme

Store Design

Topic summary

Users are trying to remove gray borders appearing around product images in Shopify’s Dawn theme.

Initial Solutions Attempted:

  • Adding CSS code to component-card.css file to set border to none
  • Modifying main-product-section.css to remove color-foreground styling

Issues with CSS Approaches:

  • Some solutions removed borders from other elements like dropdown menus
  • Results were inconsistent across different Dawn theme versions

Working Solution (No Code Required):
Multiple users confirmed success by navigating through the theme customizer:

  1. Go to Customize Theme → Theme Settings
  2. Find Content containers → Media → Border
  3. Change Border Thickness from 1px to 0px

This built-in theme setting approach works reliably across Dawn 2.0+ versions without requiring CSS modifications or affecting other design elements. Confirmed effective as of May 2023.

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

Removing product image border in Dawn theme

Screen Shot 2021-10-05 at 01.51.21.png
Screen Shot 2021-10-05 at 01.51.21.png1586×1070 21.5 KB

As you can see that the image have a side border with gray accent, how to remove it?

Thanks

2

Hi @vapormercury

Would you mind sharing your store’s URL so we can provide the code for that? Thanks!

3

welcome to shopify community.

please share your store URL and if your store is password protected then please give password too.

Thank you .

4

Hi its

http://ginseng-strip.myshopify.com

PASS: REMOVINGBORDER

5

Hi @vapormercury

Have you got an app that disables right-clicking? If yes this needs to be turned off so we can access the code and check this.

Cheers!

6

Yes, I’ve disabled it.

Thank you

7

Nevermind found it on the theme page. thanks!

8

Can you please advise on where you found it? I’ve been able to turn off image borders on colleciton pages but can’t seem to find it on the product page.

9

Same, just seen it on product page. can anyone help us out?

Thanks

10

Hi there,

Can you please share how you did this?

Would love some help here please!

11

Hi @vapormercury & @iconicmoments

Add the following code to your component-card.css file:

.card.card--product.card--outline {
    border: none;
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

12

Howdy - I cannot seem to get this code to work I’m afraid! The border still remains - can you please provide any further guidance?

13

@aiteallco
Kindly share your store URL and store password so,
I can solve it perfectly.
Thank You.

14

Thanks - aiteall.com.au and ahtroh

15

@aiteallco
Can you give me a screenshot so,
I can understand which image border you want to remove.
Thank You.

16

Hi - any luck with a potential solution on this front?

17

That code seems to be accessing the theme colors, which I found a way to cancel it out.

You can probably call that product image a different way but this still worked for me on dawn. I added it to the section-main-product.css

.product .grid__item {
--color-foreground: none!important;
}
4 Likes
18

Any other way to do it?

@BaileyPaserk solution actually works, yet it also eliminates the border of my drop down menues.

1 Like
19

Go to Customize Theme → Theme Settings → Media → Border from 1px to 0px Thickness

10 Likes
20

@BaileyPaserk this solution works perfectly! thanks a lot :slightly_smiling_face: !