> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text.md).

# Image with text

The **Image with text** section combines a feature image with a marketing call to action block. With a flexible layout and optional button, it's a great way to introduce a product collection or something new and exciting.

<div data-with-frame="true"><img src="/files/behnRcCpXOrXT4tBPv1p" alt="" width="563"></div>

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Image with text**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add feature image</h2>

***

Upload a feature image to display on the left or right of the marketing text block. You can adjust the image position, shape, and focal point, and also add an image caption.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Image with text** section to open the section settings.
2. Click **Select image** to upload and select an image file.

   > There are no required images dimensions. We simply recommend uploaded images have a minimum width of **`2050px`** for optimal quality across all devices.
3. Select an **Image aspect ratio** to crop your image to **Square**, **Landscape**, or **Portrait**.

   > The **Natural** setting displays the original shape of your image.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
4. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](/stiletto/general/image-guide/theme-image-settings.md#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
5. Select the **Image position** to display the image on the **Left** or **Right** side of the section.

   > The text content will display on the opposite side of the image.
6. Click **Save**.

</details>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select an image to display as the feature image.</p><p>There are no required image dimensions. We recommend a minimum width or height of 2500px.</p></td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Choose to crop the primary image to a uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping).<br><br>Learn more about aspect ratios in our <a href="/pages/W1limMa3a6HViAgYU6Ns#image-aspect-ratio">Image settings guide</a>.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns#image-focal-point">Image settings guide</a>.</td></tr><tr><td><mark style="color:blue;">Image caption</mark></td><td>Enter text to display below the image.</td></tr></tbody></table>

<h2 align="center">Add small image</h2>

***

The **Small** image overlays the bottom corner of the feature image. The small image is about 1/4 of the size of the feature, creating a layered, editorial style. It's great for a close-up or detailed photo of your product.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Image with text** section to open the settings.
2. Check the **Show small image** option.
3. Under **Small image**, click **Select image** to upload and select an image file.

   > There are no required images dimensions. We recommend images that are **square (1:1)** or **landscape (3:2)** (wider than tall) with a minimum width of **`2500px`** for optimal quality across all devices.
4. Select an **Small image aspect ratio** to crop your image to **Square**, **Landscape**, or **Portrait**.

   > The **Natural** setting displays the original shape of your image.

   <img src="/files/RFmWGT0O4EPQmXP8F5si" alt="" width="375">
5. Select the **Image focal point** to choose which area of the image to keep centered and visible when cropping occurs.
6. Click **Save**.

</details>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="242">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show small image</mark></td><td>Display an image that overlays the bottom corner of the primary image.</td></tr><tr><td><mark style="color:blue;">Small image</mark></td><td><p>Select an image to display as the feature image.</p><p>There are no required image dimensions. We recommend a minimum width or height of 1000px.</p></td></tr><tr><td><mark style="color:blue;">Small image aspect ratio</mark></td><td>Choose to crop the small image to a uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping).</td></tr><tr><td><mark style="color:blue;">Small image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns#image-focal-point">Image settings guide</a>.</td></tr></tbody></table>

<h2 align="center">Add content blocks</h2>

***

Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.

<div><figure><img src="/files/CySklwWxaSRn3gHtNic2" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="/files/ePWVCmf4HT8QaKrfmkhI" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Accent</strong></mark></td><td>Add small label heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#accent">/pages/5U2s1qKTve492neoD35D#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#heading">/pages/5U2s1qKTve492neoD35D#heading</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Add multiple lines of rich text.</td><td><a href="/pages/5U2s1qKTve492neoD35D#text">/pages/5U2s1qKTve492neoD35D#text</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="/pages/5U2s1qKTve492neoD35D#button">/pages/5U2s1qKTve492neoD35D#button</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="/pages/5U2s1qKTve492neoD35D#image">/pages/5U2s1qKTve492neoD35D#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Video player</strong></mark></td><td>Add video that plays in a popup viewer.</td><td><a href="/pages/5U2s1qKTve492neoD35D#video-player">/pages/5U2s1qKTve492neoD35D#video-player</a></td></tr><tr><td><mark style="color:blue;"><strong>Border</strong></mark></td><td>Add divider between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#divider">/pages/5U2s1qKTve492neoD35D#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#spacer">/pages/5U2s1qKTve492neoD35D#spacer</a></td></tr></tbody></table>

<h2 align="center">Section layout</h2>

***

Change the position of the featured image and the alignment of the content blocks.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="161">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image position</mark></td><td>Choose to display the featured image either <strong>Left</strong> of content or <strong>Right</strong> of content on desktop screens.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Align the headings and button to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the text area.</td></tr></tbody></table>

***

> **Related links**
>
> [Image hero](/stiletto/sections/theme-sections/image-hero.md)\
> [Image hero split](/stiletto/sections/theme-sections/image-hero-split.md)\
> [Image with text split](/stiletto/sections/theme-sections/image-with-text-split.md)\
> [Slideshow](/stiletto/sections/theme-sections/slideshow.md)\
> [Grid](/stiletto/sections/theme-sections/grid.md)