> 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/image-with-text.md).

# Image with text

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

The image with text section provides an appealing and dynamic approach mixing media, message, and a call-to-action button. This is a great way to promote a product/collection or any exciting feature on your online store.&#x20;

This section includes a customizable image alongside text content. On desktop, the image and text sit side by side. On mobile, they stack vertically.

## How to add an Image with text section to your Shopify store

{% hint style="success" %}
Steps

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

## How to edit an Image with text section

### Section settings

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

<table><thead><tr><th width="240">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload or select your image.</td></tr><tr><td><strong>Image width</strong></td><td>Set how much horizontal space the image takes up.</td></tr><tr><td><strong>Desktop image position</strong></td><td>Choose whether the image shows on the left or right side of the text.</td></tr><tr><td><strong>Vertical alignment</strong></td><td>Align content to the top, middle, or bottom of the section.</td></tr><tr><td><strong>Column gap</strong></td><td>Adjust horizontal spacing between the image and text.</td></tr><tr><td><strong>Row gap</strong></td><td>Adjust vertical spacing on mobile layout.</td></tr><tr><td><strong>Padding left/right</strong></td><td>Add extra spacing inside the content container.</td></tr><tr><td><strong>Align content container</strong></td><td>If the section is full-width, use this to align the inner content left, center, or right.</td></tr></tbody></table>

### Block settings

This section supports 4 block types, which you can rearrange or hide as needed:

<table><thead><tr><th width="240">Block</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>Optional text—good for labels or context.</td></tr><tr><td><strong>Heading</strong></td><td>Main title of your section. Accepts rich text formatting.</td></tr><tr><td><strong>Text</strong></td><td>Body copy for your message. </td></tr><tr><td><strong>Button</strong></td><td>Add a clickable call-to-action to guide users.</td></tr></tbody></table>

{% hint style="success" %}

#### Pro tip 💡

You can stack multiple **Image with Text** sections throughout your site to break up long content and keep the layout dynamic.
{% endhint %}