> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Deal countdown

> One product on a real, time-limited deal, with a countdown to the moment it ends and a button to add it to the cart.

![Deal countdown on the storefront](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/deal-countdown.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=49e630fc88fe42da5acebf9473082335)

Deal countdown, highlighted with the demo content

![Deal countdown in dark mode](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/deal-countdown-dark.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=c2bbac7939a8e0f82b7e1cfde45e7d5f)

Deal countdown in dark mode

## Where to find it

Eighth section of the Home page template, hidden on install. In the theme editor choose Home page in the page selector, hover over Deal countdown in the sidebar and click the eye icon to show it. Add it to other pages with Add section.

## How it works

* The section shows on the store only when it has a Product and a readable Deal ends time that has not passed. Otherwise it is not on the store at all.
* It shows the Label with the product's sale badge, the Heading (or the product title), the Text, the countdown in days, hours, minutes and seconds, the Small print, the price with any compare-at price struck through, Add to cart (Choose options for products with variants, Sold out when nothing is in stock) and a Specs link to the product.
* The countdown runs to the end time you type, the same for every shopper. At zero it removes itself and the section disappears. It never restarts.
* An end time Kelvin cannot read hides the section on the store. In the theme editor the section stays visible so you can fix it: a note says when the product or the date is missing or the date has passed, and a box with an unreadable date is dimmed.
* Screen readers hear the time left in days, hours and minutes, updated at most once a minute. Without JavaScript the end date shows as text.
* The box carries the flowing deal border. With Animate the deal border on, it turns twice when the box comes into view and again while it is hovered or focused, and it stays still for visitors who reduce motion. Turned off, the ring stays still.
* Wider than 900 px the image sits beside the copy; below that it sits on top, in a 16:9 frame.

![Deal countdown in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-deal-countdown.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=1dce683cc64c5241ec7135c305f5c1d7)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Put the product on sale first, with a compare-at price or a discount, ending at the same moment as the countdown.
* Type Deal ends in ISO 8601 with your time zone offset, such as `2026-11-30T23:59-05:00`. The format is explained in [Deal countdowns](https://docs.kwebby.com/kelvin/guides/deal-countdowns.md).
* Use Small print to say when and how the deal ends, such as Ends Monday at midnight Eastern, or when stock runs out.
* Leave Image empty to use the product photo, or pick a 5:4 photo at least 1200 px wide.
* Click the eye icon beside the section in the sidebar to show it: it is hidden on install.

## Settings

| Setting | What it does |
| - | - |
| **Product** | Choose a product. |
| **Deal ends** | Text. Date and time in ISO 8601 with your time zone offset, such as 2026-11-30T23:59-05:00. Give the matching discount in Shopify the same end date. The section hides itself when the time passes or the date cannot be read. |
| **Label** | Text. Default: Deal of the week. |
| **Heading** | Text. Leave empty to use the product title. |
| **Text** | Formatted text. |
| **Small print** | Text. For example: Ends Monday at midnight Eastern, or when stock runs out. |
| **Image** | Image: upload one or choose from Content → Files. Leave empty to use the product photo. |
| **Animate the deal border** | On or off. Default: on. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

> [!NOTE]
>
> Off on install: the section is hidden and has no product or end date. A countdown must follow a real deadline; use it only for a deal that really ends then.
>
> The countdown does not change prices. Remove the compare-at price or end the discount yourself at the same moment.
>
> The deal border is explained in [Deal highlights](https://docs.kwebby.com/kelvin/guides/deal-highlights.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.