How can I remove the product image frame in the Dawn theme?

Technical Q&A

Topic summary

Main issue: Remove a thin grey frame around product images in the Shopify Dawn theme and restore variant selection buttons that lost their black background.

Actions taken:

  • Border removal: Add CSS to base.css — .collection .card-wrapper .card.card–outline { border: none !important; } — to eliminate the image outline on collection pages.
  • Button style restore: Add CSS to base.css — body .product .grid__item { --color-foreground: var(–color-base -text) !important; } — to revert variant options to black buttons with visible text.

Outcome:

  • Original poster confirmed both fixes worked and thanked the helper; solution appears implemented. They were asked to mark the answer as the accepted solution.

Subsequent update:

  • Another user reported a similar light grey bounding box on a standalone page (PNG image) and requested page-specific CSS guidance. No response provided in the thread segment, so this follow-up remains unresolved.

Notes:

  • Dawn is Shopify’s default theme; base.css is the theme’s main stylesheet. The fixes use CSS selectors and overrides (!important) and adjust a CSS variable (–color-foreground) to restore button visibility.
Summarized with AI on February 4. AI used: gpt-5.
4

Hello,

Sorry for late reply.

You can back your buttons if you add next code in the end to file “base.css”.

body .product .grid__item{
    --color-foreground: var(--color-base-text) !important;
}

It should help. If something go wrong - inform me, please.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like