# Highlight text with image

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20-%202025-11-24T144102.712_5yU88vUO.jpg)

**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 type="success">

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

</Hint>

## How to edit the section Highlight text with image

<div>![image](https://docs-assets.foxecom.app/pebble-theme/image_MkPqfRYj.png) ![image](https://docs-assets.foxecom.app/pebble-theme/image_NHj9YrmE.png)</div>

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

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

<Expandable title="Main text settings">

* **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).
    * **Custom** — allows full manual control.

</Expandable>

<Expandable title="Child blocks">

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 widths="201,auto">

| Setting | Description |
| --- | --- |
| **Image** | Upload the inline image that appears within the text |
| **Link** | Make the image clickable (optional) |
| **Aspect ratio** | Choose how the image is displayed or cropped |
| **Image width** | Control image width on desktop |

</Table>

</Expandable>