Image with text split
Theme section
Last updated
Theme section
Last updated
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.
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.
The Feature side, on the left, gives an overall impression of your product. It has more room for text.
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.
Click on the section to find the following image settings:
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:
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