Multipurpose theme documentation

It is a multi-column content section where each column can include an image, heading, rich text, and an optional link or button. It is useful for highlighting features, team members, benefits, or steps with visuals.

In the Shopify theme editor, open the template you want, click Add section, then choose Text columns images Pro. Save your changes.

You can control columns per device: Desktop supports 1 to 4 columns, Tablet supports 1 to 3 columns, and Mobile supports 1 to 3 columns.

Add a new Column block inside the section. Each block becomes one column. You can drag and drop blocks to reorder them.

Use consistent aspect ratios across columns for a clean layout. For sharp images, use uploads that are at least 800px wide (or larger if your images contain text or fine detail).

Image aspect ratio controls the shape of the image container (for example square or 16:9). Object fit controls how the image fills that container: Cover crops to fill, while Contain shows the whole image (may add empty space).

In a Column block, set Button link, then enable Whole column clickable. The entire card becomes a single link.

This prevents nested links (a link inside a link), which is invalid HTML and can cause accessibility and usability issues. When the whole column is clickable, the section uses one single link for the card.

Leave Whole column clickable disabled, then set both Button label and Button link. The column stays non-clickable and the button appears.

The button will not appear. To display a button, both Button label and Button link must be set.

Yes. In each Column block, toggle Show image off to hide the image for that block.

Shapes use CSS clipping. This is typically fast, but very complex shapes can be slightly heavier on low-end devices. If you prefer maximum simplicity, use None or Rounded.

It makes columns in the same row match height, which keeps the layout aligned when some columns have more text than others.

Column gap controls spacing between columns horizontally. Row gap controls spacing between rows vertically.

You can enable Hover elevation, set Hover shadow intensity, and optionally add a Hover background color. You can also enable Hover zoom on the image per column.

Yes. Turn on Enable animation, choose an Animation style, and adjust duration, delay, and optional stagger. The animation respects the visitor's reduced motion settings.

Yes. You can set different column counts for desktop, tablet, and mobile, and the layout adapts automatically.

Yes. The section uses headings and text structure, avoids nested links, and supports keyboard focus styles. For best results, add meaningful image alt text and descriptive headings.

The most common causes are mixed aspect ratios across columns, low-resolution images, or very different amounts of text per column. Use consistent aspect ratios and enable Equal height columns for aligned rows.

Yes. Use Contain for Object fit, choose a consistent aspect ratio, and keep images high quality for sharp display.