Overview
This customization allows you to hide specific parts of the cart, such as the rewards bar, if certain products are present. It is useful when you want to simplify the cart experience for certain SKUs or prevent specific promotions from appearing alongside certain items.
This setup uses product IDs to detect which products are in the cart and hides a chosen element if a match is found. You’ll apply the logic using custom HTML and CSS in the Upcart editor.
When to use this
Hide the rewards bar when promotional items are in the cart
Hide custom content blocks, trust badges, or upsell sections based on product type
Maintain a cleaner or more tailored checkout flow for specific items
This approach requires basic knowledge of HTML and JavaScript.
Step 1: Find the product IDs
Go to Shopify Admin > Products
Click the product you want to target
Copy the numeric product ID from the URL after
/products/
Example:
/products/1234567890 → 1234567890
You’ll use these IDs in the JavaScript array that controls visibility.
Step 2: Add custom HTML
Go to Upcart > Cart Editor > Settings > Custom HTML
Paste the following code into both the Above announcements and Empty cart screen HTML sections
Replace the values in
productIDsToExcludewith your product IDsUpdate
.YOUR-CLASS-HEREto target the cart element you want to hide (for example:.upcart-rewards,.custom-message,.trust-badge)
<script> upcartOnCartLoaded = (cart) => { var items = cart.items; var productIDsToExclude = [ 6958755512411, 6958755610712, 7736708759774 ]; var cartContainsExcludedItem = false; items.forEach(item => { productIDsToExclude.forEach(id => { if (item.product_id == id) { cartContainsExcludedItem = true; } }); }); var targetElement = document.querySelector(".YOUR-CLASS-HERE"); if (targetElement) { targetElement.style.display = cartContainsExcludedItem ? "none" : "block"; } } </script>Step 3: Optional fallback CSS
If you want to ensure the element is hidden before the cart fully loads, add this in the Custom CSS section:
.YOUR-CLASS-HERE { display: none; }Note: This may temporarily hide the element for all users until JavaScript runs, which can cause flicker. In most cases, it is better to rely on the JavaScript method.
Final result
Once set up:
The targeted cart element (such as the rewards bar) will be hidden if the cart contains one of the specified products
The element remains visible otherwise
You can reuse this logic to hide or show different elements based on product-specific rules
Still need help?
For more complex customizations, we recommend working with a Shopify Expert. They can assist with HTML, CSS, and JavaScript inside your cart drawer.