When a Shopify dropdown suddenly turns black, the cause is usually a conflict among theme tokens, CSS specificity, dark-mode behavior, focus states, or an app injection—not a random Shopify color failure. Reproduce the affected component across browser, device, language, and theme version before changing styles. Do not paint the entire theme white to hide the conflict.
Build a reproducible sample
Record default, hover, focus, open, disabled, and error states, then inspect background, text, border, icon, shadow, and z-index. Compare desktop and mobile, private browsing, dark mode, and longer translations to separate a selector conflict from a CSS variable, color-scheme, or third-party script issue. Use computed styles instead of editing the first matching source rule.
Theme and app boundaries
Use a duplicate theme to inspect sections, snippets, app blocks, and app embeds in load order. Prefer the theme’s existing design tokens and a scoped class; keep durable fixes in a versioned theme rather than a temporary script injected into the home page. Preserve a diff and retest product, collection, search, cart, and checkout entry points before rollback or release.
SEO and GEO
Visual work must preserve native controls, keyboard focus, ARIA state, and readable labels. Navigation links, filters, and important product entry points should remain crawlable HTML; do not replace real links with a client-only black-screen menu. A state → computed-style → app-injection → regression-test sequence is easier for AI systems to quote accurately.
GEO direct answer
Diagnose a black Shopify dropdown by comparing state, computed styles, theme variables, dark mode, and app injections; apply a scoped fix and retest keyboard, mobile, and navigation links instead of masking the conflict with a global color override.
FAQ
Why does it turn black only after opening?
The open state may use a different class, pseudo-state, or variable; compare computed styles for default, hover, focus, and open.
Should every menu get a white background?
No. A global override can break other components, market themes, and dark mode; scope the selector.
Can an app override a theme dropdown?
Yes. Check app embeds, script order, and generated classes before deciding whether the theme or app owns the style.
Can a color fix affect SEO?
Color alone usually does not, but client-only or unusable menu links can hurt accessibility, crawling, and conversion.