Rich Text Pro

Theme: Multipurpose Fashion Theme

Help Center > Sections & Blocks > Rich Text Pro

Overview

The Rich text Pro section displays formatted text: headings, paragraphs, lists, bold, italic, and links. Use it for about us content, shipping info, policy highlights, or brand storytelling. Supports narrow column for readability, flexible alignment, content colors, dynamic backgrounds, and scroll-based animation. No blocks—configure via section settings.

Where to Add This Section

Go to Online Store > Themes > Customize.
Select Homepage or Default page.
Click Add section.
Choose Rich text Pro.
Save.

📷 Image placeholder: Add a screenshot of Rich text Pro section.

Quick Setup (2 Steps)

Add heading — Enter subheading and main heading.
Add content — Use Rich text field for paragraphs, lists, links.

Section Settings

Setting	Description
Layout
Container width	Page, Large, Full
Narrow column	Constrain text width for readability (max 700px)
Vertical alignment	Top, Center, Bottom
Padding top / bottom	Section spacing (0–120px)
Min height	Minimum section height (0 = auto)
Content
Subheading	Small text above heading
Heading	Main heading
Heading size	Small, Medium, Large
Rich text	Main content (WYSIWYG: paragraphs, lists, links)
Content alignment	Left, Center, Right
Content colors
Subheading color	Optional. Uses default when empty.
Heading color	Optional. Uses default when empty.
Content color	Rich text body color. Uses default when empty.
Background
Background style	Custom color or Color scheme preset
Background preset	Theme color scheme (when style = preset)
Background image	Optional. Overlays the background color.
Background size	Cover, Contain
Background repeat	No repeat, Repeat, Repeat X, Repeat Y
Background position	Top, Center, Bottom (when using image)
Background overlay color	Overlay tint over image
Background overlay opacity	0–100%
Fallback background color	Used when no preset is selected
Parallax	Fixed background (requires image). Disabled on mobile.
Animation
Enable animation	Scroll-based fade/slide on view
Animation style	Fade, Slide up, Slide down
Animation duration	300–1200ms
Animation delay	0–500ms

Features

Modular BEM CSS — rtp block, rtp__content, rtp__text, etc.
Dynamic background — Color scheme presets, custom color, background image, overlay, textures.
Accessibility — role="region", aria-label, focus-visible styles on links, respects prefers-reduced-motion.
RTL support — Uses logical properties (margin-inline, padding-inline, text-align).
Animation — Intersection Observer–based; no animation when user prefers reduced motion.

For Merchants

Keep paragraphs short (3–5 sentences).
Use lists for scannable content.
Narrow column improves readability for long text.
Content colors override scheme defaults—use for contrast on dark backgrounds.

For Theme Reviewers

Uses richtext schema type; standard Shopify sanitization.
Online Store 2.0 compatible.
No inline CSS/JS; CLS safe.

FAQs

1. What is the Rich Text Pro section?

The Rich Text Pro section is designed to display formatted text such as headings, subheadings, paragraphs, lists, and links. It is a versatile section that can be used for various purposes like about us content, brand storytelling, shipping info, or policy highlights. It is fully responsive, modular, and theme store ready.

2. How can I add the Rich Text Pro section to my theme?

Go to Online Store > Themes > Customize.
Select the page where you want to add the section (e.g., Homepage or Default page).
Click on Add section.
Choose Rich Text Pro.
Save your changes.

3. Can I customize the layout of the Rich Text Pro section?

Yes, the Rich Text Pro section allows you to customize:

Container width: Choose between Full, Boxed, or Narrow.
Vertical alignment: Options include Top, Center, and Bottom.
Content alignment: You can align the content to the Left, Center, or Right.
Padding: You can adjust the top and bottom padding for better spacing.
Min height: Set a minimum height for the section to ensure it has sufficient space.

4. Does the Rich Text Pro section support images?

Yes, the Rich Text Pro section supports background images. You can upload a background image and adjust its settings:

Background size: Options include Cover or Contain.
Background repeat: Choose between No repeat, Repeat, Repeat-X, or Repeat-Y.
Parallax effect: You can enable the parallax effect for a dynamic scrolling experience.

5. How do I add animations to the Rich Text Pro section?

The Rich Text Pro section supports animations when it comes into view. You can choose from various animation styles like fade, slide-up, or slide-down. Additionally, you can control the duration and delay of the animation. To enable the animation, simply check the Enable animation option in the section settings.

6. Is the Rich Text Pro section compatible with RTL (Right-to-Left) languages?

Yes, the Rich Text Pro section is fully RTL (Right-to-Left) compatible, making it ideal for languages like Arabic or Hebrew. The text alignment and layout will automatically adjust when viewed in an RTL context.

7. How do I customize the colors in the Rich Text Pro section?

You can customize the following color settings:

Subheading color: Adjust the color for the subheading.
Heading color: Set a color for the heading.
Content color: Choose the color for the main body of the rich text.

If no color is selected, the default colors will be used.

8. Can I add custom code to the Rich Text Pro section?

The Rich Text Pro section is designed to be customizable using Shopify's theme editor. However, for custom functionality beyond what's offered in the section settings, you can add custom HTML in the Rich Text field using the WYSIWYG (What You See Is What You Get) editor. This section does not support inline CSS or JS for the sake of modularity and theme store compliance.

9. Can I adjust the text content directly in the section settings?

Yes, you can directly edit the subheading, heading, and rich text content within the section settings in the Shopify Theme Editor. The rich text editor allows you to format the text using various styling options such as bold, italics, lists, and hyperlinks.

10. How does the background overlay work?

The background overlay feature allows you to apply a color overlay on top of the background image, making it darker or lighter for better readability of the content. You can customize the overlay's color and opacity through the section settings.

11. Can I change the background style to a custom color?

Yes, you can change the background style to a custom color in the Background settings. You can either select a preset color scheme or use a custom color for the section's background.

12. What should I do if the animation is not working?

If the animation is not triggering as expected:

Ensure that the Enable animation option is checked.
Confirm that the section is visible in the viewport when scrolling.
Make sure JavaScript is enabled in your browser, as animations rely on the Intersection Observer API.

13. Is the Rich Text Pro section optimized for SEO?

Yes, the Rich Text Pro section uses semantic HTML, with headings (<h2>) and paragraphs (<p>) to structure content, which helps with SEO. Additionally, you can add alt text for background images and ensure that the content is accessible to search engines.

14. What is the best way to structure the content in the Rich Text Pro section?

To make the content more scannable:

Keep paragraphs short (3–5 sentences).
Use bullet points or lists for key information.
Use the Narrow column option to improve readability for longer texts.

15. Does the section support multilingual content?

Yes, the Rich Text Pro section supports multilingual content. If your store is set up with multiple languages, the content will automatically adapt to the selected language in the theme editor.

Multipurpose theme documentation