What's wrong with this code? (adding script to store)

Store Design
, , ,
1

Hi, i’m trying to get this script that I found to work on my Dawn theme to add a timer to announcement bar of my store. But it’s not working. How can I fix?

The code is from January 2023 so it might be a little outdated to work based on shopify’s recent changes in last 2 years.

I would appreciate it soooo much if someone can help me figure this out!

Here’s the code I’m trying: https://community.shopify.com/post/1908678

and i found the original code that this was taken from: https://kaniwong.github.io/2022/08/28/Add-Simple-countdown-timer-to-your-shopify-store-via-JavaScript/

2

Hi @faecom1

To add a countdown timer to the announcement bar in Shopify’s Dawn theme, follow these steps:

1-Access the Theme Editor:

2-Add Custom Code:

  • In the theme editor, click on the Theme settings tab.
  • Scroll down and select Custom CSS.
  • Paste the following CSS code to style the countdown timer:

.announcement-bar__message {

display: flex;

justify-content: center;

align-items: center;

}

.countdown-timer {

margin-left: 10px;

font-weight: bold;

}

  • Next, click on the Custom JavaScript section.
  • Paste the following JavaScript code to implement the countdown functionality:

document.addEventListener(‘DOMContentLoaded’, function() {

function initializeCountdown(endTime) {

function updateCountdown() {

const now = new Date().getTime();

const distance = endTime - now;

if (distance < 0) {

clearInterval(interval);

document.querySelector(‘.countdown-timer’).innerHTML = ‘EXPIRED’;

return;

}

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.querySelector(‘.countdown-timer’).innerHTML =

hours + 'h ’ + minutes + 'm ’ + seconds + 's ';

}

updateCountdown();

const interval = setInterval(updateCountdown, 1000);

}

const now = new Date();

const resetTime = new Date();

resetTime.setHours(24, 0, 0, 0); // Reset at midnight

if (now > resetTime) {

resetTime.setDate(resetTime.getDate() + 1);

}

const announcementBar = document.querySelector(‘.announcement-bar__message’);

if (announcementBar) {

const timerSpan = document.createElement(‘span’);

timerSpan.className = ‘countdown-timer’;

announcementBar.appendChild(timerSpan);

initializeCountdown(resetTime.getTime());

}

});

3-Save and Preview:

  • Click Save to apply the changes.
  • Preview your store to ensure the countdown timer appears correctly in the announcement bar.

This code sets a countdown timer that resets daily at midnight, displaying the remaining hours, minutes, and seconds in the announcement bar. Ensure that your theme’s announcement bar is enabled and visible for the timer to display properly.

If the timer doesn’t appear as expected, double-check that the CSS and JavaScript code snippets are correctly placed in their respective sections and that there are no syntax errors.