Skip to main content
⚠️ 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

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

  1. Go to Shopify Admin > Products
  2. Click the product you want to target
  3. 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

  1. Go to Upcart > Cart Editor > Settings > Custom HTML
  2. Paste the following code into both the Above announcements and Empty cart screen HTML sections
  3. Replace the values in productIDsToExclude with your product IDs
  4. Update .YOUR-CLASS-HERE to target the cart element you want to hide (for example: .upcart-rewards, .custom-message, .trust-badge)
<script>  
  upcartOnCartLoaded = (cart) => {  
    const items = cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.product_id === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const 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. See Shopify Experts