Multiple countdown using metafield values

Technical Q&A

Topic summary

Building per-variant countdown timers for a product page, with each product variant (a specific version of a product) showing its own timer above the “Add to cart” button.

  • Data source: Each variant has an end date stored in a metafield (custom data field) at custom_fields.launch.

  • Implementation: Liquid checks if the metafield exists for a variant and assigns variant.metafields.custom_fields.launch.value to launch_date; JavaScript renders days, hours, minutes, and seconds. The countdown is shown only when the metafield is present.

  • Issue: All variants display the same countdown time, even when different end dates are specified in their metafields. The user seeks guidance on what is missing so the countdown reflects each variant’s specific metafield value.

  • Artifacts: A screenshot and a code snippet are central to understanding (the snippet shows the Liquid conditional and assignment).

  • Status: No resolution yet; open question on how to bind the countdown logic to each variant’s individual metafield value so timers differ per row.

Summarized with AI on February 27. AI used: gpt-5.
1

Dear community,

I am trying to build a specific feature for my products. The goal is to display each available variant of the product in a row . In each row I need to show a countdown timer above the “add to cart” button.

Since I am importing products directly from a third party supplier, I am using metafields to specify the ending date of the timer. So far I was able to sort out the countdown code in javascript which should display the remaining time to purchase in days, hours, minutes and seconds. Using the {% if %} tag, the countdown should be displayed only for variant where a metafield is specified.

The problem as you can see is that the countdown is identical for all variants even when dates are specified for other variants. Could you please help me understand what I missed so that the countdown works for each variant’s metafield?

Joiakim_0-1635974220206.png
Joiakim_0-1635974220206.png1013×650 65.9 KB

Here is my code :

{% if variant.metafields.custom_fields.launch  %}

{% assign launch_date = variant.metafields.custom_fields.launch.value %}

  
    
    days
    
    hours
    
    minutes
    
    seconds    
  

{% endif %}