Shopify Cart Not Removing Items: 'Section Header Not Found' Fix

Hey store owners! Ever found yourself scratching your head, wondering why your Shopify cart isn't playing nice? Specifically, that frustrating moment when customers try to remove an item, but it just… doesn't go away, or the total stays stubbornly wrong until a full page refresh? We recently saw a fantastic discussion in the Shopify community about exactly this, and it’s a classic case of a seemingly small customization leading to a big headache. Let's dive into what's happening and how to fix it, drawing insights straight from the experts who chimed in.

The Mystery of the Stubborn Cart: 'Section Header Not Found'

The problem often surfaces after you’ve been tinkering with your cart’s appearance. Our community member, SushiShark, ran into this after styling their cart-summary, cart-products, and cart-preview sections. What they saw in the console was a telling error message:

section-renderer.js:171 Uncaught (in promise) Error: Section header not found
    at morphSection (section-renderer.js:171:11)
    at component-cart-items.js:167:9
(anonymous) @ section-renderer.js:171
(anonymous) @ component-cart-items.js:167
Promise.then
updateQuantity @ component-cart-items.js:140
onLineItemRemove @ component-cart-items.js:74
#onQuantityChange @ component-cart-items.js:53
(anonymous) @ utilities.js:179
setTimeout
(anonymous) @ utilities.js:179
#onQuantityChange @ component-quantity-selector.js:71
decreaseQuantity @ component-quantity-selector.js:34
(anonymous) @ component.js:255
4extension.js:2 WiseReviews version: 1.0.3
section-renderer.js:171 Uncaught (in promise) Error: Section header not found
    at morphSection (section-renderer.js:171:11)
    at component-cart-items.js:167:9

This error, as HamidEjaz and others pointed out, isn't about your bundle discounts or fancy app logic (that WiseReviews line is just an app logging itself, totally unrelated!). It's a deeper structural issue.

Understanding Shopify's Modern Cart Architecture

Many modern Shopify themes, especially those built on the new component-based architecture like Horizon, don't just reload the entire cart page every time you change a quantity or remove an item. Instead, they’re super efficient! They fetch only the updated cart section and use a JavaScript function called morphSection() to intelligently swap in just the parts that have changed. This makes your cart feel snappier and more responsive.

The catch? This slick process relies on specific HTML elements and their IDs being exactly where the JavaScript expects them. The Section header not found error means that when Shopify’s renderer tried to update the cart, it couldn't find a crucial root wrapper element — the one carrying the section ID, or a custom element like cart-items-component. It's like trying to put a new puzzle piece into a spot that's suddenly vanished or changed shape.

Why Your Styling Might Be the Culprit

The community consensus was clear: while you might think you only tweaked CSS, it's highly probable that your styling efforts inadvertently led to changes in the underlying Liquid markup. As markjohn1 and WebsiteDeveloper highlighted, CSS changes alone usually won't break this unless a required element was removed, renamed, or nested incorrectly. It's easy to accidentally delete a div, wrap an essential element in another tag, or leave a tag unclosed when you're deep in theme code.

When that core structure is altered, the morphSection() function throws an error because its target is gone, preventing the cart from updating. That’s why the item doesn't delete, the total stays wrong, and you need a hard refresh to see any changes — because a full refresh re-renders the whole page from scratch, temporarily masking the underlying issue.

Your Action Plan: Fixing the Cart Removal Bug

Don't worry, this isn't a permanent problem! Here’s a step-by-step guide, distilled from the community’s best advice, to get your cart working smoothly again:

1. Identify the Scope of Your Changes

Recall your edits: Think back to which files you touched. SushiShark mentioned cart-summary, cart-products, and cart-preview. On Horizon-based themes, these are often blocks like cart-products and cart-summary, plus the main cart section itself.
Check for more than CSS: Did you only edit CSS, or did you also dive into Liquid or JavaScript files? Be honest with yourself, it happens!

2. Back Up Your Theme (Crucial First Step!)

Before making any changes, always duplicate your live theme. Go to your Shopify admin > Online Store > Themes. Find your current theme, click 'Actions' > 'Duplicate'. This gives you a safe copy to work on and revert to if needed.

3. Revert the Modified Cart Files

This is the cleanest and most direct fix, as suggested by HamidEjaz. The goal is to restore the original, functional markup.

Go to your Shopify admin > Online Store > Themes.
On your duplicated theme (or your live theme if you're brave and have a recent backup!), click 'Actions' > 'Edit code'.
Open the files you suspect you modified (e.g., sections/main-cart-footer.liquid, blocks/cart-products.liquid, blocks/cart-summary.liquid, or similar files related to your cart).
For each file, click the '...' (three dots) menu next to the filename.
Choose 'Older versions'.
Browse through the versions and restore the file to a state before your cart styling edits. Preview your duplicated theme after each revert to see if the cart removal button starts working. This helps you pinpoint the exact file that broke it.

4. Re-apply Your Visual Changes (CSS Only!)

Once the cart is functioning correctly again after reverting, you can re-apply your visual changes, but this time, be super careful:

CSS only: Apply your styling purely through CSS. Target existing classes and IDs within the original markup.
Where to put it: Add your custom CSS to your theme's main CSS asset file (often something like assets/base.css or assets/theme.css) or within a {% stylesheet %} block in the relevant Liquid file.
Leave the structure alone: Crucially, do not remove, rename, or re-nest the core section root elements or custom cart components (like cart-items-component, data-section-id attributes). These are the anchors Shopify's renderer depends on.

5. Additional Troubleshooting Steps (If Needed)

If reverting files doesn't immediately solve it, consider these points from webiots:

Test with an unmodified theme: Temporarily preview an unmodified Shopify theme like Dawn. If the cart works perfectly there, it strongly confirms the issue is in your current theme's customizations.
Disable apps: If you've recently installed any apps that modify the cart (upsells, cart drawers, bundle apps, etc.), temporarily disable them one at a time and test again. App conflicts can sometimes mimic these issues.

Ultimately, the community discussion highlighted a common pitfall in theme customization: the delicate balance between visual tweaks and core functionality. By understanding how Shopify's modern cart works and being mindful of the underlying Liquid structure, you can prevent these 'Section header not found' headaches and keep your customers happily checking out!

Cart Chaos? Fixing the 'Section Header Not Found' Error When Removing Items