> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/v1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/v1/blocks/blocks/rich-text.md). # Rich text Add formatted body text with paragraphs, lists, links, and styling options to any section.
The Text block is your primary tool for adding body copy to any section — descriptions, explanations, feature lists, or any written content that tells your brand's story. Unlike the Heading block (which is designed for short titles), the Text block supports full rich text formatting: paragraphs, bold, italic, links, and line breaks. Use it anywhere you need to communicate details to your customers — from product feature descriptions to promotional messaging to policy summaries. ### 1. What you can do * Write formatted paragraphs with bold, italic, links, and line breaks * Choose from preset typography styles or fully customize the font * Control text width and alignment independently for desktop and mobile * Apply different color presets to match your section design * Add custom spacing around the text block *** ### 2. Where you can use this block | Section | Maximum per section | | ---------------------- | ------------------- | | **Any Custom Section** | Unlimited | *** ### 3. How to add this block 1. In the **Theme Editor (Customize)**, click the section where you want to add text. 2. Click **Add block**. 3. Select **Text** from the block list. 4. Write your content in the text editor and adjust the settings below. 5. Drag the block to your desired position within the section. 6. Click **Save**. *** ### 4. Block settings These settings let you control how your text appears on the storefront — including the content, layout, and typography style. #### Content **Text** The main text content that appears on your storefront. Use Shopify's built-in rich text editor to format your content — you can add bold, italic, links, and line breaks without writing any code. Think of this as writing a short paragraph or description. Keep it clear, focused, and relevant to the section it belongs to. {% hint style="success" icon="lightbulb" %} **Tip:** Break longer content into short paragraphs of 2–3 sentences each. Customers scan rather than read — short paragraphs are much easier to absorb. {% endhint %} *** #### Layout **Width** Controls how much horizontal space the text block occupies within the section. | Option | Description | | ---------- | ------------------------------------------------------------------------------------------------------------------ | | **Fit** | The text takes up only as much width as it needs. Works well for short descriptions or labels. | | **Fill** | The text stretches to fill the entire available width. Best for body copy that should span the full column. | | **Custom** | Set an exact width in pixels or percentage. This is especially useful for controlling line length on wide screens. | {% hint style="success" icon="lightbulb" %} **Tip:** On wide desktop screens, text that stretches edge-to-edge becomes difficult to read. Use *Custom* width to cap your text at around 600–800px for comfortable reading. Studies show that 50–75 characters per line is the optimal range for readability. {% endhint %} *** **Text alignment** Controls how the text is positioned within its container. This setting appears when **Width** is set to *Fill* or *Custom*. **Options:** *Left / Center / Right* {% hint style="info" icon="note-sticky" %} **Note:** Left-aligned text is easiest to read for longer content. Center alignment works well for short descriptions (1–2 sentences) in hero sections. Avoid right-alignment for body text — it's harder to read in most languages. {% endhint %} *** **Custom on mobile** When enabled, you can set a different width and alignment specifically for mobile devices. This is helpful when centered desktop text should switch to left-aligned on smaller screens. *** #### Typography **Preset** Applies a predefined typography style to your text, pulling from your theme's global font settings. | Option | Description | | --------------- | ------------------------------------------------------------------------------------ | | **Default** | Uses the standard body text style from your theme settings. | | **Subheading** | A slightly smaller, lighter style typically used for supporting text below headings. | | **Paragraph** | Standard paragraph formatting optimized for readability. | | **Description** | Smaller text for supplementary information, captions, or fine print. | | **Custom** | Opens detailed typography controls for full manual customization. | *** **Custom settings (when Preset is set to *****Custom*****)** When you select the *Custom* preset, you gain full control over every typography detail: * **Font style** — Choose between your theme's *Heading* font or *Body* font. * **Size** — Set the exact font size in pixels. * **Line height** — Adjust the vertical space between lines (as a percentage). For body text, a line height of 150–170% provides the most comfortable reading experience. * **Letter spacing** — Control the horizontal space between characters. * **Font weight** — Choose from *Light* to *Extrabold*, depending on the weights available in your selected font. * **Case** — Apply *Uppercase* or *Capitalized* text transformations automatically. {% hint style="success" icon="lightbulb" %} **Tip:** If you're using this block for longer paragraphs, increase the **Line height** to at least 160%. This makes multi-line text significantly easier to read. {% endhint %} *** **Color preset** Controls the color of your text by pulling from your theme's global color palette. | Option | Description | | ------------- | ------------------------------------------------------------------------------------------ | | **Title** | Uses your theme's heading color. Useful when you want body text to match heading emphasis. | | **Subtitle** | A softer, muted color for secondary content. | | **Label** | Typically lighter, smaller-scale text color. | | **Paragraph** | Your standard body text color. The best choice for most body copy. | *** **Custom on mobile (Typography)** When enabled, you can set different font size, weight, and line height for mobile devices. Use this to ensure your text remains readable and well-proportioned on small screens. *** #### Spacing **Custom padding** Controls the empty space around the text block, separating it from adjacent blocks. You can set values for each side independently and define separate mobile values. *** ### 5. How to use it effectively #### Adding a section description The most common use — providing context below a section heading: 1. Add a **Heading** block with your section title. 2. Add a **Text** block directly below it. 3. Write 1–2 sentences explaining what the section contains or why it matters. 4. Set the **Width** to *Custom* (around 600px) to keep lines readable. 5. Set **Text alignment** to match the heading above it. #### Creating a feature description When highlighting a product feature or benefit: 1. Add a **Text** block inside a Group or Container. 2. Write a short, benefit-focused description (2–3 sentences). 3. Use the *Subheading* preset for a slightly bolder look. 4. Pair it with an Image block or Icon block for visual interest. *** ### 6. Tips & best practices {% hint style="success" icon="lightbulb" %} **Tip:** * Use the Text block for content and the Heading block for titles. Resist the urge to use headings for long text — it hurts readability and SEO structure. *** * Avoid pasting content directly from Microsoft Word or Google Docs. This can bring hidden formatting that may conflict with your theme's styles. Paste as plain text first, then apply formatting using the rich text editor. {% endhint %} {% hint style="info" icon="note-sticky" %} **Note:** The Text block supports inline bold and italic formatting through the rich text editor. Bold text will follow your theme's heading font style, while italic text uses your highlight style — creating a natural visual emphasis. {% endhint %}