Appearance
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
| Setting | Description |
|---|---|
| Label | Option name (shown in admin and optionally on the storefront) |
| Hide Label from storefront | If 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
| Setting | Options (default) | What it controls |
|---|---|---|
| Text Content | formatted 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
| Setting | Description |
|---|---|
| Internal Label | Admin-only identifier (replaces label in the options list) |
| Help Text | Additional guidance shown to customers (based on display mode) |
| CSS class / CSS ID | Your own selectors on this option's container — see CSS Class & CSS ID |
The Toolbar
Rich Text ships a deliberately focused starter set:
| Control | What it does |
|---|---|
| Text style | Paragraph, or Heading 1 through Heading 6 |
| Bold | Bold the selection |
| Italic | Italicize the selection |
| Underline | Underline the selection |
| Text colour | Recolor the selection — pick a swatch or enter a hex value, with a reset control |
| Bulleted list | Unordered list |
| Numbered list | Ordered list |
| Link | Insert 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
| Message | Cause |
|---|---|
| Value is required | Text 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
- Navigate to Option Sets and open your option set
- Click Add Option
- Select Rich Text from the Option Type modal (it's under the Static category)
- Enter a Label, or enable Hide Label from storefront for bare content
- Type into Text Content and format it with the toolbar, watching the character counter
- (Optional) Click Advanced Settings for an Internal Label, Help Text, or a CSS class/ID
- 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:
- In the editor — unsupported or hostile markup is dropped as you type or paste, so it never reaches storage
- On save — the stored value is sanitized server-side
- 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.
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
Policy link
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:
- Need a table, custom CSS, or exact markup? Use HTML Block
- Need just a title? Use Heading
- Need blank space or a line? Use Spacing or Divider
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
Related
- HTML Block — the same purpose, authored as raw HTML with a wider feature set
- Descriptive Text — the older option type these two replaced
- Heading — a simple title without a toolbar
- Divider and Spacing — visual separation
- CSS Class & CSS ID — target this block from your theme CSS
- Setting Up Conditions — show or hide a block conditionally