# Image with text split
The **Image with text split** section displays two images side by side with overlay text. It's great to show off two angles of the same product, or introduce a new collection.
The left side displays a **Feature** image with a caption and the right side displays a large **Detail** image.
## Set up section
Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/lorenza/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [use metafields and dynamic sources](/lorenza/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Select a **Template** to edit from the dropdown menu in the top bar.
> Learn how to use templates in our [Templates guide](/lorenza/general/editing-themes/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Image with text split**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
### Add feature image
The **Feature** side, on the left, gives an overall impression of your product. It has more room for text.
STEPS
In your theme editor (**Customize**):
1. Click on the **Image with text** section to open the section settings.
2. Under **Feature**, 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.
> See our article for image recommendations for Lorenza to learn more.
3. (*Optional*.) Select or paste a URL to the **Link** field.
> When a customer clicks on the left image, it takes them to this link.
4. (*Optional*.) Add **Caption** text to display next to the feature image.
5. Change the Feature side **Background color** and **Text color**.
> We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
6. (*Optional*.) Click the **Background gradient** option to add a color overlay that fades across a range of hues.
> You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
7. Use the **Text alignment** to display the **Caption** above or below the image with *Left*, *Right* or *Center* aligned text.
> Choose from *Top left*, *Top center*, *Top right*, *Bottom left*, *Bottom center*, or *Bottom right*.
> This text is always either above or below the left image.
8. Click **Save**.
## Add detail image
The **Detail** image displays across the entire right side of the section. Add text to overlay the image and turn the image into a link. It's great for showing off a product feature or a detail.
STEPS
In your theme editor (**Customize**):
1. Click on the **Image with text** section to open the section settings.
2. Under **Detail**, 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.
3. (*Optional*.) Add a short sentence or two to the **Image text overlay** to display overtop the image.
4. If you added text, choose a **Text overlay color** so the text is more clearly visible on your image.
5. Use the **Text alignment** to display the **Overlay text** above or below the image with *Left*, *Right* or *Center* aligned text.
> Choose from *Top left*, *Top center*, *Top right*, *Bottom left*, *Bottom center*, or *Bottom right*.
> This text either displays over the top or bottom edge of the image.
6. Use the **Max width of text** slider to control the maximum width of the headings.
> Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
7. Make sure your text is readable by adjusting the **Gradient overlay color** and **Gradient overlay length**.
8. Click **Save**.
## Settings reference
Click on the section to find the following image settings:
| Setting | Description |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image | Select an image for the left side of the split. |
| Link | If customers click on the left image, it takes them to this link. |
| Caption | Choose a caption to be displayed above or below this image.
We recommend keeping this to a sentence or a short paragraph.
|
| Text color | Choose the caption text color. |
| Background color | Choose the background color for the left side of this section. |
| Text alignment | Choose how the left side text should be aligned.
Choose from Top left, Top center, Top right, Bottom left, Bottom center, or Bottom right.
|
Click on the section to find the following detail settings:
| Setting | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Image | Choose an image for the right side of the split. |
| Image text overlay | Add text that should be placed near the top or bottom edge of the image. |
| Text overlay color | Choose the color of the overlay text. |
| Text alignment | Select the position of the headings on the detail block. |
| Max width of text | Use the slider to control the maximum width and line breaks of the headings. |
| Gradient overlay color | Choose a gradient overlay color to be displayed underneath the overlay text. This can make the overlay text more visible. |
| Gradient overlay length | Choose how much of the image the gradient overlay should cover. Choose between 0 and 100 (in percent). |
\\
***
> **Related links**
>
> [Image hero](/lorenza/sections/theme-sections/image-hero.md)\
> [Image with text split](/lorenza/sections/theme-sections/image-with-text-split.md)\
> [Slideshow](/lorenza/sections/theme-sections/slideshow.md)\
> [Slideshow split](/lorenza/sections/theme-sections/slideshow-split.md)
---
# 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://help.fluorescent.co/lorenza/sections/theme-sections/image-with-text-split.md?ask=
```
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.