Skip to main content

How to Create a Full-Screen Timer

Create an immersive, attention-grabbing full-screen countdown for major campaigns, product launches, or seasonal events.

What You'll Need​

  • A major campaign or launch date
  • Compelling visuals or messaging
  • A clear call-to-action

Step-by-Step Instructions​

  1. Create a new timer: Go to Timers and click "Create timer".

  2. Choose the Full Screen template: Select the "Full screen" template. This automatically enables:

    • Full screen height option
    • Overlay for better text visibility
    • Centered, large typography

  3. Configure timer type:

    • One-time: For a specific campaign end date (e.g., "New Year Sale Ends In").
    • Recurring: For an always-on full-screen experience (less common).

  4. Create compelling content:

    • Timer title: Bold headline like "THE BIGGEST SALE OF THE YEAR"
    • Timer description: Supporting text like "Up to 70% off everything"
    • Button text: Clear CTA like "Enter Store" or "Get Early Access"
    • Button URL: Where visitors should go when they click

  5. Enhance the visual impact:

    Background Options:​

    • Use a preset: Try Blue, Carbon, or Black Friday for dramatic effects.
    • Custom overlay: In "Background & Overlay":
      • Enable overlay if not already enabled
      • Choose an overlay_color that complements your brand
      • Adjust overlay_opacity (0.6-0.8 works well for text readability)
      • Set overlay_border_radius to "0px" for full coverage

    Typography:​

    • Title font size: Increase to "60px" or larger
    • Timer font size: "80px" or "100px" for dramatic effect
    • Button font size: "24px" for a prominent CTA

  6. Configure mobile experience:

    • In "Mobile Settings", reduce font sizes appropriately:
    • Title font size mobile: "32px"
    • Timer font size mobile: "48px"
    • Button font size mobile: "18px"
    • Adjust padding for smaller screens

  7. Targeting:

    • For a landing page: Create a specific page and use App Block mode to place the timer.
    • For homepage takeover: Check "Home page" in targeting.
    • For password page: Check "Password page" for launch countdowns.

  8. After expiration:

    • Choose what happens after the timer ends:
    • Redirect page: Send visitors to your store or campaign page.
    • Show message: Display "WE'RE OPEN!" with a button to enter.

  9. Activate and save: Click "Save".

Full-Screen Timer Use Cases​

  • Store launch: Build anticipation before opening
  • Major sale events: Black Friday, Cyber Monday, seasonal sales
  • Product launches: New collection or flagship product
  • Event countdown: Webinars, live launches, special events
  • Holiday celebrations: New Year, Christmas, Valentine's Day

Pro Tips for Full-Screen Timers​

  • Use high-quality background images: The app works with overlays, but for images you'll need to set them in your theme.
  • Keep it simple: Full-screen timers work best with minimal, focused messaging.
  • Test loading times: Ensure your page loads quickly despite the immersive design.
  • Consider exit intent: Some stores use full-screen timers as exit-intent popups (requires additional setup).
  • Mobile optimization is critical: Always test on real mobile devices.