> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image with text

> A photo beside a kicker, heading, text and up to two buttons, with optional short tags on the photo.

![Image with text on the storefront](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/image-with-text.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=e0f76ec7c3d4a222afdea372f603eef0)

Image with text, highlighted with the demo content

## Where to find it

Not on any page when the theme is installed. In the theme editor open any page, click Add section and choose Image with text.

## How it works

* One panel split in two: the text on one side and the Image filling the other. The photo is cropped to fill its half and is at least 420 px tall on desktop.
* Image position puts the photo After the text or Before the text. Under 900 px the photo always comes first, in a 16 to 10 shape.
* Tags on the image show as small labels in the bottom corner of the photo.
* Each button shows only when both its label and its link are filled. The first is solid, the second outlined.
* Without an image, Shopify's placeholder drawing shows.
* Screen readers read the image's alt text, which you edit in Content → Files.

![The Add section list in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-add-section.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=b54bfcb98c05e2133b5810f6fc3f747e)

Not on the demo pages: add it with 1 Add section, then pick it in 2 the list

## Edit it

* Upload an Image (1600 x 1200px recommended) and set its focal point so the crop keeps the subject in view, since the photo is cropped to fill its half.
* Type a few short Tags on the image, such as Battery, Noise, Thermals, or leave it empty.
* Edit Kicker, Heading and Text, then add a First button label and First button link.
* Choose Image position and a Color scheme.

## Settings

| Setting | What it does |
| - | - |
| **Image** | Image: upload one or choose from Content → Files. 1600 x 1200px recommended. |
| **Image position** | Options: After the text, Before the text. On phones the image always comes first. Default: After the text. |
| **Tags on the image** | Text. Short words separated by commas, such as Battery, Noise, Thermals. |
| **Kicker** | Text. |
| **Heading** | Text. Default: We measure it before we sell it. |
| **Text** | Formatted text. |
| **First button label** | Text. |
| **First button link** | Link: a page, product, collection or web address. |
| **Second button label** | Text. |
| **Second button link** | Link: a page, product, collection or web address. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.