How to Add Custom CSS to Your Shopify Theme

Custom CSS lets you customize your Shopify store beyond built-in theme settings. Whether you want to refine design details, improve mobile usability, or create a more consistent brand experience, CSS gives you greater control. This guide, NextSky covers how to add custom CSS Shopify theme, common use cases, limitations, and best practices for 2026. 

What custom css actually does in Shopify

A cascading style sheet (CSS) controls how HTML elements appear, colours, typography, spacing, borders, hover states, animations, and responsive behaviour. In Shopify, the custom CSS feature lets you extend your theme’s design without editing core theme files.

You can apply custom CSS in two official ways:

• Theme-wide: Affects almost every page in your store (except Checkout).
• Section-specific: Scoped only to one section, reducing the risk of unintended side effects elsewhere.

Custom CSS works by overriding your theme’s default styles. This means your rules take precedence when they have equal or higher specificity. It is ideal for visual polish, not for adding new functionality or changing page structure.

Important limitations you must know

Before writing any code, understand Shopify’s guardrails. These exist for security, performance, and to keep themes stable across updates.

Key restrictions include:

• Unsupported at-rules: You cannot use @import, @charset, or @namespace anywhere in custom CSS.
• Section-level CSS only allows: @media, @container, @layer, and @supports.
• You cannot target the outer Shopify-section wrapper’s ID or classes directly from section-level CSS.
• No content property is permitted.
• URLs are restricted to the https://cdn.shopify.com domain only.
• Character limits: 1,500 characters for theme-wide custom CSS and 500 characters for section-level CSS.
• Theme updates can break custom CSS if Shopify changes class names or HTML structure.
• Checkout page does not support custom CSS through this feature.

Custom fonts can enhance your storefront’s look, but they also add extra resources that may affect page speed. Always test performance after adding new fonts. Shopify only supports customizations covered in its documentation, so any issues caused by advanced edits must be resolved independently. 

How to add custom css to your entire theme (official method)

This is the simplest and safest starting point for most store owners.

1. Go to your Shopify admin → Online Store → Themes.
2. Click Customize on your active theme.
3. In the theme editor, click Theme settings (gear icon, usually bottom left).
4. Scroll to the bottom and click Custom CSS.
5. Paste or write your CSS rules.
6. Click Save.

Changes appear immediately in the preview and on your live store (except Checkout).

Best for: Quick brand tweaks, button styling, global typography adjustments, and fixing minor visual inconsistencies.

How to add custom css to a specific section

When you need changes only to one part of a page, section-level CSS is cleaner and more maintainable.

1. In the theme editor, click the section you want to customize.
2. Scroll to the bottom of the section settings panel.
3. Click Custom CSS.
4. Add your rules (these apply only inside that section).
5. Click Save.

Because the CSS is scoped, you can be more aggressive with selectors without worrying about breaking other areas of the site.

Advanced approach: Using a dedicated custom css file

Many experienced developers create a custom.css file in the theme’s Assets folder and link it in theme.liquid. This approach removes character limits and allows better code organization for large projects.

How it works (high-level):

• Create custom.css in Assets.

• Write all your custom rules in the new file.

Important: Direct edits to theme files can be overwritten during theme updates. Custom CSS added through the theme editor is generally safer and more update-friendly. Use file-level edits only when necessary, and always create a theme backup before making changes.

Working smarter with modern themes (Dawn & OS 2.0+)

Most current Shopify themes, especially Dawn and its derivatives, rely heavily on CSS custom properties (variables) defined in :root. Instead of overriding dozens of individual selectors, you can often change a handful of variables and let the cascade do the work.

Example of efficient overrides:

CSS

:root {

  /* Brand color tokens */

  --color-base-accent-1: #c1121f;      /* Primary buttons & links */

  --color-base-accent-2: #457b9d;      /* Secondary accents */

  /* Typography */

  --font-body-family: 'Inter', system-ui, sans-serif;

  --font-heading-family: 'Playfair Display', Georgia, serif;

  /* Spacing scale */

  --spacing-sections-desktop: 72px;

  --spacing-sections-mobile: 40px;

}

This single block can transform large portions of a Dawn-based store with minimal code. It is also far easier to maintain when your brand colors or fonts evolve.

Best practices for long-term success

• Duplicate your theme before making significant changes. Use the duplicate as a safe testing environment.
• Comment your code generously. Six months later you (or a developer) will be grateful.
• Prioritize CSS custom properties over repetitive selector overrides when working with Dawn or similar modern themes.
• Keep specificity reasonable. Avoid !important except as a last resort for third-party elements you cannot otherwise control.
• Test performance. Large custom fonts or complex animations can hurt Core Web Vitals (especially LCP and INP).
• Use container queries inside section CSS where helpful — they are supported and excellent for responsive components that appear in different contexts.
• Document changes. Keep a simple changelog at the top of your CSS noting dates and purpose.

Troubleshooting: why your css might not be working

Common causes and fixes:

• Specificity conflict: The theme’s selector is more specific. Increase your selector’s specificity or use DevTools to inspect the exact rule winning.
• Theme update broke selectors: Class names changed. Re-inspect the element and update your rules.
• Caching: Hard refresh (Ctrl/Cmd + Shift + R) or check in an incognito window.
• Character limit exceeded: Split rules between theme-wide and section CSS or move to a dedicated file.
• Section scoping: Rules written for theme-wide CSS won’t automatically apply inside a section if specificity is too low.

Open your store, right-click the element → Inspect, and examine the Styles panel in DevTools. This is the fastest way to discover the exact class names Shopify is using.