How to add Text and Timer to product page ( Shopify Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I am using dawn theme in shopify. I want to add text and timer to the product page of my website. I have added referral website and image below. This is exactly what I would like to put on my website. Please give me that code.  And it would be very helpful if you could give me instructions on where to add the code. It will be beneficial for everyone. Please help me. thank you.

Store url: https://puppies-paws-shop.myshopify.com/products/dog-leash-1-2m-1-5m-2m-3m-strong-nylon-reflective-l...

Password: Admin

What I need!

Referral website: https://zentaro.nl/collections/dames/products/isabella-herfst-suit

[DaisyVo]

Hi @dreamtechzone_5 

To add text and a countdown timer to your product page in the Dawn theme, follow these steps:

1. Go to Online Store > Themes > Actions > Edit code.
2. Open the product.liquid or main-product.liquid file: https://prnt.sc/C0TWlPXb1Nvj
3. Locate where you want the text and timer to appear (e.g., below the price or product description).
4. Paste the provided code where you want the text and timer to display.
5. Save the changes and refresh your product page to see the timer.

Code:

<div class="custom-timer" style="text-align: center; margin-top: 20px;">

    <p style="font-size: 18px; font-weight: bold;">Limited Offer Ends In:</p>

    <div id="countdown-timer" style="font-size: 20px; color: red; font-weight: bold;"></div>

</div>

<script>

    function startCountdown(durationInHours) {

        const endTime = new Date().getTime() + durationInHours * 60 * 60 * 1000;

        const timerElement = document.getElementById('countdown-timer');

        function updateTimer() {

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

            const distance = endTime - now;

            if (distance < 0) {

                timerElement.innerHTML = "Offer Expired";

                clearInterval(timer);

                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);

            timerElement.innerHTML = `${hours}h ${minutes}m ${seconds}s`;

        }

        updateTimer();

        const timer = setInterval(updateTimer, 1000);

    }

    // Start a 24-hour countdown

    startCountdown(24);

</script>

If you have other questions, I am willing to answer them more.

Best regards,

Daisy