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

Miquidesitio
Tourist
9 0 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,

Thanks,
Miquidesitio
Replies 5 (5)

Dbuglabpvtltd
Shopify Partner
705 75 113

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.

banned

Zworthkey
Shopify Partner
5581 642 1565

@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.

 

Miquidesitio
Tourist
9 0 1

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.

Thanks,
Miquidesitio

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

aditya58singh
Shopify Partner
24 2 5

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)

 

<button type="submit" name="add" class="add-to-cart-button">
  Add to Cart
</button>

 

 

Shopify Liquid (Modify your product template)

  1. Find your product template in your Shopify admin under Online Store > Themes > Actions > Edit code.
  2. Locate the section where the "Add to Cart" button is defined (usually in a file like product-template.liquid).
  3. Add a class to the "Add to Cart" button for easy JavaScript targeting.

 

 

<button type="submit" name="add" class="add-to-cart-button">
  Add to Cart
</button>

 

 

 

- Helpful? Like and Accept a solution.
- Cart Drawer Upsell & Free Gift Boost conversions & AOV with upsell-cross sell, free gifts & add-ons with customizable cart drawer.

Sales Countdown Timer Bar create urgency with count down timer, navigation menu with images and lot more.