Project portfolio Browse selected work

Shopify Plus Upgrade Monthly Fee Reduction + Up to $4800 Development Fee Credit - Exclusive WesWoo Offer

Developer modules / Cart, totals and promotions

Cart, totals and promotions

Render server-owned line items before totals, payments and promotion conditions.

Line items, quantities and removal

Render actual cart lines for products and accessories. Properties or selling plans can produce separate lines for the same variant, so preserve line identity rather than matching product names.

Data and dependencies

  • cart.items, quantity, final_line_price and url_to_remove.
  • Use the current line key for asynchronous line updates.

Interaction logic

  • Reconcile totals and lines after each update.
  • Handle zero quantity, removal and an empty cart separately.
Example code · snippets/ww-cart-lines.liquid
Liquid · WESWOO
{% form 'cart', cart %}
  <ul>
    {% for item in cart.items %}
      <li>
        <a href="{{ item.url | escape }}">{{ item.product.title | escape }} — {{ item.variant.title | escape }}</a>
        <label for="Quantity-{{ section.id }}-{{ forloop.index }}">Quantity</label>
        <input id="Quantity-{{ section.id }}-{{ forloop.index }}" type="number" name="updates[]" value="{{ item.quantity }}" min="0" step="1">
        <span>{{ item.final_line_price | money_with_currency }}</span>
        <a href="{{ item.url_to_remove | escape }}">Remove this line</a>
      </li>
    {% endfor %}
  </ul>
  <p>{{ cart.total_price | money_with_currency }}</p>
  <button type="submit" name="update">Update cart</button>
  <button type="submit" name="checkout"{% if cart.empty? %} disabled{% endif %}>Checkout</button>
{% endform %}

Acceptance checks

  • Test two lines sharing a variant but different properties.
  • Check insufficient inventory, quantity correction and keyboard submission.

The fragment targets a full cart page. A drawer needs focus management and feedback; server totals remain authoritative.

Read it, integrate it, verify it

  1. Choose a module and confirm the data contract.
  2. Connect the fragment to the current theme or framework.
  3. Check real variants, markets and recovery states.

Examples target Shopify Online Store 2.0 themes. Headless has separate data and version boundaries. Integrate fragments with actual fields, theme components and locale files.

Architecture references

Original educational examples with Shopify documentation and pinned upstream references. Follow the applicable license when adopting repository code.

Shopify/dawn · Licensecommit 3e9ee2281dc4 · Shopify-integration theme license; architecture reference without copying the implementation.
Shopify/hydrogen · Licensecommit 9e358a2462ba · MIT; retain copyright and license when using substantial code.

References checked 2026-11-12