> For the complete documentation index, see [llms.txt](https://docs-shpf.bsscommerce.com/bss-b2b-lock-login-password-hide-price/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-shpf.bsscommerce.com/bss-b2b-lock-login-password-hide-price/other-locks/countdown-lock.md).

# Countdown Lock

Clock Countdown replaces a static lock message with a live ticking timer — showing customers exactly how long until content becomes available, down to the second.

**Build Urgency and Anticipation with a Live Countdown Timer**

Works with Date & Time lock conditions in the BSS B2B Lock app. Compatible with B2B-only and hybrid store setups. All visual options are fully customizable.

{% hint style="success" %}
**⭐ 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 **Preview & customize message** modal and the lock itself.

Clock Countdown is only available with **After date/time → Visible from**. It counts down to the moment your content unlocks, which suits launches, sale starts and early access.
{% endhint %}

### **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 set to **After date/time → Visible from**. Clock Countdown only works with this option.

• 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 the date and time your content unlocks.

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').

• 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 the sale starts   | 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                                                     |
|                                           | You want a countdown to when content **closes** (Before date/time → Visible until has no countdown) |

## **Availability & Limitations**

| **Feature**                      | **Status**      | **Notes**                                                          |
| -------------------------------- | --------------- | ------------------------------------------------------------------ |
| Clock Countdown timer            | ✅ Live          | Date & Time condition with **After date/time → Visible from** 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                          |
| Before date/time → Visible until | ❌ Not available | The **Use clock countdown** checkbox is not shown for this option  |
| Timer timezone                   | ℹ️ Note         | Uses your Shopify store's timezone — set in Store details          |

| **⚠️ Note:** Clock Countdown only works with the Date & Time condition set to **After date/time → Visible from**. It is not available for **Before date/time → Visible until**, or for passcode, login, customer tag and 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 rule**, select **Create my own lock** in the **Start with a preset** modal and click **Continue** (or open an existing lock to edit).

4\. In **Step 1 – Lock Target**, enter a **Lock name**, choose what to lock under **What do you want to lock?**, and click **Next**.

5\. In **Step 2 – Access & Message**, click the **Date & time** chip in the **Rule 1** card.

6\. Open the **Select access rule** dropdown and choose the direction:

| **Option**                       | **Meaning**                           | **Clock countdown** | **Best For**                                   |
| -------------------------------- | ------------------------------------- | ------------------- | ---------------------------------------------- |
| After date/time → Visible from   | Content UNLOCKS at the date and time. | ✅ Available         | Product launches, pre-order opens, sale starts |
| Before date/time → Visible until | Content LOCKS at the date and time.   | ❌ Not available     | Hiding content after an offer ends             |

To use Clock Countdown, choose **After date/time → Visible from**.

7\. Select a date on the calendar and choose the target time.

| **⚠️ Note:** Time is based on your Shopify store's timezone. Check Store details if the timer appears incorrect. |
| ---------------------------------------------------------------------------------------------------------------- |

#### 2. **Enable Clock Countdown**

1. Below the calendar in the **Date & time** condition card, tick **Use clock countdown**. This checkbox appears only when **After date/time → Visible from** is selected.
2. The **Preview** card on the right switches to **Clock countdown** and shows the live timer (for example *"This page will unlock in: 00h:14m:53s"*).
3. To edit the countdown text, layout and design, click **Customize message** on the **Preview** card. The **Preview & customize message** modal opens with a live Preview on the right.

<figure><img src="https://684288492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJh4ZJQcYHPWkPeDOGrHj%2Fuploads%2Fgit-blob-791a278fb483c37c2542b87782bdea5c459297c0%2Fstep2-date-time-clock-countdown.png?alt=media" alt="Figure 1 — Date &#x26; time condition with After date/time → Visible from selected, the Use clock countdown checkbox ticked below the calendar, and the Preview card showing Clock countdown with the live timer"><figcaption><p>Figure 1 — Select <strong>After date/time → Visible from</strong>, then tick <strong>Use clock countdown</strong>. The Preview card switches to Clock countdown.</p></figcaption></figure>

3. #### Write Your Countdown Message

Write your message text in the Message section. Use the {timer} placeholder to insert the live countdown.

1. Click in the message text field.
2. Type your message — for example: 'This page will unlock in: {timer}'
3. Click the + Timer button to insert the {timer} placeholder at the cursor position if needed.
4. Check the Preview on the right to see how your message looks.

<figure><img src="https://684288492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJh4ZJQcYHPWkPeDOGrHj%2Fuploads%2FmSniz48dCJOKQvORDeXp%2Fimage.png?alt=media&amp;token=8a584543-f18f-476c-90f2-498bf2774035" alt="Figure 2 — Message section: text field with &#x27;{timer}&#x27; placeholder. Preview shows &#x27;This page will unlock in: 00h 00m 00s&#x27; with a lock icon."><figcaption><p>Figure 2 — Message section: text field with '{timer}' placeholder. Preview shows 'This page will unlock in: 00h 00m 00s' with a lock icon.</p></figcaption></figure>

{% hint style="success" %}
**�� Tip — Message Ideas**

'This page will unlock in: {timer}' — clean and direct

'New collection launches in {timer} — get ready!' — excitement-building

'Sale starts in {timer} — don't miss it!' — urgency-driving

'Early access opens in {timer}' — VIP/exclusive feel
{% endhint %}

#### 4. Customize Layout

Expand the Layout section to control positioning and size on desktop and mobile.

<figure><img src="https://684288492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJh4ZJQcYHPWkPeDOGrHj%2Fuploads%2FIGNsgSE5ofi3U8wXetZP%2Fimage.png?alt=media&amp;token=3378d4e6-e1e2-4998-b122-7aed576e6231" alt="Figure 3 — Layout section: adjust the width, layout and alignment of the countdown separately for desktop and mobile. The Preview updates in real time."><figcaption><p>Figure 3 — Layout section: adjust the width, layout and alignment of the countdown separately for desktop and mobile. The Preview updates in real time.</p></figcaption></figure>

| **Setting**    | **Options**           | **Recommended**                                        |
| -------------- | --------------------- | ------------------------------------------------------ |
| Desktop width  | 0–100% (slider)       | 50% for a centered, focused timer block                |
| Desktop layout | Horizontal / Vertical | Horizontal for short messages; Vertical for multi-line |
| Desktop align  | Start / Center / End  | Center for most layouts                                |
| Mobile width   | 0–100% (slider)       | 100% — fills the screen width on mobile                |
| Mobile layout  | Horizontal / Vertical | Vertical works best on narrow screens                  |
| Mobile align   | Start / Center / End  | Center for consistency with desktop                    |

5\. Customize Design (Colors & Fonts)

Expand the Design section to control the visual appearance of your countdown timer.

<figure><img src="https://684288492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJh4ZJQcYHPWkPeDOGrHj%2Fuploads%2FCeVSrE44dMiPEhdh8vvV%2Fimage.png?alt=media&amp;token=3139288c-9864-42e3-b143-e8142a8b480f" alt="Figure 4 — Design section: choose the fonts and colors you want for the message text and the timer."><figcaption><p>Figure 4 — Design section: choose the fonts and colors you want for the message text and the timer.</p></figcaption></figure>

| **Setting**      | **What It Controls**                      | **Tips**                                                        |
| ---------------- | ----------------------------------------- | --------------------------------------------------------------- |
| Text font        | Font used for your message text           | Use 'Theme font' to match your store design automatically       |
| Timer font       | Font used for the countdown digits        | Consider a bold/monospace font for easy readability             |
| Text color       | Color of the message text                 | Toggle On to activate and pick a color                          |
| Timer color      | Color of the timer digits                 | Use your brand's accent color or red for urgency                |
| Background color | Background behind the countdown block     | Toggle Off to use transparent; toggle On to add a colored block |
| Custom CSS       | Override default styles with your own CSS | Advanced users only                                             |

#### 6. Save & Test

1. Click **Save** inside the **Preview & customize message** modal.
2. Click **Save** in the Contextual Save Bar at the top of the page (or go to **Step 3 – Exclude Pages** and click **Save** there).
3. Open your storefront in a private/incognito browser window.
4. Navigate to a page or product covered by the lock.
5. Verify the countdown timer appears and is counting down in real time.
6. Wait for the timer to reach zero and confirm the content unlocks automatically.

<figure><img src="https://684288492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJh4ZJQcYHPWkPeDOGrHj%2Fuploads%2FVhGz6m3CjM0dTfehGsvF%2Fimage.png?alt=media&amp;token=f52df146-79ed-4e58-84c9-d8838ebd7193" alt="Figure 5 — Product page: &#x27;The price will unlock in: 00h 08m 25s&#x27; appears above the product. Add to cart and Buy it now buttons are disabled until the timer expires."><figcaption><p>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.</p></figcaption></figure>

<figure><img src="https://684288492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJh4ZJQcYHPWkPeDOGrHj%2Fuploads%2FO3ByfUTUcuguTc8tVJbP%2Fimage.png?alt=media&amp;token=bb664db8-5c56-4ea3-b339-4c2dc70e76c2" alt="Figure 6 — Full page lock: &#x27;This page will unlock in: 09h 25m 32s&#x27; centered on the locked page. Content is hidden until the timer expires."><figcaption><p>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.</p></figcaption></figure>

{% hint style="success" %}
**✅ 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 — ✓
{% endhint %}

## **Real-World Examples**

{% hint style="info" %}
**Example 1 — Product Launch Countdown (New Shoe Collection)**

1. Add lock rule → Step 1: select the new shoe collection.
2. Step 2 – Access & Message: Date & time → 'After date/time → Visible from' → set to March 1, 2026 at 10:00 AM, then tick 'Use clock countdown'.
3. Preview card → Customize message.
4. Message: 'New collection launches in {timer}'
5. Design: Bold timer font, brand accent color.
6. Save the modal, then click Save in the Contextual Save Bar.

**Result:** Customers see 'New collection launches in 2d 5h 30m' and cannot access products until launch — builds anticipation and drives traffic.
{% endhint %}

{% hint style="info" %}
**Example 2 — Flash Sale Countdown (Sale Starting Tonight)**

1. Add lock rule → Step 1: select Flash Sale Collection.
2. Step 2 – Access & Message: Date & time → 'After date/time → Visible from' → set to Tonight at 8:00 PM, then tick 'Use clock countdown'.
3. Preview card → Customize message.
4. Message: 'Flash sale starts in {timer} — don't miss it!'
5. Design: Timer color set to red (#FF0000) for urgency.
6. Save the modal, then click Save in the Contextual Save Bar.

**Result:** Customers see the red countdown and come back when the sale opens — creates urgency and boosts traffic at launch.
{% endhint %}

{% hint style="info" %}
**Example 3 — VIP Early Access (Members Only Preview)**

1. Add lock rule → Step 1: select the VIP Preview collection.
2. Step 2 – Access & Message: Date & time → 'After date/time → Visible from' → set to the early access start time, then tick 'Use clock countdown'.
3. Preview card → Customize message.
4. Message: 'VIP early access opens in {timer}'
5. Design: Brand colors, clean centered layout.
6. Save the modal, then click Save in the Contextual Save Bar.

**Result:** VIP members see how long until early access opens, while general visitors see the same timer — building anticipation across all buyer types.
{% endhint %}

## **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.                | The condition is not **After date/time → Visible from**, **Use clock countdown** is not ticked, or {timer} is missing from the message. | Edit the lock → Step 2 → in the **Date & time** condition, choose **After date/time → Visible from** and tick **Use clock countdown**. Then open **Customize message** and confirm {timer} is in the text. |
| The **Use clock countdown** checkbox is missing.   | The condition is set to **Before date/time → Visible until**.                                                                           | Switch the condition to **After date/time → Visible from**. Clock Countdown is not available for Visible until.                                                                                            |
| 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 **Summary** card. Remove any additional conditions that may prevent unlocking.                                                                                                                  |
| Timer layout looks wrong on mobile.                | Mobile width is set too narrow.                                                                                                         | Re-open **Customize message** → 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 **Customize message**, verify {timer} is in the text, and click Save.                                                                                                                              |

## **Still Need Help?**

Contact support via the app or at **<support-sbc@bsscommerce.com>**

• Click Chat support in the help panel visible on the lock editor page.

• Or email **<support-sbc@bsscommerce.com>** with the details below.

When contacting support, include:

• Your shop URL (e.g. yourstore.myshopify.com)

• The rule name using the countdown

• A screenshot of the **Preview & customize message** modal

• The date and time you are targeting

{% hint style="info" %}
**�� Try This First**

Confirm the **Date & time** condition uses **After date/time → Visible from** and that **Use clock countdown** is ticked below the calendar.

Confirm {timer} appears in your message text.

Save BOTH the **Preview & customize message** modal AND the lock (Contextual Save Bar or **Save** in Step 3) — two separate Saves are required.

Test in a private/incognito window to see the live storefront result.
{% endhint %}

<br>