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.original_total_price`	number	The total before discounts were applied
`cart.subtotal`	number	Subtotal before tax and shipping
`cart.tax`	number	Calculated tax amount
`cart.shipping`	number	Calculated shipping amount
`cart.total_weight`	number	The total weight of all items
`cart.currency`	string	The cart currency code (e.g. `GBP`)
`cart.requires_shipping`	boolean	`true` if any item in the cart needs shipping
`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>

Discounts

Property	Type	Description
`cart.discount_code`	string	The discount code applied to the cart
`cart.discount`	discount	The resolved discount object, if a code is applied

{% if cart.discount_code %}
  <p>Discount applied: {{ cart.discount_code }}</p>
{% endif %}

{% if cart.original_total_price > cart.total_price %}
  <p>You saved {{ cart.original_total_price | minus: cart.total_price | money }}</p>
{% endif %}

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.id`	number	Unique line item ID
`item.product_id`	number	The product ID
`item.variant_id`	number	The variant ID
`item.title`	string	The product title
`item.variant_title`	string	The variant title (e.g. `Large / Red`)
`item.handle`	string	The product handle
`item.price`	number	The unit price
`item.compare_at_price`	number	The original price before sale, if applicable
`item.quantity`	number	How many of this item
`item.line_price`	number	The price times the quantity
`item.image`	string	The product or variant image URL
`item.url`	string	Link back to the product page
`item.sku`	string	The variant SKU
`item.weight`	number	The item weight
`item.grams`	number	The weight in grams
`item.requires_shipping`	boolean	Whether this item needs shipping
`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.subtotal | money }}</p>
  {% if cart.requires_shipping and cart.shipping > 0 %}
    <p>Shipping: {{ cart.shipping | money }}</p>
  {% endif %}
  {% if cart.tax > 0 %}
    <p>Tax: {{ cart.tax | money }}</p>
  {% endif %}
  <p>Total: {{ 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="/browse">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 %}