Theme settings
Set colors, corner radius and heading font once and apply them across your storefront.
The theme controls how every fragment on your storefront looks. Change it once and the whole site follows.
Site-wide theme
Open the theme panel in the editor to set:
| Setting | What it controls |
|---|---|
| Primary color | Buttons, links, highlighted text and active tabs. |
| Background | The page background behind all fragments. |
| Surface | Cards, panels and the package tiles. |
| Text | Body text and headings. |
| Corner radius | How rounded cards, buttons and inputs are. Set it to zero for a sharp, blocky look. |
| Heading font | The font used for headlines across the site. |
Per-fragment overrides
Select a fragment and open its theme override section to change any of the settings above for that fragment only. This is useful when you want a single section to stand out, like a sale banner in a different color.
Overrides stay attached to the fragment. If you later change the site-wide theme, fragments with an override keep their own value for that setting and follow the theme for everything else.
To remove an override, reset it in the fragment's theme section. The fragment goes back to following the site-wide theme.
Tips
- Keep enough contrast between text and background. Players browse on all kinds of screens.
- Use the primary color sparingly, for the actions you want players to take.
- A smaller corner radius usually fits blocky games and survival servers; a larger one fits softer, roleplay-style brands.
Browser tab and sharing
At the bottom of the Theme tab:
- Browser tab icon: a square image shown in the browser tab. Without one, the navbar logo is used.
- Share image: shown when someone shares your store on Discord or social media (1200×630 works best). Without one, Airupt makes one in your theme's colors.
- Description: one or two sentences for search engines and link previews.
Each page can override the description and share image in its page settings (the pencil next to the page in the Layers tab).