Skip to content

Rich Text

Add formatted content to a product page — headings, colored text, lists, and links — using a visual editor, with no HTML to write.

Overview

Rich Text is a display-only option type. It does the same job as HTML Block — static content on the product page — but you author it through a toolbar instead of writing markup.

Use Rich Text for:

  • Short instructions or product notes
  • Bulleted care or usage lists
  • Highlighted notices with colored text
  • Section intros above a group of options
  • Anything you'd otherwise write as simple HTML

Key characteristics:

  • Visual (WYSIWYG) editor with a focused toolbar
  • Up to 1,000 characters of visible text, with a live counter
  • Cannot be marked as required — it collects nothing
  • Content is sanitized on save and again on render, plus filtered as you type
  • Cannot trigger a condition, but can be shown or hidden by one

Rich Text or HTML Block?

Use Rich Text when you want formatted content and don't want to touch markup. Use HTML Block when you need tables, custom classes, inline CSS, or anything the toolbar doesn't cover — it accepts raw HTML and allows 8,000 characters.

Configuration

Basic Settings

SettingDescription
LabelOption name (shown in admin and optionally on the storefront)
Hide Label from storefrontIf enabled, only the formatted content is shown

No "Required" checkbox

Rich Text is display-only — it submits no value, so the Required checkbox is hidden for this type, the same as for Spacing, Divider, Heading, Accordion, Tabs, and HTML Block.

Text Content

SettingOptions (default)What it controls
Text Contentformatted text, max 1,000 visible characters (empty)The content rendered on the product page. In-app help: Format your content with the toolbar above.

Advanced Settings

SettingDescription
Internal LabelAdmin-only identifier (replaces label in the options list)
Help TextAdditional guidance shown to customers (based on display mode)
CSS class / CSS IDYour own selectors on this option's container — see CSS Class & CSS ID

The Toolbar

Rich Text ships a deliberately focused starter set:

ControlWhat it does
Text styleParagraph, or Heading 1 through Heading 6
BoldBold the selection
ItalicItalicize the selection
UnderlineUnderline the selection
Text colourRecolor the selection — pick a swatch or enter a hex value, with a reset control
Bulleted listUnordered list
Numbered listOrdered list
LinkInsert or edit a link via a dialog with Link text, Link URL, and Open in a new tab; an existing link can be removed

That's the whole set — there is no table, alignment, font-family, font-size, quote, code, strikethrough, or horizontal-rule control, and no raw-HTML view. Reach for HTML Block when you need any of those.

All six heading levels are offered

H1–H6 are available, matching Shopify's own product-description editor. Worth knowing when styling: a product page's h1 is usually the product title, so choosing Heading 1 here creates a second one on the page. That's your call, not something the app prevents.

Validation

MessageCause
Value is requiredText Content is empty, or contains only whitespace
This content is too long. Shorten it to save.Visible text exceeds 1,000 characters

The 1,000 limit counts what readers see, not the markup

Formatting is free. A heavily formatted paragraph and a plain one of the same length both count the same, because the counter measures visible text — the same number shown on screen — not the underlying tags.

Emptiness works the same way. A typed space or a blank line is real markup behind the scenes, so the field isn't technically empty — but the counter reads 0 and saving is blocked, because what the customer would see is nothing.

A separate 8,000-character ceiling applies to the stored markup as a backstop. In normal use you'll hit the 1,000-character visible limit long before it.

How to Add Rich Text

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Rich Text from the Option Type modal (it's under the Static category)
  4. Enter a Label, or enable Hide Label from storefront for bare content
  5. Type into Text Content and format it with the toolbar, watching the character counter
  6. (Optional) Click Advanced Settings for an Internal Label, Help Text, or a CSS class/ID
  7. Click Save in the contextual save bar

What you see in the editor is what the storefront renders — a heading renders as a heading, a list as a list, a link as a clickable link.

Safety

Rich Text content is protected at three layers:

  1. In the editor — unsupported or hostile markup is dropped as you type or paste, so it never reaches storage
  2. On save — the stored value is sanitized server-side
  3. On render — the storefront sanitizes again before displaying

The practical effect: pasting a <script> tag, a javascript: link, or an onclick handler into the editor does not persist and never renders. Pasting richly formatted content from another app is also simplified down to what the toolbar supports.

Pasted formatting gets simplified

If you paste content using formatting the toolbar doesn't offer — tables, custom fonts, alignment — the editor keeps the text and drops that formatting rather than storing markup it can't represent. Paste into an HTML Block instead when you need to preserve it exactly.

Conditions

Rich Text cannot be selected as a condition trigger — it has no value for a rule to test. It can be the target of another option's condition, so you can show a note only when a particular selection is made.

See Setting Up Conditions.

Cart and Orders

Rich Text contributes no line-item property. Nothing about it appears in the cart, at checkout, or on the order.

Use Cases

Care instructions

Label: Care Instructions Content: A Heading 3 "Care", then a bulleted list — "Wash cold", "Do not tumble dry", "Iron on low"

Result: A scannable care list, no markup written

Highlighted notice

Label: (Hidden) Content: A paragraph with the text colored red — "Made to order. Please allow 3–5 business days."

Result: A prominent lead-time notice with no visible label

Section introduction

Label: Personalization Content: A Heading 4 followed by a short paragraph explaining the options below

Result: A titled section header introducing a group of options

Label: (Hidden) Content: A paragraph with a link to the returns policy, set to open in a new tab

Result: An inline policy link; the app adds the safe rel attributes automatically

Best Practices

Keep it short:

  • 1,000 visible characters is roughly 150 words — treat it as a note, not an article
  • Split long content into several blocks you can position and condition separately

Mind heading levels:

  • Start at Heading 2 or 3 so you don't compete with the product title
  • Use headings for structure, not just to make text bigger

Choose colors that stay readable:

  • Check contrast against your theme background, including in dark mode
  • Don't rely on color alone to convey meaning — pair it with wording

Know when to switch types:

Troubleshooting

Can't save — "Value is required": The content is empty, or only spaces and blank lines. The counter reads 0 in this case

Can't save — "This content is too long": Over 1,000 visible characters. Formatting doesn't count, so trim words

My pasted table disappeared: The toolbar has no table support. Use HTML Block

My pasted styling was simplified: Expected — see the warning above

I need to edit the raw HTML: Rich Text has no HTML view by design. Use HTML Block