Design your store

Scrolling text and motion

Add a statement marquee, announcement ticker or static service strip with readable text, useful links and accessible motion.

5 min read

On this page

The Scrolling text section provides three starting presets. They share the same controls, so you can change their text, size, colors and movement without installing anything else.

Pick a starting preset

Search in Add section Good use Suggested first choice
Statement marquee A short brand statement between two different content areas. Heading font, Calm speed, two or three short messages.
Announcement ticker A compact announcement or service message. Body font, a small readable size, short accurate information.
Service text strip Delivery, care or personalization links. Static strip, concise labels and links to existing information pages.

These are design starting points. Claims about dispatch times, free shipping or guarantees must match your actual policies.

Add and edit the strip

  1. Open the desired page in the theme editor. Choose Add section in the intended section group.
  2. Search for one of the preset names above and select it. It appears as Scrolling text, or under its saved preset name, in the sidebar.
  3. Open each Message block. Set its Text, optionally set Optional link, and enable Italic emphasis only for the message you want to highlight.
  4. Add or remove Message blocks to fit the story. You can add up to twelve; blank messages do not appear for customers.
  5. Select the section itself to adjust its motion, typography, layout and colors.
  6. Save, reload and check the actual storefront.

Expected result: a readable strip with your own words. Continuous scroll can repeat those words to fill the available width; you do not need to enter the same message repeatedly.

A scrolling statement strip with short messages and spark separators.
Example: three short messages, heading font, spark separators and a contrasting color scheme. Customers can pause the movement; reduced-motion preferences are respected.

Set movement and speed

  • Movement → Continuous scroll creates the moving strip.
  • Movement → Static strip displays stationary, wrapping messages.
  • Direction → Left / Right changes the direction of continuous movement.
  • Speed → Calm / Balanced / Lively chooses a motion preset. Begin with Calm for a brand statement.
  • Pause on hover pauses continuous movement while a pointer is over the strip. Visitors can also use the visible pause/resume control.

Match the surrounding layout

Set Font to the global Heading font or Body font. Desktop text size and Mobile text size are separate; start with the preset's values and check the real words on a phone.

Use Separator for Spark, Dot, Line or None, then adjust Space between messages. Use a shared Color scheme from your theme. Full width, Show top and bottom borders, Top spacing and Bottom spacing control how the strip meets the sections around it.

Fill in a useful Screen reader label, such as “Personalization and delivery,” to describe the strip's purpose rather than repeating all its text.

  1. Create and publish the destination page first, such as your delivery or care page.
  2. In the Message block, use Optional link to select that page or another existing destination.
  3. Keep the visible message meaningful on its own: “Delivery information” is clearer than “Click here.”
  4. Follow each link on the storefront after saving.

Only link to an on-page anchor such as #gift-finder when the target module is configured and present on that same page. Use an actual page or collection link for a header strip that appears across different pages.

Keyboard and no-motion behaviour

When keyboard focus enters the links, the source messages become a stationary wrapping row. Repeated decorative copies are excluded from keyboard navigation and screen readers. Without JavaScript, the original text and links remain readable.

For a keyboard check, press Tab until a strip link receives focus, confirm it remains readable, follow it, then return and check the pause control. Also test your storefront with a reduced-motion preference enabled.

If the effect does not look right

What you see What to check
No strip on the storefront Add at least one non-blank Message, check the section's visibility and save.
The text stays still Check Movement, Enable motion, reduced motion, keyboard focus and the pause control. Static behaviour is intentional in several of these states.
The words repeat A continuous strip fills the width by repeating its messages. Reduce your source text or switch to Static strip if repetition is not appropriate.
The font looks different This section uses your global Heading or Body font. Check Typography, not only this section's size.
The strip is too dominant on a phone Reduce Mobile text size and spacing, shorten the messages or use a static service strip.
A link goes nowhere Confirm the selected page exists and is visible; replace an anchor whose target is not present on this page.

For media playback, use Product details and media. For a complete page arrangement, use Keepsake layout.