> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/highlight-text-with-image.md).

# Highlight text with image

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

{% hint style="info" %}
This section is available on ✨ **Zest version 9.0.0 onwards**. See our [Changelog](/zest-theme/changelog.md)
{% endhint %}

Create expressive, stylized headlines by combining bold typography and small inline images.&#x20;

Perfect for communicating brand values, benefits, or emotional appeal, this section is widely used in beauty, wellness, and fashion industries.

## How to add a **Highlight Text with image section** to your Shopify store <a href="#how-to-add-a-highlight-text-with-image-section-to-your-shopify-store" id="how-to-add-a-highlight-text-with-image-section-to-your-shopify-store"></a>

{% hint style="success" %}
**Steps:**

1. In the theme editor **(Customize)** > click **Add section**
2. Select **Highlight text with image**.
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

## How to edit a **Highlight Text with image section** <a href="#how-to-edit-a-highlight-text-with-image-section" id="how-to-edit-a-highlight-text-with-image-section"></a>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### **Text (Main text)**

* **Heading**:
  * Use the rich text editor to add your text.
  * To insert images inline, use the placeholder format:

    ```
    [img1], [img2], [img3], ...
    ```

    Each placeholder will be replaced with an image block in the order they appear.

> **Example:**\
> `Make you feel [img1] and appear *glowing* [img2] *healthy* [img3] *and balanced*`

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

* **Highlighted text**: *Learn more*: [General settings](/zest-theme/pages-global-sections/general-settings.md#highlight-text)
* **Heading size**: Choose from several text sizes.
* **Text alignment**: Align your text to **left**, **center**, or **right**.

### Block settings

You can add multiple images, and they will be injected in the order `[img1]`, `[img2]`, etc.

Each image block allows:

* **Image upload** (JPG, PNG, WEBP, etc.)
* **Image link** (optional)
* **Image width** (desktop & mobile separately)

{% hint style="info" %}
💡 **Pro tip**: Use transparent icons for best results. We recommend 40–100px width, depending on your heading size.
{% endhint %}

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