Sale countdown
How to use the Sale countdown block in the Meditative Folks Theme.
Sale countdown
At a glance
Sale-oriented countdown messaging block.
Used in
- Configure where this block is available in the parent section.
Settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Label | Controls “Label” on the storefront. Open the theme editor to preview live. | SALE ENDS IN | Always |
Schedule
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Timer mode | Counts down and restarts automatically. Choose duration below. Persists for the visitor's browser session (like the cart timer). | repeat | Always |
| Repeat duration | Controls “Repeat duration” on the storefront. Open the theme editor to preview live. | repeat_24h | timer mode == 'repeat' or timer mode == 'repeat 24h' |
| Start date & time | Optional. Shows the "before start" message until this moment. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2025-09-20 09:00:00 AM. Leave blank to start immediately. Times use the visitor's local browser timezone. | — | Timer mode is Schedule |
| End date & time | When the countdown reaches zero. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2026-12-25 10:00:00 AM. Times use the visitor's local browser timezone. | 2026-12-25 10:00:00 AM | Timer mode is Schedule |
Messages
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Message before timer starts | Controls “Message before timer starts” on the storefront. Open the theme editor to preview live. | Sale will start soon... | Timer mode is Schedule |
| Message after expiry | Controls “Message after expiry” on the storefront. Open the theme editor to preview live. | Sale ended! | Always |
Behavior
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Loop timer after expiry | When enabled, after the timer expires the end time moves forward by 24 hours until the current time is inside the window. When start time is set, both start and end advance together; if start is blank, only end time advances. | Yes | Timer mode is Schedule |
Progress bar
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Bar color | Controls “Bar color” on the storefront. Open the theme editor to preview live. | #b8e986 | Always |
| Bar height | Controls “Bar height” on the storefront. Open the theme editor to preview live. | 8 | Always |
Label typography
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global body styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Always |
| Label font size (mobile) | Sets label font size (mobile) in pixels for the matching screen size. | 14 | Use global body styles is off |
| Label font size (tablet) | Sets label font size (tablet) in pixels for the matching screen size. | 14 | Use global body styles is off |
| Label font size (desktop) | Sets label font size (desktop) in pixels for the matching screen size. | 16 | Use global body styles is off |
Timer typography
| Setting | What it does | Default | Shows when |
|---|
Mobile (up to 639px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Timer font size | Sets timer font size in pixels for the matching screen size. | 16 | Always |
Tablet (640px – 879px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Timer font size | Sets timer font size in pixels for the matching screen size. | 16 | Always |
Desktop (880px+)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Timer font size | Sets timer font size in pixels for the matching screen size. | 18 | Always |
Font weights
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Timer font weight | Sets how bold timer text appears. | 400 | Always |
Setting details
Each control from the tables above, explained simply:
Label
Controls “Label” on the storefront. Open the theme editor to preview live. Default: SALE ENDS IN.
Timer mode
Counts down and restarts automatically. Choose duration below. Persists for the visitor's browser session (like the cart timer). Default: repeat.
Repeat duration
Controls “Repeat duration” on the storefront. Open the theme editor to preview live. Default: repeat_24h. This control appears when: timer mode == 'repeat' or timer mode == 'repeat 24h'.
Start date & time
Optional. Shows the "before start" message until this moment. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2025-09-20 09:00:00 AM. Leave blank to start immediately. Times use the visitor's local browser timezone. Default: —. This control appears when: Timer mode is Schedule.
End date & time
When the countdown reaches zero. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2026-12-25 10:00:00 AM. Times use the visitor's local browser timezone. Default: 2026-12-25 10:00:00 AM. This control appears when: Timer mode is Schedule.
Message before timer starts
Controls “Message before timer starts” on the storefront. Open the theme editor to preview live. Default: Sale will start soon.... This control appears when: Timer mode is Schedule.
Message after expiry
Controls “Message after expiry” on the storefront. Open the theme editor to preview live. Default: Sale ended!.
Loop timer after expiry
When enabled, after the timer expires the end time moves forward by 24 hours until the current time is inside the window. When start time is set, both start and end advance together; if start is blank, only end time advances. Default: Yes. This control appears when: Timer mode is Schedule.
Bar color
Controls “Bar color” on the storefront. Open the theme editor to preview live. Default: #b8e986.
Bar height
Controls “Bar height” on the storefront. Open the theme editor to preview live. Default: 8.
Use global body styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes.
Label font size (mobile)
Sets label font size (mobile) in pixels for the matching screen size. Default: 14. This control appears when: Use global body styles is off.
Label font size (tablet)
Sets label font size (tablet) in pixels for the matching screen size. Default: 14. This control appears when: Use global body styles is off.
Label font size (desktop)
Sets label font size (desktop) in pixels for the matching screen size. Default: 16. This control appears when: Use global body styles is off.
Timer font size
Sets timer font size in pixels for the matching screen size. Default: 16.
Timer font size
Sets timer font size in pixels for the matching screen size. Default: 16.
Timer font size
Sets timer font size in pixels for the matching screen size. Default: 18.
Timer font weight
Sets how bold timer text appears. Default: 400.
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.