Rich Text Section

The rich text section is a flexible content builder that lets you create custom layouts using multiple block types. You can combine icons, headings, text content, and buttons to build exactly the content you need.

Overview

This section is like a content builder - you add different blocks (icons, headings, text, buttons) in any order to create custom content layouts. It's perfect when you need more flexibility than a single-purpose section.

Where to Use

  • Homepage: Custom content areas
  • About pages: Company information and values
  • Product pages: Detailed product information
  • Collection pages: Collection descriptions
  • Any page: Flexible content needs

Note: The rich text section cannot be used in header or footer groups.

Blocks

You can add multiple blocks in any order to build your content. Blocks appear in the order you add them.

Icon Block

What it does: Displays an icon with optional text below it

Settings:

  • Custom SVG Code: Paste custom SVG code (takes priority)
  • Lucide Icon: Icon name from Lucide library (e.g., "shopping-cart", "star", "heart")
  • Icon Text: Optional text displayed below the icon
  • Icon Size: 20-80px (default: 40px)
  • Icon Color: Custom color for the icon

Best for:

  • Visual elements
  • Decorative icons
  • Brand elements

Tips:

  • Use Lucide icons for simplicity
  • Add icon text for context
  • Match icon color to your design

Heading Block

What it does: Displays a heading with optional subheading

Settings:

  • Heading Text: Main heading
  • Subheading: Optional text above the heading (supports rich text)
  • Heading Size: XL, 2XL, 3XL, or 4XL (default: 3XL)

Best for:

  • Section titles
  • Main messages
  • Content organization

Tips:

  • Use subheading for context
  • Choose size based on importance
  • Keep headings concise

Rich Text Block

What it does: Displays formatted text content

Settings:

  • Content: Rich text content (supports formatting, links, lists, etc.)

Best for:

  • Paragraphs of text
  • Detailed descriptions
  • Formatted content

Tips:

  • Use formatting (bold, italic) for emphasis
  • Add links to related content
  • Break up long text with multiple blocks

Button Block

What it does: Displays a call-to-action button

Settings:

  • Button Text: Text on the button
  • Button Link: URL the button links to
  • Button Style: Primary, Secondary, or Outline
  • Button Icon: Optional Lucide icon on the button

Best for:

  • Call-to-action buttons
  • Navigation links
  • Action prompts

Tips:

  • Use action-oriented text
  • Choose style based on importance
  • Add icons for visual interest

Settings

Layout

Text Alignment

  • Controls how all content aligns horizontally
  • Options: Left, Center, Right
  • Default: Left
  • Tip:
    • Left: Most readable for longer text
    • Center: Balanced, professional look
    • Right: Less common, unique designs

Colors

Color Scheme

  • Select a color scheme for the section
  • Controls text color, link colors, and button colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that matches your design

Padding

Top Padding

  • Space above the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room from previous section

Bottom Padding

  • Space below the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

Common Layout Patterns

Simple Text Content

  1. Heading Block - Section title
  2. Rich Text Block - Content paragraphs
  3. Button Block - Call-to-action

Icon + Content

  1. Icon Block - Visual element
  2. Heading Block - Title
  3. Rich Text Block - Description
  4. Button Block - Action button

Multiple Headings

  1. Heading Block - Main heading
  2. Rich Text Block - First paragraph
  3. Heading Block - Subheading
  4. Rich Text Block - Second paragraph
  5. Button Block - Call-to-action

Icon + Heading + Text

  1. Icon Block - Decorative icon
  2. Heading Block - Main title
  3. Rich Text Block - Content
  4. Button Block - Action button

Tips & Best Practices

✅ Do's

  • Plan your layout: Think about block order before adding
  • Use headings: Break up content with heading blocks
  • Keep text concise: Don't write novels in one block
  • Add buttons: Always include a call-to-action
  • Use icons sparingly: Icons add visual interest but don't overdo it
  • Format text: Use bold, italic, and links for emphasis
  • Test alignment: Preview how content looks with different alignments

❌ Don'ts

  • Don't add too many blocks: 5-7 blocks is usually enough
  • Don't skip headings: Use headings to organize content
  • Don't use tiny text: Ensure all text is readable
  • Don't forget buttons: Always include a call-to-action
  • Don't ignore mobile: Always preview on mobile devices
  • Don't overcrowd: Leave breathing room between blocks

Block Organization Tips

Starting Your Section

  1. Icon (optional) - Visual element
  2. Heading - Main title
  3. Rich Text - Content

Ending Your Section

  • Button - Call-to-action
  • Rich Text - Closing statement (optional)

Content Flow

  • Start with visual (icon) or heading
  • Add content (rich text)
  • End with action (button)

Icon Guidelines

Using Lucide Icons

Popular Icons:

  • shopping-cart - Shopping, cart
  • star - Quality, ratings
  • heart - Favorites, love
  • truck - Shipping, delivery
  • shield-check - Security, protection
  • package - Products, shipping
  • award - Quality, awards
  • check - Confirmation, done

How to Use:

  1. Go to Lucide icon library (lucide.dev)
  2. Find the icon you want
  3. Enter the icon name in "Lucide icon" field
  4. Adjust size and color as needed

Using Custom SVG

When to Use:

  • You need a specific icon not in Lucide
  • You want a branded icon
  • You need a custom design

How to Use:

  1. Get your SVG code
  2. Paste it in "Custom SVG code" field
  3. Custom SVG takes priority over Lucide icon

Icon Text

  • Optional: Text displayed below the icon
  • Use when: Icon needs context
  • Tip: Keep it short (1-2 words)

Rich Text Formatting

Supported Formatting

  • Bold - Emphasize important text
  • Italic - Add emphasis or style
  • Links - Link to other pages or external sites
  • Lists - Bulleted or numbered lists
  • Paragraphs - Multiple paragraphs

Formatting Tips

  • Use bold for key points
  • Use italic for emphasis
  • Add links to related content
  • Use lists for multiple points
  • Break up long text into paragraphs

Button Best Practices

Button Text

  • Action-oriented: "Shop Now", "Learn More", "Get Started"
  • Clear: Make it obvious what happens when clicked
  • Concise: Keep it short (1-3 words)

Button Style

  • Primary: Main call-to-action (recommended)
  • Secondary: Alternative action
  • Outline: Less prominent, supporting action

Button Icon

  • Optional: Add Lucide icon to button
  • Use when: Icon adds clarity
  • Examples: arrow-right, shopping-cart, external-link

Examples

Example 1: Welcome Section

  1. Icon Block: heart icon, "Welcome" text
  2. Heading Block: "Welcome to Our Store"
  3. Rich Text Block: "We're excited to have you here..."
  4. Button Block: "Shop Now" → Collections
  • Alignment: Center

Example 2: Feature Highlight

  1. Heading Block: "Why Choose Us"
  2. Rich Text Block: "We offer premium quality..."
  3. Icon Block: award icon
  4. Rich Text Block: "Award-winning products..."
  5. Button Block: "Learn More" → About page
  • Alignment: Left

Example 3: Product Information

  1. Heading Block: "Product Details"
  2. Rich Text Block: "Our premium tiles feature..."
  3. Rich Text Block: "Available in multiple sizes..."
  4. Button Block: "Shop Now" → Products
  • Alignment: Left

Adding and Managing Blocks

Adding a Block

  1. In the theme editor, click on the Rich Text section
  2. Scroll to the Blocks section
  3. Click Add block
  4. Choose a block type (Icon, Heading, Rich Text, or Button)
  5. Configure the block settings
  6. Click Save

Reordering Blocks

  1. Click on a block in the left sidebar
  2. Use the ⋮⋮ (six dots) icon to drag and drop
  3. Move blocks to change their order

Removing a Block

  1. Click on the block you want to remove
  2. Scroll to the bottom of the block settings
  3. Click Remove block

Troubleshooting

Blocks Not Showing

  • Check: Make sure you've added blocks to the section
  • Check: Verify block settings are filled in

Icons Not Showing

  • Check: Enter icon name in "Lucide icon" field
  • Check: Verify icon name is correct (check Lucide library)
  • Check: Or paste custom SVG code

Text Not Readable

  • Solution: Adjust color scheme for better contrast
  • Solution: Ensure text color contrasts with background
  • Solution: Test on different devices

Buttons Not Clickable

  • Check: Verify button link is filled in
  • Check: Test on different devices
  • Check: Ensure button isn't hidden

Content Not Aligned

  • Check: Verify "Text Alignment" setting
  • Check: Ensure alignment matches your design
  • Check: Test on different screen sizes

Too Many Blocks

  • Solution: Remove unnecessary blocks
  • Solution: Combine content into fewer blocks
  • Tip: 5-7 blocks is usually enough

Related Sections

  • Image with Text - Image and text side-by-side
  • Content Spotlight - Content with features and image
  • Icon with Text - Multiple icons in a grid

Next Steps: