506 Shopify Apps. App Development. eCommerce

With GetSale, it is possible to display a countdown timer on the product page for any product that is part of a discount that has an end date. The timer simply counts down the number of days, hours, minutes and even seconds left until the discount becomes disabled; this is a great way to drive urgency and increase your sales volume.

If you are using an Online Store 2.0 compatible theme, you can simply enable the timer on the timer page of GetSale and add the timer block to the product page of your theme with relative ease. However, legacy themes or highly customised themes require some extra manual effort to get things up and running - we used to be able to this automatically too, but Shopify have since dropped support for this functionality.

Creating the timer snippet

Go to Online Store, click the ‘…’ next to ‘Customise’ on your current theme and click ‘Edit Code’.
In the left hand menu, expand the ‘Snippets’ folder and create a new snippet. You can name this what you like, but to easily follow along with the next section call it ‘getsale-timer’.
Copy and paste the following code into the file and click save in the top right.


{% if request.page_type == 'product' %}
    {% assign settings = shop.metafields.dla_dm.timer.value %}
    {% assign discounts = settings.discounts %}

    {% assign tag_start = settings.tag_start %}
    {% assign tag_delimiter = "-" %}
    {% assign discounts_stop = "" %}

    {% for tag in product.tags %}
      {% assign tag_short = tag | remove_first: tag_start %}

      {% if tag != tag_short %}
        {% assign tag_parts = tag_short | split: tag_delimiter %}
        {% assign variant_id = tag_parts[0] %}
        {% assign variant_discount_id = tag_parts[1] %}

        {% for discount in discounts %}
          {% assign discount_id = discount[0] %}
          {% assign date_stop = discount[1] %}

          {% if variant_discount_id == discount_id %}
            {% if discounts_stop == "" %}
              {%- capture discounts_stop -%}
                "{{ variant_id }}": "{{ date_stop }}"
              {%- endcapture -%}
            {% else %}
              {%- capture discounts_stop -%}
                {{ discounts_stop }}, "{{ variant_id }}": "{{ date_stop }}"
              {%- endcapture -%}
            {% endif %}
          {% endif %}
        {% endfor %}
      {% endif %}
    {% endfor %}

    <script type="text/javascript">
      {% if settings.timer.type %}
        {% assign timer_type = settings.timer.type | json %}
      {% else %}
        {%- capture timer_type -%}
          "counting"
        {%- endcapture -%}
      {% endif %}

      {% if settings.timer.format %}
        {% assign timer_format = settings.timer.format | json %}
      {% else %}
        {%- capture timer_format -%}
          "{D} d. {h} h. {m} min. {ss} sec."
        {%- endcapture -%}
      {% endif %}

      {% if settings.timer.translations %}
        {% assign timer_translations = settings.timer.translations | json %}
      {% else %}
        {%- capture timer_translations -%}
          {"month.1.full":"January","month.1.short":"Jan",
          "month.2.full":"February","month.2.short":"Feb",
          "month.3.full":"March","month.3.short":"Mar",
          "month.4.full":"April","month.4.short":"Apr",
          "month.5.full":"May","month.5.short":"May",
          "month.6.full":"June","month.6.short":"Jun",
          "month.7.full":"July","month.7.short":"Jul",
          "month.8.full":"August","month.8.short":"Aug",
          "month.9.full":"September","month.9.short":"Sep",
          "month.10.full":"October","month.10.short":"Oct",
          "month.11.full":"November","month.11.short":"Nov",
          "month.12.full":"December","month.12.short":"Dec"}
        {%- endcapture -%}
      {% endif %}

      window.DLA = window.DLA || {};
      window.DLA.dla_dm = window.DLA.dla_dm || {};
      window.DLA.dla_dm.timer = window.DLA.dla_dm.timer || {};
      window.DLA.dla_dm.timer.discounts_stop = {{ discounts_stop }};
      window.DLA.dla_dm.timer.type = {{ timer_type }};
      window.DLA.dla_dm.timer.format = {{ timer_format }};
      window.DLA.dla_dm.timer.translations = {{ timer_translations }};
      window.DLA.dla_dm.timer.element_class = "dla_dm_timer";
      window.DLA.dla_dm.timer.visible_class = "dla_dm_timer_visible";
      window.DLA.dla_dm.timer.design_mode = false;
      window.DLA.dla_dm.timer.selector = ".product-single__prices";
    </script>

    <style type="text/css">
      .dla_dm_timer {
        display: none;
      }
      .dla_dm_timer p {
        margin: 0;
      }
      .dla_dm_timer.dla_dm_timer_visible {
        display: block;

        {% if settings.timer.padding %}
          {% assign padding = settings.timer.padding %}
          margin: {{ padding.top }}{{ padding.units }}
          {{ padding.right }}{{ padding.units }}
          {{ padding.bottom }}{{ padding.units }}
          {{ padding.left }}{{ padding.units }};
        {% endif %}
      }
    </style>
    <div class="dla_dm_timer">
      {% if settings.timer.template %}
        {{ settings.timer.template }}
      {% else %}
        <p>⏳ Sale ends in <strong>{timer}</strong></p>
      {% endif %}
    </div>
{% endif %}

Rendering the timer snippet

First we need to find where to try and render the timer. You can do this by inspecting a product page from your store in your browser.

Now comes one of the trickier parts. We know where we want to put the timer, and we know what the code looks like BUT we do not know which file is is part of in your theme. The two most common file names are main-product.liquid and product-meta.liquid, but this is not always the case. If you are having trouble at this point, we suggest reaching out via our in app live chat and we can access your code with a collaborator request.
If you have successfully found where to place the timer, simply type {% render ‘getsale-timer’ %} in the position you have found.

TIP: Make sure that the timer is outside of any conditional logic; if statements, unless conditions or other such pieces of logic can cause problems.

Checking how it looks & troubleshooting

If you’ve made it this far, congratulations! 95% of the time things will be working perfectly and a quick refresh of the product page should let you see the timer in action.

If you happen to be a part of the unlucky 5%, the most likely reasons for your timer not displaying even after following all of the above steps are:

The discount that you created in GetSale does not have an end date set. The end date is required for the timer to display.
The timer is being rendered in the wrong place. It can be tricky to find exactly where in your theme you need to render the timer as many files can contain similar code. The best way to check if the timer is placed in the right part of the code is to inspect the product page in your browser and search for ‘dla_dm_timer’. If it does not show up here, it is being rendered the wrong place.
There are several more technical reasons why the timer may not be showing on the page; it could be inheriting a css class that makes it not visible, or the script is not loading due to some restrictions in your theme. Whatever the case, we are here to help! You can reach out to us via the in app live chat and we will get back to you ASAP to provide you with the best support we can.

Manually Inserting the Countdown Timer

Creating the timer snippet

Rendering the timer snippet

Checking how it looks & troubleshooting

Categories

Got questions? We have answers.

Links