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, in this order: Colors, Spacing & Sizing, Typography, 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. |
| Highlights | Highlight text and icon color. |
| Live Social Proof | The view/stock message. |
| Progressive gifts | Unlocked gifts, locked gifts, gift labels. |
| Subscription | The subscribe/one-time toggle. |
| Mix & Match | Product name, price, cut price. |
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. There are eight: Light, Light Italic, Regular, Italic, Medium, Medium Italic, Bold, and Bold Italic.
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 has three sliders:
| Slider | Affects |
|---|---|
| Corner radius | The tier cards. |
| Progressive Gift Image Size | Gift images, when progressive gifts are on. |
| Highlights Icon Size | The icons on highlights. |
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.