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
Display the section at full width of the screen or set a custom width. Under Section, you can also set the section width.
Full width Custom width
Custom width
Use the sliders to set the maximum width (in pixels) of the section content.
200 - 1000 px
Content position
For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions. The horizontal and vertical placement applies when there's enough room in the content area.
Text alignment
Set the position of the text content for desktop screens.
Left Default Center Right
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
