How to fix mixed content on Webflow

Audit every page, asset, and third-party embed on your store to ensure no HTTP resources are loaded on HTTPS pages, and fix any mixed-content violations before they silently break security warnings or block content in visitors' browsers.

Steps for Webflow

  1. Webflow serves all published sites over HTTPS by default; mixed content typically comes from custom code embeds or external asset references.
  2. In the Webflow Designer, open the Pages panel and check any Embed elements (Add Elements → Components → Embed) for http:// URLs in their HTML code; update to https://.
  3. Go to Project Settings → Custom Code (Head Code / Footer Code) and review all injected scripts, stylesheets, and iframes for HTTP URLs; update to HTTPS.
  4. On individual pages, check Page Settings → Custom Code for any page-level head/footer code with HTTP references.
  5. In the Assets panel, all assets uploaded directly to Webflow are served over HTTPS. If you reference external images via URL in style or content fields, ensure they use https://.
  6. Add <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> in Project Settings → Custom Code → Head Code as a safety net.
  7. Publish your site and verify with browser DevTools (Console tab) that no mixed-content warnings appear.
Official Webflow documentation ↗
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

What is mixed content?

Mixed content happens when a web page is loaded securely over HTTPS but one or more of its resources — images, scripts, stylesheets, fonts, videos, iframes, or API calls — are still requested over plain HTTP. Browsers treat this as a security problem because the encrypted connection protecting your page can be undermined by an unencrypted resource. There are two kinds: "passive" mixed content (images, audio, video) which browsers may still display but flag with a warning, and "active" mixed content (scripts, stylesheets, iframes) which modern browsers block entirely, breaking functionality. A clean HTTPS store means every single request on every page uses HTTPS — no exceptions.

Mixed content directly harms your store in four ways. First, browsers show a "Not Secure" warning or remove the padlock icon, which destroys shopper trust and causes cart abandonment — studies consistently show customers abandon checkout when they see security warnings. Second, blocked active mixed content (a blocked script or stylesheet) can silently break your add-to-cart button, checkout form, live chat widget, or payment processor embed, costing you direct revenue with no obvious error message to trace. Third, Google has stated that HTTPS is a ranking signal; mixed-content warnings can undermine that signal and signal a poorly maintained site. Fourth, if your store is subject to PCI-DSS (required for card payments), serving payment-related resources over HTTP is a compliance violation that can result in fines or loss of payment processing privileges.

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

Not sure if your Webflow store has this?

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

Scan my site free

Fix mixed content on another platform