Cart State on Every Page
cart reflects the current visitor's cart session. It updates on page reload after add-to-cart form submissions or AJAX cart API calls. cart is always present — even when empty (item_count = 0).
Header cart badge
{% if cart.item_count > 0 %}
<a href="{{ routes.cart_url }}" class="header__cart">
<span class="visually-hidden">Cart</span>
<span aria-hidden="true">🛒</span>
<span class="cart-count">{{ cart.item_count }}</span>
<span class="cart-total">{{ cart.total_price | money }}</span>
</a>
{% else %}
<a href="{{ routes.cart_url }}" class="header__cart">Cart</a>
{% endif %}Line Item Properties
Cart drawer line items
{% for item in cart.items %}
<div class="cart-line" data-key="{{ item.key }}">
<a href="{{ item.url }}">{{ item.product.title }}</a>
{% if item.variant.title != 'Default Title' %}
<p class="variant">{{ item.variant.title }}</p>
{% endif %}
<p>{{ item.quantity }} × {{ item.final_price | money }} = {{ item.line_price | money }}</p>
{% for property in item.properties %}
{% unless property.last == blank %}
<p>{{ property.first }}: {{ property.last }}</p>
{% endunless %}
{% endfor %}
</div>
{% endfor %}- item.key — unique line identifier for quantity updates
- item.final_price — price after line-level discounts
- item.line_price — final_price × quantity
- item.properties — custom fields (engraving, gift message)
- cart.total_price — subtotal before shipping/tax at checkout
- cart.currency — cart currency (multi-currency stores)
Note: Cart drawer UIs typically use /cart/add.js and /cart/change.js AJAX endpoints, then re-fetch sections via the Section Rendering API.