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.

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

Show or hide elements based on a rich text field

You can use conditionals to show or hide elements based on a rich text field — for example, show a heading only when a rich text field contains content.

To set a conditional using a rich text field:

  1. Select the element to show or hide (must be inside a Collection list or on a Collection page)

  2. Go to Element settings > Visibility

  3. Click the “plus” icon

  4. Choose the rich text field you want to base the conditional on

  5. Choose a rule (Is set/ Is not set)

  6. Set Visibility > Visible

  7. Set Else > Visibility > Hidden

  8. Click off the modal or press Esc on your keyboard to save the conditional

Related articles