How to Create an Advent Calendar or Countdown Deals for Your Online Store

Countdowns like advent calendars are a fun and engaging way to build excitement, especially during the holidays. Recently, I created a “12 Days of Deals” countdown, allowing customers to discover daily deals leading up to Christmas. Here’s how I did it, along with step-by-step instructions for implementing it on WordPress, Shopify, and BigCommerce.

Building the Countdown Deals

First, I created images for each of the deals that contain all of the information for each deal. Then I used HTML and JavaScript to create an interactive page where new deals became visible each day. This method ensures customers only see the active and past deals, and encourages them to check back daily.

Here’s the code I used:

HTML (Customize for Your Products)

<div id="product-cards">
  <h3 style="text-align: center;">
    Check back daily for new deals! Each deal is valid for one day only.
  </h3>
 <div class="product-card" data-day="3">
    <h4><strong>Day 3: 12/15/2024</strong></h4>
    <a href="https://example.com/product-url-for-day3" target="_blank">
      <img src="https://example.com/image-day3.jpg" alt="Day 3 Deal" width="600" height="250" />
    </a>
  </div>
  <div class="product-card" data-day="2">
    <h4><strong>Day 2: 12/14/2024</strong></h4>
    <a href="https://example.com/product-url-for-day2" target="_blank">
      <img src="https://example.com/image-day2.jpg" alt="Day 2 Deal" width="600" height="250" />
    </a>
  </div>
  <div class="product-card" data-day="1">
    <h4><strong>Day 1: 12/13/2024</strong></h4>
    <a href="https://example.com/product-url-for-day1" target="_blank">
      <img src="https://example.com/image-day1.jpg" alt="Day 1 Deal" width="600" height="250" />
    </a>
  </div>
  <!-- Repeat for all days -->
</div>

I’ve listed the deals in reverse order so the current day’s deal always appears at the top. As the days progress, you can update the image URLs for past deals to display an “expired” graphic or simply remove them from the HTML to hide them altogether. The HTML code above is structured to display each deal stacked above the previous day. However, you’re welcome to format the deals differently, such as using a table or another layout style. Just make sure to retain the class IDs and data-day attributes so they align with the JavaScript functionality.

JavaScript

<script>
    document.addEventListener('DOMContentLoaded', function () {
    // Check if the current URL includes "/YOUR-URL/"
    if (window.location.pathname === '/YOUR-URL/') {
        // Set the start date
        const startDate = new Date('2024-12-13'); // Adjust this date
        const today = new Date();

        // Calculate the total days passed since the start date
        const daysPassed = Math.ceil((today - startDate) / (1000 * 60 * 60 * 24));

        // Loop through product cards and display based on data-day attribute
        document.querySelectorAll('.product-card').forEach(card => {
            const cardDay = parseInt(card.getAttribute('data-day'), 10);
            if (cardDay <= daysPassed) {
                card.style.display = 'block'; // Show the card
            } else {
                card.style.display = 'none'; // Hide the card
            }
        });
    }
});
</script>

Make sure to replace “/YOUR-URL/” with the URL of the deals page you created containing the HTML. You’ll also want to update the date in the JavaScript to match the start of your sale. I recommend testing the setup by temporarily adjusting the dates in the code to simulate different days of the sale. This way, you can preview how your page will appear on each day before launching it.

Implementing the Countdown Deals on Your Platform

1. WordPress

Set Up a Custom Page:
- Create a new page in WordPress.
- Switch to the “HTML” or “Text” editor mode (not “Visual”) in the page editor.
- Paste the HTML code into the editor.
Add JavaScript:
- Use a plugin like Insert Headers and Footers to include the JavaScript. Paste the script into the footer section.
Style the Page:
- Use the WordPress Customizer or a plugin like Elementor to style the page to match your branding.
Publish the Page:
- Set the page to go live and test the visibility of each deal.

2. Shopify

Create a Custom Page:
- In your Shopify admin, go to Online Store > Pages and create a new page.
- Switch to the “HTML” editor and paste the HTML code.
Add JavaScript:
- Navigate to Online Store > Themes > Edit Code.
- In the theme.liquid file or a specific page template, paste the JavaScript code inside the <head> or <body> tag.
Style the Deals Section:
- Use Shopify’s theme settings or custom CSS in your theme files to style the page.
Publish and Test:
- Save your changes and preview the page to ensure the countdown works as expected.

3. BigCommerce

Create a Custom Page:
- Go to Storefront > Web Pages in your BigCommerce admin.
- Create a new page and switch to the “HTML” editor.
- Paste the HTML code.
Add JavaScript:
- In your BigCommerce dashboard, navigate to Storefront > Script Manager.
- Add a new script, set it to “Footer” and “All Pages,” and paste the JavaScript code.
Style the Page:
- Use your BigCommerce theme settings or custom CSS to adjust the page design.
Test the Page:
- Preview the page to confirm that deals appear on the correct days.

Tips for Success

Placeholder Content: Use generic placeholders for product titles, images, and links during setup. Replace them with real content before launch.
Mobile Optimization: Ensure your layout is mobile-friendly, as many customers will view the deals on their phones.
Promote the Countdown: Share the countdown on your social media channels and in email campaigns to drive traffic.

This approach works across various platforms, and customizing it for your store can create an engaging experience for your customers. I hope these steps help you create your own advent calendar or countdown deals!

December 1, 2024 Bryan Carvalho