Image with text split

The Image with text split section allows you to add a two images side by side with overlay text. You could use it to show off two angles of the same product, or introduce a new collection.

It's an interesting section to play with. It can even look great without text.

On mobile devices, each side of the split becomes full width, shown top to bottom.

Each side of the section has a different role:

The Feature side, on the left, gives an overall impression of your product. It has more room for text.
The Detail side, on the right, is for a larger image. It's great for showing off a product feature or a detail.

Set up an image with text split section

To set up this section:

STEPS

From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.
Scroll down the list of home page sections and click the Add section button.
Choose Image with text split from the list of sections.
This opens the image with text split section settings.
For the Feature: Choose an Image for the left side of the split.
(Optional.) Add a Link.
When a customer clicks on the left image, it takes them to this link destination.
(Optional.) Insert a Caption to be displayed on the left side of the split.
Choose the Text color and Background color for the left side of the split.
The background is prominently displayed behind the image, so make sure it's a complementing color.
Choose the Text alignment.
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.
For the Detail: Choose an Image for the right side of the split
The image covers the entire right side of the section. There's no background color on this side.
(Optional.) Add Image text overlay. This is text that sits on top of the right side's image.
If you added text, choose a Text overlay color so the text is more clearly visible on your image.
Choose a Text alignment.
Choose from Top left, Top center, Top right, Bottom left, Bottom center, or Bottom right.
The text is placed on either the top or bottom edge of image.
Tweak the Max width of text,
This lets you ensure that the shape of the text is just right, and doesn't look weird.
In addition to the text color, you can tweak the Gradient overlay color and Gradient overlay length. This gradient can make your text even more visible when placed on especially vibrant images.
See an example in pink below::
Return to the list of Home page sections to find your new Image with text split section.

Use the drag handles to rearrange the order of your Home page sections:

Click Save.

Settings reference

On the Feature side, this section has the following settings:

Image

Choose 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.

On the Details side, this section has the following settings:

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

Choose how the overlay text should be aligned.

Choose from Top left, Top center, Top right, Bottom left, Bottom center, or Bottom right.

Max width of text

Choose the max width of the text. Choose between 15 and 60.

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).

Home page
Image with text