Skip to content

Formatting

Type these codes into any text field that supports dynamic text. They’re converted when the block shows at checkout.

A Text block showing bold, red, subdued, and strikethrough text, a 20% OFF discount tag, and a Final sale tooltip icon

Type this You get
**Free returns** Bold text
{@red Final sale} Red text, using your checkout’s error color
{@boldRed Final sale} Bold red text
{@subdued Ships in 3–5 days} Gray, lighter text
{@strikethrough $49.99} Text with a line through it, for old prices
{@small Taxes calculated at the next step} Smaller text
{@extraSmall Terms apply} Smaller text (currently the same size as small)

{@medium …}, {@large …} and {@extraLarge …} are accepted but show at normal size, because Shopify’s checkout doesn’t allow larger body text.

Type this You get
{@discountTag 20% OFF} A badge with a discount icon and the text “20% OFF”
{@discountIcon} A discount tag icon on its own
Type this You get
[Returns policy](https://example.com/returns) A link that opens in a new tab
[Size guide]@(https://example.com/size-guide) A link that opens in the same tab
[Call us](tel:+15555550123) A phone link
[Email us](mailto:help@example.com) An email link

You can put several links in one field.

Inside a link’s address, {Attribute name} is replaced with the value of the cart attribute of that name. This is useful with values collected by a Custom fields form, using the field’s Cart attribute key:

[Track your gift card balance](https://example.com/balance?card={Gift card number})

If the attribute doesn’t exist, the placeholder is removed. This works in body text, not in Line item text or checkbox labels.

Type this You get
Read our [terms]<Orders ship within 2 business days. No returns on sale items.> “terms” becomes clickable and shows the text in a small popover
{@!tooltip Not eligible for returns} Final sale A small alert icon; clicking it shows “Not eligible for returns”

Each new line in a text field starts a new line at checkout. A blank line adds extra space, like a paragraph break.

Codes can’t go inside each other. **{@red Final sale}** or a link inside bold text won’t display correctly. Put codes next to each other instead:

{@boldRed Final sale} — **no returns**

{{ }} is the exception. Expressions run first, so an expression can output formatting, and formatting can wrap an expression:

{@strikethrough {{ toMoney(compareAtPrice, currencyCode) }}}
{{ lineQuantity > 1 ? '**Bulk price applied**' : '' }}

Some characters end a code early.

  • } ends a {@…} code, so the text inside can’t contain }.
  • ) ends a link address, and > ends a tooltip.
  • The | character is removed from any line that uses formatting.
  • Checkbox labels (the Checkbox block and the SMS consent checkbox) keep links only. Other codes show as plain text: a tooltip [text]<tip> becomes “text (tip)”.
  • Banner titles don’t support formatting; codes show exactly as typed. Expressions in {{ }} still work.
  • Subheadings support every code. Each line becomes its own heading.

Checkout blocks you placed on the thank you and order status pages show in the thank you page’s own design, which takes fewer codes:

  • Keep their style: **bold**, links, {@strikethrough …}, {@red …}, {@boldRed …}, {@subdued …}, {@small …} and {@extraSmall …}.
  • Show as plain text: {@medium …}, {@large …}, {@extraLarge …} and {@discountTag …}. A tooltip, [text]<tip>, shows its text without the tip.
  • Left out: {@discountIcon} and {@!tooltip …}.
  • Same-tab links show as typed. Write [text](address) instead of [text]@(address).
  • Expressions run first, as in checkout, so {{ }} can output formatting.
  • Expressions work inside a link’s text and address, and {Attribute name} inside its address:
[Track order {{ orderNumber || confirmationNumber }}](https://example.com/track?id={{ orderId }})