How to Add a Notes Section in Shopify

"A notes section" means different things depending on where you want it, and each location needs a different method. This guide separates the three common cases — a customer order note on the cart, a delivery instructions field, and a free-standing notes block on a page or product — and gives the correct approach for each, with real Liquid where a section is involved.

This is part of the Shopify custom sections guide. For the mechanics of building a section file, see How to create a custom section.

Which "notes" do you mean?

• A note the customer leaves with their order (gift message, special instructions) — this uses Shopify's built-in note attribute on the cart, and belongs on the cart page or drawer.
• Structured extra fields (delivery date, "leave at door") — these use cart line item properties or cart attributes, so each value is captured separately rather than in one free-text blob.
• Editorial notes you display (a care note, a sizing note, a "note from the founder") — this is ordinary section content you write and style, driven by a setting or a metafield.

Getting this distinction right first saves rework: the first two send data to the order; the third only displays text.

Case 1 — A customer order note on the cart

Shopify carts have a built-in note field. Add a <textarea> named exactly note inside the cart form and Shopify stores its contents on the order, visible to you in the admin. In a cart section (sections/main-cart-items.liquid in Dawn-based themes, or your cart template), add:

<div class="cart-note">
  <label for="cart-note">{{ section.settings.note_label }}</label>
  <textarea
    id="cart-note"
    name="note"
    class="cart-note__input"
    rows="3"
  >{{ cart.note }}</textarea>
</div>

The name="note" is what makes this work — it maps to the cart's note attribute. Pre-filling with {{ cart.note }} keeps what the shopper typed if the page reloads. Expose the label as a setting so it is editable:

{% schema %}
{
  "name": "Cart note",
  "settings": [
    {
      "type": "text",
      "id": "note_label",
      "label": "Note label",
      "default": "Order notes (optional)"
    }
  ]
}
{% endschema %}

Case 2 — Structured fields with line item properties

When you need discrete values — a delivery date, an engraving, a checkbox for gift wrap — use line item properties on the product form or cart attributes on the cart form. Unlike the single note, each property is stored and shown separately on the order.

On a product form, add inputs named properties[Label]:

<div class="product-note">
  <label for="delivery-date">Preferred delivery date</label>
  <input
    type="date"
    id="delivery-date"
    name="properties[Delivery date]"
    class="product-note__input"
  >
</div>

Anything under properties[...] inside the <form> that adds the item to the cart rides along with that line item to the order. For a cart-wide value that is not tied to one product, use attributes[Label] on the cart form instead. Both appear in the order details in your admin.

Case 3 — An editorial notes section you display

If "notes" just means a block of informational text — a care note, a shipping note, a note from the founder — that is a normal display section. Read the text from a richtext setting so a merchant edits it in the editor, or from a metafield so the note lives with the product and stays in sync everywhere it appears:

<section class="store-note">
  <h2 class="store-note__title">{{ section.settings.title }}</h2>
  <div class="store-note__body">
    {% if section.settings.use_metafield and product.metafields.custom.care_note != blank %}
      {{ product.metafields.custom.care_note }}
    {% else %}
      {{ section.settings.body }}
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Store note",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "title", "label": "Title", "default": "A note on care" },
    { "type": "richtext", "id": "body", "label": "Note text" },
    {
      "type": "checkbox",
      "id": "use_metafield",
      "label": "Use the product's care note metafield instead",
      "default": false
    }
  ],
  "presets": [{ "name": "Store note" }]
}
{% endschema %}

The metafield fallback pattern — prefer per-product data, fall back to a typed default — is a good habit for any content that some products override and others do not. Define the metafield under Settings → Custom data first, as described in the tokens-and-metafields note in How to create a custom section.

A quick note on styling

Whichever case you build, scope the CSS to the section's own class so it never leaks into the rest of the cart or product page:

{% stylesheet %}
.cart-note__input,
.product-note__input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  font: inherit;
}
{% endstylesheet %}

Keep the notes section update-safe

Cases 1 and 3 add a .liquid section to your theme. That file lives inside the current theme version, so when you update or switch themes, Shopify publishes a fresh copy of the theme's files and your notes section is not carried over — the field or block disappears even though captured order notes stay on past orders. The full mechanics are in Update your theme without losing customizations.

If a notes field is something you depend on, rendering the section from an app via a Theme App Extension means no theme update or swap can remove it. SectionGuard renders your sections from the app with the same in-editor configuration, so they survive every theme update — you can start with Add to Shopify — Free.