SHOPIFY- Load "Add to Cart" button only when the page if fully load

1
votes

I write to ask some help, basically, we need to load the "Add to Cart" button only when the product page is fully loaded.

I explain why we need that: we are having problems with the promotion App "Free Gifts by Secomapp", the app loads when the page is fully load, but the cart Button load first. This means that our clients has a fraction of second where they can add to the cart a product without the App showing the promotion Pop-Up.

please check out this link [https://www.eloisebeauty.com/products/get-glowed-illuminating-drops?variant=41106570505][1]

So the options are two:

  1. Load first the App and after the Button  
  2. Load the cart button at the end. after the App

here a video recorded on my screen so you can see the issue

https://drive.google.com/file/d/18v3vH17YXnEY60R5vImajh2gNKWW18YB/view?usp=sharing

Any Help is welcome, thanks in advance!

1
shopify
This is what you need to do. Hide the "add to cart" button using css and display it when your promotion app loads. Next, open cart only when the promotion app closes. This require quite a good amount of coding. Better get help from Shopify forums. – HymnZzy

1 Answers

1
votes

RUN FOLLOWING CODE SNIPPET

enter image description here 

// Shows button after 5 seconds of page load
$(document).ready(function () {
	  
    setTimeout(function(){
        $("#product-add-to-cart").show();
    }, 5000);

});
#product-add-to-cart{ display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="add" class="btn disabled" id="product-add-to-cart" value="Unavailable" disabled="disabled" type="submit">