Figure 1 — Date & Time condition setup: 'Date & time' selected, calendar and time picker visible, 'Use clock countdown' checkbox and 'Setup message lock' link at the bottom.
⭐ Best Practice
Always use the {timer} placeholder in your message — it is required for the live countdown to appear.
Set your Date & Time target carefully — the timer counts down to the exact date/time in your Shopify store's timezone.
Test in an incognito window after saving both the customization panel and the main rule page.
Point 'After date/time' for launches; use 'Before date/time' for flash sale endings.
| | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ### **On This Page** 1. [Eligibility Requirements](#eligibility-requirements) 2. [Understanding Clock Countdown](#understanding-clock-countdown) 3. [When to Use — and When NOT to Use](#when-to-use-and-when-not-to-use) 4. [Availability & Limitations](#availability-and-limitations) 5. [Setting Up Clock Countdown](#setting-up-clock-countdown) 6. [Real-World Examples](#real-world-examples) 7. [Timer Format Reference](#timer-format-reference) 8. [Common Issues & Fixes](#common-issues-and-fixes) 9. [Still Need Help?](#still-need-help) ## **Eligibility Requirements** Confirm all of the following before setting up Clock Countdown: • BSS B2B Lock app is installed on your Shopify store. • Your store uses Shopify's standard online storefront. • You have Admin-level access to your Shopify store. • You are using a Date & Time lock condition — Clock Countdown only works with Date & Time rules. • Compatible with both B2B-only and hybrid B2B/B2C store setups. ## **Understanding Clock Countdown** ### **What It Is** Clock Countdown is a visual add-on for Date & Time lock rules that replaces your static lock message with a live ticking timer counting down to (or from) the date and time you set. The timer updates every second — no page refresh needed. When it reaches zero, the locked content unlocks automatically. ### **What You Can Do** • Show a live countdown to a product launch or sale start ('New collection launches in 2d 5h 30m'). • Show a live countdown to a sale or offer end ('Sale ends in 00h 45m 12s — Don't miss out!'). • Customize all text, fonts, colors, and layout for desktop and mobile separately. • Use the {timer} placeholder to position the timer anywhere in your message. • Add Custom CSS for pixel-perfect control over the timer's appearance. ### **Where It Applies** The countdown appears on any page covered by your lock — entire store, products, collections, or pages. Visible to all visitors, even those who cannot access the locked content ## **When to Use — and When NOT to Use** | **✅ Use Clock Countdown When...** | **❌ Do NOT Use When...** | | ----------------------------------------- | ------------------------------------------------ | | Product launches — build anticipation | Permanent locks — use a passcode or login rule | | Flash sales — show when sale starts/ends | Manual approval needed — use Access Management | | Pre-orders — show when order window opens | Content stays locked indefinitely after a date | | VIP early access — time-limited previews | Tag-based lock — use Tag/Specific Customers rule | | Events — control when registration opens | You do not want a visible countdown timer shown | ## **Availability & Limitations** | **Feature** | **Status** | **Notes** | | --------------------------- | ----------- | --------------------------------------------------------- | | Clock Countdown timer | ✅ Live | Works with Date & Time lock conditions only | | {timer} placeholder | ✅ Live | Required — must be included in message text | | Message customization | ✅ Live | Free-form text + {timer} anywhere | | Layout settings | ✅ Live | Desktop & mobile width, alignment, orientation | | Design settings | ✅ Live | Font, text color, timer color, background color | | Custom CSS | ✅ Available | Advanced users — overrides default styles | | Works with other lock rules | ⚠️ Partial | Only activates when Date & Time is the access rule | | Timer timezone | ℹ️ Note | Uses your Shopify store's timezone — set in Store details | | **⚠️ Note:** Clock Countdown only works with the Date & Time lock condition. It cannot be used with passcode, login, customer tag, or other rule types. | | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | **⚠️ Note:** The countdown timer uses your Shopify store's timezone. If your timer appears off by hours, go to Shopify Admin → Settings → Store details and verify your timezone. | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ## **Setting Up Clock Countdown** #### **1. Create a Lock with a Date & Time Rule** 1\. Go to **Shopify Admin** → **Apps** → **BSS B2B Lock.** 2\. Click **Locks** in the left navigation. 3\. Click **Add lock** (or open an existing lock to edit). 4\. In the Grant Access To panel, select Date & time. 5\. Click the dropdown and choose the direction:Figure 1 — Date & Time condition setup: 'Date & time' selected, calendar and time picker visible, 'Use clock countdown' checkbox and 'Setup message lock' link at the bottom.
Figure 2 — Message section: text field with '{timer}' placeholder. Preview shows 'This page will unlock in: 00h 00m 00s' with a lock icon.
�� Tip — Message Ideas
'This page will unlock in: {timer}' — clean and direct
'New collection launches in {timer} — get ready!' — excitement-building
'Sale ends in {timer} — don't miss out!' — urgency-driving
'Early access opens in {timer}' — VIP/exclusive feel
| | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | #### 4. Customize Layout Expand the Layout section to control positioning and size on desktop and mobile.Figure 3 — Layout section: Desktop width (50%), layout (Horizontal/Vertical), alignment, Mobile width (100%), and Mobile layout controls. Preview updates in real time.
Figure 4 — Design section: Text font and Timer font (Theme font), Text color (#000000), Timer color (#000000), Background color (toggle off), and Custom CSS section.
Figure 5 — Product page: 'The price will unlock in: 00h 08m 25s' appears above the product. Add to cart and Buy it now buttons are disabled until the timer expires.
Figure 6 — Full page lock: 'This page will unlock in: 09h 25m 32s' centered on the locked page. Content is hidden until the timer expires.
✅ Verification Checklist
Countdown timer appears on the correct pages — ✓
Message text matches what you configured — ✓
Timer is counting down (updates every second) — ✓
Desktop layout and alignment look correct — ✓
Mobile view looks correct (test on a phone or resize browser) — ✓
Content unlocks automatically when timer reaches zero — ✓
| | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ## **Real-World Examples** |Example 1 — Product Launch Countdown (New Shoe Collection)
Result: Customers see 'New collection launches in 2d 5h 30m' and cannot access products until launch — builds anticipation and drives traffic.
| | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |Example 2 — Flash Sale Countdown (Sale Ending Tonight)
Result: Customers see the red countdown and rush to purchase before the sale ends — creates urgency and boosts conversions.
| | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |Example 3 — VIP Early Access (Members Only Preview)
Result: VIP members see how long until early access opens, while general visitors see the same timer — building anticipation across all buyer types.
| | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ## **Timer Format Reference** The {timer} placeholder auto-formats based on remaining time — no configuration needed: | **Time Remaining** | **Display Format** | **Example** | | ------------------ | ------------------ | ------------- | | More than 1 day | Xd Xh Xm Xs | 2d 5h 30m 15s | | Less than 1 day | Xh Xm Xs | 5h 30m 15s | | Less than 1 hour | Xm Xs | 30m 15s | | Less than 1 minute | Xs | 45s | | **⚠️ Note:** The timer updates every second automatically. No page refresh is needed. When it reaches zero, the content unlocks immediately. | | ---------------------------------------------------------------------------------------------------------------------------------------------- | ## **Common Issues & Fixes** | **What You See** | **Why It Happens** | **What to Do** | | -------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | No timer visible on the storefront. | Clock countdown is not checked, or {timer} is missing from message. | Re-open the lock → Date & Time section → check 'Use clock countdown'. Re-open Setup message lock and confirm {timer} is in the text. | | Timer shows wrong time or timezone. | Shopify store timezone is set incorrectly. | Go to Shopify Admin → Settings → Store details → update your timezone. | | Timer counts up instead of down. | The target date is in the past. | Edit the lock → update the Date & Time to a future date/time. | | Content does not unlock when timer hits zero. | The lock has another access condition blocking it. | Review the full lock summary. Remove any additional conditions that may prevent unlocking. | | Timer layout looks wrong on mobile. | Mobile width is set too narrow. | Re-open Setup message lock → Layout → set Mobile width to 100%. | | Custom CSS is not applying. | CSS may have a syntax error, or it is overriding the wrong selector. | Double-check your CSS syntax. Try a simple test rule first. | | Timer message shows the raw placeholder '{timer}'. | The message was saved without the live preview loading. | Re-open Setup message lock, verify {timer} is in the text, and click Save. | ## **Still Need Help?** Contact support via the app or at **�� Try This First
Confirm 'Use clock countdown' is checked in the Date & Time section of your lock.
Confirm {timer} appears in your message text.
Save BOTH the customization panel AND the main lock page — two separate Saves are required.
Test in a private/incognito window to see the live storefront result.
| | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |