Rich Text Setup Guide
This guide explains how to configure the Rich Text section of your Shopify store—an adaptable section for displaying custom text content (like welcome messages, brand descriptions, or promotional blurbs) to engage visitors and set context for your store.
All settings mentioned below can be found in:
Online Store → Themes → Customize → Rich Text
Text Alignment
Controls the horizontal alignment of your rich text content (headings and body text) across devices.
- Left: Traditional readability-focused layout (ideal for longer paragraph text).
- Center: Balanced, attention-grabbing style (perfect for welcome messages, short brand slogans, or title-focused content).
- Right: Stylized alignment (use sparingly for design contrast, e.g., paired with a right-aligned visual element).
For the "Welcome to Your New Online Store" example (shown in the preview), Center alignment is recommended—it makes the greeting feel inviting and focused.
Font Size
Slider (default: 100%) that adjusts the size of all text in the Rich Text section (scales headings and body text proportionally).
- Adjust between
80% (subtle, secondary content) and 120% (prominent, primary messaging). - Use
100% as a baseline—tweak based on your store’s overall typography style. - Avoid sizes over
120%: Oversized text can crowd the section and reduce readability on small screens.
Section Spacing
Controls the padding above and below the Rich Text section, ensuring it fits smoothly with adjacent content.
Top Spacing
Slider (default: 44 px) that sets the gap between the Rich Text section and the content above it.
- Increase to
60-80 px if the section feels cramped against the element above (e.g., a header or banner). - Decrease to
20-30 px for a tight, compact layout (e.g., between two related content blocks).
Bottom Spacing
Slider (default: 44 px) that sets the gap between the Rich Text section and the content below it.
- Match the value to Top Spacing for visual symmetry (recommended for standalone sections like welcome messages).
- Tweak independently if the section needs to fit a specific flow (e.g., less spacing before a product grid).
Advanced Settings
Custom CSS
Dropdown for advanced users to add custom CSS styling (e.g., adjust text color, add letter spacing, or modify line height).
- Only use this if you have CSS knowledge—incorrect code can break your store’s layout.
- Example use case: Add
letter-spacing: 1px; to the heading for a more polished look.
Always test custom CSS on both desktop and mobile—styling that looks good on large screens may break on small devices.
Best Practices
- Keep text concise: Use 1-2 short paragraphs (long blocks of text will cause visitors to scroll past).
- Pair with context: Use Rich Text to introduce your store’s purpose (e.g., "Perfect for fashion brands, boutiques, and designers") before directing visitors to products.
- Test responsiveness: Ensure text remains readable and well-aligned on mobile, tablet, and desktop.
- Match brand voice: Use tone (friendly, professional, playful) that aligns with your store’s identity.
The Rich Text section is a flexible tool—use it to set the tone for your store, highlight key value propositions, or welcome first-time visitors!