Theme and custom CSS
Use theme settings to make the online shop match your brand while keeping checkout readable and reliable. Use custom CSS only when theme controls cannot express the required change.
This article is for organizers and technical staff who maintain the customer-facing shop.
Before you start
Prepare:
- logo and favicon files
- brand colors for buttons, text, backgrounds, and alerts
- font requirements
- examples of pages or checkout states that must be checked
- approval from the team responsible for legal, analytics, and checkout behavior when snippets are involved
Open the theme editor
In the back office, open Shops, select the shop, and open Theme.
Use theme controls for colors, typography, spacing, borders, button styles, semantic colors, media, and contrast checks.
Use theme settings first
| Area | What to check |
|---|---|
| Brand assets | Logo and favicon are current, readable, and not distorted. |
| Colors | Text, surfaces, buttons, borders, alerts, and links have enough contrast. |
| Typography | Fonts are readable on mobile and support the shop languages. |
| Spacing and borders | Cards, forms, and checkout controls remain easy to scan. |
| Semantic colors | Error, warning, success, and informational states remain distinct. |
| Preview | Check light, dark, or high-contrast modes when available. |
Publish the theme only after reviewing the shop home page, offer detail page, cart, checkout, and payment or confirmation state.
Use snippets carefully
Open Code snippets only when you need approved custom CSS, analytics tags, consent-manager code, trusted-shop badges, or partner scripts.
Use Add custom CSS for small styling adjustments. Use Add HTML/JavaScript snippet only for scripts that have been approved and tested.
Safe custom CSS checklist
Before publishing CSS:
- scope selectors to the intended shop area
- avoid hiding required form labels, payment controls, or legal checkboxes
- test desktop and mobile
- test long event names, sold-out states, error messages, and required fields
- keep a record of what the CSS changes and who owns it
- remove obsolete CSS after theme settings can replace it
Expected result
The shop reflects the organizer's brand, remains readable on mobile and desktop, and lets customers complete checkout without layout, contrast, consent, or payment issues.
Troubleshooting
| Problem | What to check |
|---|---|
| Text is hard to read | Theme color contrast, semantic colors, custom CSS overrides, and image backgrounds. |
| Checkout layout looks broken | Recent snippets, long labels, mobile width, required fields, legal checkboxes, and payment provider frames. |
| Theme changes are not visible | Unpublished draft state, browser cache, shop domain, and whether you are viewing the correct shop. |
| Analytics or consent stopped working | Snippet order, consent manager settings, blocked scripts, and checkout-page restrictions. |
| A custom style affected another page | Selector scope, shared components, page builder blocks, and inherited CSS. |
