Section: Scrolling

Everything you'll need to know on how to setup your Scrolling section.

The Scrolling section is a smooth, infinite horizontal marquee that pairs each item with an image, text, or both. Perfect for logo strips (trust bars, brand walls), feature lists, ingredient highlights, or any case where you want to show many items in a continuously moving rail. The animation pauses on hover and respects the visitor's reduced-motion preference.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Scrolling, then click on it.

3) Done — your Scrolling section is added.

The general settings contain the heading, text, image, animation, layout, and spacing setup of the Scrolling section. Simply click on the section to open the settings.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Controls the section background, heading, item text, and the fade-edge gradient color.

The heading shown above the scrolling rail, rendered as an H2 tag. For example: Trusted by, Our ingredients, or Featured in. Leave empty to hide.

Text alignment of the section title: Left, Center, or Right. Default: Center.

Visual size of the section title from H1 down to H6. The default H2 works for most stores. Pick a smaller value when the section sits between other sections that already have prominent headings.

Font size of the item text on desktop, between 0.8 rem and 3 rem (in 0.1 rem increments). The default 1 rem (~16 px) reads well next to small icons. Bump up for hero-style logo walls.

Font size on tablet (screens up to 1024 px), between 0.8 rem and 3 rem. Default: 1 rem.

Font size on mobile (screens up to 640 px), between 0.8 rem and 3 rem. Default: 0.9 rem — slightly smaller for compact phone screens.

Height of the item images on desktop, between 20 px and 200 px. The default 40 px is great for logo strips. Increase to 60–100 px for icon-driven feature lists.

Height of item images on tablet, between 20 px and 150 px. Default: 35 px.

Height of item images on mobile, between 20 px and 100 px. Default: 30 px.

Speed at which the rail moves: Very slow (50 s loop), Slow (40 s), Normal (30 s), Fast (20 s), or Very fast (15 s). Slower speeds are easier to read; faster speeds feel more energetic. Default: Normal.

Direction the rail moves: Left (items scroll from right to left) or Right (items scroll from left to right). Stack two Scrolling sections in opposite directions for a layered marquee effect.

Tick this box to pause the animation when visitors hover over the rail. Useful when items have clickable text or images so visitors can stop the rail to read or click. Default: on.

Tick this box to add a soft fade-out gradient on the left and right edges of the rail, hiding the moment items enter and exit the screen. Gives the marquee a polished, premium look. Default: on.

Round the corners of item images, between 0 px and 24 px. Default: 8 px. Set to 0 for sharp corners; pick larger values for a softer look on photographic items.

Horizontal space between items on mobile (≤ 640 px), between 16 px and 80 px. Default: 24 px.

Horizontal space between items on tablet (641–1024 px), between 24 px and 100 px. Default: 40 px.

Horizontal space between items on desktop (> 1024 px), between 32 px and 120 px. Default: 60 px. Wider gaps make each item more readable; tighter gaps fit more items per screen.

Top and bottom padding of the section on mobile, between 0 px and 120 px. Default: 48 px.

Top and bottom padding of the section on desktop, between 0 px and 120 px. Default: 48 px.

Each item is an individual Image with text block. Click Add block inside the section and choose Image with text. Add as many as you need — the rail loops infinitely so even 4–6 items create the illusion of a continuous stream.

Upload the image for the item. PNG with transparent background works best for logos and icons; JPG/WebP for photographic items. The image height is controlled by the section-level Image height setting; the width adjusts to keep the original ratio.

Tick this box to display the image. Untick to show only the text — useful for text-only marquees (e.g. Free shipping · Easy returns · 24/7 support). Default: on.

Describe the image for accessibility. For example: Acme Co. logo or Organic certification badge. Falls back to the text-beside-image content when empty.

Optional text shown beside the image. For example: Premium Ingredients, Featured in Vogue, or a brand name. Leave empty to show only the image.

Optional: URL for the text. Wraps the text-beside-image in a link so visitors can click it (the text gets a hover underline animation in your accent color). Leave empty for plain text.

Optional: URL for the image. Wraps the image in a link so visitors can click it. Leave empty for a non-clickable image. Image and text can have different links — useful when the image is a logo and the text is a category name.

Tick this box to open the text and image links in a new browser tab. Useful for external partner links so visitors stay on your store. Default: off.

The rail loops infinitely by duplicating the items, so even 4–6 items can fill the screen. If items are too small to fill the rail, increase the Image height or Text size settings, or add more items to the section.

Yes — untick Show image on each item block. The rail will display only the Text beside image content. Perfect for slogans, value props, or shipping promises.

Add the Scrolling section twice. Set the first to Direction: Left and the second to Direction: Right. The two opposing rails create a layered marquee effect that feels rich and editorial — popular for brand walls.

If you have Reduced motion enabled in your phone's accessibility settings, the rail intentionally stops animating and becomes scrollable instead. This is by design for accessibility — visitors who prefer less motion get a static, scrollable version.

Yes. Each item has independent Image link and Text link fields. For example, the image can be a brand logo linking to that brand's collection, and the text can be a slogan linking to a different page. Both can be left empty for a non-clickable item.