Theming and branding
Make your embeds and storefront match your brand — logo, brand colour, light or dark appearance, font, corner rounding and button text.
For developersLast updated
On this page
Your embeds and storefront share one look, set in Settings → Embed & storefront → Look & feel. Your logo comes from Settings → Organisation. Owners and admins can change both; other members see them read-only.
Look & feel#
Changes show in the Live preview as you make them. Select Save to publish them, or Reset to go back to what's saved. Customers see saved changes within about a minute.
| Setting | Options | Default |
|---|---|---|
| Brand colour | Any hex colour, e.g. #1d1a16. Used for buttons, links and highlights. | ShowTix blue (#0189fe) |
| Accent | Any hex colour. | Same as brand |
| Appearance | Light, Dark or Match device (follows the customer's light/dark setting). | Light |
| Font | Inter (default), System UI, Serif, Rounded, Monospace. None of them downloads a web font. | Inter |
| Corner rounding | 0–24px, for buttons, cards and fields. | 12px |
| Button text | Up to 40 characters — the label on buttons the loader renders and in generated snippets. | Get tickets |
Text on your brand colour switches between white and near-black automatically so it stays readable. If you pick a light colour that's borderline, you'll see "This colour is light — button text may be hard to read. Try a deeper shade."
Accent colour
The accent colour is saved with your branding, but the current embed and storefront design is driven by your brand colour — changing the accent has no visible effect there yet.
A small "Powered by ShowTix" line always stays at the foot of the embed and storefront.
Logo#
Upload your logo in Settings → Organisation → Branding → Logo. It appears at the top of your storefront and embeds; without one, your organisation name is shown as a wordmark. It's also used in the organisation switcher in the ShowTix console.
The Branding section also has Primary colour and Accent colour pickers — these are the same values as Brand colour and Accent in Look & feel, so changing either place updates both.
Per-button overrides#
On a page that uses the loader, a button you let ShowTix render (an empty <div data-showtix-button>) can override the theme just for that button:
| Attribute | Effect |
|---|---|
data-label | Button text. |
data-color | Button background colour. |
data-text-color | Button text colour. |
data-radius | Corner rounding. |
<div data-showtix-button data-label="All dates" data-color="#1d1a16"></div>If you use your own <button> or <a> with data-showtix-button, it keeps your site's styling entirely. The checkout inside the frame always uses your saved Look & feel. See embed styles.
Was this article helpful?