# Rich text

You can include large or short messages and add blocks with image, countdown timer, and buttons for a fully interactive, visually engaging experience. This section is perfect for highlighting special announcements, seasonal promotions, or any key messaging you want to emphasize on your store’s pages.

<figure><img src="/files/VOCNdo3rgz1cjyaPUkCs" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Rich text** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/fuaFubWcPe864Y4pUu7n" alt=""><figcaption></figcaption></figure>

### **2, Section settings:**

Customize the layout, alignment, and width of the Rich text section with these settings:

* **Desktop content alignment**: Adjust the alignment of content and buttons within the section to **Left**, **Center**, or **Right**.
* **Desktop content width**: Set the width of the content area on desktop to **Small**, **Medium**, or **Large**. Content width will automatically adjust on mobile for optimal responsiveness.
* **Mobile layout:** Align content and buttons on mobile devices to the **Left**, **Center**, or **Right**.

### **3, Block settings**

Each block within the Rich text section has customizable settings to adjust the appearance of the section’s content.

**a. Heading block:**

* Add a heading in rich text format. Change the color of highlighted words.&#x20;

**b. Text block:** Add descriptive text to supplement the heading.

**c. Buttons block:** A Theme allows users to add up to **2 buttons** in the Rich text section. Enter a label for each button. If the label is left blank, the button will not appear. Assign a link to each button. And choose a style for each button, and customize button colors using the options provided.

**d. Caption block:** Add a caption to provide additional context or emphasis. Choose the caption style, either **Uppercase** or **Subtitle**.

**e. Countdown timer block:** Add a countdown timer to create urgency around promotions or events.

* Specify the **end date**, **end time**, and **size** of the countdown timer.
* **Enable "Hide when countdown reaches zero"**: Once the countdown finishes, the timer will automatically disappear from the section.&#x20;
* Choose to add a border around the countdown timer if desired.

**f. Image block:** Select an image to display within the Rich text section. Adjust the size of the image, with options ranging from **30px to 200px**.

**g. Collections block:** Showcase a curated list of collections within the Rich text section.

* **Collections:** Select up to six collections to display in the block.
* **Color:** Allow you to set a custom text color, replacing the default color.

### **4, Practical applications of the Rich text section**

#### **How to create a countdown timer on a solid or gradient background?**

A countdown timer with a bold background can effectively create urgency for time-sensitive promotions or special events. Follow these steps to set it up in the Rich text section:

{% stepper %}
{% step %}
In the **Theme editor**, select the Rich text section to add it to your page.
{% endstep %}

{% step %}
Within the Rich Text section, add the **Countdown timer** block to display a countdown for your promotion or event.
{% endstep %}

{% step %}
Customize the background color of the section to either a **solid** or **gradient color**. Adjust the **text** and **countdown timer colors** to your preferred color (overriding the default theme color) for a cohesive look.
{% endstep %}

{% step %}
For guidance on creating gradients, refer to [**Shopify’s Color Gradient Guide**](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#colors).
{% endstep %}

{% step %}
Click **Save** to apply the changes.
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/section/rich-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.