I’m working on building a custom Shopify theme and running into a problem. I have a CSS file stored on an external server that I need to include in my theme, but it’s not loading properly when I reference it.
Here’s the link tag I’m using:
<link rel="stylesheet" type="text/css" href="http://external-server.com/assets/styles/main.css" />
The weird thing is that when I download the CSS content and put it directly into a local file within my Shopify theme directory, everything works perfectly. The styles apply as expected.
But when I try to load it from the remote server using the link tag above, nothing happens. The styles don’t load at all.
Is there something about how Shopify handles external stylesheets that I’m missing? Are there any restrictions or special requirements for loading CSS from other domains?
Any help would be appreciated!
shopify can block your external css due to CORS issues. even if you’re using HTTPS, check your server’s CORS headers. press F12 and look at the Network tab to see if the css loads or not. might have to allow shopify domains on your server.
Happens all the time. The other answers nailed it - HTTPS and CORS are your enemies here.
Here’s what I do instead of wrestling with server configs and SSL certs: automate everything.
I built a workflow that watches my external CSS file and syncs it to my Shopify theme when it changes. No CORS issues, no HTTPS problems, styles load instantly because they’re local.
It checks for changes every few minutes and pushes updates straight to the theme files via Shopify’s API. Takes 10 minutes to set up, saves hours of headaches.
You don’t even need to code this - just use automation tools. I do this for all my external assets now.
Check out https://latenode.com for this kind of automation.
Had the exact same problem when I migrated from an older theme. It’s definitely HTTPS mixed content blocking. Your local files work fine, but browsers block HTTP resources on HTTPS pages - and Shopify runs everything on HTTPS by default. Your external CSS link uses HTTP while Shopify serves over HTTPS. Modern browsers silently block these requests for security. Change your link to HTTPS if your external server supports it. If there’s no SSL on your server, you’ll need to set that up or find HTTPS-compatible hosting. This tricked me too because there’s no error message - the request just gets blocked silently.
Check your Content Security Policy settings in Shopify. Had this exact problem last year - Shopify’s CSP rules block external stylesheets even when your HTTPS and CORS are set up correctly. The browser dev tools won’t always show clear errors, but you’ll see CSP violations in the console. You need to update your theme’s CSP headers to whitelist your external domain. Look for CSP meta tags in theme.liquid or see if your theme uses Shopify’s built-in CSP stuff. Add your external server domain to the style-src directive and that’ll fix it. This is different from the HTTPS/CORS issues others talked about, but just as important for loading external resources.