Skip to main content

​
Overview

If you want a cleaner first impression or your homepage layout conflicts with the sticky cart button, you can hide the button specifically on the homepage using a simple code snippet. This setup checks the customer’s current page and removes the sticky cart button if they are on the homepage.

​
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>
This script checks the current page’s path and applies a class to hide the sticky button if the customer is on the homepage.

​
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