Rich text

Overview

The Rich text section provides a powerful way to showcase styled content—such as headlines, captions, icons, and buttons—in a visually compelling layout. This section is ideal for boosting engagement through announcements, feature highlights, or creative messaging. Its flexible structure keeps your message front and center with your brand’s style.

⚠️ Important: The Rich text section draws attention to your key messages or calls-to-action while keeping your pages organized.

Key components and functionality

Content settings

Content settings let you define the main message and layout for the Rich text section. This is where you adjust natural reading order, style, and overall impact of headings, captions, body text, icons, and alignment. With these controls, you can clarify your message and guide visitor attention.

1. Set text alignment to control how the main elements—headings, text, icons, and buttons—are positioned horizontally. Choose left, center, or right.

2. Pick an icon position to determine where the icon appears relative to your text:

   1. Top

   2. Bottom

   3. Center

   4. Left

   5. Right

3. Enter an icon name or code to visually reinforce your message for quick recognition and emphasis.

4. Add a caption for an extra line of context or to use as a subheading, category, or call out.

5. Set your main heading. The default is Rich text.

6. Choose heading size:

   • Extra small

   • Small

   • Medium

   • Large

   • Extra large

   • Jumbo

7. Choose a heading type for size and hierarchy:

   1. Paragraph

   2. H1

   3. H2 (default)

   4. H3

   5. H4

   6. H5

   7. H6

8. Enter your content in the main formatted body area. You can use bold, italic, links, and lists to enhance your messaging. The default is Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Button settings

Button settings allow the creation and style of an interactive button within the Rich text section, directing visitors to products, collections, or any target you choose. You can fine-tune both look and behavior.

1. Use button icon to add an image or symbol to your button for visual emphasis. Add an icon name/code to clarify action intent.

2. Set the button text for the label on your action button. Leave blank to hide the button unless it’s set to icon-only.

3. Add a button link for the URL destination of your button, connecting users to your promotions or key pages.

4. Turn on open link in a new tab to launch the link in a separate browser tab. The default is off.

5. Choose a button style for visual prominence:

   1. Primary

   2. Secondary

   3. Extra large

   4. Plain

   5. Small

   6. Small secondary

   7. Circle

   8. Use bolder styles for important actions and subtle ones for less emphasis.

6. Set a button layout to decide where the icon appears on your button:

   1. Icon left (icon before label)

   2. Icon right (icon after label)

   3. Icon only (display only icon, no label)

Supported block types

The Rich text section supports button blocks. Button blocks allow you to add extra calls-to-action with independent icon, style, and link controls. This flexibility means you can guide attention to multiple actions at once.

1. Add as many button blocks as you need to highlight several actions.

2. Configure each button independently for nuanced messaging.

3. Experiment with different icons and styles for each button to fit your objectives.

💡 Tip: Use a combination of text and strong button styles to maximize visibility and guide users toward key actions.

Usage notes

1. Responsive design is built-in. Adjust text alignment and sizing so your content remains readable and elegant on any device.

2. Performance benefits from optimized icons and images—keep media lightweight for fast page loads.

3. Accessibility improves with clear headings, meaningful button labels, and strong color contrasts.

4. Preview the Rich text section on both desktop and mobile before publishing to ensure the layout, calls-to-action, and visual spacing perform as intended.

5. Avoid excessive padding or heavy backgrounds—especially when using large or bold text—so the section remains clear and uncluttered.

💡 Tip: Short, purposeful content yields the best results. For longer stories or instructions, use multiple Rich text sections for improved clarity and easier navigation.

🚨 Warning: Do not crowd the section with too many large elements. Keep actions and calls-to-action focused so each message stands out clearly.

With these controls and guidelines, the Rich text section empowers you to present updates, promotions, and campaigns in a way that is visually strong, motivating, and accessible.