A developer working on a Shopify store using the Refresh theme needed custom cart logic to display either a fixed pickup date or date chooser based on cart contents. The custom code in main-cart-items.liquid worked when adding items but failed to refresh when line items were deleted.
Root Cause:
The custom <div class="food-cart-attribute-collection"> was positioned outside the nested structure of <div id="main-cart-items"> and <div class="js-contents">. The theme’s getSectionsToRender() function in cart.js only re-renders content within these specific selectors during cart updates.
Solution:
Moving the custom DIV inside the nested #main-cart-items > .js-contents structure resolved the issue. The custom code now properly re-renders on all cart changes, including line item deletions.
Key Technical Detail:
The Refresh theme uses selectors to determine which HTML sections to replace during cart updates. Custom code must be placed within the existing selector structure to be included in automatic re-rendering.
Status: Resolved with community assistance.
Summarized with AI on October 30.
AI used: claude-sonnet-4-5-20250929.
I am pro bono helping a good cause sell food online. Products are either (a) “Specials” available on one date or (b) “Normal products” which can be collected on a range of dates. Depending on the exact mix of product line items in the cart the UI in my new custom cart section must either show a fixed date or date chooser information (2 possible states).
My new cart section logic is coded in main-cart-items.liquid, the pickup date being a cart attribute. This works out of the box when items are added to the cart but the theme does not rerun my new custom liquid logic based on the new cart contants when line items are deleted.
How do I ensure my new custom part of the cart page is refreshed on a line item deletion ? A window.location.reload() in class.js CartRemoveButton doesnt work. How do I get my new DIV to be rerendered ? Any guidance or further reading on how the Refresh Theme cart changes work would be much appreciated. Thank you.
Is it a cart page or cart drawer – they use different sections and JS?
Generally, theme JS on each cart change requests a number of sections to be included with cart JSON and updates page contents with whatever was returned.
If you’ve added new section, it most likely is not a part of this update.
You may include it though as part of function getSectionsToRender() (which is different for different cart representations).
Tim’s suggestion was correct and he very kindly sent me a more detailed explanation which I describe below to help others understand how the cart update works in my version of the REFRESH theme.
When the cart is updated the function getSectionsToRender() in cart.js creates selectors for a list of objects to (re)render. The first of these has id: ‘main-cart-items’ and selector '.js-contents.
It basically finds the element with id main-cart-items then finds its element defined by selector .js-content and replaces its content with relevant content received as part of the cart update. In the cart HTML, these selectors corresponded to a “DIV” with id=“main-cart-items” and a “DIV” within it ‘
.’
In my case my problem was because my code was all located in a DIV named <div “class=food-cart-attribute-collection”> which was OUTSIDE these two DIVs. So it was not picked up by the selector and not re-rendered. This is the inspected HTML of the cart page in that situation:
As suggested I simply moved my “DIV” with its code to inside these two “DIVs” and it all works correctly and updates on line item removal now. You can see this new location of my “DIV” in the inspection output below:
Of course its important to not mess up the existing structure and remember that .js-content must be inside #main-cart-items element with your code within that. I hope this helps someone, again very many thanks to Tim !!!
In my case my code was in a custom “DIV” with class"=food-cart-attribute-collection" and you can see from the inspector this was outside the nested id=“main-cart-items” and class=“js-contents” “DIVs” that match that selector. So my code was not rendered on, for example, cart line deletion.
So all I had to do was to move my “DIV” with all its code inside to within those nested “DIVs” and my code was rendered and now works. You can see the new location here :
