You're looking at the documentation for Liquid Ajax Cart v1. Go to Liquid Ajax Cart v2

Ajaxified sections

Liquid Ajax Cart reloads HTML code of the HTML containers that marked with the data-ajax-cart-section attribute every time when the Shopify cart is changed.

It uses Bundled section rendering under the hood to ask Shopify to provide re-rendered HTML code for theme sections with each Cart API request response. Due to this, the data-ajax-cart-section must be applied only within sections.

After Liquid Ajax Cart received a response of a Shopify Cart API request with the re-rendered sections’ HTML, it replaces HTML of the data-ajax-cart-section containers within the section with the new ones.

Immutable elements

If you want to have an immutable HTML element within a data-ajax-cart-section container — add the data-ajax-cart-static-element attribute to this element. HTML of the immutable element will not be replaced when its section gets updated.

Scrollable area

If you have a scrollable area within a data-ajax-cart-section container, the scroll position will be reset to top every time when the cart is changed because the section’s HTML will be completely replaced with a new one. To keep the scroll position the same add the data-ajax-cart-section-scroll attribute to the scrollable area.

JavaScript callback

If you want to run your JavaScript code after the HTML code of the data-ajax-cart-section sections are reloaded — use the subscribeToCartSectionsUpdate function.


Since the cart sections are plain Shopify liquid theme sections, you are free to use any Liquid tags, objects and filters.

<!-- sections/my-cart.liquid -->

<form action="{{ routes.cart_url }}" method="post" class="my-cart">
  <!-- data-ajax-cart-section makes the element's HTML update
  when the cart gets changed -->
  <div data-ajax-cart-section>
    <!-- data-ajax-cart-section-scroll keeps the scroll position unchanged
    when the element's HTML is changed -->
    <div class="my-cart__items" data-ajax-cart-section-scroll>
      {% for item in cart.items %}
        {% assign item_index = forloop.index %}
        <hr />  
        <div><a href="{{ item.url }}">{{ item.title }}</a></div>

        {% for property in %}
            {{ property.first }}:
            {% if property.first == 'Engraving' %}
              <!-- data-ajax-cart-property-input ajaxifies the line item property input -->
              <input type="text"
                value="{{ property.last }}" 
                data-ajax-cart-property-input="{{ item_index }}[{{ property.first }}]"/>
              {% else %}
                {{ property.last }}
              {% endif %}
        {% endfor %}

        <div>Price: {{ item.final_price | money }}</div>

          <!-- data-ajax-cart-request-button ajaxifies the "Minus one" button -->
          <a data-ajax-cart-request-button
            href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" > 
            Minus one 

          <!-- data-ajax-cart-quantity-input ajaxifies the line item quantity input -->
          <input data-ajax-cart-quantity-input="{{ item_index }}"
            value="{{ item.quantity }}" 
            type="number" />

          <!-- data-ajax-cart-request-button ajaxifies the "Plus one" button -->
          <a data-ajax-cart-request-button 
            href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | plus: 1 }}"> 
            Plus one 

        <!-- Container for errors -->
        <div data-ajax-cart-messages="{{ item.key }}"></div>

        <div>Total: <strong>{{ item.final_line_price | money }}</strong></div>
      {% endfor %}

    <!-- data-ajax-cart-property-input ajaxifies the cart note textarea -->
    <textarea data-ajax-cart-property-input
      placeholder="Cart note">
      {{ cart.note }}
    <!-- data-ajax-cart-static-element keeps the container unchanged
    when the cart and the surrounding HTML get updated -->
    <div data-ajax-cart-static-element class="my-cart__app-container"></div>

    <button type="submit" name="checkout">
      Checkout — {{ cart.total_price | money_with_currency }}

{% schema %} { "name": "My Cart" } {% endschema %}