How to fix mixed content on Headless / Custom (I build in code)

Ensure every resource (images, scripts, stylesheets, fonts, iframes) on your store is loaded over HTTPS, never HTTP, so browsers never block or warn about mixed content.

Steps for Headless / Custom (I build in code)

  1. Audit all HTML templates, component files, and configuration for any hardcoded 'http://' asset URLs — images, scripts, stylesheets, fonts, iframes.
  2. Replace all hardcoded HTTP asset URLs with HTTPS equivalents, or use protocol-relative URLs (//) where the third-party host supports HTTPS.
  3. Ensure your Content Security Policy (CSP) includes 'upgrade-insecure-requests' as a meta tag or HTTP response header to auto-upgrade any missed HTTP sub-requests.
  4. Verify your CDN, image proxy, or asset pipeline is configured to serve assets over HTTPS.
  5. Deploy and test with browser DevTools Console → check for zero mixed-content warnings.
Official Headless / Custom (I build in code) documentation ↗

What is mixed content?

Mixed content happens when a webpage is served securely over HTTPS but one or more of its resources — images, JavaScript files, CSS stylesheets, fonts, videos, or iframes — are still requested over the old, unencrypted HTTP protocol. Browsers treat this as a security problem because the page itself is encrypted but parts of it are not. Modern browsers either silently upgrade, actively block, or display a security warning when they detect mixed content. The result is a broken or degraded experience for your shoppers.

Mixed content can break visible elements on your store (images that won't load, styles that don't apply, widgets that silently fail), directly hurting conversion rates. Browsers like Chrome and Firefox block "active" mixed content (scripts and stylesheets) outright, meaning functionality you depend on — checkout widgets, live chat, reviews — may simply stop working. A broken padlock icon or "Not Secure" warning in the address bar destroys shopper trust at the exact moment they are deciding whether to buy. Search engines also use HTTPS as a ranking signal, and a compromised security indicator can undermine the SEO benefit your SSL certificate is supposed to provide.

See the complete Mixed content guide for every platform and the full background.

Not sure if your Headless / Custom (I build in code) store has this?

Run a free SEOLZ scan — we’ll find mixed content and every other issue across your whole site.

Scan my site free

Fix mixed content on another platform