Mixed content
Moderate effortFound on 26% of audited stores.
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.
What it is
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.
Why it matters
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.
How to fix it
- Audit your store: open your browser's DevTools (F12 → Console or Network tab) on key pages (homepage, product page, cart, checkout) and look for warnings about mixed content, or use an online mixed-content checker tool.
- Identify the offending URLs: note every HTTP resource URL flagged — they may be hardcoded in theme files, page content, app embed codes, or a site-wide setting.
- Update hardcoded HTTP URLs: in your theme code, page editor content, and any custom HTML blocks, change every occurrence of 'http://' to 'https://' for your own assets, or to protocol-relative '//' if the destination supports both.
- Update your store's base URL / site URL setting (if your platform has one) to use 'https://' so all internally generated links and asset paths are automatically secure.
- Check third-party embeds and apps: review any externally hosted scripts, fonts (e.g. Google Fonts), map embeds, payment widgets, or social buttons — replace their src/href values with the HTTPS version provided by the vendor, or remove outdated embeds.
- Verify the fix: reload the page, check DevTools Console for zero mixed-content warnings, and confirm the padlock icon is fully green/locked in the browser address bar.
Fix it on your platform
Pick your platform for the exact steps.
How to fix mixed content on Shopify
- Shopify forces HTTPS for all hosted assets automatically, so mixed content almost always comes from hardcoded HTTP URLs in theme code or page content.
- Go to Online Store → Themes → your active theme → Actions → Edit code.
- Use the search box (magnifying-glass icon) to search for 'http://' across all theme files. Change any found instances to 'https://' or '//'.
- Also check Online Store → Pages, Blog posts, and any Custom content sections — edit each in the rich-text editor, switch to HTML view, and replace 'http://' URLs.
- For third-party app embeds, revisit the app's settings page and copy the latest embed snippet, which should already use HTTPS.
- Re-test with DevTools Console on your live storefront.
How to fix mixed content on Shopify Plus
- Follow the same theme-code and page-content steps as Shopify above.
- Additionally audit any Launchpad scripts, Shopify Scripts, or custom checkout.liquid modifications: go to Online Store → Themes → Edit code → checkout.liquid and search for 'http://'.
- Check any custom third-party integrations or headless front-end configurations for hardcoded HTTP asset URLs.
- Re-test with DevTools Console.
How to fix mixed content on WooCommerce
- In WordPress Admin, go to Settings → General and confirm both 'WordPress Address (URL)' and 'Site Address (URL)' begin with 'https://'.
- Install the free plugin 'Better Search Replace' (Plugins → Add New → search 'Better Search Replace'). Run a search for 'http://yourdomain.com' and replace with 'https://yourdomain.com' across all database tables — tick 'Run as dry run' first to preview.
- Also search for any absolute 'http://' third-party resource URLs in your theme files: go to Appearance → Theme File Editor (or via FTP/cPanel) and search template files for 'http://'.
- If you use a page builder (Elementor, Divi, etc.), open affected pages and update any manually entered HTTP image/video URLs.
- Flush caches (caching plugin + server cache) and re-test with DevTools Console.
How to fix mixed content on BigCommerce
- Go to Storefront → My Themes → your active theme → Advanced → Edit Theme Files.
- Search for 'http://' across template and asset files (.html, .css, .js) and update any found URLs to 'https://'.
- Navigate to Content → Web Pages and check each custom page's HTML source for HTTP asset URLs.
- Check Storefront → Script Manager for any third-party scripts using HTTP src URLs — update them to HTTPS.
- Re-test using browser DevTools Console.
How to fix mixed content on Wix
- Wix serves all its own assets over HTTPS automatically. Mixed content typically comes from custom HTML widgets or Velo (code) blocks.
- In the Wix Editor, click on any HTML Embed or Custom Embed widget → Enter Code, and manually update any 'http://' src or href values to 'https://'.
- If you use Wix Velo, open the code panel (Dev Mode) and search your page and site-level code files for 'http://' string literals — update them.
- For third-party apps added via the Wix App Market, contact the app developer if their embed code references HTTP resources.
- Re-test using browser DevTools Console on your published site.
How to fix mixed content on Wix Studio
- In Wix Studio, open the relevant page or section containing the HTTP resource.
- Select any HTML/Embed components and update all 'http://' URLs in their code to 'https://'.
- Open the Velo IDE (Dev panel) and search site code and page code for 'http://' — replace with 'https://'.
- Publish the site and verify with browser DevTools Console.
How to fix mixed content on Squarespace
- Squarespace hosts all its own assets over HTTPS. Mixed content comes from Code Blocks or custom CSS/JS injections.
- Go to Pages → click the page → Edit → find any Code Block components. Click each to edit and replace 'http://' URLs with 'https://'.
- Go to Settings → Advanced → Code Injection. Check the Header and Footer injection areas for any 'http://' src or href values and update them to 'https://'.
- Go to Design → Custom CSS and look for any url('http://...') references — update to 'https://'.
- Re-test using browser DevTools Console.
How to fix mixed content on Webflow
- Webflow serves hosted assets over HTTPS. Mixed content usually originates from custom embed components or custom code in Page Settings.
- In the Webflow Designer, select any Embed component on affected pages → click the element → edit the HTML and replace 'http://' with 'https://' in all src/href attributes.
- Go to Page Settings (gear icon per page) → Custom Code (Head/Body) and update any HTTP resource URLs.
- Go to Project Settings → Custom Code (site-wide Head/Body) and do the same.
- Publish and verify with browser DevTools Console.
How to fix mixed content on Adobe Commerce (Magento)
- In the Admin panel, go to Stores → Configuration → General → Web.
- Under 'Base URLs (Secure)', confirm all Base URL, Base Link URL, Base Skin URL, Base Media URL, and Base JavaScript URL values start with 'https://'.
- Under 'Base URLs' (the non-secure section), also set the Base URL to 'https://' to prevent any HTTP asset generation.
- Enable 'Use Secure URLs on Storefront' and 'Use Secure URLs in Admin' — set both to Yes.
- Run bin/magento cache:flush from the command line (or go to System → Cache Management → Flush Magento Cache).
- If hardcoded HTTP URLs persist in CMS pages or blocks, go to Content → Pages / Blocks, edit each, and update URLs in the HTML source view.
- Re-test using browser DevTools Console.
How to fix mixed content on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the admin path and configuration options are identical.
- Additionally check app/design theme template files for any hardcoded 'http://' asset URLs and update to 'https://'.
- Flush the full cache after any changes.
How to fix mixed content on PrestaShop
- Go to Admin → Shop Parameters → General. Enable 'Force SSL on all pages' to ensure all generated URLs are HTTPS.
- Go to Admin → Design → Theme & Logo → your theme files (or via FTP to /themes/yourtheme/) and search template .tpl files for 'http://' — update any hardcoded asset URLs.
- Check Admin → Design → Pages (CMS pages) for inline HTTP image/script references and update them.
- Clear the cache: Advanced Parameters → Performance → Clear cache.
- Re-test with browser DevTools Console.
How to fix mixed content on OpenCart
- Go to Admin → System → Settings → Edit your store → Server tab. Confirm 'Use SSL' is set to Yes.
- In config.php and admin/config.php (root of your server), ensure HTTP_SERVER and HTTP_CATALOG constants use 'https://'.
- Search theme template files (catalog/view/theme/yourtheme/) for hardcoded 'http://' URLs and update them.
- Clear the cache: Admin → Dashboard → the gear icon → Refresh.
- Re-test with browser DevTools Console.
How to fix mixed content on Headless / Custom (I build in code)
- Audit all HTML templates, component files, and configuration for any hardcoded 'http://' asset URLs — images, scripts, stylesheets, fonts, iframes.
- Replace all hardcoded HTTP asset URLs with HTTPS equivalents, or use protocol-relative URLs (//) where the third-party host supports HTTPS.
- 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.
- Verify your CDN, image proxy, or asset pipeline is configured to serve assets over HTTPS.
- Deploy and test with browser DevTools Console → check for zero mixed-content warnings.
Does your site have this issue?
Run a free SEOLZ scan to find mixed content — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does mixed content matter?
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.
How do I fix mixed content?
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.
Authoritative references
- Transport Layer Security (TLS) — MDN
- Let's Encrypt documentation — Let's Encrypt