"Remove" button is on the cart page but not on the cart drawer

Topic summary

A user is experiencing an issue where the “Remove” button appears on the main cart page but is missing from the cart drawer (slide-out cart). Screenshots show the button is present in main-cart.liquid but absent in the drawer view.

Technical Details:

  • The cart drawer uses cart-reward.liquid for rendering items
  • Products are injected into the drawer via JavaScript
  • Code snippets were provided showing the cart page implementation

Attempted Solution:
The user tried implementing a delete function, but it redirects to the cart page without actually removing the product.

Expert Response:
A developer noted this requires custom JavaScript work since the cart drawer products are dynamically injected, making it not a straightforward fix. The solution would need a developer to modify the JavaScript handling the cart drawer functionality.

Status: Unresolved - requires custom development work to add proper remove functionality to the cart drawer.

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

Hello,

I have a problem with deleting a product with “Remove” button. It is not appearing on cart drawer. I provided screenshots an codes.

this is main-cart.liquid

<div class="page-width page-content">

  {%- render 'breadcrumbs' -%}

  <header class="section-header text-center{% if cart.item_count == 0 %} section-header--404{% endif %}">
    <h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
    <div class="rte text-spacing">
      {%- if cart.item_count == 0 -%}
        <p>{{ 'cart.general.empty' | t }}</p>
      {%- endif -%}
      <p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
    </div>
  </header>

  {%- if cart.item_count > 0 -%}
    <form action="{{ routes.cart_url }}" method="post" novalidate data-location="page" id="CartPageForm">
      <div class="cart__page">
        <div data-products class="cart__page-col">
          {% for item in cart.items %}
            {%- render 'cart-item', product: item -%}
          {%- endfor -%}
        </div>
        <div class="cart__page-col">
          {% if settings.cart_notes_enable %}
            <div>
              <label for="CartNote">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart-notes" id="CartNote">{{ cart.note }}</textarea>
            </div>
          {% endif %}

          <div data-discounts>
            {% if cart.cart_level_discount_applications != blank %}
              <div class="cart__discounts cart__item-sub cart__item-row">
                <div>{{ 'cart.general.discounts' | t }}</div>
                <div class="text-right">
                  {% for cart_discount in cart.cart_level_discount_applications %}
                    <div class="cart__discount">
                      {{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>

          <div class="cart__item-sub cart__item-row">
            <div>{{ 'cart.general.subtotal' | t }}</div>
            <div data-subtotal>{{ cart.total_price | money }}</div>
          </div>

          {% if settings.cart_terms_conditions_enable %}
            <div class="cart__item-row cart__terms">
              <input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
              <label for="CartTerms">
                {% if settings.cart_terms_conditions_page != blank %}
                  {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
                {% else %}
                  {{ 'cart.general.terms' | t }}
                {% endif %}
              </label>
            </div>
          {% endif %}

          <div class="cart__item-row cart__checkout-wrapper">
            <button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
              {{ 'cart.general.checkout' | t }}
            </button>

            {% if additional_checkout_buttons and settings.cart_additional_buttons %}
              <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>

          <div class="cart__item-row text-center">
            <small>
              {{ 'cart.general.shipping_at_checkout' | t }}<br />
            </small>
          </div>
        </div>
      </div>
    </form>
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.main-cart.name"
}
{% endschema %}

this is cart-drawer.liquid

{%- if settings.cart_type == 'drawer' -%}
  
  
    
  

{%- endif -%}

this is cart-items.liquid


  {%- assign img_url = product | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  

    
      
      
    
  

  
    

    

      
        {{ product.product.title }}
      
          {% comment %}}   {% endcomment %}}
    

      

      {%- unless product.product.has_only_default_variant -%}
        
          {%- for option in product.options_with_values -%}
            
{{ option.name }}: {{ option.value }}

          {%- endfor -%}
        

      {%- endunless -%}
      {%- if product.selling_plan_allocation != empty -%}
        
          {{ product.selling_plan_allocation.selling_plan.name }}
        

      {%- endif -%}
      {%- assign property_size = product.properties | size -%}
      {% if property_size > 0 %}
        {% for p in product.properties %}
          {%- assign first_character_in_key = p.first | truncate: 1, '' -%}
          {% unless p.last == blank or first_character_in_key == '_' %}
            
              {{ p.first }}:
              {% if p.last contains '/uploads/' %}
                {{ p.last | split: '/' | last }}
              {% else %}
                {{ p.last }}
              {% endif %}
            

          {% endunless %}
        {% endfor %}
      {% endif %}
     
    

    
      

        

          
          
          
          
           
        

        
          
            {{ 'cart.general.remove' | t }}
        

      

       

      

        {% if product.original_price != product.final_price %}
          {{ 'products.general.regular_price' | t }}
          <small>
            {{ product.original_price | money }}
          </small>
          {{ 'products.general.sale_price' | t }}
          
            {{ product.final_price | money }}
          
        {% else %}
          
            {{ product.original_price | money }}
          
        {% endif %}

        {%- if product.line_level_discount_allocations != blank -%}
          {%- for discount_allocation in product.line_level_discount_allocations -%}
            <small>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
          {%- endfor -%}
        {%- endif -%}

        {%- if product.unit_price_measurement -%}
          {%- capture unit_price_base_unit -%}
            
              {%- if product.unit_price_measurement -%}
                {%- if product.unit_price_measurement.reference_value != 1 -%}
                  {{ product.unit_price_measurement.reference_value }}
                {%- endif -%}
                {{ product.unit_price_measurement.reference_unit }}
              {%- endif -%}
            
          {%- endcapture -%}

          
{{ product.unit_price | money }}/{{ unit_price_base_unit }}

        {%- endif -%}

    
      

    

  

And this code make remove button on cart page.


          
            {{ 'cart.general.remove' | t }}
        

Hi BELU1,

I looked at the code you attached and from what I understand there is no straightforward fix for this. The products gets added to the card drawer with JavaScript and therefore would require a developer to make this change for you.

cart-drawer.liquid


The products gets injected inside this div.

Good point. I did that it deletes but sends me to cart page, but without deleted product.