Buttons
Citera has two button styles, applied automatically based on their role in the section:
- Solid — the primary action (“Add to cart”, “Buy now”, “Shop”). Filled background, high visibility.
- Outline — the secondary action (“Learn more”, “View all”). Border with transparent background.
Where button colors are set
Button colors come from the section’s color scheme — see Colors. Every color scheme has:
- Solid button background — the fill color
- Solid button text — the text on the fill
- Outline button — the border and text color for outline buttons
Button shape and radius
The corner radius is set in Theme settings → Layout → Corner radius. The value applies to every button, every card, and every input across the store — setting it once keeps everything visually consistent.
Common values:
0px— sharp corners, modern/minimal feel4px— subtle rounding, versatile8px— noticeable rounding, friendly999px(or “full”) — pill buttons, playful
Adding a button to a section
Most sections that support buttons have both a primary and a secondary button field.
Click the section
For example, a Hero or Image with Text section.
Fill in Button label
The text on the button, e.g. “Shop the collection”.
Set Button link
Click Select link and pick a collection, product, page, blog article, or external URL.
Add a second button (optional)
Sections that support two buttons show a Secondary button label and Secondary button link below. The second button renders as an outline style next to the primary.
Best practices
- One primary CTA per section. If everything is a solid button, nothing is.
- Labels should describe the action. “Shop skincare” > “Click here”. “Get the guide” > “Submit”.
- Two buttons max. If you find yourself wanting three, that section is probably doing too much.
- Long text wraps ugly. Keep button labels to 3 words for mobile.
Don’t fake buttons with styled links. Shoppers scan for button shapes to find CTAs. A hyperlink in a wall of text is easy to miss.