Add custom CSS to your storefront for styling that goes beyond what the visual settings expose.
Theme Editor > Custom CSS
The Custom CSS panel provides a code editor for adding arbitrary CSS rules to your storefront. Use it for anything that the visual theme settings do not cover — custom hover effects, hiding specific elements, or fine-tuning responsive behaviour.
Click Apply changes. The preview updates immediately.
Click Save in the editor top bar to push the changes to the live storefront.
The CSS is injected after all theme styles, so your rules take precedence. The editor starts locked to prevent accidental edits — unlock it each time you need to make changes.
Custom CSS is sanitised on the server before it is saved. @import and @charset rules are removed, and every url(...) expression is replaced with none. This means background images, webfonts loaded via @font-face, and content: url(...) rules silently break. To use image or font assets, use the theme settings (for example Typography) or load them via custom scripts instead.
Every theme setting is available as a CSS variable. Reference them in your custom CSS to stay consistent with the rest of the theme — if you later change a colour in the Colors panel, your custom CSS picks up the change automatically.
View the full list of CSS variables in the Theme style panel.
Custom CSS is applied globally to every page of your storefront, and saved changes go live immediately. Test across multiple pages and viewports before you save.
