How to build an SEO-friendly Black Friday countdown page in Shopify

In this post we’ll walk through how to set up a holding page that automatically updates to show deals once Black Friday arrives. This is a great solution for SEO as it means your page can be indexed and even remain live all year round. 

Black Friday is is obviously a hugely important date for many Shopify stores, but it can represent some unique SEO challenges. For example, with paid advertising the usual approach is to build a collection or landing page shortly before Black Friday arrives and then unpublish once the discounting period is over. This makes sense – these are limited time offers, so there’s no (obvious) need to show them any longer.

For SEO though there are other considerations. The main one is that it’s important to make sure your page is indexed and can be found well ahead of Black Friday, otherwise there’s no chance it will pick up any organic traffic. Other benefits include external links – using the same page year after year means you keep any backlinks built up over time – and even data capture. Here an evergreen page can used for pre-sales or email collection, with customers signing up to a mailing list to be notified when the discounts go live.

Our favourite way to do this is for a collection page to remain live throughout the year, but to change its content based on the proximity to Black Friday. In the run up to the day, a countdown timer is shown. Once Black Friday arrives, this is replaced by the deals themselves.

The following code allows you to enter two dates to signify the start and end of your sale and then show or hide content on the page depending on whether we are in between those dates.

• Put this up at the top of your liquid file:

{% assign start_of_sale = "2023-10-24" | date: '%s' %}
{% assign end_of_sale = "2023-10-29" | date: '%s' %}
{% assign today = "now" | date: '%s' %}

{% if  start_of_sale <= today and today <= end_of_sale %}
  {% assign show_presale_content = false %}
  {% assign show_sale_content = true %}
{% else %}
  {% assign show_presale_content = true %}
  {% assign show_sale_content = false %}
{% endif %}

• Then just wrap any content specific to either DURING the sale or BEFORE/AFTER, it wouldn’t be difficult to use this code so separate out BEFORE and AFTER into separate entities to allow three states.

{% if show_presale_content == true %}
SHOWING presale content
{% endif %}

{% if show_sale_content == true %}
SHOWING sale content
{% endif %}

• We’re using this for a Black Friday Sale, so additionally here’s some code to let you put a countdown timer to the day. Show this BEFORE the sale, and hide it DURING.

{% if show_presale_content == true %}

<div class="countdown-outer">
   
   <div id="countdown">
    <div class="time-unit" data-label="Days">
        <div class="digits">
            <span class="number">00</span>
        </div>
        <div class="label">Days</div>
    </div>
    <div class="time-unit" data-label="Hours">
        <div class="digits">
            <span class="number">00</span>
        </div>
        <div class="label">Hrs</div>
    </div>
    <div class="time-unit" data-label="Minutes">
        <div class="digits">
            <span class="number">00</span>
        </div>
        <div class="label">Mins</div>
    </div>
    <div class="time-unit" data-label="Seconds">
        <div class="digits">
            <span class="number">00</span>
        </div>
        <div class="label">Secs</div>
    </div>
</div>

</div>


<script>
const targetDate = new Date("2023-11-24 00:00:01");  // replace with your target date

function updateCountdown() {
    const now = new Date();
    const timeDifference = targetDate - now;
    
    const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

    displayNumber('Days', days);
    displayNumber('Hours', hours);
    displayNumber('Minutes', minutes);
    displayNumber('Seconds', seconds);
}

function displayNumber(label, value) {
    const unit = document.querySelector(`.time-unit[data-label="${label}"]`);
    const numberElement = unit.querySelector('.number');

    if (label !== 'Days' && value < 10) {
        numberElement.innerText = '0' + value;
    } else {
        numberElement.innerText = value.toString();
    }
}

setInterval(updateCountdown, 1000);

</script>

{% endif %}