Animated Counter
Numbers that earn a second of attention
A figure that counts up as it comes into view — orders shipped, years in business, average rating — with the icon and the label that give it meaning. And the finished number is written into the page, so it is right whether or not the animation ever runs.
Three counters in a row, each with an icon and a label.
Proof in a single glance
"12 500 orders shipped last year" does more for a hesitant shopper than a paragraph about your warehouse. Three of them in a row turn an about page into evidence.
Correct even when the animation never runs
The target figure is stored in the page, formatted, with its prefix and suffix. A blocked script, a cached page or a switched-off module leaves the number readable — the animation is the extra, not the content.
Three fields and it is on the page
A value, a label and a size. Everything else has a sensible default, and the counter starts when the shopper reaches it rather than while they are still at the top of the page.
Use cases
Where shops put it
The trust band on an About us page
Years trading, orders shipped, countries delivered to. Three counters across, each with an icon, in the place where shoppers go to decide whether you are a real business.
Delivery statistics on a shipping page
"98% dispatched the same day" — the number does the work that four sentences of policy copy were doing before it.
The rating on a product landing page
A counter with a "/ 5" suffix beside the number of reviews. Decimals are kept exactly as typed, so 4.9 stays 4.9 rather than rounding itself to 5.
- Target value
- With decimals kept exactly as you type them, and a start value — set it higher than the target and the counter runs down, which is how you show a fall.
- Prefix and suffix
- Around the figure: a currency symbol, a per cent sign, a plus, a "/ 5".
- Thousands separator
- None, a space or a comma.
- Animation duration
- In milliseconds; zero switches the animation off altogether.
- Trigger
- When the counter scrolls into view (the default), or as soon as the page loads.
- Optional icon
- Above the figure, with its own colour, and a label underneath.
- Figure size
- S, M or L — plus a colour for the number itself.
- Appearance
- Stacked, or Inline for a compact column of small statistics.
Shown in the demo store
The row of three as the page scrolls to it: each counter runs up from zero and stops on its figure.
The three sizes, decimals, and the comma thousands separator.
The Inline appearance, for a stack of smaller figures.
Native and honest
Your content is written in Magento's own format
The counter stores its finished number as text and lets the script animate back up to it, rather than storing a zero and hoping the script arrives.
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_PageBuildermodule 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
Media & motion
More in Media & motion
Animated Headline
A heading whose key word changes — rotating, typed with a caret, or marked by a drawn shape.
Before / After
Two photographs of the same thing under one handle.
Image Gallery
A grid, a masonry wall or a carousel of photographs, with a lightbox.
Marquee
A strip that scrolls without end, in claims, logos or tiles.
Progress Bar
A bar or a ring that fills to a percentage.
Video Popup
A poster or a button that opens a YouTube, Vimeo or self-hosted video in a window.
Thirty-five conversion elements for the Page Builder you already have
Wrizu Page Builder Extensions adds them to the native Magento 2 Page Builder — no second editor, no proprietary format, no content held hostage.