Main issue: Small borders appeared around product images with white backgrounds on a Shopify Dawn theme, and the merchant wanted a hover effect similar to a referenced product page.
Troubleshooting: One helper advised editing theme code (Assets > base.css), targeting .global-media-settings and changing the border declaration to “border: none.” Another noted the hover effect would require custom code and likely a developer.
Outcome: The merchant did not find the exact CSS snippet but resolved the border by using Theme Settings, setting Border thickness and opacity to 0%, which removed the border. Screenshots were shared to illustrate the settings change.
Hover effect: No implementation was provided in-thread. Consensus suggested it is a custom-coded interaction rather than a built-in setting in Dawn.
Status: Border issue resolved via Theme Settings (no code changes needed). Hover effect remains open; next step would be custom development or hiring a developer. No store URL or password was shared publicly.
Let’s start with the border first. In your theme files, go to Assets → Base.css, and search for: “.global-media-settings”. Under that code, you’ll see:
border: var(--media-border-width) solid rgba(var(--color-foreground),var(--media-border-opacity));
What you’ll want to do is change that simply to:
border: none;
Let me know if you were able to do this or if you need more help.