Countdown Timer

Display a live clock counting down to a specified date and time. You can configure the target date and customize the heading text, number format (days, hours, minutes, seconds), and styling. When installed, it looks like this on your product page.

Key Features

• Flexible Target Date: Pick any end date/time (e.g. sale close, product launch) right in the theme editor.

• Customizable Labels & Messages: Edit the heading text, choose which time units to show and set a post-expiry message or action.

• Full Styling Control: Change the fonts, sizes, colors, spacing, and layout in Shopify’s theme editor controls

Benefits

• Creates Urgency & FOMO: A ticking clock taps into your customer's fear of missing out, nudging them toward an immediate purchase rather than “think it over.”

• Boosts Engagement & Conversions: Using countdown timers can see conversion uplifts of 9–40% as customers respond to time-bound offers more readily.

• Highlights Limited-Time Promotions: Visually emphasizes flash sales, seasonal discounts, or one-day offers, making them stand out on a crowded product page.

How To Use?

1. After installing the Countdown Timer blocks. Going to the Shopify Editor sidebar, select the product page temple, click Add Section in the Template tab.

2. Choose the Countdown Timer block

1. Copy the block ID. For example: smi-block-countdown-timer-1

1. On the Product Detail sections, click Add Block and add Smind Block to the section

1. On the Smind Block, insert the block ID of countdown timer which is smi-block-countdown-timer-1 to the Section ID and change the block name if you want.

1. Next, you can rearrange the relevant blocks within the product detail sections

1. Finally, let's start to customize the Countdown Timer block

• Block ID: The unique ID of countdown timer block

• Content Max Width: Set the maximum width of the timer’s content area can stretch to.

• Heading: The rich text field for your main message.

• Heading Size: The font-size presets for your heading.

• Subtext: Optional secondary text below the heading

• Subtext size: Font-size presets for the subtext area.

• End date: The target date (and optional time) when your countdown hits zero. Format: YYYY-MM-DD or YYYY-MM-DD HH:MM

• Time zone: Which time-zone the end date uses

• Number size: Font-size presets for the numeric digits of days/hours/mins/secs.

• Countdown style: Pick from preset visual layouts (Classic, Border, Solid)

• Hide countdown when time expires: If on, the entire block will disappear once the end date passes. If off, the date will leave zeros on display.

• Thickness (px): Border width around the block.

• Opacity (%): How transparent the border is (0% = invisible, 100% = fully solid)

• Corner radius (px): Rounds the block’s corners (Higher values = more pill-shaped edges)

• Shadow blur: Choose a drop-shadow preset.

• Opacity (%): Controls how dark or faint that shadow appears.

• Color Scheme: Applies a color scheme of background, text, and accent colors.

• Top margin (px): Space above the block.

• Bottom margin (px): Space below the block.

• Block padding (px): Internal space between the block’s border and its content.