# Highlight text with image

<figure><img src="/files/5yU88vUObBgcx4UPUNDf" alt=""><figcaption></figcaption></figure>

**Highlight text with image** is a storytelling-focused section designed to showcase short messages paired with small inline images. It’s perfect for creating expressive headlines, visual statements, or strong brand moments across landing pages.

## How to add a Highlight text with image section to your Shopify store

{% hint style="success" %}

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

## How to edit the section Highlight text with image

<div><figure><img src="/files/MkPqfRYjoDvot8ATMpA6" alt=""><figcaption></figcaption></figure> <figure><img src="/files/NHj9YrmEDqkcowuKytIC" alt=""><figcaption></figcaption></figure></div>

The section preset comes with 2 **static blocks**:

* A **subheading**. Learn more: [Basic](/pebble-theme/theme-blocks/basic.md#text)
* A **main highlight text area**:
  * Highlight images have already been added inside the main text block.

<details>

<summary>Main text settings</summary>

* **Heading**: Write the main message.&#x20;

Use shortcodes like **\[img1]**, **\[img2]**, **\[img3]** to place images inline. Each shortcode corresponds to an “Image” nested block inside this block.

*Example:*

```
Sustainability done right [img1] crafted with care [img2]
```

* **Typography preset**: Controls the text style.
  * Options:
    * **H1 – H6** (theme typography presets). Learn more: [Typography](/pebble-theme/theme-settings/typography.md#text-presets).
    * **Custom** — allows full manual control.

</details>

<details>

<summary>Child blocks</summary>

This block supports **inline image** blocks nested inside the text.\
Each image block maps to a shortcode in the text, e.g.:

* `[img1]` → first image block
* `[img2]` → second image block
* `[img3]` → third image block

You can reorder the blocks to change the mapping order.

Each block includes settings:

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload the inline image that appears within the text</td></tr><tr><td><strong>Link</strong></td><td>Make the image clickable (optional)</td></tr><tr><td><strong>Aspect ratio</strong></td><td>Choose how the image is displayed or cropped</td></tr><tr><td><strong>Image width</strong></td><td>Control image width on desktop</td></tr></tbody></table>

</details>


---

# 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/pebble-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.