Skip to main content
Kelvin has one countdown: the Deal countdown section. It shows one product on a deal with the time left until the moment you type, and it disappears when that moment passes. No other part of Kelvin shows a timer, and the theme never makes up a deadline.
The Deal countdown is off on install: the section is hidden on the home page and has no product or end date. A countdown must follow a real deadline, so use it only for a deal that really ends then.
1. Set up the deal in Shopify. Put the product on sale for the length of the deal: give it a compare-at price above its price (the section then shows the old price struck through and a sale badge), or create a discount in Discounts. Note the moment the deal ends. 2. Show the section. In the theme editor choose Home page. Deal countdown is hidden: hover over it in the sidebar and click the eye icon. To use it on another page, open that page and click Add section → Deal countdown. 3. Fill it in.
  • Product: the product on deal.
  • Deal ends: the end moment, written as below.
  • Label (Deal of the week on install), Heading (empty uses the product title), Text and Small print, such as Ends Monday, November 30 at 11:59 pm Eastern, or when stock runs out.
  • Image: empty uses the product photo.
  • Animate the deal border and Color scheme.
Write the end time like this. Year, month and day, the letter T, the time in 24 hours, then the time zone offset from UTC: Seconds are optional, as in 2026-11-30T23:59:30-05:00. The offset is required: without it the date is unreadable. Use the offset in force on the end date, since it changes with daylight saving time. What shoppers see. The label and the product’s sale badge, the heading, the text, the time left in boxes for days, hours, minutes and seconds, the small print, the price, and Add to cart (Choose options for products with variants, Sold out when nothing is in stock) with a Specs link to the product. Screen readers hear the time left in days, hours and minutes, updated at most once a minute. Without JavaScript, shoppers see the end date as text.
The deal countdown

The Deal countdown section on the home page of the demo

What happens at the end, or with a bad date.
  • The section shows on the store only when it has a product and an end time that is readable and still ahead.
  • A date Kelvin cannot read, such as one without an offset or with a typo, hides the countdown and the whole section.
  • At zero, while a shopper is on the page, the countdown removes itself and the section disappears. Pages loaded after the end do not show it at all.
  • It never restarts, and it is the same for every shopper: there is no timer per visitor.
  • 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.
  • The countdown does not change prices or end discounts. Remove the compare-at price or end the discount yourself at the same moment.
The flowing deal border. The deal box has Kelvin’s flowing border, a ring in the sale and accent colors. With Animate the deal border on (the default), the ring turns twice when the box comes into view and again while a shopper hovers over it or focuses something inside it. Turned off, the ring stays still, on view, hover and focus alike. To stop the motion on every deal section at once, turn off Flowing border on deal sections in Theme settings → Deals. Visitors who reduce motion always see it still. The same Animate the deal border setting is on the Hero’s deals rail and on collection promo tiles marked as a deal. All three are described in Deal highlights.

​
In the theme editor

Deal countdown in the theme editor

1 Deal countdown · 2 its settings, with Deal ends in ISO 8601 · 3 the preview