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 over 3 weeks ago

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?