# Image with text

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F5dkp79iIpcSMIyjzAWY2%2FFox-BG%20Light%20(40).jpg?alt=media&#x26;token=6843ff49-ea6e-455f-81a8-d75a83ad5307" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FurdDV1QndSfOyG80bsBb%2Fimage.png?alt=media&#x26;token=9dc19e95-7186-480e-938a-2a407f4063ab" 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 %}


---

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