Advanced custom CSS
When and how to use Custom CSS safely in Studio Arcana.
Prefer Theme settings and section settings before Custom CSS. Use CSS only for small brand tweaks that settings cannot cover.
Sales channels > Online Store > Themes > Customize > Theme settings > Custom CSS (or section Custom CSS where available)
Prefer settings first
- Colors → Color schemes
- Typography → fonts
- Shape and spacing → radii and density
- Section layout and padding controls
Safer CSS habits
- Scope selectors under a section id or .shopify-section when possible.
- Prefer CSS variables the theme already exposes over hard-coded hex.
- Avoid !important except as a last resort.
- Do not hide focus outlines.
Risks
- Theme updates may change class names — settings-based changes survive better.
- Global CSS can break app blocks and checkout-adjacent surfaces.
- Large CSS payloads hurt performance; keep Custom CSS short.
Troubleshooting
- Rule not applying — specificity or wrong template; inspect in DevTools.
- Looks fine in editor, wrong live — hard-refresh or another device cache.
- Broken after update — temporarily clear Custom CSS to isolate the cause.
Was this page helpful?
Content is maintained by Arcanum Hollow Labs. For internal engineering notes, see the docs/ folder in the monorepo.