# Highlight text with image

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FFdCL8nWWFSrXuZJNYoMH%2FFox-BG%20Light%20(39).jpg?alt=media&#x26;token=bfb2a4b3-b452-42a5-a4e0-053cb2793675" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section is available on ✨ **Zest version 9.0.0 onwards**. See our [changelog](https://docs.foxecom.com/zest-theme/changelog "mention")
{% 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FPUM6gODwpYOcMeLUeysV%2Fimage.png?alt=media&#x26;token=900f4a6c-d4a1-4bd8-b7ee-5666d1e94295" alt=""><figcaption></figcaption></figure>

* **Highlighted text**: *Learn more*: [#highlight-text](https://docs.foxecom.com/zest-theme/pages-global-sections/general-settings#highlight-text "mention")
* **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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FYhAv4zjc1lUWgwuw730K%2Fimage.png?alt=media&#x26;token=54090188-1afe-4bd6-a2c6-dcba11417fe9" alt=""><figcaption></figcaption></figure>


---

# 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://docs.foxecom.com/zest-theme/theme-sections/highlight-text-with-image.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.