Image with text
Last updated
Was this helpful?
Last updated
Was this helpful?
Use the Image with text section to combine a feature image side-by-side with promotional text and button. With a flexible layout and optional content blocks, you can achieve a wide variety of looks.
Add a featured Image and Content blocks.
Customize the layout and change the container color for alternate looks.
Check out the related .
In the editor side panel, click (+) Add section and select Image with text. Click and hold the drag handles ⋮⋮ to re-order sections.
Click the section to edit general section styles for colors and spacing, available in all sections:
Add a feature image and alternate mobile image.
Change the image aspect ratio (shape)
Make the image a clickable link to another page.
Click Image with text section to find settings
Image
Select or upload an image.
Mobile image
Select or upload an alternate image to display on mobile devices.
Aspect ratio
Crop the image to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the image's width and height (W:H).
Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)
Image link
The page or URL that you want the link to go to. Visitors are redirected when they click the image.
After uploading an image, adjust the width and position. Use the Breathing room option to add space around the image.
Click Image with text section to find settings
Desktop image width
Set the maximum width of the image on desktop.
35 - 70 % Default: 50
Desktop image position
Position the image to the left or right of the text content.
Left of content Right of content Default
Mobile image position
On mobile, show the image before or after the text.
Image first Default Image second
Image breathing room
Use the slider to add spacing around the image. Set the slider to 0 to display the image at the full width and height of the image area.
0-60 Default: 0
Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.
Change the width and alignment of all content blocks.
Click Image with text section to find settings
Content width
Use the sliders to set the maximum width (in pixels) of the section content.
200-1000 px Default: 500
Text alignment
Set the position of the text content for desktop screens.
Left Default Center Right
Vertical text alignment
Position text at the top, middle, or bottom of the section.
Top Middle Default Bottom
Change the Container color scheme to show a background color for the content area.
Editing templates will change all pages that use the same template. for different page layouts, or in the same template.
You can add and define different color schemes in Theme settings > Colors.
Section colors
Section width
Section padding
Heading
Text
Overline text
Button
Image
Spacer
Divider
Custom Liquid
