Countdown timer
How to use the Countdown timer section in the Meditative Folks Theme.
Countdown timer
At a glance
A standalone countdown to a sale, launch, or event date.
Where to find it
- Theme editor path: Online Store → Customize → select the relevant page → Countdown timer
- Add to a page: Add via Add section → category Upsell.
Settings
Timer display
| Setting | What it does | Default | Shows when |
|---|
Timer 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 |
| Timer font size | Sets timer font size in pixels for the matching screen size. | 13 | Always |
| Label font size | Sets label font size in pixels for the matching screen size. | 13 | Always |
| Message font size | Sets message font size in pixels for the matching screen size. | 16 | 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 |
| Timer font size | Sets timer font size in pixels for the matching screen size. | 30 | Always |
| Label font size | Sets label font size in pixels for the matching screen size. | 22 | Always |
| Message font size | Sets message font size in pixels for the matching screen size. | 18 | Always |
Desktop (880px+)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Prefix font size | Sets prefix font size in pixels for the matching screen size. | 23 | Always |
| Suffix font size | Sets suffix font size in pixels for the matching screen size. | 23 | Always |
| Timer font size | Sets timer font size in pixels for the matching screen size. | 50 | Always |
| Label font size | Sets label font size in pixels for the matching screen size. | 20 | Always |
| Message font size | Sets message font size in pixels for the matching screen size. | 20 | Always |
Font weights
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Prefix font weight | Sets how bold prefix text appears. | 400 | Always |
| Suffix font weight | Sets how bold suffix text appears. | 400 | Always |
| Timer font weight | Sets how bold timer text appears. | 400 | Always |
| Label font weight | Sets how bold label text appears. | 600 | Always |
| Message font weight | Sets how bold message text appears. | 400 | Always |
| Max width for timer | Controls “Max width for timer” on the storefront. Open the theme editor to preview live. | 900 | Always |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Padding top | Adds empty space (padding top) around the section content. | 32 | Always |
| Padding bottom | Adds empty space (padding bottom) around the section content. | 32 | Always |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Blocks
| Block | Purpose | Limit |
|---|---|---|
| Header & CTA Content | Add and configure in theme editor. | 1 |
| Timer slide | Add and configure in theme editor. | — |
Header & CTA Content settings
Header
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Overline | Controls “Overline” on the storefront. Open the theme editor to preview live. | Now's the time | Always |
| Use global overline styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Overline is filled in |
| Overline font size (mobile) | Sets overline font size (mobile) in pixels for the matching screen size. | 12 | Overline is filled in and Use global overline styles is off |
| Overline font size (tablet) | Sets overline font size (tablet) in pixels for the matching screen size. | 13 | Overline is filled in and Use global overline styles is off |
| Overline font size (desktop) | Sets overline font size (desktop) in pixels for the matching screen size. | 14 | Overline is filled in and Use global overline styles is off |
| Overline font weight | Sets how bold overline text appears. | 500 | Overline is filled in and Use global overline styles is off |
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | Sale ends in | Always |
| Use global H2 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Heading is filled in |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 26 | Heading is filled in and Use global heading styles is off |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 29 | Heading is filled in and Use global heading styles is off |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 33 | Heading is filled in and Use global heading styles is off |
| Heading font weight | Sets how bold heading text appears. | 500 | Heading is filled in and Use global heading styles is off |
| Subheading | Controls “Subheading” on the storefront. Open the theme editor to preview live. | — | Always |
| Use global subheading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | subHeading is filled in |
| Subheading font size (mobile) | Sets subheading font size (mobile) in pixels for the matching screen size. | 16 | Subheading is filled in and Use global subheading styles is off |
| Subheading font size (tablet) | Sets subheading font size (tablet) in pixels for the matching screen size. | 18 | Subheading is filled in and Use global subheading styles is off |
| Subheading font size (desktop) | Sets subheading font size (desktop) in pixels for the matching screen size. | 19 | Subheading is filled in and Use global subheading styles is off |
| Subheading max width | Controls “Subheading max width” on the storefront. Open the theme editor to preview live. | 500 | subHeading is filled in |
Alignment
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Hide heading and subheading (for accessibility) | Controls “Hide heading and subheading (for accessibility)” on the storefront. Open the theme editor to preview live. | No | Always |
| Content alignment | Controls “Content alignment” on the storefront. Open the theme editor to preview live. | center | Hide heading/subheading visually is off |
CTA
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | — | Always |
| Button link | Controls “Button link” on the storefront. Open the theme editor to preview live. | — | Button text is filled in |
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Button text is filled in |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Button text is filled in |
| Use global button styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Button text is filled in |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #ffffff | Button text is filled in and Use global button styles is off |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #000000 | Button text is filled in and Use global button styles is off |
| Enable full width on mobile | Turns “Enable full width on mobile” on or off on the storefront. | No | Button text is filled in |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button text is filled in |
Timer slide settings
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. | 2030-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 |
| Prefix text | Controls “Prefix text” on the storefront. Open the theme editor to preview live. | Hurry! Only | Always |
| Suffix text | Controls “Suffix text” on the storefront. Open the theme editor to preview live. | left! | 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. | No | Timer mode is Schedule |
| Message after expiry | Controls “Message after expiry” on the storefront. Open the theme editor to preview live. | Sale ended! | Timer mode is Schedule |
Country visibility
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show in country | Enter ISO country codes separated by commas, for example: IN, CA. Leave blank to show in all countries. | — | Always |
| Exclude from country | Enter ISO country codes separated by commas to hide this slide in those markets. Leave blank to exclude no countries. | — | Always |
Setting details
Each control from the tables above, explained simply:
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.
Timer font size
Sets timer font size in pixels for the matching screen size. Default: 13.
Label font size
Sets label font size in pixels for the matching screen size. Default: 13.
Message font size
Sets message font size in pixels for the matching screen size. Default: 16.
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.
Timer font size
Sets timer font size in pixels for the matching screen size. Default: 30.
Label font size
Sets label font size in pixels for the matching screen size. Default: 22.
Message font size
Sets message font size in pixels for the matching screen size. Default: 18.
Prefix font size
Sets prefix font size in pixels for the matching screen size. Default: 23.
Suffix font size
Sets suffix font size in pixels for the matching screen size. Default: 23.
Timer font size
Sets timer font size in pixels for the matching screen size. Default: 50.
Label font size
Sets label font size in pixels for the matching screen size. Default: 20.
Message font size
Sets message font size in pixels for the matching screen size. Default: 20.
Prefix font weight
Sets how bold prefix text appears. Default: 400.
Suffix font weight
Sets how bold suffix text appears. Default: 400.
Timer font weight
Sets how bold timer text appears. Default: 400.
Label font weight
Sets how bold label text appears. Default: 600.
Message font weight
Sets how bold message text appears. Default: 400.
Max width for timer
Controls “Max width for timer” on the storefront. Open the theme editor to preview live. Default: 900.
Padding top
Adds empty space (padding top) around the section content. Default: 32.
Padding bottom
Adds empty space (padding bottom) around the section content. Default: 32.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Overline
Controls “Overline” on the storefront. Open the theme editor to preview live. Default: Now's the time.
Use global overline styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Overline is filled in.
Overline font size (mobile)
Sets overline font size (mobile) in pixels for the matching screen size. Default: 12. This control appears when: Overline is filled in and Use global overline styles is off.
Overline font size (tablet)
Sets overline font size (tablet) in pixels for the matching screen size. Default: 13. This control appears when: Overline is filled in and Use global overline styles is off.
Overline font size (desktop)
Sets overline font size (desktop) in pixels for the matching screen size. Default: 14. This control appears when: Overline is filled in and Use global overline styles is off.
Overline font weight
Sets how bold overline text appears. Default: 500. This control appears when: Overline is filled in and Use global overline styles is off.
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Sale ends in.
Use global H2 heading styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Heading is filled in.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 26. This control appears when: Heading is filled in and Use global heading styles is off.
Heading font size (tablet)
Sets heading font size (tablet) in pixels for the matching screen size. Default: 29. This control appears when: Heading is filled in and Use global heading styles is off.
Heading font size (desktop)
Sets heading font size (desktop) in pixels for the matching screen size. Default: 33. This control appears when: Heading is filled in and Use global heading styles is off.
Heading font weight
Sets how bold heading text appears. Default: 500. This control appears when: Heading is filled in and Use global heading styles is off.
Subheading
Controls “Subheading” on the storefront. Open the theme editor to preview live. Default: —.
Use global subheading styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: subHeading is filled in.
Subheading font size (mobile)
Sets subheading font size (mobile) in pixels for the matching screen size. Default: 16. This control appears when: Subheading is filled in and Use global subheading styles is off.
Subheading font size (tablet)
Sets subheading font size (tablet) in pixels for the matching screen size. Default: 18. This control appears when: Subheading is filled in and Use global subheading styles is off.
Subheading font size (desktop)
Sets subheading font size (desktop) in pixels for the matching screen size. Default: 19. This control appears when: Subheading is filled in and Use global subheading styles is off.
Subheading max width
Controls “Subheading max width” on the storefront. Open the theme editor to preview live. Default: 500. This control appears when: subHeading is filled in.
Hide heading and subheading (for accessibility)
Controls “Hide heading and subheading (for accessibility)” on the storefront. Open the theme editor to preview live. Default: No.
Content alignment
Controls “Content alignment” on the storefront. Open the theme editor to preview live. Default: center. This control appears when: Hide heading/subheading visually is off.
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: —.
Button link
Controls “Button link” on the storefront. Open the theme editor to preview live. Default: —. This control appears when: Button text is filled in.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button text is filled in.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button text is filled in.
Use global button styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Button text is filled in.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: Button text is filled in and Use global button styles is off.
Button text color
Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Button text is filled in and Use global button styles is off.
Enable full width on mobile
Turns “Enable full width on mobile” on or off on the storefront. Default: No. This control appears when: Button text is filled in.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled 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: 2030-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.
Prefix text
Controls “Prefix text” on the storefront. Open the theme editor to preview live. Default: Hurry! Only.
Suffix text
Controls “Suffix text” on the storefront. Open the theme editor to preview live. Default: left!.
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: No. 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!. This control appears when: Timer mode is Schedule.
Show in country
Enter ISO country codes separated by commas, for example: IN, CA. Leave blank to show in all countries. Default: —.
Exclude from country
Enter ISO country codes separated by commas to hide this slide in those markets. Leave blank to exclude no countries. Default: —.
Tips
- Open the theme editor and select this section to preview changes live.
- Use Theme settings for fonts, colors, and buttons that apply store-wide.