Colors and fonts
Apply a ready-made palette, fine-tune individual colors, and set font sizes and weights.
Everything visual lives on the Design tab: Colors, Typography, Spacing & Sizing, and Custom CSS Settings.
Start with a palette
Open your bundle and go to the Design tab.
Open the Colors card.
Click one of the Color Templates to apply a complete palette at once.
Check the live preview, then click Save.
This is the fastest route to something that looks intentional. Adjust individual colors afterwards only where you need to.
Fine-tune individual colors
Colors are grouped so you can find what you're changing:
| Group | Covers |
|---|---|
| General | Unselected background, selected background, border, block title. |
| Bar Texts | Title, subtitle, price, full price. |
| Label | The small line under a tier. |
| Badge | Badge background and text. |
| Free gift / Upsell | Add-on rows. |
| Sold out text | Unavailable tiers. |
| Timer | The countdown bar. |
Click any swatch to open the color picker. Some colors also accept a gradient with a rotation angle.
Typography
The Typography card sets a size and weight per text element — block title, title, subtitle, label, free gift, upsell, sold-out text, timer title.
Open the Typography card.
Set the font size in pixels for the element you want to change.
Pick a font style: Light, Regular, Medium, or Bold.
Click Save.
The font family comes from your theme, so the block matches the rest of your product page automatically.
Spacing and sizing
The Spacing & Sizing card controls corner radius and spacing with sliders. Match the corner radius to your theme's buttons and the block will stop looking like a bolted-on app.
Two colors do most of the work
Selected background and badge background. Get those two matching your brand and the rest can stay on the palette defaults.