How can I change the background color of my product images?

Topic summary

Issue: Product images with transparent backgrounds show a grey background on product tiles (collection grid) but revert to white on individual product pages; a code-based solution was sought.

Solution (Shopify Dawn theme):

  • In Assets/base.css, update .global-media-settings to set background-color to the desired value (e.g., #f3f3f3).
  • If using a carousel, in Assets/section-main-product.css, update .thumbnail background-color similarly.
  • Code snippets and approximate line references were provided; these changes successfully update the product page media background.

Notes:

  • The provided code edits are central to understanding the fix.
  • A tip clarified that .css files reside in the Assets folder.

Outstanding/Current status:

  • Multiple users report the fix does not affect product cards on collection or home pages; no working solution for those cards has been shared yet.
  • The thread remains partially resolved (product page fixed), with open requests for how to change backgrounds on collection/home product cards.
Summarized with AI on December 17. AI used: gpt-5.

For novices like me, please note “.CSS” files are found in the ASSETS Folder.