Shopify Cart Attributes Generator

Gift messages, delivery dates or "how did you hear about us" fields, saved straight to the order.

Your details

Fields

Fields, one per line

Format: type:Label, or select:Label:Option A,Option B for a dropdown. Types: text, textarea, select, date. Up to 10 fields.

Options

Also add a general order note box

Your snippet file (snippets/cart-attributes.liquid)

{%- comment -%}
  Cart attribute fields. Render inside your cart form, above the Checkout button:
  {% render 'cart-attributes' %}

  Each field saves as a cart attribute (order.note_attributes once the order is placed), visible
  on the order detail page in your Shopify admin under Additional details, and included on most
  default packing slip templates. attributes[...] fields don't change the order total; for a paid
  option (like gift wrap), use a separate product instead.
{%- endcomment -%}
{%- style -%}
  .ea-ca{margin:1rem 0;padding:1rem;border:1px solid #e5e5e5;border-radius:8px;display:flex;flex-direction:column;gap:.75rem}
  .ea-ca__field label{display:block;font-size:.85em;font-weight:600;margin-bottom:.3rem}
  .ea-ca__field input,.ea-ca__field select,.ea-ca__field textarea{width:100%;padding:.5em .6em;border:1px solid #ccc;border-radius:6px;font:inherit}
{%- endstyle -%}
<div class="ea-ca">
      <div class="ea-ca__field">
        <label for="ea-ca-gift-message">Gift message</label>
        <input type="text" name="attributes[Gift message]" id="ea-ca-gift-message" value="{{ cart.attributes['Gift message'] | escape }}">
      </div>
      <div class="ea-ca__field">
        <label for="ea-ca-how-did-you-hear-about-us">How did you hear about us?</label>
        <select name="attributes[How did you hear about us?]" id="ea-ca-how-did-you-hear-about-us">
          <option value="">Select...</option>
          <option value="Google" {% if cart.attributes['How did you hear about us?'] == "Google" %}selected{% endif %}>Google</option>
          <option value="Instagram" {% if cart.attributes['How did you hear about us?'] == "Instagram" %}selected{% endif %}>Instagram</option>
          <option value="Friend" {% if cart.attributes['How did you hear about us?'] == "Friend" %}selected{% endif %}>Friend</option>
          <option value="Other" {% if cart.attributes['How did you hear about us?'] == "Other" %}selected{% endif %}>Other</option>
        </select>
      </div>
      <div class="ea-ca__field">
        <label for="ea-ca-requested-delivery-date">Requested delivery date</label>
        <input type="date" name="attributes[Requested delivery date]" id="ea-ca-requested-delivery-date" value="{{ cart.attributes['Requested delivery date'] | escape }}">
      </div>
      <div class="ea-ca__field">
        <label for="ea-ca-note">Order note</label>
        <textarea name="note" id="ea-ca-note" rows="2">{{ cart.note }}</textarea>
      </div>
</div>

To install: in Shopify admin go to Online Store → Themes, click … next to your theme → Edit code. Under Snippets choose Add a new snippet, name it as shown above, paste this code and save. Then add {% render 'cart-attributes' %} inside your cart form (templates/cart.liquid, or sections/main-cart-footer.liquid on Online Store 2.0 themes), above the Checkout button.

Only one note textarea should exist on the cart page at a time. If your theme already has one, turn off the general order note box here to avoid two competing note fields.

Live preview

One field, one order attribute

Any input named attributes[Your Label] inside the cart form is saved as a cart attribute and carried onto the order as order.note_attributes once it's placed. Unlike a line item property, a cart attribute applies to the whole order, not one product, which fits things like a gift message, a requested delivery date, or how the shopper found you.

Describe each field on its own line (type:Label, or select:Label:Option A,Option B for a dropdown), and this builds matching inputs pre-filled from cart.attributes so values survive a page reload. Turn on the general order note box to also capture free text into cart.note, the same field Shopify's own cart uses for gift messages on some themes.

Adding it to your cart

01
Add the snippet
Online Store → Themes → Edit code → Snippets → Add a new snippet named cart-attributes, paste the code, then add {% render 'cart-attributes' %} inside your cart form, above the Checkout button.

Only one note textarea should exist on the cart page. If your theme already has a gift note field, turn off this generator's note box to avoid two competing fields (whichever comes last in the page submits).

Questions people ask

Where do these show up after an order comes in?

In your Shopify admin's order detail page, under Additional details. Most default packing slip templates also include note attributes, so check yours by placing a test order.

Can a field change the order total, like a paid gift wrap?

No. Attributes are notes on the order, they don't add a charge. For a paid option, add a separate product instead and use one of these fields only for free-text details.

Does the select field remember what the shopper picked if they reload the cart page?

Yes, each field is pre-filled from cart.attributes, so a page reload doesn't lose what was entered.

Can I make a field required?

Add the required attribute yourself in the code if needed. Note that it's a browser-side nicety only. It won't stop an empty attribute if an order comes in another way, like the API or POS.

Last reviewed 30 September 2026.

Sources: Shopify: cart object, attributes and note