Image with content
Overview
The Image with Content section displays a two-column layout combining an image and a content area. You can control the desktop order of the media and content, set the media ratio, and adjust container width, text alignment, color scheme, and responsive spacing. The preset includes a dedicated image block and a content block containing a heading, rich text description, and button.
Section Configuration:
Layout
| Setting |
Description |
| Desktop media position |
Controls whether the image appears before or after the content on desktop. |
| Media ratio |
Sets the aspect ratio used for the image/media area (Adapt, Square, Portrait, Landscape). |
| Container layout |
Controls how the section is sized on the page: page-width (boxed), contained-content, or container-fluid (full width). |
| Container size (Desktop) |
Sets the maximum section width on desktop as a percentage (50%–100%). |
| Text alignment (Desktop) |
Controls text alignment on desktop (left, center, right). |
| Text alignment (Mobile) |
Controls text alignment on mobile (left, center, right). |
| Color scheme |
Applies a theme color scheme to the section styling. |
Inner padding
| Setting |
Description |
| Top (Desktop) |
Adds space above the section’s inner content on desktop. |
| Bottom (Desktop) |
Adds space below the section’s inner content on desktop. |
| Left (Desktop) |
Adds space to the left of the section’s inner content on desktop. |
| Right (Desktop) |
Adds space to the right of the section’s inner content on desktop. |
| Top (Mobile) |
Adds space above the section’s inner content on mobile. |
| Bottom (Mobile) |
Adds space below the section’s inner content on mobile. |
| Left (Mobile) |
Adds space to the left of the section’s inner content on mobile. |
| Right (Mobile) |
Adds space to the right of the section’s inner content on mobile. |
Outer padding
| Setting |
Description |
| Top (Desktop) |
Adds space above the section (outside the section content) on desktop. |
| Bottom (Desktop) |
Adds space below the section (outside the section content) on desktop. |
| Left (Desktop) |
Adds space on the left side of the section (outside) on desktop. |
| Right (Desktop) |
Adds space on the right side of the section (outside) on desktop. |
| Top (Mobile) |
Adds space above the section (outside) on mobile. |
| Bottom (Mobile) |
Adds space below the section (outside) on mobile. |
| Left (Mobile) |
Adds space on the left side of the section (outside) on mobile. |
| Right (Mobile) |
Adds space on the right side of the section (outside) on mobile. |
Blocks Configuration
Section-level blocks
| Block type |
Description |
Theme block (@theme ) |
Allows theme-provided blocks to be added to this section (based on what your theme supports). |
App block (@app ) |
Allows compatible Shopify apps to add app blocks to this section. |
Image
| Block |
Description |
| Image content image |
Displays the media side of the section and contains the image block used for the layout. |
Image block
| Setting |
Description |
| Image |
Selects the image displayed in the media area. |
Content
| Block |
Description |
| Image content |
Displays the text/content side of the section. |
Content blocks
| Block |
Description |
| Heading |
Displays the main title for the content area. |
| Description |
Displays rich text content (paragraphs, lists, and formatting as supported by the theme). |
| Button |
Adds a call-to-action button below the text. |
| Setting |
Description |
| Label |
Sets the text shown on the button. |
| Button style |
Selects the button style (for example, Secondary style in the preset). |
| Text case |
Controls capitalization styling for the button label. |
| Margin (Desktop) |
Adds space above/below the button on desktop. |
| Margin (Mobile) |
Adds space above/below the button on mobile. |