> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/storytelling/countdown-timer.md).

# Countdown timer

Add a ticking clock to any section to create urgency around a sale, launch, or limited-time offer.

### 1. What you can do

* Count down to a fixed end date, or run an evergreen timer that resets for each visitor
* Choose a classic numbers-and-divider look or a boxed style with filled or outlined units
* Show or hide labels under each number, and pick their position and weight
* Set a different size for mobile than desktop
* Apply custom padding and margin, with separate mobile values

### 2. How to add a Countdown timer block

You can add an Countdown timer block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section or block**

In the Theme Editor (Customize), click the section or block where you want the timer to appear.
{% endstep %}

{% step %}
**Add a countdown timer block**

Click **Add block** and select **Countdown timer**.
{% endstep %}

{% step %}
**Choose your timer type**

Select a timer type and set the end date, or pick an evergreen schedule.
{% endstep %}

{% step %}
**Adjust the settings**

Set the style, layout, and labels using the settings below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

#### 3.1. Style

Fine-tune the appearance of the timer, including its color scheme, shape, and size.

<details>

<summary>Color scheme</summary>

Controls the colors of the timer's numbers, labels, and any boxed backgrounds, based on your store's color palettes.

<table><thead><tr><th width="120.234375">Setting</th><th width="109.61328125">Options</th><th width="433.74609375">When to use</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the timer's colors to the section it sits in.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make the timer stand out, for example on a bold sale banner.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Only available when Inherit color scheme is off. Use the picker to select a color scheme set in <a href="/pages/1b5ffa40c2962e0b91c4af81ede33af2f4c7d020#id-2.-color-schemes">Theme settings > Colors</a>.</td></tr></tbody></table>

</details>

<details>

<summary>Layout</summary>

Sets the main arrangement of each number relative to its label. *Only available when labels are turned on.*

<table><thead><tr><th width="109.61328125">Options</th><th width="554.20703125">When to use</th></tr></thead><tbody><tr><td><strong>Vertical</strong></td><td>Stacks each number above its label. Works well in narrow spaces like sidebars.</td></tr><tr><td><strong>Horizontal</strong></td><td>Places each label beside its number. Better suited to wide banners.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

Chooses the overall visual treatment of the timer, plain numbers or boxed units.

<table><thead><tr><th width="113.703125">Setting</th><th width="140.2734375">Options</th><th width="410.1328125">When to use</th></tr></thead><tbody><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Boxed</li></ul></td><td><ul><li><strong>Classic</strong> shows plain numbers with an optional divider between units.</li><li><strong>Boxed</strong> wraps each time unit in its own box. Reads as more graphic, and works well on promotional banners.</li></ul></td></tr><tr><td><strong>Box style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> gives each box a solid background color.</li><li><strong>Outline</strong> shows just a bordered shape with no fill</li></ul><p><em>Only available when Style is set to <strong>Boxed</strong>.</em></p></td></tr><tr><td><strong>Box corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td><p>Controls how rounded the corners of your frame are.</p><ul><li><strong>Main corner</strong> matches the global corner radius set in your theme.</li><li><strong>Small</strong> and <strong>Extra small</strong> inherit from the <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> value and scale it down proportionally for a subtler effect.</li><li><strong>None</strong> removes rounding entirely for a sharp, full-bleed look.</li><li><strong>Custom</strong> lets you set a precise value to match a specific design.</li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Divider</summary>

Sets the separator shown between time units in Classic style. *Only available when Style is set to Classic.*

<table><thead><tr><th width="109.61328125">Options</th><th width="554.20703125">When to use</th></tr></thead><tbody><tr><td><strong>None</strong></td><td>No separator between time units.</td></tr><tr><td><strong>Line</strong></td><td>A spaced-out line between units, for a modern feel.</td></tr><tr><td><strong>Colon</strong></td><td>The familiar "00:00:00" look.</td></tr></tbody></table>

</details>

<details>

<summary>Labels</summary>

Controls the visibility and style of unit names alongside numbers.

<table><thead><tr><th width="113.703125">Setting</th><th width="140.2734375">Options</th><th width="410.1328125">When to use</th></tr></thead><tbody><tr><td><strong>Show labels</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turn this <strong>On</strong> to display "Days," "Hours," "Minutes," and "Seconds" alongside each number.</li><li>Turn it <strong>Off</strong> for a cleaner, numbers-only display once customers already understand the context, for example a banner that already says "Sale ends in."</li></ul></td></tr><tr><td><strong>Label style</strong></td><td><ul><li>Full</li><li>Abbreviated</li><li>Initial</li></ul></td><td><ul><li><strong>Full</strong> spells out the full unit name, for example "Hours."</li><li><strong>Abbreviated</strong> abbreviates the unit name, for example "Hrs." Reduces label size and weight for a quieter look that doesn't compete with the numbers.</li><li><strong>Initial</strong> reduces the unit to a single letter, for example "H." The smallest possible label footprint.</li></ul><p><em>Only available when <strong>Show labels</strong> is <strong>On</strong>.</em></p></td></tr><tr><td><strong>Label position</strong></td><td><ul><li>Top</li><li>Bottom</li></ul></td><td><p>Sets whether the label sits above or below its number in Vertical layout.</p><p><em>Only available when <strong>Show labels</strong> is on and <strong>Layout</strong> is set to Vertical.</em></p></td></tr></tbody></table>

</details>

<details>

<summary>Size</summary>

Sets the overall size of the timer. Choose **Small**, **Medium**, or **Large**. Use Large for hero banners and Small when the timer shares space with other content.

Enable **Custom on mobile** to adjust the mobile timer size independently (e.g., shrinking a Large desktop timer to Medium on phones)

</details>

#### 3.2. Timer

These settings control what the countdown actually counts down to.

<table><thead><tr><th width="105">Setting</th><th width="185.31640625">Options</th><th>When to use it</th></tr></thead><tbody><tr><td>Type</td><td><ul><li>Evergreen</li><li>Fixed time</li></ul></td><td><ul><li><strong>Evergreen</strong> restarts on a repeating schedule for every visitor, useful for an always-on "flash sale" feel.</li><li><strong>Fixed time</strong> counts down to one specific date and ends for everyone at once, useful for a real launch or sale deadline.</li></ul></td></tr><tr><td>Evergreen duration</td><td><ul><li>Every 2 hours</li><li>Every 6 hours</li><li>Every 12 hours</li><li>Every day</li><li>Every week</li><li>Every month</li></ul></td><td><p>Sets how often the countdown resets. Each visitor gets their own countdown cycle starting from when they land on the page.</p><p><em>Only available when <strong>Type</strong> is <strong>Evergreen</strong>.</em></p></td></tr><tr><td>End date and time</td><td>Text field</td><td><p>Enter the exact date and time the countdown should reach zero. All visitors see the same end time regardless of when they arrive (e.g. <code>2026/03/20 6:00 PM</code>)</p><p><em>Only available when <strong>Type</strong> is <strong>Fixed time</strong>.</em></p></td></tr></tbody></table>

{% hint style="info" %}
Evergreen timers reset per visitor, not for everyone at the same time. Don't use Evergreen for a sale with a real, store-wide deadline. Use Fixed time instead, or customers may see a countdown that doesn't match when the sale actually ends.
{% endhint %}

#### 3.3. Spacing

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="419.32421875">When to use</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the timer and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the timer to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>