Shopify Order Notes in the Cart Drawer: How to Add Them (2026)

A customer wants their gift wrapped. Another needs the box left at the back door. A third is buying for a friend and wants a handwritten card inside.

If your Shopify cart drawer has no order notes field, all three people hit "checkout" with their fingers crossed — and you find out what they wanted after the parcel has already shipped.

This guide shows you three ways to add order notes to a Shopify cart drawer, the one code mistake that silently stops notes from saving in a slide-out cart, and the prompts that actually get used.

What Are Shopify Order Notes?

An order note is a free-text box where a customer leaves one message for the whole order before checking out. The message is stored on the cart, travels through checkout, and appears on the order in your Shopify admin so you or your packing team can read it before the box is taped shut.

Three Shopify features look similar and get mixed up constantly. They are not interchangeable:

The important limits: there is one order note per cart (a second note overwrites the first), it maxes out at 5,000 characters, and it cannot be made mandatory by Shopify itself. If any of those are a problem, you want cart attributes instead — covered below.

This guide focuses on the note inside the cart drawer — the slide-out panel that appears when someone clicks the cart icon. If you're still choosing between a drawer and a full cart page, our cart drawer vs cart page breakdown covers which converts better.

Why Order Notes Are Worth the Two Minutes

Order notes get treated as a "nice to have." In practice a note field does three unglamorous jobs:

• It moves questions before the payment instead of after it. A shopper who can type "does this fit a 4-year-old?" in the cart asks you there, not in a support email sent 20 minutes after paying.
• It cuts avoidable reships. Delivery instructions written on the order get followed. The same instruction sent in a DM at 11pm does not reach the person packing at 7am.
• It removes a reason to abandon. A buyer with an unanswered condition — gift wrap, an allergy, a building access code — has a reason to stall. A note box resolves that in-cart, which is exactly where cart abandonment is won or lost.

A caveat worth being honest about: notes are unstructured. If you get the same request 50 times a week, stop reading it out of a text box and turn it into a cart attribute or a real product option. Notes are for the long tail, not for your core workflow.

Which Method Should You Use?

There are three ways to get a note field into a cart drawer. Pick on how much control you need, not on price:

Honest recommendation: if all you need is a note box and your theme already has the toggle, use Method 1 and stop there. Method 2 earns its cost when the note is one part of a cart you're actively optimising. Method 3 is for custom themes and vintage themes (Debut, Brooklyn, Narrative) where no toggle exists.

Method 1: Turn On Order Notes in Your Theme (Free, 2 Minutes)

Dawn, Sense, Refresh, Craft, Studio and most modern free themes ship with order notes already built. You only need to switch them on.

1. Go to Online Store → Themes in your Shopify admin
2. Click Customize on your live theme
3. Open the page dropdown at the top and pick Cart
4. In the left sidebar, click the Subtotal section (under Template)
5. Tick Enable cart note
6. Click Save

Now open your store in a new tab, add a product, and click the cart icon. In Dawn the note appears as a collapsed "Order special instructions" row that expands when clicked — that is by design, not a bug.

Why this also fixes the drawer: in Dawn the checkbox writes to a global theme setting (settings.show_cart_note), not a section-only setting. The cart page and the cart drawer both read it, so ticking it once turns the note on in both places. Some paid themes split these into two separate toggles — if the note shows on the cart page but not the drawer, look for a second checkbox under Theme settings → Cart.

Not seeing the drawer at all? Under Theme settings → Cart, set Cart type to Drawer. If it's set to Page, clicking the cart icon navigates away instead of sliding out.

Change the Default Label (Do This — It Matters More Than the Toggle)

The stock label is "Order special instructions." It's the single biggest reason note fields go unused: it tells a shopper nothing about what to write.

1. Go to Online Store → Themes
2. Click the … (three dots) next to your theme → Edit default theme content
3. Type special instructions in the filter box
4. Replace the text with a specific prompt (examples below)
5. Save

This edits the sections.cart.note translation string, which Dawn uses for both the collapsed summary label and the textarea placeholder — so one edit updates both.

Method 2: Add Order Notes With a Cart Drawer App

Theme-level notes work, but they sit exactly where the theme puts them. You can't reposition the field, control whether it starts open or collapsed, restyle it independently, or place it alongside upsells, a free gift unlock, and a shipping progress bar in the same drawer.

That's the reason most growth-focused stores use a cart drawer app: order notes plus the conversion layer in one place, instead of stacking four apps into one cart.

Setting Up Order Notes in Oxify Cart Drawer & Upsells

In Oxify Cart Drawer & Upsells, enabling notes takes about 30 seconds:

1. Open the Oxify app from your Shopify admin
2. Go to Cart Edit (the cart drawer designer)
3. Find the Additional Notes block in the left panel
4. Click Enable — the toggle turns green
5. Set the Notes Title (e.g. "Add a note to your order")
6. Set the Notes Placeholder (e.g. "Gate code, gift message, or delivery instructions")
7. Choose Notes Placement — top of the checkout block, above the subtotal, or collapsed at the bottom
8. Optional: tick Open notes section initially to have the field expanded by default

You can also match the title size and arrow icon colour to your theme, and add translated strings for multi-language stores. The field renders live in the drawer preview on the right of the editor, so you see the real shopper view before saving.

The practical advantage over the theme toggle is placement control. Being able to put the note above the checkout button and the express payment buttons — rather than wherever your theme hard-codes it — is the difference between a field people use and a field people scroll past.

What Sits Next to the Note Box

Order notes on their own won't move revenue. The reason merchants install a full-funnel drawer is what surrounds the note field:

• A free shipping progress bar that nudges one more item into the cart
• A free gift unlock at a spend threshold
• Cart upsells and frequently bought together suggestions
• A discount code field that applies without redirecting to checkout
• Trust badges and a countdown timer to reduce drop-off

To compare options first, we've reviewed the best Shopify cart drawer apps — including where each one falls short.

Method 3: Add Order Notes With Code (Custom Themes)

On a custom or older theme with no note toggle, you can add the field yourself. This is where almost every tutorial online gives you code that quietly fails in a drawer.

The Mistake: Why a Plain Textarea Doesn't Save in a Drawer

Most guides tell you to paste this inside the cart form:

<!-- Works on a cart PAGE. Silently fails in a cart DRAWER. -->
<label for="CartNote">Add a note for your order</label>
<textarea name="note" id="CartNote">{{ cart.note }}</textarea>

On a full cart page that works, because clicking checkout submits the form and name="note" is posted along with it.

A cart drawer never submits that form. The checkout button in a drawer sends the shopper straight to /checkout, and the note — which only lived in the browser's DOM — is thrown away. The merchant tests it, sees the text typed in fine, checks the order, and finds the note blank.

The fix is to write the note to the cart as the shopper types, using Shopify's AJAX Cart API.

The Working Code (AJAX-Safe)

Open your cart-drawer.liquid snippet (or whatever your theme calls the drawer) and paste this inside the drawer's footer, above the checkout button:

<div class="cart-note">
  <label for="CartDrawer-Note">Add a note for your order</label>
  <textarea
    id="CartDrawer-Note"
    name="note"
    rows="3"
    maxlength="250"
    placeholder="Gate code, gift message, or delivery instructions"
  >{{ cart.note }}</textarea>
</div>

<script>
  (function () {
    var note = document.getElementById('CartDrawer-Note');
    if (!note) return;
    var timer;

    note.addEventListener('input', function () {
      clearTimeout(timer);
      timer = setTimeout(function () {
        fetch('/cart/update.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ note: note.value })
        });
      }, 300);
    });
  })();
</script>

Four rules that make or break it:

• Keep name="note" exactly as written — Shopify reads that key, and it keeps the field working as a fallback if JavaScript fails.
• Keep the debounce (setTimeout). Without it you fire a request on every keystroke and rate-limit yourself.
• Re-run the script whenever the drawer re-renders. Most drawers replace their own HTML after an add-to-cart, which destroys the listener. If your note stops saving after adding a second product, this is why — bind the listener on the drawer container instead of the textarea, or re-initialise after each render.
• Add maxlength. Shopify caps the note at 5,000 characters, but no theme sets a limit for you — 250 is plenty for real instructions and keeps the box from becoming an essay field.

If you'd rather not maintain this, Dawn's own approach is worth copying: it wraps the textarea in a <cart-note> custom element that does exactly the debounced /cart/update.js call above.

Troubleshooting: Order Notes Not Showing or Not Saving

Almost every support thread on this topic is one of six problems:

The Dawn Bug Worth Knowing About

Older Dawn versions bound the note field to the change event instead of input. The difference sounds academic and isn't: change only fires when focus leaves the field.

So a shopper types their gate code, taps "View cart" or the checkout button directly, and the field never loses focus in a way that triggers the save. The note is gone. It works perfectly whenever you test it by clicking elsewhere first — which is exactly why it survives testing and fails in production.

This was fixed upstream in Dawn (the listener was changed to input, which fires on every keystroke), but the old behaviour still ships in plenty of themes forked from earlier Dawn versions and in a lot of copy-pasted tutorial code. If you inherited a theme, open assets/cart.js and search for addEventListener near the note code. If it says 'change', change it to 'input' — and keep the debounce so you're not firing a request per keystroke.

The fastest way to confirm whether a note actually reached the cart: type into the field, then open your browser console and run fetch('/cart.js').then(r => r.json()).then(c => console.log(c.note)). If that logs your text, the note is on the cart and will reach the order. If it logs null, the field isn't saving — it's the AJAX problem above.

What to Write in the Note Prompt

"Order special instructions" tells a buyer nothing, so they write nothing. A prompt that names a real scenario gets filled in.

• Florist: "Tell us what to write on the card"
• Bakery: "Any allergies or special requests?"
• Apparel: "Sending this as a gift? We'll leave out the receipt"
• Pet supplies: "Tell us your pet's name — we'll add a sticker"
• Furniture: "Delivery notes (gate code, parking, floor number)"
• Jewellery: "Engraving text or a message for the gift card"
• Skincare: "Any allergies or skin concerns we should know about?"
• B2B / wholesale: "PO number or delivery window"

Two rules underneath all of those: name the one thing you most often get asked, and only promise what you'll actually do. A prompt that says "we'll handwrite it" creates an obligation on every order — if you can't keep that at volume, don't offer it.

One privacy note that's easy to miss: never invite sensitive information into a free-text box. "Any medical conditions we should know?" pulls health data into an order record that your whole team and every connected app can read. Keep prompts to logistics and preferences.

If gift messages dominate your notes, that's the signal to add a real gift wrap option rather than leaning on the note box.

How to Read Order Notes After They Come In

The note lands in three places, and the third is the one that gets missed:

1. Shopify admin — open the order; the note appears in the Notes box in the right-hand column
2. Order exports and the API — as the note field on the order
3. Your packing slip — only if the template includes it

Shopify's default packing slip template does not print the customer's note prominently. To add it, go to Settings → Shipping and delivery → Packing slips → Edit template and add:

{% if order.note != blank %}
  <div class="order-note">
    <strong>Customer note:</strong> {{ order.note }}
  </div>
{% endif %}

This is the gap that causes the most damage. The note is captured perfectly, the merchant can see it in admin, and the person packing the box never does — so the customer's instruction is ignored and they conclude you didn't read it. If you use ShipStation, ShipBob, or another 3PL, confirm the note maps into their "customer note" or "gift message" field, and test with a real order before you rely on it.

Echo the Note Back in the Confirmation Email

This is the highest-value five minutes in this entire guide, and almost nobody does it. Printing the customer's own instruction back to them in the order confirmation email tells them it was received — which kills the "did they see my note?" support email before it's written.

Go to Settings → Notifications → Order confirmation → Edit code and add this inside the email body:

{% if note != blank %}
  <h3>Your note to us</h3>
  <p>{{ note }}</p>
{% endif %}

The gotcha that breaks this for most people: in notification templates you must use {{ note }}, not {{ order.note }}. Shopify doesn't reference the order object by name in email templates — the same reason you write {{ shipping_method.title }} there instead of {{ order.shipping_method.title }}. Use {{ order.note }} and you'll get a blank space with no error to tell you why. (SMS notifications are the exception — those do want the order. prefix.)

Reading Notes in Bulk

To review notes across many orders rather than one at a time, go to Orders → Export and export a CSV — the order note comes through as its own column, so you can sort and scan a month of them at once.

Do this once a quarter. It's the cheapest product research you'll ever run: the same request appearing 40 times is a product option you haven't built, a shipping choice you don't offer, or a question your product page fails to answer.

Placement and UX Mistakes That Cost Conversions

• The note sits below the checkout button. Nobody scrolls past a checkout button. Move it above.
• It sits below the express payment buttons. Worse than the above — Shop Pay and Apple Pay leave the page instantly, so anything underneath them is never seen.
• The label is just "Notes." Too vague to act on. Name the scenario.
• The textarea is huge and open by default. A big empty box reads as homework and pushes checkout below the fold on mobile. Collapse it behind an "Add a note" link, or cap it at 2–3 rows.
• No character hint. Some buyers hesitate because they don't know how much is too much. A small "(up to 250 characters)" removes the doubt.
• Never tested on a real phone. On mobile the on-screen keyboard covers the bottom half of the drawer. Test on an actual device that the field scrolls into view when focused, not just in the theme preview.

Most of these are placement problems, and placement is the one thing the free theme toggle won't give you — the note lands wherever your theme hard-codes it, usually under the subtotal and often under the express payment buttons. Editing that means touching theme files, and re-doing it after every theme update. Being able to drag the note above the checkout block, decide whether it starts open or collapsed, and see it in a live mobile preview is the practical reason merchants move from Method 1 to a cart drawer app.

Order Notes vs. Cart Attributes: Which Do You Need?

The rule of thumb:

• Use an order note when one free-text message covers it — gift messages, delivery instructions, allergies, anything unpredictable.
• Use cart attributes when you need structure or enforcement — a delivery date picker, a gift-wrap checkbox, a required PO number, or anything you want to filter and report on later.

Cart attributes are also the answer to "can I make the note required?" You can't enforce the native note — Shopify will not block checkout on an empty one, and a drawer's checkout button can't be validated reliably. A required cart attribute, or a required line item property on the product page, is the supported way to insist on an answer.

Most stores only need notes. When you find yourself copy-pasting the same field out of note text week after week, that's the moment to promote it to an attribute.

Slide Cart vs. Mini Cart: Does It Matter for Notes?

Both can hold a note field, but space decides how well it works. A slide cart runs full-height, so a note can sit above the checkout button without pushing it off-screen. A mini cart dropdown is short — add a note field and either the note or the checkout button ends up below the fold.

We compared them in our slide cart vs mini cart breakdown. Short version: if you want notes plus upsells in the same view, a slide cart is the only one with room for both.

Frequently Asked Questions

Frequently Asked Questions

Get the Cart Drawer Right, Not Just the Note

Enabling order notes is a two-minute job. Making sure the note actually saves in a drawer, reaches the packing slip, and sits above the express checkout buttons is the part that decides whether it does anything for you.

If you want the note field plus the rest of the cart working together — upsells, free gifts, a free shipping bar, trust badges, and a mobile layout that doesn't push checkout below the fold — install Oxify Cart Drawer & Upsells on the Shopify App Store. It's Built for Shopify, rated 5.0, includes a 14-day free trial, and the Additional Notes block takes about 30 seconds to enable from the Cart Edit screen.

Building it yourself instead? Use the AJAX-safe code above, test with a real order, and check the note reaches your packing slip before you trust it.