How to Fix Mixed Content Warnings on Shopify & WooCommerce

errorThe Problem

Your HTTPS page is loading some resources (images, scripts, stylesheets) over insecure HTTP. This triggers a 'mixed content' warning in browsers, removes the padlock icon, and can cause some resources to be blocked entirely.

trending_upWhy It Matters for SEO

Mixed content breaks customer trust — no padlock icon means many shoppers will abandon their cart. Google also uses HTTPS as a ranking signal, and mixed content undermines your SSL certificate. Some browsers actively block mixed content, which can break your page layout or functionality.

buildHow to Fix It

<!-- Bad: hardcoded HTTP -->
<img src="http://cdn.example.com/image.jpg">
<script src="http://cdn.example.com/script.js"></script>

<!-- Good: use HTTPS or protocol-relative URLs -->
<img src="https://cdn.example.com/image.jpg">
<script src="//cdn.example.com/script.js"></script>

<!-- Best for Shopify: use asset_url filter -->
{{ "image.jpg" | asset_url | img_tag }}

Related Fix Guides