How to remove this button while scrolling?

[DaveyAlcatraz]

Hi everyone,

I am hoping someone can provide me with some insight, I would like to remove the add to cart button that appears while scrolling through the product page itself. I think even if everything were re-sized to fit it still looks ugly and tacky. URL to inspect here.

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
.button.fullwidth.is-primary{
   display: none !important;
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[BSSCommerce-HDL · Accepted solution]

Hi @DaveyAlcatraz,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

{% if template.name == 'product' %}
<script>
window.addEventListener("scroll", (event) => {
   if(window.scrollY > 600) {
   	let atc_active = document.querySelector('#add2cart-cta');
   	if(atc_active) {
	   atc_active.style.display = 'none';
   	}
   }
   else {
       let atc_active = document.querySelector('#add2cart-cta');
       atc_active.style.display = 'block';
   }
});
</script>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[PageFly-Richard]

Hi @DaveyAlcatraz 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
##add2cart-cta {
display: none !important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly