Skip to main content

Intro

Welcome to the Ultima Countdown Timer documentation. This guide explains how to create, configure, and manage timers for your Shopify store using the app's admin panel.

Getting Started​

The timer creation interface is divided into logical sections. You can access it by navigating to Apps > Ultima Countdown Timer > Timers and clicking "Add timer" or editing an existing one.

When you create a new timer, you are first presented with a choice of Timer Templates (Top, Bottom, Block in page, Product page, Full screen). Selecting one will pre-fill many settings to give you a head start. You can also skip this and configure everything manually.

Core Timer Features​

Understand the different types of timers and where they can be used.

Timer Configuration Details​

This section details every setting available in the timer edit form.

1. Basic Settings​

  • Timer name: An internal name for your reference only. It is not shown to customers.
  • Timer type: Defines the countdown behavior.
    • One-time (fixed end date): The timer counts down to a specific date and time and then expires.
    • Recurring (Evergreen): The timer shows a fixed duration (e.g., 1 day 2 hours) that restarts for each visitor. The countdown is the same every time the page loads.

2. One-time Timer Configuration​

Visible when "One-time" type is selected.

  • End date: The date the timer will expire.
  • End time: The specific time of day for expiration (in 24-hour HH:MM:SS format).

The timer will count down to this combined date and time.

3. Recurring Timer Configuration​

Visible when "Recurring" type is selected.

  • Days, Hours, Minutes, Seconds: Define the total duration of the countdown. For example, a value of `1` day, `2` hours, and `30` minutes will always show a timer counting down from 1d 2h 30m for every visitor.

4. Content Settings​

  • Timer title: The main heading displayed with the timer.
  • Timer description: Supporting text shown near the timer.
  • Button text & URL: Text and link for the call-to-action button.
  • Days, Hours, Minutes, Seconds labels: Customize the text shown below each time unit (e.g., "Days", "Hrs").

5. Layout & Positioning​

  • Layout: Controls where the timer appears on the page (e.g., Top, Before footer, Fixed bottom, Product, Container).
  • Alignment: Arranges timer elements either stacked vertically or side-by-side horizontally.
  • Spacing Controls: Fine-tune the position with horizontal/vertical padding, margins, and spacing between elements.
  • Full screen height: Forces the timer section to take up the full viewport height.

6. Background & Overlay​

  • Presets: Choose from pre-designed themes like Carbon, Spring, Black Friday, Blue, or Glass.
  • Enable overlay: Adds a colored layer over the background. You can control its color, opacity, corner radius, and blur (available for certain container layouts).

7. Styling Sections​

These sections allow for granular control over the appearance of every timer element.

  • Title Styling: Font size, color, weight, and margin.
  • Timer Styling: Font size, weight, spacing between numbers, margin, color, and background for the number blocks.
  • Timer Units: Padding, font size, weight, and corner radius for the unit labels (Days, Hours, etc.).
  • Separator Styling: Configure the character between units (colon or line), including its size, color, and weight.
  • Description & Button Styling: Control all aspects of the description text and the call-to-action button, including hover states.

8. Mobile Settings​

Override desktop styles for a better mobile experience. You can adjust padding, margins, and all font sizes specifically for smaller screens.

9. Targeting & Visibility​

  • Theme editor type: Choose between "Embed" (automatic placement) or "Apps block" (requires placing a block in the theme editor and entering the Timer ID).
  • Show on pages: Quickly enable the timer on Home, Cart, or Password pages.
  • Collection & Product targeting: Select specific collections or products to show (or exclude) the timer. Leave empty to show on all pages.

10. After Expiration​

Control what happens when a one-time timer reaches zero.

  • Show zero: The timer displays 00:00:00.
  • Hide timer: The timer disappears completely.
  • Show message: Displays a custom message. You can style this message's color and font size.
  • Redirect page: Redirects the customer to a specified URL.

Common Tasks & Guides​

Step-by-step instructions for specific use cases.

Pro Tip: Use the Timer ID found in the "Targeting" section to manually place a timer as an App Block in your Shopify theme editor.

The "Copy Code" button next to the Timer ID allows you to quickly copy it to your clipboard.

Troubleshooting & Common Issues​

Find solutions to common problems on the Troubleshooting FAQ.

Quick Checklist​

  • Is the timer set to Active (checkbox in the preview panel)?
  • Have you selected the correct pages under "Show on pages" or via collection/product targeting?
  • If using "Theme editor type: Apps block", did you place the block in the theme and enter the correct Timer ID?
  • Check the "After Expired" setting; if set to "Hide", the timer will disappear after its end date.

For further assistance, please refer to contact support.