Shopify Form Tags
Never hand-write <form action="/cart/add"> without Shopify's form tag. The {% form %} tag generates correct action URLs, CSRF tokens, and hidden fields required for secure cart and customer operations.
Product Form — Add to Cart
Minimal add-to-cart form
{% form 'product', product, id: 'product-form', class: 'product-form' %}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<button type="submit" name="add" class="btn">
Add to cart
</button>
{% endform %}- form 'product' tells Shopify this submits to /cart/add
- name="id" must be the variant ID (not product ID) — critical for multi-variant products
- name="add" on the submit button triggers add-to-cart (not checkout)
- The id: parameter sets the HTML id attribute for JavaScript hooks
Cart Update Form
Quantity updates and checkout
{% form 'cart', cart %}
<table class="cart-table">
{% for item in cart.items %}
<tr>
<td>{{ item.product.title }}</td>
<td>
<input type="number" name="updates[{{ item.key }}]" value="{{ item.quantity }}" min="0">
</td>
<td>{{ item.line_price | money }}</td>
</tr>
{% endfor %}
</table>
<button type="submit" name="update">Update cart</button>
<button type="submit" name="checkout">Checkout</button>
{% endform %}item.key is a unique line-item identifier (variant + properties). Use updates[KEY] naming for quantity changes. Setting quantity to 0 removes the line item.
Note: For dynamic cart drawers, use the Cart AJAX API (/cart/add.js, /cart/change.js) in JavaScript instead of full page form posts.