How to create a Sales Countdown Timer in Shopify without app

Countdown timer is a popular featured appear on almost store. It is a powerful technique to push online shoppers into making faster decisions on purchases they are thinking about. However, it’s not something that Shopify enables you to implement out of the box. Therefore, the most efficient method to add a countdown timer in Shopify is to use an app. In this tutorial, I would like to show you how to add a simple Sale Countdown Timer to your Shopify theme. This is very easy and step by step detail:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Snippets directory, click Add a new snippet.
  4. Give your snippet the name huratips-countdown-timer and click Create snippet.
  5. After creating a new snippet, paste the following code into it and Save snippet file.
  6. Click on the product-template.liquid file located within the Sections folder or the product.liquid file located within the Templates folder. Now, include snippet file to anywhere you want it display.
  7. Click Save and you’re done.

Notice:

  • You can change title param to any content you want.
  • With end_date params, you must enter it with the correct format: Month (shorten) Date, Year and MUST be in future. For example, today is December 30, 2019, you can enter: Dec 31, 2019.

Actually, you can put it everywhere in your theme. Just remember to follow the correct structure and notice.

You may also like...

4 Responses

  1. Ellie says:

    Hello! Thank you for the code, this has been really helpful for my website! Is there a way to countdown to a specific time of day? For example 6pm BST? Thanks

    • Guthrie says:

      Hi Ellie,

      Since this code uses the getTime() function, you have the ability to pass additional parameters into the function.

      The author uses date:
      end_date: “Dec 31, 2019”

      So if you wanted to end at a specific time on that date, you could modify it to look like this:
      end_date: “Dec 31, 2019 09:00:00” (aka, Dec 31, 2019 at 9AM).

      Additionally, if you want this to work correctly in all timezones, you can append a GMT offset
      end_date: “Dec 31, 2019 09:00:00 UTC-7” which would mean the timer ends at 9AM Mountain Standard Time.

      I know this answers a bit late, but hopefully it can help a person of the future.

      Best, and please let me know if any of the info I’ve provided is incorrect or assumes faulty logic – this approach seemed to work for me.

  2. Vidya says:

    Hi, The code display days constantly as 41 – can you please help me asap

  3. Sierra says:

    It’s there any way to set end date: to =today + 10 days?

Leave a Reply

Your email address will not be published. Required fields are marked *

Limited Offer : 50% OFF for 2 months all paid plans Start Free
icon
50% OFF 🎁