Scrolling columns creates a visual story from two moving image columns and optional supporting copy. Use it for a process, collection mood, or brand story where the images should remain in motion while visitors read.
Add Scrolling columns
In Shopify's theme editor, add Scrolling columns to a compatible template. A new section starts with five Image blocks and one completed text group.
Text groups
The section provides Text 1, Text 2, and Text 3. Each group can include Eyebrow, Heading, Text, Button label, Button link, and Button style. Button styles are Primary, Secondary, and Text link.
Only text groups that contain copy or a complete button are shown. When two or three groups are complete, visitors can move between them with previous and next controls.
Layout
| Setting | What it controls | Options or default |
|---|---|---|
| Desktop media position | Places the moving image columns to the left or right of the copy. | Left or Right. Default: Left. |
| Text alignment | Aligns the supporting copy. | Left or Center. Default: Left. |
| Desktop media width | Sets the width of the image area. | 40%–60%, in 1% steps. Default: 50%. |
| Content width | Sets the readable width of the text groups. | Small, Medium, or Large. Default: Medium. |
If every text group is empty, the images use the available section width without leaving an empty text column.
Motion and controls
| Setting | What it controls | Options or default |
|---|---|---|
| Autoplay text | Advances between completed text groups automatically. | Enabled by default. Used when two or three groups contain content. |
| Change text every | Sets the time before the next text group appears. | 3–12 seconds. Default: 5 seconds. Shown when Autoplay text is enabled. |
The image columns move continuously whether or not text autoplay is enabled. When more than one text group is present, visitors can use previous and next controls; an autoplay pause/play control appears when autoplay is on. Reduced-motion preferences stop automatic movement while keeping the content available.
Colors and spacing
Background color and Text color override the inherited theme colors for this section. Section spacing, Top spacing, and Bottom spacing control the space around it; the default spacing is Medium with both edges enabled.
Image blocks
Add up to 10 Image blocks and reorder them to change the sequence. Each block contains one Image setting. Use similarly balanced portrait and landscape images so neither moving column feels visually heavy.
Desktop and mobile behavior
Desktop uses the selected media position and width. On smaller screens, the layout stacks while keeping the image sequence and active text usable. Review all text groups, the longest button label, and the full image loop in Shopify's desktop and mobile previews.
Common issues
| Symptom | Safe check |
|---|---|
| Text controls are missing | Complete at least two text groups. Empty groups are not included. |
| The text does not change automatically | Enable Autoplay text, complete more than one text group, and check the visitor's reduced-motion preference. |
| The image area feels too narrow | Increase Desktop media width, or leave all text groups empty for a media-only layout. |