Scrolling images section
The Scrolling images section of Borders moves a row of images across the screen, with direction, speed and pause on mouse over.
Applies to: Borders 3.1.0 and later. Added in: Borders 1.0.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Scrolling images section moves a row of images slowly and endlessly across the screen, like a ticker. Each image can link to a page, a collection or a product.
Where to find it: select Add section in the theme editor, then choose Scrolling images.
Scrolling
- Scroll direction sets which way the row moves: Left or Right.
- Scroll speed sets the speed, 20 to 300 (pixels per second; default 100). On screens up to 768 px wide the row moves 1.5 times slower.
- Pause on mouseover stops the row while the mouse is over it, so customers can select an image (default: on).
Layout
- Desktop layout sets how many images are visible at once, 2 to 6 columns. Below 836 px wide, 4 to 6 columns become 3; below 476 px, 3 or more columns become 2.
- Media aspect ratio crops every image to one shape: Landscape (16:9), Short (4:3), Square (1:1) or Tall (5:6).
- Hide borders (Inner content design) removes the lines between the images.
The Section heading and Section design settings are the shared ones: see General section styling.
Scrolling items
Add one Scrolling item block per image.
- Image is the picture, cropped to the section's Media aspect ratio.
- Media shape rounds two or all corners of the image into a half circle.
- Link makes the image a link, with the hover effect from Theme settings → Animations. Open link in a new window shows when a link is set.
- Remove border radius and Remove inner padding & border radius change this item only.
How many images do I need?
Any number. Borders repeats the row of images as often as needed to fill the screen width, so there are no gaps. With only a few images, customers see the same images again sooner; add more Scrolling item blocks for more variety.
Can I add text to the scrolling images?
No. Scrolling images shows images only. For moving text, use the Scrolling text section, which also accepts images between the text.
All Scrolling images settings
Every setting on this page, with its type and default.
Accepts these blocks: Scrolling item.
Scrolling images section: Section heading
Where to find it: Scrolling images → Section heading
Heading (text box, default: "Scrolling images").
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
Scroll direction (dropdown, default: Left): Sets the direction the row of images moves. Options: Right, Left.
Scroll speed (slider 20 to 300, step 10, default: 100): Sets the scrolling speed in pixels per second. On screens up to 768 px wide the row moves 1.5 times slower.
Pause on mouseover (checkbox, default: on): Stops the row while the mouse is over it.
Scrolling images section: Layout
Where to find it: Scrolling images → Layout
Desktop layout (dropdown, default: 3 columns): Sets how many images are visible at once. Below 836 px, 4 to 6 columns become 3; below 476 px, 3 or more become 2. Options: 2 columns, 3 columns, 4 columns, 5 columns, 6 columns.
Media aspect ratio (dropdown, default: Square (1:1)): Crops every image in the row to this shape. Options: Landscape (16:9), Short (4:3), Square (1:1), Tall (5:6).
Scrolling images section: Section design
Where to find it: Scrolling images → Section design
Color scheme (color scheme, default: scheme_1).
Hide section bottom border (checkbox, default: off).
Scrolling images section: Inner content design
Where to find it: Scrolling images → Inner content design
Hide borders (checkbox, default: off): Removes the lines between the images.
Scrolling item block
Where to find it: Scrolling images → Add block → Scrolling item
Image (image).
Media shape (dropdown, default: None): Rounds two corners (top, right, bottom or left side) or all corners of this image into a half circle. Options: None, Top rounded, Right rounded, Bottom rounded, Left rounded, Fully rounded.
Link (link): Makes this image a link, with the image hover effect from Theme settings → Animations.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Remove border radius (checkbox, default: off).
Remove inner padding & border radius (checkbox, default: off).
Related pages
- General section styling: the heading and design settings this section shares.
- Scrolling text section: moving text, buttons and images.
- Rotating images section: images that change in one frame.