Forums/Shopify Assistant App

Adding a Countdown Timer

Shopify Concierge
posted this on November 17, 2011 21:32

This article will show you how to integrate a countdown timer that shows when a product is scheduled to be hidden.

The key part here is that the Shopify Assistant App will add the scheduled time as metadata to the product. We can use that in conjunction with the countdown timer.

Here are the steps:

  1. Install a countdown timer into your store. Here's an awesome one: http://keith-wood.name/countdown.html. Basically you will need to add
    {{ "jquery.countdown.css" | asset_url | stylesheet_tag }} and
    {{ "jquery.countdown.min.js" | asset_url | script_tag }} to your theme.liquid template <head> section
  2. In product.liquid (or index.liquid) figure out where you want to put the container for the timer and add an empty div: 
    <div id="countdown"></div>
  3. Add the following javascript to the bottom of product.liquid:
    <script type="text/javascript">
    $('#countdown').countdown({until:new Date({{ product.metafields.sva.hide }})});
    </script>
  4. Add some CSS to style it to match your theme. Here is what I used for a Solo theme install:
    #countdown {height: 45px; margin-bottom: 10px; padding: 4px; text-shadow: 0 1px 1px #FFFFFF; width: 100%; background-color: #F2F2F2;border: 1px solid #DEDBDB; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;}

Technically, the value stored in {{ product.metafields.sva.hide }} is when the product will be hidden expressed as the number of seconds since the Unix epoch. In other words, you can use it to easily create a JavaScript date object.