Scrolling text

Scrolling text turns a short message into a high-impact visual section. Use it for a concise campaign line, proposition, or announcement—not for instructions or copy that visitors must stop and study.

[!NOTE] The labels, options, defaults, conditional speed control, and reduced-motion behavior below match the current schema and implementation. No screenshot is attached because a still cannot prove either motion mode.

Add Scrolling text

In Shopify's theme editor, add Scrolling text to a compatible template or open an existing section. It is not available in header, footer, or overlay groups.

Content

Setting	What it controls	Options or default
Text	The message repeated or moved through the section.	Default: Share an announcement, promotion, or brand message.
Text size	The visual scale of the message.	Small, Medium, or Large. Default: Large.

Keep the message short enough to understand without waiting for another cycle. If Text is blank, the section does not render a message.

Layout

Setting	What it controls	Options or default
Full width	Lets the section use the full-width treatment instead of the page-width container.	Enabled by default.
Fade text	Fades the bottom of the text and the left and right edges of the section.	Enabled by default.

The fade is a visual treatment, not a replacement for readable copy. Check the full message in preview before publishing.

Motion and controls

Setting	What it controls	Options or default
Scrolling mode	Chooses whether the message runs automatically or responds to page scrolling.	Automatic or On scroll. Default: Automatic.
Automatic scrolling speed	Sets the automatic mode duration.	2–30 seconds, step 1 second. Default: 6 seconds. Visible only when Scrolling mode is Automatic.

In Automatic mode, the message moves while the section is in view and pauses on pointer hover. In On scroll mode, movement follows page scrolling instead of an independent automatic loop. These interaction details need a matching browser fixture before a release guide claims device-specific behavior.

Reduced-motion preferences stop the animation and keep the content static. Do not put essential legal, pricing, or product instructions only in the moving line.

Colors

Setting	What it controls	Default
Background color	The section background color.	The global background color.
Background gradient	Optional background gradient.	No default.
Text color	The solid text color.	The global brand color.
Text gradient	Optional gradient applied to the fill text treatment.	No default.

The Theme Editor includes the note: “A text gradient is used only with Fill text.” Keep the note in mind when checking a gradient; do not assume it applies to every text treatment.

Writing and accessibility

• Use one short message and avoid all-caps copy that is difficult to read while moving.
• Check text/background contrast across the entire gradient, not only at its start.
• Confirm the static message is complete and understandable with reduced motion enabled.
• Test keyboard focus around nearby links and controls; the scrolling line must not obscure them.
• Avoid using motion to convey the only copy of a promotion, deadline, or legal notice.

Common issues

Symptom	Safe check
Speed control is missing	Choose Automatic under Scrolling mode; the speed control is conditional.
The line is static	Check for reduced-motion preferences, then confirm the section is in view and the selected mode is intentional.
Gradient is not visible	Confirm a gradient is selected and that the fill-text condition in the Theme Editor is satisfied.
The message is clipped or unclear	Shorten Text, disable Fade text, or review contrast before changing layout.
The section is not visible	Check that Text is not blank and that the section is enabled in the template.

Related guides

• Animation settings
• Announcement bar
• Rich text

Evidence boundary

No screenshot is attached. Capture a still for the complete static message and a short approved recording for Automatic and On scroll only after the current storefront build and reduced-motion behavior are accepted.