Shopify Theme CSS: Fixing Overrides and App Styles

Where CSS lives in a Shopify theme

A Shopify theme is a set of Liquid templates, sections, snippets and assets. Styles can come from at least six places, and a problem is much easier to fix once you know which one a rule came from.

Two practical points follow. First, any change you make directly to the theme's own files is lost when you install a newer version of the theme, because an update gives you a fresh copy of the code. Second, the order these sources load in decides which rule wins when selectors tie, and theme editor custom CSS is designed to load late so that it can override the theme.

Working out which rule is winning

When a change does not show on the storefront, do not keep adding !important. Find out why first:

1. Open the storefront, right-click the element and choose Inspect.
2. In the Styles pane, look for your rule. If it is missing entirely, the file is not loaded on that page or the selector does not match the element. If it is present but crossed out, another rule is beating it; the winning rule is listed above it with its file name.
3. Hover the file name next to each rule to see whether it comes from your file, a theme asset, the compiled section styles or an app domain.
4. Check the Network panel filtered to CSS to confirm your file actually loads, with a 200 status, on the template you are testing.

The CSS Checker adds the wider view: it validates the CSS against W3C standards, flags render-blocking and unused rules, reports specificity issues and measures stylesheet size, so you can see whether a store-wide problem such as a heavy app stylesheet sits behind the symptom you noticed.

Common reasons a Shopify override fails

• The rule is in a file that loads before the theme's stylesheet, so an equally specific theme rule later in the cascade wins.
• The theme targets the element with a longer selector, such as .product__info-container .price--large, and your rule uses a single class.
• The style is set by a CSS custom property from theme settings, so changing the property in the editor, or overriding the variable, is the correct fix.
• The browser or CDN is showing a cached file. Shopify versions asset URLs when a file changes, but a hard reload rules this out.
• The rule contains an error, such as a missing brace earlier in the file, which silently drops everything after it.

The fix, step by step

Code you can adapt

Linking your own stylesheet after the theme's

In layout/theme.liquid, find the line that loads the main theme stylesheet and add yours directly after it:

{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'custom.css' | asset_url | stylesheet_tag }}

Overriding a theme setting rather than fighting it

Many modern themes turn theme editor choices into custom properties. If the theme sets button corners through a variable, override the variable in your file instead of every button rule:

/* assets/custom.css */
:root {
  --buttons-radius: 0.25rem;
}

/* A store-specific tweak, scoped with a class you added to the section */
.fernbrook-promo .button {
  letter-spacing: 0.04em;
}

Variable names differ from theme to theme, so check the inline block in theme.liquid for the names your theme uses.

Component CSS for a custom section

{% comment %} sections/size-guide.liquid {% endcomment %}
{{ 'section-size-guide.css' | asset_url | stylesheet_tag }}

<div class="size-guide page-width">
  ...
</div>

Recent versions of the stylesheet_tag filter also accept a preload option, which Shopify documents for stylesheets needed early on the page. Use it sparingly; preloading everything cancels the benefit. For deferring non-critical CSS in general, see the render-blocking CSS guide.

Apps, checkout and other areas you cannot fully control

Apps built with theme app extensions add their CSS through app blocks and app embeds, and Shopify removes those when the app is uninstalled. Older apps sometimes wrote directly into theme files: a snippet in snippets/, a render tag in theme.liquid, a stylesheet in assets/. Uninstalling the app does not always remove those, which is why stores that have tried many apps over the years often load CSS for tools they stopped using long ago.

Some stylesheets arrive through content_for_header, which Shopify outputs in the head and which you should not edit or remove. If an app's CSS loads there on every page, the fix is in the app's settings or with its developer.

Checkout is separate from the online store theme. Theme CSS does not style it, and customisation there goes through Shopify's checkout settings and, on plans that allow it, checkout extensions. Do not expect changes in custom.css to reach checkout pages.

For speed problems on product pages specifically, the Shopify page speed guide covers images, scripts and apps together. For layout jumps on Shopify stores, see the Shopify layout shift guide.

Edge cases

• Theme updates. When you update a theme from the Theme Store, you get a new copy. Your custom.css and the line that loads it have to be added to the new copy, so keep a short note of both. Theme editor settings, including Custom CSS fields, are generally carried across, but check.
• Sass files. Older themes may contain .scss.liquid files. Shopify has deprecated Sass in themes, so compile Sass locally and upload plain CSS rather than relying on the platform to do it.
• Page builder apps. Builders that create landing pages often ship their own framework CSS. Check whether it loads only on builder pages or across the store.
• Translations and markets. Longer text in other languages can break layouts designed around English. Test your custom styles with each storefront language you publish.
• Dark colour schemes. Themes with several colour schemes apply them per section. See the dark mode guide for keeping contrast right.

Keeping a Shopify theme tidy

1. Keep all hand-written CSS in one or two files you own, with a comment at the top saying what each block is for.
2. Never edit a live theme directly; always duplicate first.
3. When you uninstall an app, check its removal notes and search the theme for leftovers the same day.
4. Re-run the CSS Checker after installing an app or updating the theme, and compare the stylesheet list with your map.
5. Keep the theme in version control with Shopify CLI or the GitHub integration, so you can see exactly what changed and when.