Text Block

A simple, versatile way to add rich text content to any page. Use for paragraphs, announcements, policy text, or any content that doesn't require complex layouts.

📁 sections/text-block.liquid⏱️ 2 min setup

Overview

The Text Block is your go-to section for adding text content. It supports rich formatting and flexible layout options.

📝

Rich Text

Bold, italic, links, lists
↔️

Alignment

Left, center, or right
🎨

Custom Colors

Background and text colors
✨

Animation

Fade-up on scroll

When to Use

  • Brand story — Share your mission or values
  • Policy pages — Add content to shipping/returns/privacy pages
  • Announcements — Highlight important information
  • Section dividers — Break up visual sections with text
  • Custom content — Flexible text area for any purpose

Quick Setup

Add Text Block in 2 Steps

  1. 1Add section → Text block
  2. 2Enter your Heading, Subheading, and Body text

Section Settings

Content

SettingTypeDefaultDescription
HeadingtextYour heading hereMain section heading.
Show headingcheckboxtrueToggle visibility of the heading.
SubheadingtextYour subheading hereSecondary text below the heading.
Show subheadingcheckboxtrueToggle visibility of the subheading.
Body textrichtextAdd paragraph text or rich contentMain content area. Supports formatting (bold, italic, links, lists).

Layout

SettingTypeDefaultDescription
AlignmentselectLeftText alignment: Left, Center, or Right.
Include top paddingcheckboxfalseAdd extra spacing above the section.
Vertical paddingrange3remInternal vertical spacing. Range: 0–8rem.

Colors

SettingTypeDefaultDescription
Backgroundcolor#ffffffSection background color.
Textcolor#111111Text color for all content.

Animation

SettingTypeDefaultDescription
Fade up on scrollcheckboxfalseAnimate text into view when scrolling.

Use Case Examples

Brand Story

  • Alignment: Center
  • Heading: "Our Story"
  • Body: Rich text with your brand narrative
  • Background: Brand color or complementary tone

Policy Header

  • Show heading: No
  • Show subheading: No
  • Body: Policy content
  • Alignment: Left

Announcement Banner

  • Heading: "Holiday Hours"
  • Subheading: "December 20-31"
  • Body: Specific hours and information
  • Background: Festive color

Quote / Testimonial

  • Alignment: Center
  • Heading: Customer quote
  • Subheading: "— [Customer Name]"
  • Body: Empty
  • Animation: Fade up on scroll

Best Practices

Content Guidelines

  1. Keep text scannable — Use short paragraphs
  2. Use rich text formatting — Bold key phrases, use lists when appropriate
  3. Don't overload — One topic per text block
  4. Consider mobile — Long paragraphs are harder to read on small screens

Visual Design

  1. Match brand colors — Use your color palette
  2. Contrast is key — Ensure text is readable against background
  3. Use center alignment sparingly — Left is easier to read for long text

Accessibility

  • Text maintains proper heading hierarchy
  • Colors should meet WCAG contrast requirements
  • Animation respects reduced motion preferences

Troubleshooting

Text not visible

  • Check that Text color contrasts with Background color
  • Verify content is entered in the fields
  • Check Show heading/subheading toggles

Spacing looks wrong

  • Adjust Vertical padding slider
  • Toggle Include top padding as needed
  • Check surrounding sections for conflicts

Animation not working

  • Ensure Fade up on scroll is enabled
  • Animation only triggers when scrolling section into view
  • Check browser settings for reduced motion