Storefront Theme, Colors, and Background
The storefront ships with 7 preset themes and supports a custom accent color. Everything is configured in the admin panel.
Path: Admin panel → Storefront Appearance → Design
Preset Themes
Tirify comes with 7 themes. Each changes the color scheme of the storefront.
| Theme code | Name | Character |
|---|---|---|
red_black | Red/Black | Dark, red accent, sharp corners (6/10/14) |
dark_blue | Dark Blue | Dark, blue accent (6/10/16) |
light_clean | Light Clean | Light, clean minimalism (6/10/16) |
dark_red | Dark Red | Dark, deep red (4/8/12) |
green_military | Green Military | Dark, military green, square corners (2/4/8) |
purple_neon | Purple Neon | Dark, neon purple, rounded corners (6/12/20) |
minimal_grey | Minimal Grey | Light, monochrome (4/6/10) |
A theme controls:
- Background colors (
--background,--card,--popover) - Text color (
--foreground,--muted-foreground) - Accent color (
--primary,--primary-foreground) - Border colors (
--border) - Border radii (
--theme-radius-sm/md/lg)
Accent Color
In addition to the theme, you can override the store's accent color:
- HEX picker in the admin panel → "Accent color"
- Applied as
--primary(buttons, links, active elements) - Overrides the theme's default accent
Page Background
Background URL — URL of the image displayed as the full-storefront background.
- Image is stretched to fill the screen (
cover) - Overlay opacity — darkening layer over the background (0 = no overlay, 0.8 = near black)
- Implemented via
body::before(overlay) andbody::after(image) - Image is fixed (
fixed) and does not scroll
Use a URL from your CDN or file hosting. The image must be accessible over HTTPS. Do not use relative paths.
Favicon
Favicon URL — the store icon shown in the browser tab.
- URL of a PNG file (48×48 minimum recommended, 180×180 preferred)
- The system automatically generates sizes: 16×16, 32×32, 48×48, 180×180 (apple-touch-icon)
- Source: favicon-32 (canonical URL)
Color Mode (Light / Dark)
By default the storefront respects the user's system theme (prefers-color-scheme). The store owner can:
- Lock the theme — uncheck "Allow theme switching"
- The storefront then always uses the theme set by the owner
- The theme toggle in the header is hidden
How Themes Are Applied
When you save a theme in the admin panel, the storefront updates instantly — no page reload required. The selected theme and accent color are automatically applied to all storefront elements.
Border Radius
A single radius scale is used across the storefront:
| Class | Value | Used for |
|---|---|---|
rounded-sm | 6px | Badges, chips, inputs |
rounded-md | 10px | Buttons, controls |
rounded-lg | 12px | Cards, panels, tiles |
rounded-xl | 16px | Banners, large modals |
A theme can override these values via --theme-radius-sm/md/lg.
Next Steps
- Custom CSS/JS — advanced customization
- Widgets — what to show on the homepage
- Pages — content pages
- Links — links & menu