Hey guys, I made a bundle maker page where the user selects 4 items and it will add to their cart and apply 2 free items of the 4 (handled through the shopify built in discount). the issue is that removing the items from the cart bugs it and the last item can’t be deleted and the cart still considers the price of the 4 items until the user refreshes the page, which then 2- 3 items will be leftover in the cart.
This issue happened ever since I messed with the cart-summary, cart-products, and cart-preview CSS to try and make the cart page more visually appealing. In the console on the live page its giving me these errors. I tried for a day to fix it myself and I just can’t figure out what the issue is. Can somebody please help me? I’m really stuck on this
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
Based on the error (Section header not found), it looks like the cart is trying to re-render a section after an item is removed, but it can’t find the expected HTML structure.
Since you mentioned the issue started after modifying the CSS for cart-summary, cart-products, and cart-preview, I’d first check whether any corresponding HTML/Liquid markup was accidentally changed or hidden in a way that interferes with Shopify’s section rendering. CSS alone usually won’t cause this error unless it was accompanied by changes to the theme files.
Could you let us know:
Which Shopify theme you’re using?
Did you only change the CSS, or were any Liquid or JavaScript files edited as well?
Have you tested whether the issue still occurs after temporarily reverting your recent cart-related changes?
Those details should help narrow down the cause and make it easier to identify the fix.
Since this started after your cart edits, it’s likely a cart section markup issue rather than the bundle logic itself. The Section header not found error usually happens when a required section wrapper or data-section-id is missing. I’d compare your edited cart files with the original theme files and restore any missing markup.
This usually points to a theme or app conflict rather than an issue with Shopify itself.
A few things I’d check first:
Open your browser’s Developer Console and see if any JavaScript errors appear when you try to remove an item.
Try previewing an unmodified Shopify theme (like Dawn). If the cart works there, it’s likely something in your current theme or a third-party app causing the problem.
If you’ve recently installed apps that modify the cart (upsells, cart drawers, free shipping bars, bundle apps, etc.), temporarily disable them one at a time and test again.
If the remove button keeps spinning or the quantity doesn’t update, it’s often because a JavaScript error is preventing the cart AJAX request from completing. This is a fairly common symptom when custom cart code or an app conflicts with the theme.
If you can share your store URL (or let us know which theme you’re using), it’ll be much easier to narrow down the exact cause.
The Section header not found error usually means Shopify’s cart JavaScript is trying to update a section after the cart changes, but it can’t find the expected section container in the returned HTML.
Since the issue started after editing the cart, I’d compare your current cart-items, cart-drawer, or related Liquid files with the original theme version—not just the CSS. CSS changes alone normally won’t trigger this error unless a required element has been removed, renamed, or the section structure has changed.
A couple of questions that would help narrow it down:
Which Shopify theme are you using?
Did you edit only CSS, or were any Liquid or JavaScript files changed as well?
If you temporarily restore the original cart files, does the issue disappear?
If you can share your store URL (or a preview link) and the theme name, I’d be happy to help identify which section is causing the rendering error.
@SushiShark the others are right that this is a markup problem and not your bundle discount, but I think I can get you to the actual fix without needing your URL.
Those filenames in your stack trace (section-renderer.js, component-cart-items.js, component-quantity-selector.js) are from Shopify’s new component based theme architecture, so you are almost certainly on Horizon or a theme built on it. On those themes the cart does not fully reload when you change a quantity. It fetches the freshly rendered cart section and morphSection() swaps in only the parts that changed. Section header not found means that when it fetched the new markup, the root wrapper it keys off of was not there, so the morph throws before it updates anything. That is exactly why the line will not delete and the total stays wrong until a hard refresh, since a refresh re renders the whole page server side and hides the problem.
So the trigger is not the CSS itself. While you were styling cart-summary, cart-products and cart-preview you almost certainly changed the section or block markup too, and either the outer wrapper (the element carrying the section id, or a custom element like cart-items-component) got removed, renamed or wrapped inside another div, or a tag was left unclosed so the re rendered section nests wrong and that header element goes missing.
The cleanest fix is to restore the cart files you touched. In the code editor open them (on Horizon these are usually blocks like cart-products and cart-summary plus the cart section itself), open the three dot menu, choose older versions, and restore them to before your edits. The remove button should start working right away, which confirms the markup was the cause. Then re apply your visual changes as CSS only, in your CSS asset or a {% stylesheet %} block, targeting the existing classes, and leave the section root and the cart custom elements exactly where they are, since that structure is what the renderer depends on.
If you would rather not dig through the diff, duplicate the theme first, revert just those cart files on the copy and preview it. Quickest way to see which file broke it.
Side note, the WiseReviews version: 1.0.3 line is unrelated, that is just an app logging itself.
Hello @SushiShark
That Section header not found error means Shopify’s Section Rendering API is trying to dynamically update your cart contents after an item is removed, but it can’t find the outer wrapper element it needs to swap the HTML into.
When you modified the markup to change the styling, you likely accidentally deleted, renamed, or modified an id or a custom element tag on the main parent container in your cart Liquid files (most likely main-cart-items.liquid or main-cart-footer.liquid).
Dawn and similar OS 2.0 themes rely on JavaScript matching the exact container ID or custom element name between the live page and the incoming Ajax response. If you changed a tag like <cart-items id="main-cart-items"> to a regular <div> or changed its ID while restructuring your layout, the JavaScript breaks completely and leaves stale items behind until a hard refresh.
Open up your main-cart-items.liquid (or your specific cart section file) and look at the absolute outer elements. You need to ensure that:
The main parent element uses the exact tag and ID expected by your theme’s JS (usually <cart-items id="main-cart-items" data-id="{{ section.id }}">).
Your remove buttons (<a href="{{ item.url_to_remove }}">) are inside this tracked container.
The cart footer section wrapper hasn’t had its ID (id="main-cart-footer") stripped out.
If you can’t remember the original structure, the quickest way to fix it is to open a clean, unedited copy of your theme in a separate window, look at the container elements in main-cart-items.liquid, and add those specific tags, IDs, and data attributes back into your customized layout. As long as those structural hooks match up, the Ajax updates will start working again and your bundle items will delete properly without needing a refresh.