# Highlight text with image

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FB5cfqkAX9U81qa3Pr70i%2FFox-BG%20Light%20-%202025-11-24T144102.712.jpg?alt=media&#x26;token=0b68a9c6-958f-4e9e-bf2b-c2a86061727f" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F1HZ78IqgOkVrXptfu5k2%2Fimage.png?alt=media&#x26;token=08072428-217b-48af-9178-68da6292f43a" alt=""><figcaption></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FquaB4fdH9ikqK4aHeg7N%2Fimage.png?alt=media&#x26;token=c675de2e-f413-4edf-8065-a107568f80b1" alt=""><figcaption></figcaption></figure></div>

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

* A **subheading**. Learn more: [#text](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#text "mention")
* 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: [#text-presets](https://docs.foxecom.com/pebble-theme/theme-settings/typography#text-presets "mention").
    * **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>