You decide to change your primary brand colour from one shade of orange to another. In most WooCommerce setups, that means: theme customiser, email plugin, PDF invoice plugin, review widget settings, loyalty program theme. Five places, five re-uploads of the logo, five chances to miss one. The shop ends up half-orange, half-the-old-orange, looking faintly broken.
The Designer and Brand Hub means you change it in one place, and every Tracksies surface picks up the new colour. The buttons in the admin UI, the header band on the PDF invoice, the stars on your reviews, the loyalty badges, the review-request email heading: all updated together, all matching, all the moment you saved the change.
What you control
Colours
Every Tracksies surface reads from the same set of colour variables:
- Primary: buttons, links, active states.
- Secondary: secondary buttons.
- Accent: highlights.
- Surface: card and panel backgrounds.
- Background: page and section backgrounds.
- Border: dividers and borders.
- Text and text-light: body text.
- Rating star and rating star empty: review stars.
- Plugin-specific variables (loyalty points, tier badges, review verified marks) fall back to these defaults where you haven’t overridden them.
Typography
Fonts get captured from your theme automatically on the first frontend page load. A small JavaScript snippet reads the computed font styles from your live site and stores them in a transient; the Designer preview then uses the same fonts your customers see. No manual font upload; no “which font is even in my theme?” guesswork.
If you change your theme’s fonts later, hit the URL ?tracksies_refresh_fonts=1 on any frontend URL (while logged in as admin) to re-run the capture. The new fonts get picked up and applied.
Border radius
Four levels: none, subtle, medium, rounded. Applies consistently to buttons, cards, inputs, and panels across every Tracksies surface. One setting; a flat-modern shop stays crisp; a soft-friendly shop stays rounded.
Shadows
Three levels: card, card-hover, elevated. Wherever Tracksies renders card-like UI, these shadows apply. Matches whatever feel your brand has: flat, soft, bold, subtle.
Logos
Four variants for different rendering contexts:
- Primary: the main logo, used on emails, PDFs, admin UI.
- Icon: a small square mark for favicon-size spots.
- Dark: a version that reads on dark backgrounds.
- Light: a version for use over light or coloured backgrounds.
Upload each one once; the right variant shows up where context demands.
Where the settings flow through
- Tracksies admin UI: primary colour on buttons and active tabs.
- Customer emails: header colour, logo, button styling, font.
- PDF invoices and packing slips: letterhead logo, table header colour, typography.
- Trustie review widget: star colour, card styling, button colour.
- Trustie review pages: inherits colours, fonts, radius.
- Packsie staff dashboard: consistent with admin UI so staff don’t get style-shift between screens.
- Perkie loyalty UI: points colour, tier colours, badge styling.
- Squizzie reports: brand colours in charts and PDFs.
Not a theme replacement
The Designer doesn’t style your theme or your product pages. Your WordPress theme handles that, and Tracksies respects whatever you’ve already built. What it styles is the surfaces Tracksies itself renders: admin tools, emails, PDFs, widgets, review pages, loyalty UI. The places where inconsistent branding is most visible (and most fixable). Your theme stays your theme.
If you’re weighing this up against a full-site design-system tool
YITH Theme Builder and similar theme-level design systems let you theme WooCommerce pages via Gutenberg blocks or a visual editor. They overhaul your theme’s product and checkout pages to match your brand: a different scope and a different tool.
The Designer styles Tracksies’ own output (emails, PDFs, review widgets, loyalty UI, admin), from a single configuration panel, without touching your theme.
Use your theme or page builder for product-page styling; use the Designer for everything Tracksies touches. They don’t overlap.
Why shops use it
Branded shops care about consistency. Customers notice when the logo on the packing slip doesn’t match the logo on the email, or when the button colour on the review request looks nothing like the button colour on the site. The Designer takes that whole class of inconsistency off the table without making you maintain five copies of the same logo file.