Button design
Style the call-to-action button's colors, size, and corners.
The Button card sits on the Design tab, between Typography and Icons.
The card is always there, but it only affects your storefront when Call to action is set to Button on the Content tab. With any other CTA setting there's no button to style. See Call to action.
Style the button
Open the announcement and go to the Design tab.
Find the Button card.
Set Button color — the background fill.
Set Button text color.
Set the Desktop font size, and the Mobile font size if it should differ.
Set Border radius to round the corners.
Click Save.
Recommended values
| Setting | Recommended |
|---|---|
| Desktop font size | 14–16px |
| Mobile font size | 12–14px |
| Border radius | 0 for square, 4–8 for subtle rounding, 20+ for a pill |
Make the button stand out
The button is the thing you want clicked, so it should be the highest-contrast element in the bar.
- Use a color that contrasts with the bar background — not a slightly lighter shade of it
- On a dark bar, a white or light button works well
- On a bright bar, a dark or black button works well
- Keep the button text short:
Shop now,Get 20% off,Learn more
Check contrast on mobile
Phone screens are viewed in bright sunlight far more often than desktops. A low-contrast button that reads fine on your monitor can be invisible outdoors.
Tip
Write specific button text. Shop the sale outperforms Click here because the customer knows what happens next.