Rich text field overview

Updated

Use rich text fields for long-form content in the CMS.

While plain text fields are used for short-form unformatted text, you can use rich text fields for long-form formatted content (e.g., blog posts, articles, team member bios, product descriptions, event details, etc.) on Collection lists and on Collection pages. Your collaborators can also use rich text fields to create and format their content in edit mode.

How to create rich text fields and content

You can add rich text fields to new or existing Collections by opening Collection settings, clicking New field, and choosing Rich text. Before saving the field, you can set a minimum character count and/or a maximum character count. As with any field, you can add help text and specify whether the field is required.

Once you add a rich text field to your Collection, you and your collaborators can create and format rich text content for each Collection item. You can type or paste in rich text content and add:

  • multiple paragraphs
  • images
  • videos
  • rich media
  • bulleted lists
  • numbered lists
  • bold text
  • italicized text
  • links
  • headings
  • block quotes
  • code blocks
  • code embeds

Pro tip

You can quickly add formatted text and content elements using the slash command’ shortcut.

How to display dynamic rich text in your design

To show the content of the rich text field in Collection list or Collection pages, you can add and connect a rich text element:

  1. Go to Add panel > Typography and drag a Rich text element to the canvas
  2. Go to Element settings > Content
  3. Click the purple “dot” icon
  4. Choose the relevant rich text field

You can also access Element settings by selecting the rich text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel.

How to style elements nested in rich text fields

You can set specific styles for each element nested in a rich text field, like headings, lists, links, etc. You can do this before you connect your rich text element to a rich text field.

Once a rich text element is connected to a rich text field, you can’t style elements nested in it. You’ll need to remove the connection, style the elements, and then reconnect it to the rich text field. To remove the connection, go to Element settings > Content, click the purple “dot” icon, and choose Disconnect property.

How to filter a Collection list using a rich text field

To filter a Collection list using a rich text field:

  1. Select the Collection list you want to filter on the canvas
  2. Go to Element settings > Collection list settings > Filters
  3. Click the “plus” icon
  4. Choose the relevant rich text field in the first dropdown
  5. Choose a rule in the second field
  6. Click Save

There are two filter rules you can use with the rich text field:

  • Is Set — looks for Collection items that have content for this rich text field
  • Is Not Set — looks for Collection items that don’t have any content in this rich text field

Set conditional visibility using a rich text field

You can use conditional visibility to show rich text content under specific conditions — for example, you can show a heading only when a specific rich text field contains content.

To set conditional visibility using a rich text field:

  1. Select the element to which you want to add conditional visibility
  2. Go to Element settings > Conditional visibility
  3. Click the “plus” icon
  4. Choose the relevant rich text field in the first dropdown
  5. Choose a rule in the second dropdown
  6. (Optional) Add a value in the third field
  7. Click Save