# 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 %}