Use Custom CSS only after the design is settled
Open Website Editor > Style and find Custom CSS. Custom CSS is useful when the standard theme and editor controls cannot make a small, intentional refinement. It is not a substitute for choosing a readable theme, fixing content structure, or using the right component.
Plan availability: Custom CSS is a Scale feature in the active production matrix. Theme customization with colors and fonts is Free. Legacy Lifetime retains all platform features. Because CSS is site-wide, a rule can affect pages, product cards, forms, and checkout at once.
Apply a safe change
- Write down the visual problem and the smallest selector that solves it.
- Enable Enable custom CSS only when the stylesheet is ready to test.
- Keep the CSS short, commented in your own notes, and limited to known site classes.
- Select Save Custom CSS, then inspect desktop, tablet, mobile, product detail, cart, and checkout.
- Disable or simplify the rule immediately if it hides a button, reduces contrast, or changes customer-facing form behavior.
What customers see
Customers see the generated theme plus your saved Custom CSS on every affected page. A change that looks correct on the homepage can make a checkout button inaccessible or make a product card unreadable on a phone.
Common problems
- The Custom CSS card is locked. Confirm the active matrix; the control is separate from Free theme customization.
- One selector changes too much. Narrow the selector and remove broad element rules such as all buttons or all headings.
- The live site still shows the old style. Confirm the save completed, then refresh the public site and account for cached CSS.
- A theme update breaks the rule. Prefer editor controls when available and revisit custom selectors after changing themes.
Next steps
Keywords
Custom CSS, Enable custom CSS, Save Custom CSS, Scale, site-wide CSS, mobile layout, checkout styling, theme selector