> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Rich Text

> Display formatted text content with headings and rich formatting

The **Rich Text** section displays formatted text content with customizable heading, body text, and layout options. Perfect for About Us pages, policies, editorial content, mission statements, and informational pages that require multi-paragraph formatted content.

## What this section controls

This section controls text content displays with the following capabilities:

* Rich formatted body text with paragraph support
* Customizable heading with size options (XS to XL)
* Two layout modes (Normal or Boxed)
* Text alignment options (Left, Center, Right)
* Section width options (Narrower, Narrow, Page width, Fluid)
* Color scheme selection
* Vertical spacing and border controls

## Settings

### Layout

**Options:**

* **Normal** - Standard layout with text flowing naturally
* **Boxed** - Text contained in a bordered box with background

**Default:** Normal

**Purpose:** Boxed layout adds visual emphasis and separates content from surrounding sections. Use for callouts, important policies, or highlighted information.

**When to use:**

* **Normal:** Most text content, about pages, standard descriptions
* **Boxed:** Important notices, highlighted policies, special announcements

### Text Content

<Accordion title="Heading">
  **Type:** Inline rich text\
  **Default:** "Heading for longer content"

  Main heading displayed above body text. Supports basic formatting (bold, italic) via inline rich text editor.

  **Best practices:**

  * Keep concise (3-8 words)
  * Clearly describe content below
  * Use sentence case or title case consistently
</Accordion>

<Accordion title="Heading Size">
  **Options:** XS (h6), S (h5), M (h4), L (h3), XL (h2)\
  **Default:** XL (h2)

  Controls heading text size. Larger headings draw more attention and establish visual hierarchy.

  **Recommended sizes:**

  * **XL (h2):** Main page headings, section titles
  * **L (h3):** Subheadings, secondary sections
  * **M (h4):** Tertiary headings, smaller sections
  * **S/XS (h5/h6):** Minor headings, inline section titles
</Accordion>

<Accordion title="Content">
  **Type:** Rich text editor\
  **Default:** "Enter your long text content here..."

  Main body text displayed below heading. Rich text editor supports:

  * **Paragraphs** - Multiple paragraphs with spacing
  * **Bold/Italic** - Emphasize text
  * **Lists** - Bulleted or numbered lists
  * **Links** - Hyperlinks to pages, products, external sites
  * **Headings** - Sub-headings within content (H4, H5, H6)

  **Best practices:**

  * Break long text into paragraphs (3-5 sentences each)
  * Use lists for easy-to-scan information
  * Add links to relevant pages/products
  * Keep sentences concise for readability
</Accordion>

<Accordion title="Text Size">
  **Type:** Range slider\
  **Range:** 1x - 4x\
  **Step:** 0.5x\
  **Default:** 1x

  Multiplier for body text size. Increase for emphasis or readability on content-heavy pages.

  **Recommended sizes:**

  * **1x:** Standard body text (most use cases)
  * **1.5x - 2x:** About pages, story content, featured text
  * **2.5x - 4x:** Hero text, large editorial statements
</Accordion>

<Accordion title="Content Position">
  **Options:** Start (left), Center, End (right)\
  **Default:** Center

  Horizontal alignment of heading and body text.

  **When to use:**

  * **Start (Left):** Standard text-heavy content, blog-style layouts, reading-focused pages
  * **Center:** Landing pages, short announcements, hero content, symmetrical layouts
  * **End (Right):** Decorative layouts, design-focused pages (use sparingly)
</Accordion>

### Common Settings

<Accordion title="Section Width">
  **Options:** Narrower, Page, Fluid\
  **Default:** Page

  Controls content width on page.

  * **Narrower:** \~600-800px, optimized for long-form reading
  * **Page:** Standard container width (\~1200px)
  * **Fluid:** Full width with padding, expansive layouts

  **Recommendation:** Use "Narrower" for text-heavy content (improves readability by limiting line length to \~60-80 characters).
</Accordion>

<Accordion title="Color Scheme">
  **Options:** Theme color schemes (scheme-1, scheme-2, etc.)\
  **Default:** scheme-1

  Applies theme colors to section background and text. See [Common Settings](/themes/sahara/common-settings) for details.
</Accordion>

<Accordion title="Spacing Top">
  **Options:** None, S, M, L, XL\
  **Default:** M

  Vertical margin above section. See [Common Settings](/themes/sahara/common-settings) for details.
</Accordion>

<Accordion title="Spacing Bottom">
  **Options:** None, S, M, L, XL\
  **Default:** M

  Vertical margin below section. See [Common Settings](/themes/sahara/common-settings) for details.
</Accordion>

<Accordion title="Section Border">
  **Options:** None, Top, Bottom, Both\
  **Default:** None

  Add decorative borders above/below section. See [Common Settings](/themes/sahara/common-settings) for details.
</Accordion>

## Use Cases

<CardGroup cols={2}>
  <Card title="About Us Page" icon="building">
    Tell your brand story with heading "Our Story" and multi-paragraph content about company history, values, and mission.
  </Card>

  <Card title="Shipping Policy" icon="truck">
    Layout: Boxed, heading "Shipping Information", detailed policy content with processing times, carriers, and international shipping.
  </Card>

  <Card title="Homepage Brand Statement" icon="bullhorn">
    Center-aligned, large text size (2x), heading "Crafted with Care", short brand philosophy paragraph.
  </Card>

  <Card title="Product Collection Description" icon="tags">
    Heading "Summer Collection 2026", section width "Narrower", descriptive paragraph about seasonal products and design inspiration.
  </Card>

  <Card title="FAQ Section" icon="circle-question">
    Multiple Rich Text sections, each with question as heading, answer as content. Boxed layout for visual separation.
  </Card>

  <Card title="Sustainability Statement" icon="leaf">
    Heading "Our Commitment to Sustainability", list of eco-friendly practices, links to certifications and impact reports.
  </Card>
</CardGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="Optimize for Readability" icon="book-open">
    Use "Narrower" section width for long text content. Line length of 60-80 characters optimal for reading comprehension.
  </Card>

  <Card title="Break Up Text" icon="align-left">
    Use short paragraphs (3-5 sentences), bullet lists, and sub-headings to make content scannable. Avoid walls of text.
  </Card>

  <Card title="Choose Appropriate Heading Size" icon="text-height">
    Match heading size to importance: XL for main sections, L for subordinate sections. Maintain hierarchy across page.
  </Card>

  <Card title="Use Boxed Layout Sparingly" icon="square">
    Boxed layout adds emphasis but can clutter if overused. Reserve for important notices, policies, or highlighted content.
  </Card>

  <Card title="Add Relevant Links" icon="link">
    Link to related products, collections, or pages within content. Example: "Read our [Return Policy](/policies/refunds)" in shipping text.
  </Card>

  <Card title="Center vs Left Align" icon="align-center">
    Center alignment works for short content (1-3 paragraphs), hero statements. Left-align for longer, reading-focused content.
  </Card>

  <Card title="Test Text Size on Mobile" icon="mobile">
    Large text sizes (2x+) may be too large on mobile. Test responsive display and adjust if needed.
  </Card>

  <Card title="Consistent Color Schemes" icon="palette">
    Use consistent color schemes across similar sections (all policy pages same scheme) for cohesive visual experience.
  </Card>
</CardGroup>

## Examples

### About Us Page

* **Layout:** Normal
* **Heading:** "Our Story"
* **Heading Size:** XL
* **Text Size:** 1x
* **Content Position:** Start (Left)
* **Section Width:** Narrower
* **Content:** 3-4 paragraphs about company founding, mission, team, values

### Shipping Policy (Boxed)

* **Layout:** Boxed
* **Heading:** "Shipping & Delivery"
* **Heading Size:** L
* **Text Size:** 1x
* **Content Position:** Start
* **Section Width:** Page
* **Content:** Bullet list of shipping times, carriers, costs, international options

### Homepage Hero Statement

* **Layout:** Normal
* **Heading:** "Handcrafted Elegance"
* **Heading Size:** XL
* **Text Size:** 2x
* **Content Position:** Center
* **Section Width:** Page
* **Content:** Single impactful paragraph (2-3 sentences) about brand philosophy

### FAQ Entry

* **Layout:** Boxed
* **Heading:** "What is your return policy?"
* **Heading Size:** M
* **Text Size:** 1x
* **Content Position:** Start
* **Section Width:** Page
* **Content:** Concise answer with link to full return policy page

## Troubleshooting

<AccordionGroup>
  <Accordion title="Text too small or too large on mobile">
    **Solution:**

    * Adjust "Text Size" setting (reduce from 2x to 1.5x for mobile readability)
    * Test on actual mobile device or browser dev tools mobile emulator
    * Large text sizes (3x-4x) may require custom CSS media queries for mobile optimization
  </Accordion>

  <Accordion title="Content looks cramped or too spaced out">
    **Solution:**

    * Adjust "Spacing Top" and "Spacing Bottom" settings
    * Check "Section Width" - "Narrower" provides more white space for long text
    * Ensure adequate spacing between multiple Rich Text sections (M or L spacing)
  </Accordion>

  <Accordion title="Boxed layout doesn't stand out">
    **Solution:**

    * Change Color Scheme to contrasting scheme (e.g., scheme-2 if page is scheme-1)
    * Ensure theme color schemes have distinct background colors (check Theme Settings → Colors)
    * Consider adding Section Border (Top/Bottom/Both) for additional separation
  </Accordion>

  <Accordion title="Heading and body text alignment different">
    **Solution:**

    * "Content Position" applies to both heading and body text
    * If they appear misaligned, check that content doesn't have inline styles overriding alignment
    * Clear any custom HTML alignment tags in rich text editor
  </Accordion>

  <Accordion title="Links not working or styled incorrectly">
    **Solution:**

    * Verify link URL format (internal links: `/collections/summer`, external: `https://example.com`)
    * Check link styling in theme settings (Theme Settings → Typography → Link styles)
    * Ensure link text visible on selected color scheme background
  </Accordion>
</AccordionGroup>

## Related Sections

* **[Common Settings](/themes/sahara/common-settings)** - Section width, color scheme, spacing, borders
* **[Custom Liquid](/themes/sahara/custom-liquid)** - For advanced text formatting beyond rich text capabilities

## Key Takeaways

* **Perfect for long-form content** - About pages, policies, editorial content
* **Boxed layout** - Adds emphasis and visual separation for important content
* **Readable line length** - Use "Narrower" section width for text-heavy content
* **Flexible alignment** - Center for short hero statements, left for reading-focused content
* **Heading hierarchy** - XL for main sections, smaller sizes for subordinate sections
* **Text size multiplier** - 1x standard, 1.5-2x for emphasis, 2.5-4x for hero statements
* **Rich text editor** - Supports paragraphs, formatting, lists, links, sub-headings

Rich Text section provides flexible formatting for all your text-based content needs with professional readability and visual appeal.