Custom CSS

Add your own CSS for anything the Appearance settings can't reach.

The Appearance settings cover shape, size, spacing, colours and states. For anything beyond that — an unusual breakpoint, a nudge against a stubborn theme rule, a tweak to how the swatches sit next to your add-to-cart button — there's a CSS editor.

Turn it on

1. Go to Settings → General.

2. Turn on Enable Custom CSS.

3. Write your rules in the editor that appears.

4. Click Save.

Turning Enable Custom CSS on reveals a code editor below it.

Insert your own CSS to modify the widget's layout, colors, typography, or spacing.

Practical advice

• Try Appearance first. A rule you write by hand won't follow along when you switch styles, and it can fight the style's own settings.

• Scope your selectors to the app's containers so you don't affect the rest of the page.

• Change one thing at a time and check the storefront after each save — including on a phone.

• Keep a copy of what you write somewhere outside the app.

• Avoid !important unless you've confirmed nothing else works; it makes the next change harder.

Where else CSS can live

The Globo Color Swatch app embed in the Theme Editor also has Custom css and Custom js fields. Prefer the app's editor: settings there stay with the app when you switch or duplicate themes, while anything in the app embed belongs to that one theme.

If you'd rather not write CSS, contact support — our engineers adjust swatch styling to match a theme at no cost.

Related pages

• General

• Customize a swatch style