# 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](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [use metafields and dynamic sources](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
{% 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](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates).
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](https://help.fluorescent.co/lorenza/sections/theme-sections/image-hero)\
> [Image with text split](https://help.fluorescent.co/lorenza/sections/theme-sections/image-with-text-split)\
> [Slideshow](https://help.fluorescent.co/lorenza/sections/theme-sections/slideshow)\
> [Slideshow split](https://help.fluorescent.co/lorenza/sections/theme-sections/slideshow-split)