Marquee

Say the three things every shopper wants to know, in one band

Free delivery, the guarantee, the returns window — moving slowly across the page where nobody can miss them. Claims, brand marks or tiles with an icon, at a speed that means the same thing before and after you add another item.

See it live

Read the docs

Two strips, one pale and one dark, caught mid-scroll

Two text strips running in opposite directions, one with a dot separator and one with a dash. Both are moving; the frame is one moment of it.

Movement earns a second of attention

A band that moves is read where a static one is skipped. Used once, above the fold, it is the cheapest way to put your three promises in front of everyone.

The speed is in pixels, not in laps

"Ten seconds a lap" means something different the moment you add an item. Pixels per second mean the same thing before and after the edit, so the strip does not quietly speed up while you write the page.

A stop button, on by default

Anything that moves by itself for more than five seconds needs a way to stop it. Hovering is not that — a keyboard user does not hover — so the strip ships with a real pause button.

Use cases

Where shops put it

A promise band under the header

Four claims with an icon on each, scrolling slowly, in the shop's own colours. It says what the three lines of small print under the basket button would have said.

Brands, between two sections of a landing page

The same element with pictures instead of words: a continuous run of supplier marks that fills a band no static row would fill neatly.

A sale announcement for the fortnight it runs

Tiles with an icon and a line of text, in the campaign's colour, and then one element removed when the campaign ends.

What you control

Every field in the form, in plain words

Full option reference in the docs →

Three appearances: Claims with a separator, logos alone, or tiles with an icon and text.
Direction and speed: In pixels per second, from a crawl to far faster than anyone can read.
Pause on hover or keyboard focus: And a pause button with both of its labels.
Separator: A dot, a dash, an asterisk or none.
Spacing, text size, text colour, bar background and tile colour: Transparency included.
Per item: The text, an icon from the bundled library, a picture with alternative text, and a link that wraps the whole item.

Shown in the demo store

A text strip running, halting under the pointer and staying still once Pause is pressed — the button then reads Play.

The logos and tiles appearances, also caught mid-scroll.

Native and honest

Your content is written in Magento's own format

The strip is stored as one plain list of items — one copy, not two. The second copy the loop needs is made in the browser and marked invisible to assistive technology, so a screen reader reads your six claims once and a search engine indexes them once.

Three states, and the middle one is worth naming. Without the module it is a plain list that does not move. With the stylesheet but no script the strip moves with a seam, and in that one state there is nothing on the page to stop it — only the script reveals the pause button. With both, the loop is seamless and the button is there. A visitor's own reduced-motion setting stops the movement in every state where our stylesheet is present, unconditionally.

Every element saves itself the way native Page Builder saves its own: a plain <div data-content-type="wrizu_…"> with its settings in data-* attributes, stored with the page. There is no proprietary database table, no shortcode, no second editor and nothing that has to be converted later.

That has a practical consequence. Disable the module and the storefront keeps serving those pages: headings, copy, images, links and buttons stay visible and clickable, and the styling you set per element — alignment, colours, spacing — stays with them, because it lives in a <style> block stored with the page rather than in our stylesheets. What you lose is what our CSS draws: the layouts, the borders and shadows, the button variants and the bundled icons.

One honest warning

With the module switched off, do not open and save a page that contains Wrizu elements — Page Builder flattens any page holding a content type it does not know into a single HTML Code block, and that save cannot be undone. It behaves that way with every unknown content type, not only with ours, and the storefront is unaffected either way; the rule is simply to leave those pages alone until the module is back on.

Works with any Luma-based theme

The elements are built on the same front-end stack the native Page Builder uses: jQuery and the libraries Page Builder already loads. They target Luma-based themes — Magento Blank, Luma, and the custom themes shops build on either of them.

Buttons use Luma's own button mixins, so a Wrizu button looks like a button from your theme rather than like a button from a plug-in. All of the module's CSS is scoped to [data-content-type^="wrizu_"], so it styles our elements and nothing else in your theme.

Requirements

Magento Open Source or Adobe Commerce 2.4.6 or newer, with the Magento_PageBuilder module enabled
PHP 8.1 to 8.5 — whichever your Magento version supports
No other extension, no external icon font, no CDN dependency

Questions about this element

Can I switch the movement off?

Not from the form, and not by accident. A strip that does not move is not a strip — that element is the Icon List. The visitor can stop it with the pause button, and a reduced-motion setting stops it for them automatically.

Is it accessible?

Does the speed change when I add an item?

Can a claim wrap onto a second line?

Media & motion