​

Overview

​

When to use this

• To avoid visual clutter on your homepage
• When using a custom hero section or layout that overlaps with the sticky cart
• To keep the cart button focused on product pages or collections

​

Step 1: Add the script

1. Go to Upcart > Cart Editor > Settings > Custom HTML
2. From the HTML Location dropdown, select Scripts (Before Load)
3. Paste the following JavaScript:

<script>  
  var stickyCartButton = document.querySelector("#upCartStickyButton");  
  
  if (  
    stickyCartButton &&  
    (document.location.pathname === "/" + Shopify.locale ||  
     document.location.pathname === "/")  
  ) {  
    stickyCartButton.classList.add("hide-sticky-cart-button");  
  }  
</script>

​

Step 2: Add custom CSS

1. Go to Upcart > Sticky Cart > Custom CSS (note that this is Sticky Cart, not Cart Editor)
2. Paste the following CSS:

.hide-sticky-cart-button {     
  display: none;   
}

​

Final result

• The sticky cart button will be hidden when a customer visits the homepage (/ or /[locale])
• The button remains visible on all other pages