How to add custom CSS to Shopify (2026): every option compared
By Digital Cartel · Listing data checked 9 October 2026
Disclosure: we are Digital Cartel, and we build Stilo CSS Editor, one of the options below. Shopify's built-in field is free and is the right answer for many stores; we say when.
There are four ways to add your own CSS to a Shopify theme. Which one fits depends on how much CSS you have, whether you want to touch theme code, and whether you need it to survive theme updates.
The four options at a glance
| Theme settings > Custom CSS (built in) | Section Custom CSS (built in) | Edit theme code | A CSS app | |
|---|---|---|---|---|
| Cost | Free | Free | Free | Free to $7.95/mo (see below) |
| Where | Theme editor > Theme settings > Custom CSS | Theme editor > any section > Custom CSS | Online Store > Themes > Edit code | Theme editor (app embed) or app admin |
| Length limit | 1500 characters | 500 characters per section | None | Depends on app |
| Live preview | Yes | Yes | No (save and reload) | Yes, for theme editor apps |
@import, content property, non-Shopify URLs | Not allowed | Not allowed | Allowed | Allowed in most apps |
| Survives theme updates | Usually (settings carry over) | Usually | No: your edits can be overwritten or lost when you update the theme | Usually (settings carry over) |
| Risk of breaking the theme | Low | Low | Higher | Low |
| Target one page type | No (scope with selectors) | Only that section | Yes, with Liquid | Some apps |
Limits for the built-in fields are from Shopify's Help Center, "Add custom CSS" (help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css), checked 9 October 2026.
Option 1: Theme settings > Custom CSS (built in)
- Go to Online Store > Themes and click Customize (labelled Edit theme in newer admins).
- Click the Theme settings gear icon, then Custom CSS.
- Paste your CSS and click Save.
Use it when you have a few short rules. It is free, built in, and previews live.
Limits to know (from Shopify's help page): the box takes 1500 characters for the whole theme; @import, @charset and @namespace are not allowed; the content property is not available (so no custom icons or labels with ::before/::after); and URLs must be on cdn.shopify.com. Custom CSS is not supported on checkout.
Option 2: Section Custom CSS (built in)
- In the theme editor, click any section.
- Scroll to the bottom of its settings to Custom CSS.
- Paste rules for that section only.
Use it when you want to change one section, such as a single banner. Rules are automatically scoped to that section. The limit is 500 characters per section, and only @media, @container, @layer and @supports at-rules are allowed.
Option 3: Edit theme code
- Go to Online Store > Themes > ... > Edit code.
- Open
assets/base.css(Dawn and most free themes) or create a new fileassets/custom.css. - If you create a new file, load it in
layout/theme.liquidjust before</head>:
{{ 'custom.css' | asset_url | stylesheet_tag }}Use it when you have a lot of CSS, you are comfortable with code, and you keep a copy of your changes. Be aware that theme updates replace theme files, so edits to base.css are lost when you update to a new theme version. A separate custom.css is easier to carry over, but you still need to re-add it after an update. Always duplicate your theme before editing.
Option 4: A CSS app
Apps keep your CSS out of theme files and get around the built-in length limit. Here is what is on the App Store today.
| App | Rating (reviews) | Price | How it works | Page targeting | Notes |
|---|---|---|---|---|---|
| Stilo CSS Editor (ours) | New, no reviews yet | Free | App embed in the theme editor, live preview | All pages or one page type | No storefront JavaScript, switch off without deleting |
| Easy Custom CSS | 4.0 (2) | Free plan; Premium listed at $1,995/mo for premium support | App admin with syntax highlighting, applied to a chosen theme | Not stated | Launched 2021 |
| Designy CSS Visual Editor | 5.0 (2) | Starter free (1 element, no app blocks); Unlimited $7.95/mo or $47.95/yr | Point-and-click visual editor, no CSS needed | Per element | Desktop, mobile and hover states, animations |
| BL Custom HTML CSS JS Liquid | 5.0 (2) | Free | Snippets of HTML, CSS, JS and Liquid, site-wide or in chosen sections | Global or by section | Also runs JavaScript and Liquid |
Data from each linked listing, 9 October 2026.
Pick Stilo if you write CSS and want a longer box than the built-in one, live preview, page-type targeting and nothing extra loading on the storefront.
Pick Designy if you do not write CSS and would rather click on elements and adjust them visually.
Pick BL Custom if you also need to add JavaScript or Liquid snippets.
Pick Easy Custom CSS if you prefer editing CSS in an app admin screen with syntax highlighting.
Finding the right selector
Whichever option you use, the hard part is finding what to target:
- On your storefront, right-click the element and choose Inspect.
- Look for its
class, for exampleclass="product-form__submit button". - Write a rule with a dot before the class:
.product-form__submit { ... }. - If nothing changes, the theme's rule is more specific. Add
!important, or prefix a parent class.
Custom CSS not working? Quick checks
- Saved? Built-in fields and apps both need Save in the theme editor.
- Right theme? CSS in the theme editor applies to the theme you are editing, which may not be the live one.
- Over the limit? The built-in box rejects CSS over 1500 characters (500 per section).
- Blocked rule?
@import,contentand non-Shopify URLs are refused by the built-in fields. - Typo? One missing
}breaks every rule after it. Run your CSS through jigsaw.w3.org/css-validator. - Cache? Hard refresh with Ctrl + Shift + R (Cmd + Shift + R on Mac).
FAQ
Does Shopify have a built-in CSS editor?
Yes. Online Store 2.0 themes have a Custom CSS field in Theme settings and on each section. It is limited to 1500 characters theme-wide and 500 per section.
Can I add more than 1500 characters of custom CSS?
Not in the built-in Theme settings field. Edit theme code (Option 3) or use an app (Option 4).
Will custom CSS slow down my store?
A few kilobytes of CSS has no noticeable effect. Large external font files and @import of other stylesheets are what slow pages down.
Will my custom CSS survive a theme update?
CSS in theme settings and app embeds usually carries over. Edits made directly in theme files do not. Class names can change between theme versions, so check your store after updating either way.
Can I style the Shopify checkout with CSS?
No. Custom CSS is not supported on checkout. On Shopify Plus, use the checkout editor and branding settings.
Last checked 9 October 2026. Spotted something out of date? Email support@digitalcartel.online.