# Image with text

The **Image with Text** section is a versatile layout element used to present visuals alongside written content. It’s commonly used for highlighting product features, brand stories, or promotional content in an engaging and structured way. This section supports both image and text content blocks, allowing flexible arrangements.

This section can be **added, removed, and rearranged** within any template.

<figure><img src="https://content.gitbook.com/content/9icwdCUv3B94Yb9tmqHW/blobs/lJl4WNJ6EsosTC9TjL24/image.png" alt=""><figcaption></figcaption></figure>

***

#### How to Configure the Image with Text

1. In Shopify admin, go to **Online Store → Themes**.
2. Click **Customize** next to the **Elemento** theme.
3. In the theme editor, navigate to the desired page template (e.g. Home page) using the top preview dropdown.
4. In the left sidebar, click **Add section**, then select **Image with Text**, or locate it if it’s already added.
5. Upload or select the image you want to display, and enter the accompanying text content (heading, subheading, body text).
6. Adjust layout options such as image position, text alignment, button settings, and background color.
7. You can **drag and drop** this section to reorder it on the page.
8. Click **Save**.

#### Section Settings

| Setting          | Type                  | Description                                                    |
| ---------------- | --------------------- | -------------------------------------------------------------- |
| **Heading**      | Text                  | Title for the entire section. Useful for context or headlines. |
| **Color scheme** | Color scheme selector | Defines the visual theme for background and text colors.       |

**Section Padding**

| Device      | Setting        | Type  | Description                              |
| ----------- | -------------- | ----- | ---------------------------------------- |
| **Desktop** | Top padding    | Range | Space above the section on desktop view. |
| **Desktop** | Bottom padding | Range | Space below the section on desktop view. |
| **Mobile**  | Top padding    | Range | Space above the section on mobile view.  |
| **Mobile**  | Bottom padding | Range | Space below the section on mobile view.  |

***

#### Blocks

**Text Block**

Used to add supporting content next to the image.

| Setting                | Type                               | Description                                                 |
| ---------------------- | ---------------------------------- | ----------------------------------------------------------- |
| **Subheading**         | Text                               | A smaller headline above the main text.                     |
| **Text**               | Rich text                          | Descriptive or promotional content.                         |
| **Vertical alignment** | Select (`top`, `center`, `bottom`) | Controls vertical alignment of the text within the section. |

***

**Image Block**

Used to display an image next to the text block.

| Setting          | Type                                                  | Description                              |
| ---------------- | ----------------------------------------------------- | ---------------------------------------- |
| **Image**        | Image picker                                          | Upload or select the image to display.   |
| **Image height** | Select (`adapt to image`, `small`, `medium`, `large`) | Defines how tall the image area will be. |
