Image with text split

Theme section

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.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or use metafields and dynamic sources.

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.

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 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 ↗ 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 Image with text split Slideshow Slideshow split