⚠️ Important notice
This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide.
If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2.
We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.
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
Go to Upcart > Cart Editor > Settings > Custom HTML
From the HTML Location dropdown, select Scripts (Before Load)
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
Go to Upcart > Cart Editor > Settings > Custom CSS
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