Skip to main content

Hide the Sticky Cart Button on the Homepage

Use JavaScript and CSS to hide the floating cart button on your store’s homepage.

Updated today

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

Note: This solution does not work reliably if the advanced setting Render cart in Shadow DOM is enabled.


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("hideStickyCartButton");   } </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 > Cart Editor > Settings > Custom CSS

  2. Paste the following CSS:

.hideStickyCartButton {   display: none !important; }

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

Did this answer your question?