Rich text

Rich text is Strata's general-purpose content section. Its blocks can be reordered, repeated, or mixed to create an introduction, policy summary, campaign message, or simple call to action without a fixed media layout.

[!NOTE] The block names, settings, ranges, defaults, and 12-block limit below match the current schema. Custom Liquid and app output can change the visible result, so final screenshots should use approved fixtures from the matching storefront build.

Add Rich text

In Shopify's theme editor, add Rich text to a compatible template or open an existing section. It is not available in header, footer, or overlay groups.

Layout

Setting	What it controls	Options or default
Content width	Sets the maximum width available to the block stack.	Narrow, Medium, or Page width. Default: Medium.
Content alignment	Aligns the section's block content.	Left, Center, or Right. Default: Center.

Use Narrow for reading-heavy copy. Page width gives mixed image and text blocks more room; confirm the result with the longest content in the section.

Style

Setting	What it controls	Default
Background color	The section surface.	The global background color.
Text color	The default text color for the section.	The global brand color.

Check links, buttons, app output, and Liquid content against the selected colors; a block can introduce its own styling.

Motion and controls

Setting	What it controls	Default or dependency
Enable parallax for this section	Opts the section into parallax when the global setting permits it.	Enabled by default. Requires global Enable parallax effects; reduced-motion preferences turn it off.

Keep the reading order and actions complete when the section is static.

Spacing

Setting	What it controls	Options or default
Section spacing	Chooses the section's spacing scale.	None, Small, Medium, or Large. Default: Medium.
Top spacing	Adds or removes the section's top spacing.	Enabled by default.
Bottom spacing	Adds or removes the section's bottom spacing.	Enabled by default.

Blocks

The section accepts up to 12 blocks. Blocks can be added, repeated, and reordered in the Theme Editor. The preset order is Eyebrow, Heading, Text, then Button; it is not a required order.

Eyebrow

Setting	What it controls	Default
Text	Short context above the main heading.	Introduction.

Heading

Setting	What it controls	Options or default
Heading	The main heading text.	Add a clear message.
Heading size	Sets the visual heading size.	Large, Medium, or Small. Default: Medium.

Use a heading block for actual section structure rather than styling ordinary body text as a heading.

Text

Setting	What it controls	Default
Text	Rich body content, including supported links and formatting.	Use this section for an introduction, brand story, product details, or editorial message.

Image

Setting	What it controls	Options or default
Image	The image shown in the block.	No default.
Image width	Chooses a full-width image or a constrained image.	Full width or Custom. Default: Custom.
Maximum width	Maximum image width when Image width is Custom.	80–1200 px, step 20 px. Default: 320 px. Only visible for Custom.
Mobile maximum width	Maximum mobile image width when Image width is Custom.	80–800 px, step 20 px. Default: 600 px. Only visible for Custom.

The width controls constrain the image block; they do not create a separate mobile image source. Check tall and wide sources at both viewport sizes.

Liquid

Setting	What it controls	Default
Custom liquid	Liquid output inserted at this block's position.	No default.

Use this only when standard blocks cannot provide the content. Custom output can introduce its own markup, scripts, or accessibility requirements.

Button

Setting	What it controls	Options or default
Label	Visible action text.	Learn more.
Link	Destination for the action.	No default.
Style	Visual treatment for the action.	Primary, Secondary, or Text link. Default: Text link.

Set a destination that matches the label. If no link is provided, verify the current build before assuming how an empty button is handled.

App

App inserts a compatible Shopify app block. It has no Strata settings in this schema. The app provider controls its content, validation, loading, and accessibility.

Desktop and mobile behavior

Rich text keeps the Theme Editor block order on both desktop and mobile, while width and wrapping change with the available space. Exact widths, stacking, and app behavior must be verified from the current accepted storefront build rather than inferred from the schema.

Accessibility and motion

• Keep one logical heading structure and do not use repeated headings only for visual spacing.
• Give every meaningful image suitable alt text; mark decorative images appropriately in the source asset.
• Check link purpose, focus visibility, text contrast, and app controls.
• Ensure Liquid and app content remains usable with keyboard navigation and reduced motion.

Common issues

Symptom	Safe check
Image width controls are missing	Choose Custom under Image width; the two maximum-width controls are conditional.
The block order is wrong	Reorder blocks in the Theme Editor; the section has no required order beyond its preset.
A button is not useful	Set a matching Label and Link, then test the destination.
App or Liquid content looks different	Inspect the provider or authored output; it is not governed by the standard Rich text blocks.
Parallax is absent	Confirm global Enable parallax effects and check reduced-motion settings.

Related guides

• Custom liquid
• Custom section
• Theme animation settings

Evidence boundary

This guide has no screenshot because custom Liquid and app blocks make a single fixture misleading. Capture an approved text-only and mixed-block desktop/mobile set after the current Theme Editor and storefront behavior are accepted.