Stilo CSS Editor help

Stilo CSS Editor · Checked against the app on 9 October 2026

Stilo lets you add your own CSS to your store from the theme editor, with a live preview, without opening theme code. Your CSS is saved with your theme and served by Shopify, so there is nothing extra to load from outside servers and no storefront JavaScript.

Setup (about one minute)

1. Install Stilo from the Shopify App Store. You land on a short welcome page.
2. Click Open theme editor. The editor opens on App embeds with Custom CSS already switched on and its settings open. (Or go to Online Store > Themes, click Customize or Edit theme, whichever your admin shows, then click the App embeds icon in the left sidebar and switch on Custom CSS.)
3. Paste your CSS into the CSS Code box. The preview updates as you type.
4. Click Save. Your styles are live.

Inside the theme editor a small black note appears at the bottom left of the preview telling you what Stilo is doing ("Stilo is on...", "applied to this page", "set for other pages" or "switched off"). When your CSS is applied to the page you are previewing, the note also carries a "Leave a review" link. Shoppers never see this note: it only exists inside the editor and fades after about ten seconds.

Stilo is a single app embed called Custom CSS. It is not a section or block, so you will not find it under Add section.

Settings

All settings are under App embeds > Custom CSS.

Your CSS loads in the page <head>, after the theme's own stylesheet in most themes, so your rules win ties.

Writing your first rule

1. Open your store, right-click the thing you want to change and choose Inspect (or press F12).
2. In the panel that opens, find the element's class, for example class="header__heading-link".
3. Write a rule using that class with a dot in front:

.header__heading-link {
  font-size: 28px;
}

4. Paste it into CSS Code and watch the preview.

If nothing changes, the theme's own rule is more specific than yours. Add !important before the semicolon (font-size: 28px !important;) or make your selector more specific (.header .header__heading-link).

Organise a long stylesheet with comments, for example /* Header */ and /* Product page */, so you can find things later.

Recipes (Dawn and Dawn-based themes)

Class names differ between themes. These match Dawn, Refresh, Sense, Craft and most free Shopify themes. On other themes use Inspect to find the equivalent class.

Hide the "Sold out" badge:

.badge.price__badge-sold-out { display: none !important; }

Make the Add to cart button your brand colour:

.product-form__submit {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-radius: 6px;
}

Hide the quantity selector on product pages (set Apply to: Product pages):

.product-form__quantity { display: none !important; }

Bigger product titles on mobile only:

@media (max-width: 749px) {
  .product__title h1 { font-size: 26px !important; }
}

Hide the announcement bar on the homepage only (set Apply to: Homepage only):

.announcement-bar-section { display: none !important; }

FAQ

Is Stilo free?

Yes. There is no paid plan and no limit on how many pages you style.

My theme already has a Custom CSS box. Why use Stilo?

Recent Shopify themes do have a Custom CSS field (in Theme settings and on each section), and it is a good option for short tweaks. Shopify's help page lists its limits: 1500 characters for theme-wide CSS and 500 per section, no content property, no @import, and URLs only from cdn.shopify.com (help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css, checked 9 Oct 2026). Stilo does not add those rules: it places your CSS in the page as you wrote it, lets you aim it at one page type, and lets you switch it off without deleting it. Use whichever suits the job; they work together.

Does Stilo edit my theme files?

No. Your CSS is stored in the theme's settings for the Custom CSS embed, not written into theme files. Updating your theme to a new version keeps your settings in most cases, but keep a copy of large stylesheets somewhere safe.

Does it slow my store down?

Stilo adds your CSS as a short style tag in the page head. It loads no script on the storefront and makes no calls to outside servers. A stylesheet of a few hundred lines is a few kilobytes.

Can I have different CSS for different pages?

Stilo has one Custom CSS embed, so one Apply to choice. For mixed needs, leave Apply to on All pages and scope rules with your theme's page classes. Many themes add a template class to <body> (inspect the body tag to check), for example:

body.template-product .price { font-size: 22px; }

Does my CSS move with me if I change theme?

CSS is saved per theme. Duplicating a theme copies it. A brand-new theme starts empty: open the embed on the old theme, copy your CSS, switch the embed on in the new theme and paste. Expect to adjust selectors, because class names differ between themes.

Can I use Google Fonts or @import?

Yes. Stilo does not filter at-rules, so @font-face, @import and URLs on other domains all work. Put any @import lines at the very top of the CSS Code box, because browsers ignore an @import that comes after other rules. Each external file is one more download before the page looks right, so for speed we suggest uploading font files to Content > Files and pasting the rules in rather than using @import.

Can I add JavaScript?

No. Stilo is CSS only, by design.

Will this work on checkout?

No. Checkout is run by Shopify outside your theme, and theme apps cannot style it. On Shopify Plus, checkout styling is done through the checkout editor and branding settings.

Which themes does it work with?

Any theme with App embeds in the theme editor, which includes every current Shopify Theme Store theme and most older themes.

Troubleshooting

My CSS does nothing.

1. Check the editor note at the bottom left. "Switched off" means Enable custom CSS is off. "Set for other pages" means Apply to points at a different page type than the one you are previewing.
2. Check you clicked Save.
3. Check the selector exists on the page: right-click the element, Inspect, and compare class names exactly (they are case-sensitive).
4. The theme's rule may be more specific. Add !important.
5. A missing } or ; breaks every rule after it. Paste your CSS into a free validator such as jigsaw.w3.org/css-validator to find the typo.

It works in the editor but not on my live store.

You may have edited a draft theme. Embeds and their CSS are saved per theme, so the published theme needs the embed switched on and the CSS pasted too. Also try a hard refresh (Ctrl + Shift + R, or Cmd + Shift + R on Mac) to clear your browser cache.

My store looks broken after a change.

Switch Enable custom CSS off and save. The store goes back to normal instantly, and your CSS is kept so you can fix it.

The </ in my CSS looks different when I view the source.

Stilo writes </ as <\/ so CSS can never break out of its style tag. In CSS the two mean the same thing, so this does not change how your styles work.

Uninstalling

1. Go to Settings > Apps and sales channels, find Stilo CSS Editor and click Uninstall.
2. The embed is removed and your styles stop loading straight away. Nothing is left in your theme files, because Stilo never wrote to them.

Copy your CSS out of the CSS Code box first if you want to keep it.

Still stuck?

Email support@digitalcartel.online with your store address, your theme name and the CSS you are trying. A real person (the developer) reads every message.