# Rich text

The **Rich text** section adds a single full-width block for promotional text. Describe a product, share announcements, or welcome customers to your store. Add an optional call-to-action button. It looks great between two image-focused sections.

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/spark/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Rich text**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## Add headings and text

Edit the **Heading**, **Subheading**, and **Text** blocks to add content to the Rich text section.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Title** block (”Rich text”) to open the settings.
2. Change the **Heading** text to display as a section title.

   > We recommend a title of just a few words long.

   > Use the **Remove block** button to remove the Heading block entirely.
3. Use the **Max width of text** slider to control the maximum width of the heading.
4. Click the **Text** block to open the settings.
5. Enter text to display in the section.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).

   > Use the **Max width of text** slider to control the maximum width of the rich text. Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
6. Click **Save**.

</details>

## Add call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click **(+) Add block** and select **Button**, then click the new button block.
2. Select or paste a URL for the **Link**.
3. Change the **Link text** to display on the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Click **Save**.

</details>

## Section style

Customize the section **Style** with options for section **Spacing**, **Animation**, and **Alternate section color**.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the section to find the **Section style** settings.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-309687bb9b31e7f3d33217dea186736e74109ff0%2Ftheme-section-styles.jpeg?alt=media)
2. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) in Spark.
3. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
4. Select a **Spacing** option to add padding around the section content.

   > Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-dea3714e6b027ccef067f49888512f7fee4715ee%2Ftheme-section-spacing.jpeg?alt=media)
5. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
6. Click **Save**.

</details>

## Settings reference

Click the **Blocks** to find the following settings. Use the drag-and-drop handles **`⋮⋮`** to change the order of the blocks.

| Setting           | Description                                                                                                                                                                                                                     |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Heading           | Add text to display as a section heading.                                                                                                                                                                                       |
| Text              | Add text to be displayed below the heading text. We recommend a short paragraph just a few sentences long. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide. |
| Max width of text | Use the slider to control the maximum width and line breaks of the headings.                                                                                                                                                    |
| Button link       | Select or paste a URL for a button. You can add up to three buttons below the section heading.                                                                                                                                  |
| Button label      | Enter call-to-action text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).                                                                 |

Click the **Rich text** section to find the following settings.

#### Section style

| Setting                     | Description                                                                                                                                                                                                                                   |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation            | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) to learn more.                                     |
| Use alternate section color | Apply the alternate section colors as chosen in your Theme Settings. See Spark's [theme color settings](https://help.fluorescent.co/spark/theme-styles/colors) to learn how to create a secondary color scheme with alternate section colors. |
| Spacing                     | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None.                                                                                                                                  |
| Spacing amount              | Increase or decrease the amount of space around the section: either Full, Half, or Minimum.                                                                                                                                                   |

\\

***

> **Related links**
>
> [Questions and answers](https://help.fluorescent.co/spark/pages/theme-sections/questions-and-answers)\
> [Image with text](https://help.fluorescent.co/spark/pages/theme-sections/image-with-text)\
> [Testimonials](https://help.fluorescent.co/spark/pages/theme-sections/testimonials)
