Number ticker
How to use the Number ticker block in the Meditative Folks Theme.
Number ticker
At a glance
Animated number for stats inside layouts.
Used in
- Configure where this block is available in the parent section.
Settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | Ticker | Always |
Animation
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Start value | Controls “Start value” on the storefront. Open the theme editor to preview live. | 0 | Always |
| End value | Controls “End value” on the storefront. Open the theme editor to preview live. | 1000 | Always |
| Direction | Controls “Direction” on the storefront. Open the theme editor to preview live. | up | Always |
| Animation delay | Controls “Animation delay” on the storefront. Open the theme editor to preview live. | 0 | Always |
| Decimal places | Controls “Decimal places” on the storefront. Open the theme editor to preview live. | 0 | Always |
| Prefix text | Controls “Prefix text” on the storefront. Open the theme editor to preview live. | — | Always |
| Suffix text | Controls “Suffix text” on the storefront. Open the theme editor to preview live. | — | Always |
Ticker typography
| Setting | What it does | Default | Shows when |
|---|
Mobile (up to 639px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Prefix font size | Sets prefix font size in pixels for the matching screen size. | 14 | Always |
| Suffix font size | Sets suffix font size in pixels for the matching screen size. | 14 | Always |
| Number font size | Sets number font size in pixels for the matching screen size. | 30 | Always |
Tablet (640px – 879px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Prefix font size | Sets prefix font size in pixels for the matching screen size. | 16 | Always |
| Suffix font size | Sets suffix font size in pixels for the matching screen size. | 16 | Always |
| Number font size | Sets number font size in pixels for the matching screen size. | 40 | Always |
Desktop (880px+)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Prefix font size | Sets prefix font size in pixels for the matching screen size. | 18 | Always |
| Suffix font size | Sets suffix font size in pixels for the matching screen size. | 18 | Always |
| Number font size | Sets number font size in pixels for the matching screen size. | 50 | Always |
Setting details
Each control from the tables above, explained simply:
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Ticker.
Start value
Controls “Start value” on the storefront. Open the theme editor to preview live. Default: 0.
End value
Controls “End value” on the storefront. Open the theme editor to preview live. Default: 1000.
Direction
Controls “Direction” on the storefront. Open the theme editor to preview live. Default: up.
Animation delay
Controls “Animation delay” on the storefront. Open the theme editor to preview live. Default: 0.
Decimal places
Controls “Decimal places” on the storefront. Open the theme editor to preview live. Default: 0.
Prefix text
Controls “Prefix text” on the storefront. Open the theme editor to preview live. Default: —.
Suffix text
Controls “Suffix text” on the storefront. Open the theme editor to preview live. Default: —.
Prefix font size
Sets prefix font size in pixels for the matching screen size. Default: 14.
Suffix font size
Sets suffix font size in pixels for the matching screen size. Default: 14.
Number font size
Sets number font size in pixels for the matching screen size. Default: 30.
Prefix font size
Sets prefix font size in pixels for the matching screen size. Default: 16.
Suffix font size
Sets suffix font size in pixels for the matching screen size. Default: 16.
Number font size
Sets number font size in pixels for the matching screen size. Default: 40.
Prefix font size
Sets prefix font size in pixels for the matching screen size. Default: 18.
Suffix font size
Sets suffix font size in pixels for the matching screen size. Default: 18.
Number font size
Sets number font size in pixels for the matching screen size. Default: 50.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.