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:
-
From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.
-
Scroll down the list of home page settings until you see the Add section button.
-
Choose Image with text split from the list of sections, and press the Add button.
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::
-
Use the Back to settings (<) button to go back to all of the home page settings again. Use the drag handles to rearrange the order of your home page sections:
-
Use the Save button in the top-right corner when you are finished editing.
Settings
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).