Problem: Custom CSS placed in a footer “Custom Code” section causes a Flash of Unstyled Content (FOUC) on slow connections, as theme.css loads first and then gets overridden. Goal: keep themes easy to upgrade while minimizing visual artefacts.
Key points:
No perfect fix when relying on late-loading custom CSS; settings simply load styles after base CSS (not merged/compiled).
Trade-off: fully integrating CSS (e.g., into theme assets) reduces FOUC but shifts upgrade/maintenance responsibility to the merchant/developer.
Mitigations suggested:
Mask with loaders/transition fade-ins.
Move custom CSS to the header (when supported) so it applies earlier.
Use a custom Liquid section (header/footer) with an inline or link to a CSS asset.
Inject via app-embed using content_for_header (effectiveness depends on theme and source order).
Preload critical CSS from a Files-uploaded asset using stylesheet_tag preload (code snippet provided).
Recent update:
Shopify’s theme update process is increasingly tolerant of modified themes; adding a stylesheet in or even editing base.css may still allow updates.
Status/next steps:
No definitive cure; several practical workarounds available. Developer forum link provided for deeper, theme-dev-specific guidance. OP acknowledged help; solution marking suggested.
Summarized with AI on December 10.
AI used: gpt-5.
In the context of customizing a theme so that it can be updated easily by the store owner I have begun setting up custom CSS in a Custom Code section in the footer. This generally works well. Unfortunately, in some instances when the connection is slower it is possible to see the underlying styling (ie, from theme.css) and then it gets changed as the CSS specified in Custom Code gets loaded.
Is there a way to balance the two - keeping the theme upgradeable without introducing undesirable styling artefacts?
Hi @tech_77
Crudest trick to fix this is animations, loaders, transition fade-in etc. That is if there’s a way to add it without the animations also loading late /shrug
Flash of unstyled content, FOUC
There is no 100% way to avoid that in all cases using custom-css settings.
Ignore what’s in the Custom-css settings and think about what it does:
It makes some CSS come AFTER other styles.
It doesn’t not magically merge/compile styles into one thing making it free of cascade or network effects.
There’s a bunch of things to do in CSS to try and minimize FOUC between different 's but it cannot fix everything and its beyond the scope of the forums to teach CSS optimization.
If fully integrated CSS is wanted then you/merchant takes over the management of that integration and all responsibilities such as upgrades. Or running a custom-app to use an app-embed to add CSS through the {{ content_for_header }} object that may or may not work depending on theme and source order of styles.
For things that aren’t one offs there’s also trying custom-liquid sections such as in a header/footer group and plunking a full content in there or call to a CSS asset file.
Yes it is a dumb system, and super weird themes in general don’t have a dedicated section for adding custom-css to come immediately after the base css; nor do most have a custom.css file, and note it’s even dumber that CSS assets can’t use {% snippet %}'s to let us really fix things like this making a pseudo build system /sigh.
If your a theme developer use the developer forum, waaaay better experience for people that know what they are doing and actual chance of a shopify-staff response on such matters.
No problem . props to you for being forward looking it’s becoming a rarity.
You can mark either post as a solution
Or if you find info countering this in the future please share and mark that as a solution.
Some themes will work fine if you add “Custom CSS” to the Header – would apply a little bit earlier.
Also – you may put some critical code into a css file, upload to Files and use Liquid filters: stylesheet_tag with preload option. This may significantly improve loading.
Also – I’ve recently found out that Shopify theme update is becoming more powerful and do not refuse some of the modified themes anymore.
So you may try adding a stylesheet in head and see if Shopify is able to process it.
Even additions to the “base.css” were processed fine, so maybe it’s not that critical.
