Refresh issue while removing the product from cart page

Store Design
, ,

Topic summary

A user is experiencing an unwanted page refresh when removing products from the cart page and wants to change this behavior.

Current Issue:

  • The remove button in cart.liquid triggers a full page reload
  • Code shows a standard href link to line_item.url_to_remove

Proposed Solution:

  • Replace the href link with a button element
  • Use AJAX with Shopify’s Cart API to update the cart
  • Set line item quantity to zero via JavaScript
  • Refresh only the cart content dynamically without reloading the entire page

Implementation Notes:

  • Requires knowledge of JavaScript and Shopify Liquid
  • Involves a multi-step process that may be somewhat complex

Status: The discussion remains open with initial guidance provided but no complete implementation shared yet.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I want to change the functionality of remove button in cart page.
when i am deleting the product it should not refresh the page. right now its refreshing the page.

this is the code from cart.liquid file

{%- for line_item in cart.items -%} {%- assign line_max_quantity = '' -%}

{%- if line_item.variant.inventory_management != blank and line_item.variant.inventory_policy == ‘deny’ -%}
{%- assign line_max_quantity = line_item.variant.inventory_quantity -%}
{%- endif -%}

{%- render 'line-item', line_item: line_item -%} {{ 'cart.order.remove' | t }} {{ line_item.final_line_price | money }} {%- endfor -%}
2

Hi @Prince1995
It will require some knowledge of JS and shopify liquid to do it
instead of using href with cart remove link, you can put simple button and use cart change.js and put this line quantity to zero and after that refresh the cart content using ajax, so it is somewhat long process, this is just an idea how you can do it
Thanks!