Image with content
Last updated
Last updated
Use the Image with content section to combine a multiple image feature with promotional messaging and a call to action. With a flexible layout and optional content blocks, it's a great way to highlight a product collection or introduce something new and exciting.
In the editor side panel, click (+) Add section and select Image with content. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template changes all pages that use that template. To edit specific pages, you can you can create new templates or insert dynamic content with metafields.
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 content section to find settings
Image 1
Select a primary image to display in the section. This image will overlay the secondary image (Image 2).
Uncheck Show image for Image 2 to display only the primary image.
Image caption
Add small text below Image 1.
Show image
Choose to show a secondary image (Image 2) that overlays the primary image.
Image 2
Select a secondary image that will overlay the primary image.
Aspect ratio
Choose to crop the images to a uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2). Select Natural to display images in their original shape (without cropping).
Image focal point
Select the most important part of the images to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.
After uploading an image, adjust the width and position.
Click Image with content section to find settings
Image width
Set the maximum width of the image area on desktop.
30 - 60 %
Desktop image position
Position the image to the left or right of the text content.
Left of content Right of content
Mobile image position
On mobile, show the image before or after the content area .
Above content Below content
Use blocks to customize the content area of the section. Click (+) Add block to add text, buttons, and other media. Use the drag handles ⋮⋮ to re-order blocks, and change the layout in the section settings.
Accent
Add small label heading.
Heading
Add title heading.
Text
Add multiple lines of rich text.
Button
Add buttons with custom styles.
Image
Add images with custom sizes.
Text list with icons
Add column text with icons.
Video player
Add video that plays in a popup viewer.
Divider
Add border between blocks.
Spacer
Add space between blocks.
In the section settings, change the width and alignment of the content blocks area.
Click Image with content section to find settings
Content width
Display the section at full width or set a custom width
Custom width
Set the maximum width of the section: between 400 and 800 px.
Alignment
Choose to align the content blocks to the Left, Center, or Right within the content area.
Change the general colors of the section. Apply a color scheme or use custom colors.
Click Image with content section to find settings
Color scheme
Change the colors of section text and background. Use the Default color scheme from your theme settings or select a variant scheme based on the default: either Inverse, Soft, Accent, or Sale. You can also select a custom color scheme. Learn more.
Override with custom colors
Use custom colors for this section to override the color scheme.
Text color
Select a custom color for the section text.
Background color
Select a custom color for the section background.
Top spacing
Increase or decrease the amount of space above the section.
Bottom spacing
Increase or decrease the amount of space below the section.
Enable animation
Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.
Related links
