Countdown timer

Countdown timer is a great way to create urgency and boost engagement on your page. It can be used for flash sales, product launches, or upcoming events. This guide walks you through adding and customizing a countdown timer.

How to add a countdown timer

How to edit a countdown timer

General settings

  • End time: Set the exact date and time when the countdown should end.

  • Content alignment: Align the countdown timer to the left, center, or right of its container using the alignment options.

  • Labels:

    • Toggle the Show labels option to display or hide the time unit labels (Days, Hours, Minutes, Seconds).

    • Customize the label text for each time unit as needed, or use the default wordings.

Design settings

Besides settings for Size and Constraints, you can edit specific elements of a countdown timer.

Choose what you want to customize from the dropdown menu.

  • Element container: Adjust the overall container (Text style, Spacing, Background, Borders).

  • Timer blocks: Style the blocks that display the countdown numbers (Text style, Size, Background, Borders).

  • Numbers: Change the font style, color, and spacing of the numbers.

  • Labels: Change the font style, color, and spacing of the numbers.

Last updated

Was this helpful?

#289: Figma to Shopify with Foxify article

Change request updated