Cart

The cart object holds the visitor's shopping cart. It is available on every page, not just the cart page. Use it to show item counts in the header, totals in a sidebar, or a full cart list on its own page.

Properties

Property	Type	Description
`cart.item_count`	number	The total number of items in the cart
`cart.total_price`	number	The cart total in the smallest currency unit
`cart.total_weight`	number	The total weight of all items
`cart.note`	string	A note left by the visitor at checkout
`cart.attributes`	object	Custom cart attributes

<a href="/cart">
  Cart ({{ cart.item_count }})
</a>

Line items

Property	Type	Description
`cart.items`	array	All line items in the cart

Each item in cart.items has these properties:

Property	Type	Description
`item.product_id`	string	The product ID
`item.variant_id`	string	The variant ID
`item.title`	string	The product title
`item.variant_title`	string	The variant title (e.g. `Large / Red`)
`item.price`	number	The unit price
`item.quantity`	number	How many of this item
`item.line_price`	number	The price times the quantity
`item.image`	image	The product or variant image
`item.url`	string	Link back to the product page
`item.sku`	string	The variant SKU
`item.properties`	object	Custom line item properties

{% for item in cart.items %}
  <div class="cart-item">
    <img src="{{ item.image | img_url: '100x100' }}" alt="{{ item.title }}" />
    <div>
      <a href="{{ item.url }}">{{ item.title }}</a>
      {% if item.variant_title != 'Default' %}
        <p>{{ item.variant_title }}</p>
      {% endif %}
      <p>{{ item.price | money }} x {{ item.quantity }}</p>
      <p>{{ item.line_price | money }}</p>
    </div>
  </div>
{% endfor %}

Cart totals

Show a summary at the bottom of the cart page:

<div class="cart-summary">
  <p>Subtotal: {{ cart.total_price | money }}</p>
  <p>{{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }}</p>
</div>

Cart form

Use the form tag to let visitors update quantities or remove items:

{% form 'cart' %}
  {% for item in cart.items %}
    <div class="cart-line">
      <p>{{ item.title }}</p>
      <input type="number" name="updates[{{ item.variant_id }}]" value="{{ item.quantity }}" min="0" />
      <p>{{ item.line_price | money }}</p>
    </div>
  {% endfor %}

  <button type="submit">Update Cart</button>
{% endform %}

Setting the quantity to 0 removes the item from the cart.

Empty cart

Check if the cart is empty before showing the items:

{% if cart.item_count == 0 %}
  <p>Your cart is empty.</p>
  <a href="/collections/all">Start shopping</a>
{% else %}
  {% for item in cart.items %}
    {% render 'cart-item' with item %}
  {% endfor %}
{% endif %}

Free shipping progress

A common pattern is to show how close the visitor is to free shipping:

{% assign threshold = 5000 %}
{% assign remaining = threshold | minus: cart.total_price %}

{% if remaining > 0 %}
  <p>Spend {{ remaining | money }} more for free shipping</p>
{% else %}
  <p>You qualify for free shipping</p>
{% endif %}