Scrolling images section
The Scrolling images section of Combine scrolls a row of images with captions and links across the page.
Applies to: Combine 4.2.0 and later. Added in: Combine 2.6.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Scrolling images section moves a row of images across the page in a continuous loop, each with an optional caption and link. Use it for press logos, lookbook pictures or a gallery of products in use.
Where to find it: in the theme editor, select Add section and choose Scrolling images. Add one Image block per picture.
Content
- Desktop layout sets how many images fit across the screen at once: 2 columns to 6 columns (default 3). With 4, 5 or 6, screens narrower than 836 px show 3.
- Scroll direction sets which way the row moves: Left (the default, toward the left) or Right (toward the right).
- Scroll speed sets how fast it moves, 20 to 300 (default 100). Phones run at two thirds of that speed.
- Pause on mouseover (on by default) stops the row while the mouse is over it.
- Image position lines up images of different heights at the Top (the default), Center or Bottom.
- Border radius rounds the image corners, 0 to 200 px.
- Remove space between images puts the images edge to edge.
- Caption alignment sets the captions Left (the default), Center or Right.
The images keep their own proportions; nothing is cropped. The section heading, colors, margins and heading tag work as described in General section styling. The color under Section design is called Text color.
Blocks
Image
- Image is the picture.
- Caption is a line of text under it. It takes bold, italic and links.
- Link makes the image clickable. Open link in a new window appears once a link is set.
Why do my images have different heights?
Because each image keeps its own proportions. Crop them to the same shape before you upload them for an even row, or use Image position to line them up at the top, center or bottom.
How do I make the images scroll slower?
Lower Scroll speed. The default is 100; 50 is half as fast. Turn on Pause on mouseover so customers can stop the row to look at an image.
All Scrolling images settings
Every setting of this section, with its type and default.
Accepts these blocks: Image.
Scrolling images section: Section heading
Where to find it: Scrolling images → Section heading
The Scrolling images section uses the standard Section heading settings, listed in General section styling.
Heading (text field, default: "Scrolling images"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Showcase your amazing products").
Heading size (dropdown, default: Regular). Options: Regular, Large.
Text alignment (dropdown, default: One row: Left). Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Scrolling images"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Showcase your amazing products").
Scrolling images section: Content
Where to find it: Scrolling images → Content
Desktop layout (dropdown, default: 3 columns): Sets how many images fit across the screen at once. With 4, 5 or 6, screens narrower than 836 px show 3. Options: 2 columns, 3 columns, 4 columns, 5 columns, 6 columns.
Scroll direction (dropdown, default: Left): Sets the way the row moves: Left moves it toward the left, Right toward the right. Options: Right, Left.
Scroll speed (slider 20 to 300, step 10, default: 100): Sets how fast the row moves. Phones run at two thirds of this speed.
Pause on mouseover (checkbox, default: on): Stops the row while the mouse is over it.
Image position (dropdown, default: Top): Lines up images of different heights at the top, center or bottom. Options: Top, Center, Bottom.
Border radius (slider 0 to 200 px, step 2, default: 0 px): Rounds the corners of the images.
Remove space between images (checkbox, default: off): Puts the images edge to edge.
Caption alignment (dropdown, default: Left). Options: Left, Center, Right.
Scrolling images section: Section design
Where to find it: Scrolling images → Section design
The Scrolling images section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Text color (color, default: transparent): Sets the color of the section heading, the subheading and the text of the section.
These settings differ from the standard ones or exist only here:
Text color (color, default: transparent): Sets the color of the section heading, the subheading and the text of the section.
Scrolling images section: Gutter
Where to find it: Scrolling images → Gutter
The Scrolling images section uses the standard Gutter settings, listed in General section styling. Not available in this section: Decrease top margin.
Remove top margin (checkbox, default: off): Removes the space above the section.
Remove bottom margin (checkbox, default: off): Pulls the next section up, so the two sections touch.
Scrolling images section: SEO
Where to find it: Scrolling images → SEO
The Scrolling images section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML level of the section heading for search engines; span gives it no level. It does not change the size. Options: H1, H2, H3, H4, span.
Image block
Where to find it: Scrolling images → Add block → Image
Image (image).
Caption (formatted text): Sets a line of text under the image. Supports bold, italic and links.
Link (link): Makes the image a link.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Related pages
- Scrolling text section: a scrolling band of text.
- Image section: one large image.
- General section styling: the standard section settings.