Cart - Use cart attributes to collect more information

Store Design

Topic summary

Tutorial Overview:
This advanced tutorial explains how to add custom form fields (cart attributes) to Shopify cart pages to collect additional customer information. The data appears in order details within the admin panel. Examples include dropdown menus asking “How did you hear about us?” or delivery preferences.

Key Distinctions:

  • Cart attributes differ from order notes (special delivery instructions) and line item properties (product-specific customizations)
  • Only compatible with cart pages, not cart drawers or popups
  • Instructions vary between Sectioned themes (post-October 2016) and Non-sectioned themes (older)

Implementation Steps:

  1. Use the Shopify UI Elements Generator tool to create form field code
  2. Paste generated code into cart-template.liquid or cart.liquid before the closing </form> tag
  3. For required fields, remove the novalidate attribute from the opening <form> tag
  4. Optional: Add display code to email notifications and Order Printer templates

Common Issues Reported:

  • Required fields not preventing checkout, especially with express checkout buttons (Apple Pay, Google Pay)
  • Dropdown fields not displaying properly despite correct code
  • Cart attributes not appearing in order backend
  • “Error updating cart” messages when typing in fields
  • Missing </form> tags in some theme structures

Status: Discussion remains open with unresolved technical issues around field validation and express checkout compatibility.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
59

Thanks for this article! What is {{ attribute | first }} and what is {{ attribute | last }}

What is firs and last represent ? Will this work for textarea ?