Typography
Set the font, size, color, weight, style, and alignment for your title and subheading.
The Typography card on the Design tab controls how your text looks — with separate desktop and mobile sizes.
Choose a font
Open the announcement and go to the Design tab.
In Typography, open the Font dropdown.
Select Use your theme fonts to inherit your theme's typography, or pick a specific font from the list.
Click Save.
Tip
Use your theme fonts is the safest choice. The bar blends into your store instead of looking like a bolted-on app.
Style the title
Set Desktop size under Title size and color.
Set Mobile size. If you leave it blank, the desktop size is used on mobile too.
Set Title color.
Choose a Title font weight: Normal, Medium, Semi Bold, Bold, or Extra Bold.
Tick Italic or Underline if you want them.
Set Title alignment — left, center, or right.
Click Save.
Style the subheading
The subheading has the same set of controls: Desktop and Mobile size, Subheading color, Subheading font weight, Italic, Underline, and Subheading alignment.
Set the subheading 2–4px smaller than the title so the hierarchy reads clearly.
Recommended sizes
| Element | Desktop | Mobile |
|---|---|---|
| Title | 18–24px | 14–16px |
| Subheading | 14–18px | 12–14px |
Always set a mobile size
Most storefront traffic is mobile. A 24px title that looks great on desktop wraps to three lines on a phone and pushes your hero image off the screen. Set the mobile size explicitly.
Font weights
| Option | CSS weight |
|---|---|
| Normal | 400 |
| Medium | 500 |
| Semi Bold | 600 |
| Bold | 700 |
| Extra Bold | 800 |