Skip to main content

How to Add a Timer Block on Shopify Checkout

The timer block is a powerful feature that allows you to create urgency and encourage customers to complete their purchases within a specific time frame. This feature is available through the Checkout Ninja app and is compatible with Shopify Plus stores using Shopify's new checkout extensibility.

In this guide, we'll walk you through the steps to set up a timer block on your Shopify checkout.

Video Tutorial​

Step-by-Step Procedure​

Step 1: Install the Checkout Ninja App​

  1. Install the Checkout Ninja App: If you haven't already, install the Checkout Ninja app from the Shopify App Store.

Screenshot2024-07-24at5.29.15PM.png

Step 2: Create a Checkout Block​

  1. Select Create Advanced Blocks: Open the Checkout Ninja app and select "Create Advanced BLock" from the left menu.
  2. Create a New Checkout Block: Click on the "Create Checkout Block" button.

Screenshot2024-07-24at5.29.15PM.png

Step 3: Title Your Block​

  1. Enter a Title for Your Block: Enter a title for your block, for example, "Timer Block."

1.png

Step 4: Configure the Timer Block​

  1. Rule Section (Optional):

    • In the rule section, specify the conditions under which the block should be displayed. For example, you can set rules based on cart total, customer tags, etc.

    2.png

  2. Block Section:

    • Select Block Type: Choose "Timer" from the block type dropdown menu.
    • Time Text Field: Enter the time in minutes. For example, type "1" for one minute or "10" for ten minutes.
    • Running Timer Content: Enter the content to be displayed while the timer is running. For example: 
      Just a reminder: Your special offer ends in {{time}} . Don’t miss out!
      • {{time}} will dynamically display the time from the time field.
    • Label After Countdown: Enter the message to be displayed after the countdown ends. For example: 
      Time’s up! Your cart has expired.
    • UI Template Field: Try different templates we have pick one of them.
    • Translate Field: Translate field is to translate the minutes and second in your lanuguage. Give yes or no, it will automatically translate.

    3.png

Step 5: Save and Implement the Block​

  1. Save the Block: After configuring your timer block, save your changes.

  2. Copy the Block ID: Copy the block ID for later use.

    4.png

  3. Open Checkout Editior from Settings: Click on Open Checkout Editor button. 4.png

  4. Add App Block: Click on the "Add App Block" button.

  5. Select Custom Block: Choose "Custom Block" from the menu. 6.png

  6. Paste the Block ID: Paste the block ID you copied earlier and save the changes. 7.png

  7. Make the Block Live: Save the changes in the checkout editor page.

Step 6: Test the Timer Block​

  1. Test the Timer Block: Go through the checkout process to ensure that the timer block appears as expected and the messages are displayed correctly.

Additional Tips​

  • Customize the messages and times to suit your marketing strategy and checkout flow.
  • Test different scenarios to see how the timer block affects conversion rates.