Product – Text Timer

Product – Text Timer

The Text Timer is a customizable countdown timer for your product pages, designed to boost urgency and drive conversions during time-sensitive promotions. You can add custom text, control colors, spacing, and even decide what happens after the timer ends.

---

❗❗Custom Placement Required❗❗

To place the timer exactly where you want it on your product page:

1. Go to the Product Information section.

2. Add a new block → Custom Liquid.

3. Paste this code:

liquidCopyEdit<div id='ecomz-countdown'></div>

1. Save and reposition the block to control where the timer appears.

---

Accessibility

• Accessibility Label for Countdown Wrapper (e.g., "Product Specification Sliders") – Improves support for screen readers by providing a semantic label for the section.

---

Section Spacing & Layout

• Background Color Set the section’s background (default: transparent).

• Padding Top / Bottom (rem) Controls internal vertical spacing inside the section (1rem default).

• Margin Top / Bottom (rem) Sets external vertical spacing around the section (0rem default).

• Max Section Width (rem) Set a max width for the section on desktop (85rem) and mobile (105rem).

• Left / Right Padding (px) Adjust inner horizontal spacing for both desktop and mobile separately.

---

Countdown Timer Setup

• Countdown Hours / Minutes / Seconds Define how long the countdown should run (e.g., 5h 12m 16s). This will start on each page load unless paired with dynamic logic.

• Accompanying Text Set a short phrase to appear next to the timer (e.g., “Sale ends in”).

• Text Font Size & Color Customize the size (18px) and color (#4D4D4D) of the accompanying text.

• Gap Between Text and Timer Horizontal spacing between the text and the timer (5px default for both desktop and mobile).

---

Timer Appearance

• Timer Color Sets the text color of the countdown digits (#F14E4E).

• Timer Size Adjusts font size of the timer numbers (18px).

• Timer Background Color Set the background behind the timer digits (#F9F9F9).

• Timer Border Radius Controls roundness of the timer's background container (24px).

---

Gradient Background (Optional)

Enable this option to create a smooth gradient behind the timer:

• Enable Timer Color Gradient When toggled, the static background is replaced with a dynamic gradient.

• Gradient Colors (1–4) Define up to four gradient stops. Default colors range from #66BB6A to #1B5E20.

• Gradient Angle Choose the angle for the gradient effect (e.g., 90° for vertical).

---

Post-Countdown Behavior

• Action After Countdown Ends Choose between:

  • Restart the Countdown – useful for evergreen timers.

  • Stop the Countdown and Show Message – displays a custom message.

• Post-Countdown Message (e.g., “Offer has ended.”) – Appears only if you choose to stop the timer.

---

Summary

The Text Timer block is perfect for time-limited offers, flash sales, or promotional drops. It's flexible, responsive, and supports a wide range of styling options to ensure it fits naturally into any product page layout. Use gradients to add flare, or pair it with urgent copy for maximum psychological effect.