SEOLZ

Mixed content

Moderate effort

Found on 14% of audited stores.

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.

What it is

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.

Why it matters

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.

How to fix it

  1. Open your browser's Developer Tools (F12) on each key page (homepage, product page, collection/category page, cart, checkout) and check the Console and Network tabs — filter by 'http://' requests or look for mixed-content warnings in red or yellow.
  2. Check all hardcoded URLs in your theme, templates, and custom code: search for 'http://' (not 'https://') in image src attributes, script src tags, link href tags, CSS url() values, and iframe src attributes.
  3. Update any hardcoded HTTP URLs in your theme files, custom CSS, and page content to use 'https://' or protocol-relative URLs (e.g. '//example.com/script.js'). The easiest global fix is a find-and-replace of 'http://' with 'https://' across your theme and content — but verify each one still resolves after the change.
  4. For third-party embeds (widgets, maps, chat tools, payment badges, social feeds), obtain the HTTPS version of the embed code directly from the third-party provider's dashboard, as most now provide HTTPS-only snippets.
  5. Check your database or CMS content (product descriptions, blog posts, page builder blocks) for hardcoded HTTP image or media URLs inserted via a rich-text editor — these are a very common source of mixed content that theme-file searches miss.
  6. After making fixes, re-scan with your browser console, an online mixed-content checker, or your SEO platform scanner; also add a Content-Security-Policy header with 'upgrade-insecure-requests' as a safety net that automatically upgrades any remaining HTTP sub-requests to HTTPS at the browser level.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Fix it on your platform

Pick your platform for the exact steps.

How to fix mixed content on Shopify
  1. Shopify enforces HTTPS on all storefronts automatically, so the most common source of mixed content is hardcoded HTTP URLs in theme files or content.
  2. Go to Online Store → Themes → your active theme → Actions → Edit Code.
  3. Use the built-in search (the magnifying glass icon in the code editor) to search for 'http://' across all Liquid, CSS, and JS files. Update any found instances to 'https://'.
  4. Also check Online Store → Pages, Blog Posts, and product/collection descriptions — open each rich-text editor and look for embedded images or media inserted with HTTP URLs; update them to HTTPS.
  5. For third-party scripts added via Online Store → Themes → Edit Code → theme.liquid or layout files, ensure each <script src='...'> and <link href='...'> uses https://.
  6. To add the CSP upgrade-insecure-requests meta tag as a safety net, add <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> inside the <head> tag in your theme.liquid file.
  7. Save and preview your store; open browser DevTools (F12 → Console) to confirm no mixed-content warnings remain.
Full Shopify guide →Official Shopify docs ↗
How to fix mixed content on WooCommerce
  1. In your WordPress admin, install the free plugin 'Really Simple SSL' (Plugins → Add New → search 'Really Simple SSL') — it performs a sitewide HTTP→HTTPS redirect and fixes many mixed-content issues automatically by filtering content URLs.
  2. Go to Settings → SSL (added by Really Simple SSL) and enable 'Mixed content fixer' to replace HTTP URLs in dynamically rendered content.
  3. For database-stored content (product descriptions, page builder content, widget text), run a search-replace in the database: use the free plugin 'Better Search Replace' (Plugins → Add New) to replace 'http://yourdomain.com' with 'https://yourdomain.com' across all tables — always take a full database backup first.
  4. Check your active theme and child theme files (Appearance → Theme File Editor) and any custom plugins for hardcoded HTTP asset URLs; update to HTTPS.
  5. For WordPress.org sites with server access, add the following to your wp-config.php as a safety net: define('FORCE_SSL_ADMIN', true); and ensure your .htaccess has a full HTTP→HTTPS redirect rule.
  6. Add <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> to your theme's header.php (inside <head>) or via a plugin like 'Header and Footer Scripts'.
  7. Reload your site in an incognito browser window and check the padlock/console for any remaining warnings.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix mixed content on BigCommerce
  1. BigCommerce provides HTTPS sitewide; mixed content typically comes from theme files or content entered in the control panel.
  2. Go to Storefront → My Themes → your active theme → Advanced → Edit Theme Files.
  3. Search all template (.html), stylesheet (.scss/.css), and JavaScript files for 'http://' and update any found asset URLs to 'https://'.
  4. In the control panel, go to Products and check product descriptions (HTML view in the description editor) for HTTP image URLs — update each to HTTPS.
  5. Check Storefront → Script Manager for any third-party scripts using HTTP src URLs; update them to HTTPS equivalents.
  6. Add the CSP upgrade-insecure-requests meta tag inside the <head> section of your base.html (or equivalent) template file as a safety net.
  7. Use browser DevTools on your live store to confirm no mixed-content errors remain in the Console tab.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix mixed content on Wix
  1. Wix enforces HTTPS on all sites automatically; mixed content most commonly comes from external embeds added via Wix HTML iframes or Wix Velo code.
  2. In the Wix Editor, click any HTML iframe widget (Insert → Embed → HTML iframe) and check that the embed code uses https:// URLs, not http://.
  3. If you use Wix Velo (Dev Mode), open your site's code files and search for any fetch(), import, or src references using http://; update them to https://.
  4. Check any Wix app embeds (e.g. third-party chat, review widgets added via the App Market) — if a specific app is injecting HTTP resources, contact the app developer for an updated HTTPS embed snippet.
  5. For media files, all images and videos uploaded directly to Wix are served over HTTPS automatically. If you reference external media (e.g. images hosted elsewhere), ensure those source URLs use https://.
  6. Publish your site and open it in an incognito browser window; use DevTools (F12 → Console) to confirm no mixed-content warnings.
Full Wix guide →Official Wix docs ↗
How to fix mixed content on Squarespace
  1. Squarespace enforces HTTPS automatically; mixed content almost always comes from custom code blocks or external embeds.
  2. Go to Pages → click any page → Edit → find any Code Block or Embed Block, and check the HTML/code inside for http:// URLs. Replace with https://.
  3. Check Website → Pages → Page Settings → Advanced (for individual pages) or Design → Custom CSS for any hardcoded http:// asset references.
  4. In Settings → Advanced → Code Injection (Header / Footer), review any injected scripts or stylesheets for HTTP URLs and update them.
  5. If you use third-party integrations (e.g. embedded maps, chat widgets) added via Extensions or Code Injection, get the HTTPS version of the embed code from the provider.
  6. Republish or save your changes and check the site in an incognito browser with DevTools open (Console tab) to confirm the padlock is clean.
Full Squarespace guide →Official Squarespace docs ↗
How to fix mixed content on 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.
Full Webflow guide →Official Webflow docs ↗
How to fix mixed content on Adobe Commerce (Magento)
  1. In the admin panel, go to Stores → Configuration → General → Web.
  2. Under 'Base URLs (Secure)', set the Secure Base URL to https:// and ensure 'Use Secure URLs on Storefront' and 'Use Secure URLs in Admin' are both set to 'Yes'. Save Config.
  3. Go to Stores → Configuration → General → Web → Base URLs and confirm the non-secure Base URL also redirects to HTTPS (handle this via your server's .htaccess or nginx config with a 301 redirect).
  4. Run the Magento URL reindex and clear the full-page cache: in the admin go to System → Cache Management → Flush Magento Cache, or via CLI: php bin/magento cache:flush.
  5. Use a database search-replace tool or a Magento module (e.g. the free 'MagePal HTTP to HTTPS Redirect' or similar) to update any hardcoded HTTP URLs stored in the catalog, CMS pages, and widgets tables.
  6. Check any third-party extensions that inject scripts or assets (System → Integrations, or custom modules in app/code) for hardcoded HTTP asset URLs and update them.
  7. Add the Content-Security-Policy upgrade-insecure-requests header in your server config (Apache: Header always set Content-Security-Policy 'upgrade-insecure-requests'; Nginx: add_header Content-Security-Policy 'upgrade-insecure-requests';) or via a plugin.
  8. Flush all caches again and verify with browser DevTools that no mixed-content warnings remain.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix mixed content on PrestaShop
  1. In the admin panel, go to Shop Parameters → General and enable 'Force HTTPS' — this forces all store pages to use HTTPS.
  2. Go to Advanced Parameters → Performance and flush all caches after making changes.
  3. Search your theme files (under /themes/your-theme/) for any hardcoded http:// asset references in .tpl, .css, and .js files; update to https://.
  4. In the admin back office, check CMS Pages (Design → Pages), product descriptions, and category descriptions for any http:// image URLs embedded via the rich-text editor.
  5. For modules that inject external scripts (Modules → Module Manager), check each module's configuration for HTTP embed codes; update to HTTPS versions.
  6. Add a Content-Security-Policy header via your server config or a PrestaShop security module to enforce upgrade-insecure-requests as a safety net.
  7. Clear the cache (Advanced Parameters → Performance → Clear cache) and verify the storefront in a browser with DevTools open.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix mixed content on OpenCart
  1. In the admin panel, go to System → Settings → your store → Server tab and ensure 'Use SSL' is set to 'Yes'.
  2. In your config.php and admin/config.php files (root of your OpenCart installation), update HTTP_SERVER and HTTPS_SERVER constants to use https:// URLs.
  3. Search your active theme's template files (/catalog/view/theme/your-theme/) for hardcoded http:// asset URLs and update to https://.
  4. In the admin, check any CMS pages (Design → Layouts or Information pages) and product descriptions for HTTP image/media URLs inserted via the text editor; update to HTTPS.
  5. For third-party extensions that add scripts or iframes, update their configuration or embed codes to use HTTPS versions.
  6. Flush the theme cache (Dashboard → Developer → Theme) and verify with browser DevTools.
Full OpenCart guide →Official OpenCart docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find mixed content — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

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.

Why does mixed content matter?

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.

How do I fix mixed content?

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.

Authoritative references

Related Site Lifecycle issues