Switch off the button "Add to Cart" when finish a countdown

Shopify Discussion
,

Topic summary

Goal: disable the “Add to Cart” button automatically when a sale countdown ends, without password-protecting or pausing the store.

Proposed approaches:

  • jQuery (JavaScript library) hook on countdown completion to disable/hide the button.
  • CSS toggling via jQuery: set display none/block on the button based on timer state.
  • Custom JavaScript snippet using setInterval to check time; on expiry, select add-to-cart buttons, set disabled=true, and change text (e.g., “Sale Ended”).
  • Theme integration via Shopify Liquid (Shopify’s templating language): add a class to the add-to-cart button in product templates for JS targeting.

Support offered:

  • Request for store URL/password or a temporary unpublished theme preview (with a shared tutorial) to implement/debug safely before going live.

Status and constraints:

  • Store is not yet launched; app upgrade deferred to avoid charges. The requester is not comfortable with coding and plans to seek help before opening.

Notes:

  • A concrete JS code example was shared and is central to implementing the behavior.
  • No final implementation or resolution yet; action pending store access and/or developer assistance.
Summarized with AI on January 11. AI used: gpt-5.
1

Hello Shopifyers !!!

I’m using a countdown app to boost my sales but my sales are different.

Imagine that you want sale 2-month doing the countdown and when finish you don’t want the sale.

Well, when finishing the countdown I want to switch off the button “Add to Cart” without putting my shop

in stand by o access with a password.

Someone does?

There’s any way to do it?

Any app with these conditions?

Thanks for your time,

2

Hi @Miquidesitio
You can do this with the help of jquery.
When count down finish then hit jquery code to disable the add to cart button.

3

@Miquidesitio
Welcome to the Shopify community!
Thanks for your good question.

Add this on the timer condition

$(“#id”).css(“display”, “none”);
$(“#id”).css(“display”, “block”);

You can achieve this by the custom code. using the jquery if you are familiar to the code then you can do it.

if you are not familiar to the code then let me know we will help you.

4

Thanks @Zworthkey !!!

To add this code I have to update my account with the app but I don’t want open my store now,

I’ll do forward. For not paying three months without real use I’m waiting.

I’m not familiar with code. I’ll contact you before opening to modify it.

5

Hello @Miquidesitio ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

6

To implement the functionality you’re describing for a Shopify store, you’ll need to integrate some custom JavaScript and potentially update your theme’s Liquid code.

  1. JavaScript for Countdown Timer: You’ll need to create a JavaScript countdown timer that tracks the remaining time of your sale.

  2. Disabling the “Add to Cart” Button: When the countdown reaches zero, the script should automatically disable the “Add to Cart” button.

  3. Shopify Liquid Code: Depending on how your Shopify theme is set up, you may need to modify the Liquid templates to ensure that the JavaScript interacts correctly with your store’s theme.

JavaScript (Include in your theme’s assets)

document.addEventListener("DOMContentLoaded", function() {
    // Set the date we're counting down to
    var countDownDate = new Date("Jan 1, 2024 00:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // If the count down is over, disable the button
        if (distance < 0) {
            clearInterval(x);
            var addToCartButtons = document.querySelectorAll('.add-to-cart-button');
            addToCartButtons.forEach(function(button) {
                button.disabled = true;
                button.innerText = 'Sale Ended';
            });
        }
    }, 1000);
});

Shopify Liquid (Modify your product template)

Shopify Liquid (Modify your product template)1. Find your product template in your Shopify admin under Online Store > Themes > Actions > Edit code.

  1. Locate the section where the “Add to Cart” button is defined (usually in a file like product-template.liquid).
  2. Add a class to the “Add to Cart” button for easy JavaScript targeting.