Image with text

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing sections
3. Company XYZ documentation on the image block
4. Company XYZ documentation on the rich text block
5. Company XYZ documentation on headers settings
6. Company XYZ documentation on section padding settings
7. Company XYZ documentation on section backgrounds settings
8. Company XYZ documentation on separators settings
9. Company XYZ documentation on visibility settings
10. Company XYZ documentation on layout widths settings
11. Shopify documentation on theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to combine an image and written content in a clean split layout. You can reorder the blocks to switch which side appears first, then adjust alignment, stacking, spacing, and color styling to suit different content types and screen sizes. For a broader overview of how this fits into your store layout, see Shopify documentation on sections and blocks

Core settings

These settings shape how the two sides behave as a layout before you style the individual blocks.

1. Content alignment controls how the image and text line up vertically. Top alignment usually works best for longer copy, while middle alignment suits shorter promotional content.
2. Sticky content keeps the shorter side in view while scrolling on desktop. This is most useful when one side is much taller than the other, such as a long text area beside a single image.
3. Stack on mobile turns the layout into a single column on smaller screens. Use this when side-by-side content feels cramped or when you want a clearer reading sequence.
4. Stack on desktop creates a vertical layout on larger screens too. This can work well for more editorial presentations or when the image should sit clearly above or below the text.

Sticky content is desktop-only and does not apply when stacking is enabled. If you want the sticky effect, keep the section side by side on desktop.

Section-specific settings

Color settings

These color overrides let this section use its own text treatment instead of relying entirely on broader theme colors. They are most useful when the image, background, or content tone needs stronger contrast or a more branded presentation.

1. Adjust icon, text, and subheading colors together so the section still feels visually consistent.
2. Recheck readability after changing colors, especially if you are also using overlays or a background image.
3. Use overrides selectively across the page so this section stands out for a reason, not just because it is styled differently.

Supported block types

1. Image
2. Rich text

This section supports up to 4 blocks, but it is usually strongest when used as a simple two-part layout with one visual block and one text block. For editing basics, see Shopify documentation on customizing sections

Image block

The Image block provides the visual side of the layout, with controls for image shape, size, aspect ratio, captions, overlays, and visibility. See Company XYZ documentation on the Image block.

1. Use max image width and aspect ratio together to control how prominent the image feels.
2. Add a caption only when it adds useful context, such as a label, supporting note, or credit.
3. Use overlay settings lightly if the image still needs to feel crisp and detailed.

Rich text block

The Rich text block provides the written side of the layout, including headings, body copy, icons, a button, and optional block-level background styling. See Company XYZ documentation on the Rich text block.

1. Use this block for the main message, supporting details, and a clear next step.
2. If you add a block background, make sure it supports the image rather than competing with it.
3. Keep button styling aligned with the importance of the action so the layout does not feel too busy.

Standard section settings

Header settings

Header settings add an optional introduction above the main layout. Use them when the image and text need a shared heading, caption, icon, or section-level action before the block content begins.

Padding settings

Padding settings control the space above and below the section. Larger padding helps image-led layouts breathe, while tighter spacing works better when this section sits within a sequence of related content blocks.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the entire section. These settings can create a stronger visual mood, but they can also affect contrast and how spacious the layout feels.

Caution

If you already have a strong image in the section, a bold background image or video can make the layout feel crowded. Simplify either the background or the foreground media if the content becomes harder to scan.

Separator settings

Separator settings add a line at the top or bottom of the section. Use them to create clearer boundaries when this layout appears between similar content areas.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is especially useful when you want a dedicated mobile presentation instead of relying on one layout everywhere.

Width settings

Width settings control both the inner content width and the outer section width. Narrower widths help text feel easier to read, while wider settings give image-led layouts a more immersive feel.

The editor preview can limit how clearly width changes appear, so review major width updates on the live page before finalizing them. For more detail on the editing interface, see Shopify documentation on theme editor

Usage notes

1. Start with block order. Place the image or text first based on which should lead the story or promotion.
2. Use sticky content with uneven layouts. It is most effective when one side is clearly shorter than the other on desktop.
3. Keep the visual hierarchy clear. If you use overlays, custom text colors, and backgrounds together, reduce one of them to protect readability.
4. Match layout width to content. Use narrower widths for text-heavy storytelling and wider layouts for image-led sections.
5. Check stacked mobile layouts. Make sure the reading order, image crop, and button placement still feel intentional on smaller screens.
6. Review both viewport sizes. Desktop and mobile controls can produce different alignment, visibility, and media behavior, so test the section on both.
7. Treat extra blocks as a design shift. Adding more blocks can change the balance of the section enough that the original simple split layout no longer feels primary.
8. Choose media with cropping in mind. Separate desktop and mobile media can improve the fit, but also change framing, loading, and readability.
9. Keep form states legible. If you use content that depends on customer input, make sure empty, error, and success states remain easy to read.
10. Check sticky content in context. Review it alongside nearby sections and on each screen size so it does not hide or crowd important content while scrolling.