Plugin Details
Home / Plug-in market / Number Growth Decoration Module
Number Growth Decoration Module
Number Growth Decoration Module
Overview
Number Growth is a plugin that adds a statistics counter module to the admin "Design → Decoration" builder. It displays a set of statistic numbers (such as customer count, order count, positive reviews, etc.) in icon cards. When the numbers scroll into the viewport, they automatically trigger an incremental animation, counting up from 0 to the target value – vividly showcasing your store's business achievements and brand strength.
Key Features
📊 Dynamic Number Growth Display
| Feature | Description |
|---|---|
| Scroll-triggered animation | Numbers automatically count up from 0 when scrolled into view – enhances visual appeal |
| Thousand separator formatting | Numbers automatically formatted with thousand separators (e.g., 2,589) – improves readability |
| Unit support | Customizable units (e.g., k, %, +) displayed after the number |
| Adjustable number size | Number font size adjustable from 20–80px |
| Smooth easing animation | Uses easeOutCubic easing function – smooth and natural animation |
🏷️ Card Content Configuration
| Feature | Description |
|---|---|
| Built-in icon library | 22 preset common icons (logistics, orders, ratings, customers, growth, etc.) |
| Custom icons | Supports uploading custom images – automatically overrides built-in icons |
| Number & unit | Each card can have its own independent value and unit |
| Text description | Multi-language text description support |
📐 Rich Configuration Options
| Option | Description |
|---|---|
| Title | Main module title (multi-language support) |
| Short description | Module description text (rich text support) |
| Number size | Configurable from 20–80px |
| Items per row (PC) | Configurable from 1 to 6 columns |
| Items per row (Mobile) | Configurable from 1 to 4 columns |
| Module width | Narrow (container) / Wide (container-fluid) / Full (w-100) |
🎨 Built-in Icon List
| Icon | Description | Icon | Description |
|---|---|---|---|
| truck | Logistics/Delivery | box-seam | Package |
| credit-card | Payment | shield-check | Security/Guarantee |
| people | Customers | person-check | Members |
| star | Rating | hand-thumbs-up | Likes |
| heart | Favorites | cart-check | Orders |
| bag-check | Shopping | gift | Gifts |
| globe | Global | trophy | Awards |
| award | Certified | gem | Premium |
| lightning-charge | Fast | cup-hot | Coffee/Leisure |
| headset | Support | clock-history | Hours/Duration |
| bar-chart | Stats | graph-up-arrow | Growth |
Technical Features
-
✅ Intersection Observer trigger : Uses native browser API to detect element visibility – excellent performance
-
✅ Respects reduced motion preference : Detects
prefers-reduced-motion– shows final value directly when user prefers reduced motion -
✅ Responsive grid layout : 1–6 columns on PC, 1–4 columns on mobile – auto-wraps, smart divider adaptation
-
✅ Smooth easing animation : easeOutCubic easing function – natural number transitions
-
✅ Thousand separator formatting : Large numbers automatically formatted with thousand separators
-
✅ Built-in icon font : Independent of theme icon libraries – displays correctly in both admin preview and frontend
-
✅ Any theme compatible : Frontend views are plugin-bundled – styles use CSS variables to adapt to themes
-
✅ Full design editor support : Real-time preview – number size can be adjusted in real time
Use Cases
-
Company/brand strength showcase (years established, customer count, service experience)
-
E-commerce statistics display (total orders, positive review rate, repurchase rate)
-
Project/case showcase (completed projects, number of partner brands)
-
Member/community data (registered members, active users)
-
Logistics/service data (delivery coverage, service hours)
