Rich Text — Configuration Guide

This guide explains how to configure the Rich Text section in the theme editor. The section provides a text-first content block for editorial copy, brand storytelling, or pull quotes. No JavaScript is required — the section is fully server-rendered.

Location

Theme editor: Add the "Rich Text" section to any page template.
Section source: sections/rich-text.liquid

Section Settings

Layout

Setting	Type	Default	Description
Layout variant	Select	Default	Choose the overall layout: `Default`, `Variant A`, or `Variant B`. Some layouts may show/hide certain fields.
Mode	Select	Standard	`Standard` — displays eyebrow, heading, intro, body, divider, and CTAs. `Quotation` — displays only the Quote Text and Quote Attribution fields (see Quotation Mode below).
Max width	Select	720px	Sets the maximum width of the content area: `600px`, `720px`, or `800px`. Narrower widths improve readability for long-form text.

Content (Standard Mode)

These fields render only when Mode is set to Standard.

Setting	Type	Description
Eyebrow label	Text	Optional short line above the heading. Leave blank to hide.
Heading	Text	Main heading for the section. Leave blank to hide.
Intro paragraph	Textarea	Optional supporting text shown near the heading. Leave blank to hide.
Rich text body	Rich text	Main content area. Supports bold, italic, links, bullet lists, and numbered lists. Leave blank for a minimal layout.
Show divider	Checkbox (off)	Adds a divider line between the heading area and the body content. Only shown if both a heading/eyebrow/intro and body/CTA content exist.

Quote (Quotation Mode)

These fields render only when Mode is set to Quotation.

Setting	Type	Description
Quote text	Textarea	The pull quote text. Displayed large and centered. Leave blank to hide the entire section.
Quote attribution	Text	Optional author or source shown below the quote with an em-dash prefix (e.g. "— The Times"). Leave blank to hide.

Call to Action (Standard Mode only)

Setting	Type	Description
Primary CTA label	Text	Button text. Both label and link must be set to display.
Primary CTA link	URL	Button destination. Both label and link must be set to display.
Primary CTA style	Select	`Button` (solid button) or `Link` (text link). Default: Button.
Secondary CTA label	Text	Optional secondary link text. Both label and link must be set to display.
Secondary CTA link	URL	Optional secondary link destination.
CTA alignment	Select	Aligns buttons within the section: `Left`, `Center`, or `Right`. Default: Left.

Style

Setting	Type	Default	Description
Color scheme	Color scheme	Scheme 1	Affects background colour, text colour, and accent colour for the section.
Typography scale	Select	M	Adjusts the overall text size: `S` (small), `M` (medium), `L` (large).
Background style	Select	None	`None` — transparent/inherited background. `Color` — uses the color scheme's background. `Image` — displays a background image behind the content.
Background image	Image picker	—	Used when Background style is set to Image.

How It Works

Standard mode renders content in this order: eyebrow → heading → intro paragraph → divider (if enabled) → rich text body → CTAs. Any field left blank is simply skipped — no empty markup is rendered.
Quotation mode replaces all Standard content with a semantic <blockquote> element containing the quote text in large, centered heading-sized typography and an optional attribution line in smaller muted text. The Eyebrow, Heading, Intro, Body, Divider, and CTA fields are ignored in this mode.
Background image covers the full section area behind the text content. Use the color scheme to ensure text remains readable over the image.
Max width constrains the text content area. The section itself remains full-width; only the inner content is bounded. Narrower settings (600px) work well for single-column editorial; wider settings (800px) suit sections with more dense copy.
Typography scale adjusts heading and body sizes proportionally. Use S for compact supplementary sections, M for general content, and L for hero-like editorial statements.
Divider renders a horizontal rule between the heading area (eyebrow/heading/intro) and the body content. It only appears when both areas have content — otherwise there is nothing to visually separate.

Quotation Mode — Quick Reference

When you switch Mode to Quotation, note that:

The Quote text and Quote attribution fields (further down in the settings panel) become the active content.
The Eyebrow, Heading, Intro paragraph, Rich text body, Divider, and CTA fields are hidden on the storefront — their values are preserved but not displayed.
If Quote text is blank, the entire section is hidden.
The quote is always center-aligned regardless of CTA alignment setting.
Background style and color scheme still apply normally.

Empty-State Safety

If no content is set for the active mode, the section renders nothing.
In Standard mode: at least one of eyebrow, heading, intro, body, or CTA must be populated.
In Quotation mode: quote text must be populated.
Missing optional fields (attribution, intro, eyebrow) are simply not rendered — no empty elements appear.

Practical Tips

Keep quotes concise. Quotation mode uses large heading-sized type — long passages will dominate the page. One to three sentences works best.
Use the divider to visually separate a heading/intro area from a longer body when they serve different purposes (e.g. section title above, detailed copy below).
Pair background images with readable color schemes. A dark color scheme with light text works well over busy photography.
Typography scale is relative to the active preset's type tokens. The same M setting will look different across presets.