How to set up the Rich Text Banner block

What the Rich Text Banner block does

The block shows text you format in an editor, such as headings, bold and italic text, lists and links, in the checkout. You choose how it’s framed: as a Shopify status banner in one of four colours, or as a neutral card.

When to use it

• Explain a policy in a few lines, such as returns or delivery times, with a list of key points.
• Link to a page such as your shipping FAQ or size guide.
• Announce an offer or change with a heading and a short paragraph.

Before you start

• Have your text ready. Content is required, and the block doesn’t save without it.

Set it up

1. In Checkout Ninja, go to Blocks and click Create New Block. Then click Start Fresh, or open an existing block you want to add it to.
2. Click Add block and choose Rich Text Banner.
3. Write your text in Content. Use the toolbar for headings, bold, italic, lists, alignment and links.
4. Under Layout Style, choose Banner or Card.
   • For Banner, pick a Banner Style.
   • For Card, set Background Color, Padding, Show Border and Corner Radius.
5. Click Done. Check that Status is Active, then click Save and copy the Block ID.
6. Click Open Checkout Editor. Add the Custom Block app block where you want the text, paste the Block ID and save.

Settings reference

Content

Setting	What it does	Default
Content	Formatted text: headings (H1 to H3), bold, italic, numbered and bulleted lists, alignment and links. Required.	Empty
Layout Style	Banner (status banner with colour coding) or Card (neutral card).	Banner

Banner layout

Setting	What it does	Default
Banner Style	Colour and icon: Info (Blue), Success (Green), Warning (Yellow) or Critical (Red).	Info (Blue)

Card layout

Setting	What it does	Default
Background Color	Transparent, Base or Subdued.	Base
Padding	Space inside the card: None, Small, Base or Large.	Base
Show Border	Draws a border around the card.	On
Corner Radius	None, Base or Large.	Base

Verify it worked

1. Open your checkout. Your text shows with its formatting, inside a banner or card.
2. Click each link to check it goes to the right page.

Limitations

• Shopify Plus only for placement in the checkout steps. That’s a Shopify rule for all checkout apps.
• All heading levels render at the same size, because checkout gives apps one heading style.
• Text that’s both bold and italic shows as bold only.
• No images, buttons, underline or text colours. Colours come from Shopify’s banner styles and your checkout branding.

Troubleshooting

The block doesn’t show in checkout. Check that Content has text. The block hides itself when the editor is empty. Then run through the general checklist.

A list item that starts with a number loses it. To avoid double numbering, the block removes a number from the start of every list item, in numbered and bulleted lists alike, for example “2-day delivery” shows as “-day delivery”. Reword the item so it doesn’t start with a number, such as “Delivery in 2 days”.

Justified text doesn’t look justified in checkout. Checkout supports left, centre and right alignment only. Pick one of those in the editor.