Botão Pegajoso – Script Warehouse

Script

<div id="add-to-cart-container">
  <form action="/cart/add" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}">
    <button id="add-to-cart-button" type="submit">Compre Já</button>
  </form>
</div>
<style>
@media screen and (max-width: 640px) {
#add-to-cart-button {
background-color: #000; /* COR DO BOTÃO */
color: white; /* COR DO TEXTO */
}
#add-to-cart-container {position: sticky; bottom: 20px; z-index: 999; display: none;}
#add-to-cart-button {display: inline-block; width: 100%; padding: 16px 20px; font-size: 16px; border-radius: 30px; text-align: center; border: none; cursor: pointer; transition: background-color 0.3s ease;}
}
@media screen and (min-width: 641px) {
  #add-to-cart-button {
    display: none;
  }
}
</style>
<script>document.addEventListener('DOMContentLoaded',function(){var e=document.querySelector('#add-to-cart-container');window.addEventListener('scroll',function(){window.pageYOffset>100?e.style.display='block':e.style.display='none'})});</script>