Countdown Timer to 9 PM in Shopify

Other Questions Shopify
1

Hey everyone! I’m new to Shopify and need some help with a time-related feature. I want to create a countdown timer that shows how much time is left until 9 PM each day. Here’s what I’ve figured out so far:

{% assign current_time = 'now' | date: '%s' %}

This gives me the current timestamp. But I’m stuck on how to get the timestamp for 9 PM today and then calculate the difference. Can anyone point me in the right direction? I’d really appreciate some guidance on how to set up this daily countdown timer. Thanks in advance for any tips or code examples you can share!

2

I’ve implemented similar functionality in my Shopify projects. Here’s a robust approach:

Calculate the target time for 9 PM today:

{% assign target_time = ‘now’ | date: ‘%Y-%m-%d 21:00:00’ | date: ‘%s’ | plus: 0 %}
{% assign current_time = ‘now’ | date: ‘%s’ | plus: 0 %}

{% if current_time >= target_time %}
{% assign target_time = target_time | plus: 86400 %}
{% endif %}

{% assign time_diff = target_time | minus: current_time %}

This handles the rollover to the next day automatically. For displaying the countdown, I recommend using JavaScript. You can pass the time_diff to your script as a data attribute and update it client-side for a smooth experience.

Remember to format the time difference into hours, minutes, and seconds for display. This method has proven reliable across various Shopify stores I’ve worked on.

3

hey there! i’ve dealt with similar stuff before. here’s a quick tip:

use the date filter to get today’s date, then add ‘21:00:00’ to it. compare that with ‘now’ to see if it’s before or after 9pm. if after, add a day.

then just subtract current time from target time. hope this helps!

4

I’ve implemented something similar in my Shopify store. Here’s a solution that should work for you:

{% assign current_time = ‘now’ | date: ‘%s’ | plus: 0 %}
{% assign target_time = ‘now’ | date: ‘%Y-%m-%d 21:00:00’ | date: ‘%s’ | plus: 0 %}
{% if current_time > target_time %}
{% assign target_time = target_time | plus: 86400 %}
{% endif %}
{% assign time_diff = target_time | minus: current_time %}

This calculates the seconds until 9 PM today or tomorrow if it’s already past 9 PM. You can then convert time_diff to hours, minutes, and seconds for display. Remember to use JavaScript to update the countdown in real-time on the client-side for a smoother experience.

5

As someone who’s worked extensively with Shopify and time-based features, I can share a bit of insight on this. The tricky part with countdown timers is handling the rollover to the next day.

Here’s an approach I’ve used successfully:

First, get the current date and set the time to 9 PM:

{% assign target_time = ‘now’ | date: ‘%Y-%m-%d 21:00:00’ %}

Then, compare it with the current time. If it’s past 9 PM, add a day to the target time using a simple if statement and the ‘add’ filter.

For the actual countdown, I recommend using JavaScript on the client-side. You can pass the target time to your JS as a data attribute, then use setInterval to update the countdown every second.

This approach has worked well for me in several projects. It’s efficient and handles the daily reset smoothly. Let me know if you need more details on implementation!