Product Detail Page: Countdown Timer

Nicolette Affre
  • Updated

Create a Sense of Urgency, by Leveraging the Countdown Timer Block

The Tapcart Countdown Timer block allows you to add a countdown timer directly on your product detail page (PDP). In this article, we’ll learn how to configure the timer block, to create a sense of urgency and engagement for your app users. 

Before getting started, please note the configuration for the usage of the countdown timer on the product page builder requires: 

  1. Product Metafields
  2. Product Tag Scheduling/ Shopify Line Item Script

How to Set Up Product Metafields?  

Steps

  1. Install the Metafields Guru App in the Shopify dashboard 
    • Metafield - This is a variable you set on each product that Tapcart will query to determine product eligibility.
    • In the metafield, we are trying to determine if the product has met the requirements to have the PDP Countdown Timer shown within its product page. 
  2. Set up your metafield to consist of these 3 values: Screen_Shot_2022-03-25_at_10.58.03_AM.png
    • Namespace: drop
    • Key: datetime
    • Value: string containing the date and time of the drop in a specific format 
      • Important Note: The Value must be entered in UTC (which is 2 hours behind CET) datetime format as follows: 
        2021-05-14 11:00:00
  3. Once you have created your metafield with the correct value format, reach out to your point of contact at Tapcart or email us at help@tapcart.co. We will be able to complete the configuration, so you can see the PDP countdown timer block within your dashboard.

Why Product Tag Scheduling/ Shopify Line Item Script?   

As there are multiple versions of the app published, it is possible that some users have versions of the app that do not yet support the PDP countdown timer block. This means that it is technically possible for them to add ‘Coming Soon’ products to their cart and complete a check out with them. However, this can be prevented by leveraging Shopify Scripts with the existing usage of your ‘Coming Soon’ product tags. Following the steps below, you can add a line item script, to your Shopify Script Editor. This will check for products with the ‘Coming Soon’ product tag and remove those line items from the users' checkout to avoid purchasing them.

Screen_Shot_2022-03-25_at_10.56.40_AM.png

Steps

  1. Tag product with ‘Coming Soon’ 
    • For more information on tagging products within Shopify, you can check out this guide
  2. Once you have completed tagging your product(s), create a Shopify line item script

    • Line Item Script

      cart = Input.cart

      Input.cart.line_items.each_with_index do |line_item, index|

       product = line_item.variant.product

       if product.tags.index('Coming Soon') != nil

         cart.line_items.delete_at(index)

       end

      end

      Output.cart = cart
  3. Publish the associated script to the online store and Storefront APIs' and you’re all set!

Once the product drop arrives, the ‘Coming Soon’ product tags can be automated to be removed and allow for successful checkout by your app users. To complete this you can create a new rule on the Easy tagging tool.Screen_Shot_2022-03-25_at_10.57.27_AM.png

How to Enable the PDP Countdown Timer?

pdp_countdown_timer.gif

Steps

  1. Once the block is enabled within your dashboard, navigate to the Product Page Builder 
  2. Scroll down to the countdown timer block
  3. Drag and drop it into your PDP Screen_Shot_2022-04-12_at_9.51.22_AM.png
  4. From here enter the Namespace and Key that was used for the product metafieldScreen_Shot_2022-04-12_at_9.53.43_AM.png
    • Important Note: This must be entered the same way it is shown within your product metafield to successfully save and use the countdown timer block. 
  5. Modify the color and add a headline copy in the respective fieldsScreen_Shot_2022-04-12_at_9.53.52_AM.png
  6. Select ‘Save Countdown’ and you’re all set!

Considerations

We recommend the Metafields Guru App in the Shopify Dashboard but if you are using another third-party metafields app that will work as well!  

Please note, in order to use this feature: 

  • You must be on Tapcarts Ultimate or Enterprise Plan 
    • Not on Tapcart Ultimate or Enterprise but want to learn more about using the Product Page Builder? You can talk to one of our mobile experts by accessing the Product Page section within your dashboard. Simply choose to open the Product Page section and select ‘talk to a mobile expert’ to get started!
  • Your store needs access to Shopify Scripts in order to access this feature.
    • Shopify Scripts is only available on Shopify Plus. For more information on Shopify’s Plus plan, please visit this link.

More Questions 

To learn more about Tapcart, visit Tapcart Academy to become a mobile app expert!

If you have additional questions about setting up the PDP Countdown Timer, we’re happy to help! Please reach out to use through LiveChat in your Tapcart dashboard or you can email us at help@tapcart.co!

Related articles