How to Fix CSS in Shopify Themes
Shopify CSS sits in base.css, section-specific stylesheets, app-injected CSS and your custom additions via theme.liquid. The split is messier than WordPress but easier to audit because everything lives in the theme files. This guide covers the Shopify-specific CSS workflow. Pair with CSS Checker guide and page speed.
Step-by-step: How to fix Shopify theme CSS
- Audit CSS weight. DevTools → Coverage tab. Shopify stores often load 100-300KB CSS with 50-70% unused per page. Dawn ships with around 80KB base.css plus per-section CSS loaded conditionally.
- Identify CSS sources. View source: theme CSS (base.css and section-*.css), app CSS (cdn.shopify.com/extensions/...), inline CSS in theme.liquid. Classify per file.
- Edit base.css for theme tweaks. Online Store → Themes → Edit code → assets/base.css. For small changes, easier to add custom CSS via Theme settings → Custom CSS (in 2.0 themes) which lives in section settings.json.
- Use theme.liquid for site-wide additions. Add <style>...</style> block in theme.liquid head for small site-wide CSS. For larger custom CSS, create assets/custom.css and load it via {{ 'custom.css' | asset_url | stylesheet_tag }}.
- Audit app CSS impact. Apps inject CSS from CDN URLs. Use DevTools Coverage to see which app CSS is unused on which pages. Some apps have settings to load CSS only on relevant pages (cart apps only on cart, etc.).
- Resolve specificity conflicts. Use DevTools Computed tab to see which CSS rule wins. Increase specificity in your custom CSS (chain selectors) rather than using !important. !important wars between apps and theme are common but resolvable with proper specificity.
- Test theme settings. Shopify 2.0 themes have extensive theme settings. Test colour scheme, dark mode, font choices to ensure your custom CSS doesn't break under different settings.
Frequently Asked Questions
Should I edit base.css directly in Shopify?
Acceptable for small tweaks. But: theme updates may overwrite base.css. For long-term sustainability, use a custom.css file you create, or put CSS in theme.liquid <style> block. Document changes so you can re-apply after theme updates.
How do I add CSS only to certain Shopify pages?
Use liquid conditionals in theme.liquid: {% if template == 'product' %}<link rel='stylesheet' href='{{ 'product.css' | asset_url }}'>{% endif %}. Or use section-specific CSS in 2.0 themes (Dawn's pattern — each section has its own .css file loaded only when used).
Why does my Shopify store have CSS specificity wars?
Apps and themes both want their styles to win. Apps typically use !important liberally; themes try to be polite. Result: visual bugs when apps override theme styles unpredictably. Resolution: increase your custom CSS specificity higher than the offending app, or contact app vendor.
Can I use Tailwind CSS in Shopify?
Yes via Shopify Hydrogen (built-in support) or by bundling Tailwind into a custom theme. Standard Shopify themes don't include Tailwind; you'd add it as a custom build step. Most stores stick with theme CSS — Tailwind doesn't offer enough benefit to justify the complexity.
How do I purge unused CSS in Shopify?
Tools like PurgeCSS, UnCSS or PostCSS-Purgecss can analyse your built theme and remove unused selectors. Requires a build pipeline (not standard Shopify workflow). Most stores accept some CSS bloat as the price of using theme features.