How to Add a Gift Message Option to Shopify Cart
Why Add a Gift Message Option to Your Shopify Cart?
If you sell anything people give as presents — candles, jewelry, coffee, skincare, kids' toys — you've probably had a customer email you after checkout asking, "Can you add a note that says happy birthday?" That's friction you created by not asking earlier. A gift message field in the cart solves it: the buyer writes their note while they're already in a buying mood, it travels with the order into Shopify admin, and it prints on the packing slip or order email without you touching anything.
There's a second reason. Gift orders convert better when the buyer can see the message field before checkout. Someone shopping for a birthday doesn't have to guess whether you offer gift notes — the cart tells them. That removes a hesitation point right before they pay.
This guide covers the native Shopify approach using cart attributes and line item properties. It works on any theme, needs no app, and takes about 30 minutes if you're comfortable editing Liquid. If you're not, skip to the app fallback section near the end.
Before You Start: Theme Backups and Cart Type Check
Two things to confirm before you touch code.
Back up your theme. In Shopify admin, go to Online Store → Themes, click the ... next to your live theme, and choose Duplicate. If your edit breaks the cart, you publish the duplicate and you're back in business in seconds. Do this every time, not just this once.
Check whether you're on a cart page or a cart drawer. This matters because the code goes in different files.
- Cart page (most vintage and many free themes): the form lives in
sections/main-cart-template.liquidortemplates/cart.liquid, depending on theme age. - Cart drawer (Dawn, Refresh, Craft, Studio, and most OS 2.0 themes): the drawer markup is usually in
snippets/cart-drawer.liquid, with the form inside it. Some themes also keep a cart page atsections/main-cart-items.liquid. - Both: plenty of themes ship a drawer and a
/cartpage. If so, you need the field in both, or customers who open the full cart won't see it.
Search your theme code for <form action="/cart" — that's your cart form. Every input you add inside that form gets submitted with the cart.
Step 1: Add a Gift Message Checkbox to Your Cart Form
Inside the cart form, after your line items loop and before the checkout button, add a checkbox and a textarea. The checkbox is optional but useful: it lets the customer opt in, and you can hide the textarea until they do.
<div class="gift-message">
<label for="gift-message-toggle">
<input type="checkbox" id="gift-message-toggle" name="attributes[Gift message]">
Add a gift message
</label>
<div id="gift-message-field" style="display:none;">
<label for="gift-message-text">Your message (max 200 characters)</label>
<textarea
id="gift-message-text"
name="attributes[Gift note]"
maxlength="200"
rows="4"
placeholder="Happy birthday, Sam! Hope this makes your day."></textarea>
</div>
</div>
<script>
document.getElementById('gift-message-toggle').addEventListener('change', function () {
document.getElementById('gift-message-field').style.display = this.checked ? 'block' : 'none';
});
</script>
A few notes on this markup:
attributes[Gift message]andattributes[Gift note]are cart attributes. The bracket notation is what tells Shopify to store them on the cart rather than treat them as a random form field.- Keep the attribute names consistent. If you rename
Gift notetoGift Notelater, older orders will show under the old key. - The 200-character cap is arbitrary but sensible — long messages get awkward on packing slips. Pick your own limit and set it in
maxlengthso the browser enforces it. - If you're editing a drawer, the
<script>block may run before the drawer renders. Wrap it in aDOMContentLoadedlistener or move it to your theme's main JS file.
Step 2: Capture the Gift Message with Cart Attributes
You don't need to do anything else to capture the data. Once the field is inside the cart form with the attributes[...] name, Shopify saves it automatically when the customer clicks Update cart or Checkout. You'll see it in admin under the order's Additional details section, alongside any other cart attributes.
Two behaviors worth knowing:
Cart attributes persist until the cart is emptied or the attribute is cleared. If a customer adds a gift note, then removes everything from the cart and starts over, the note may stick around. Most themes clear attributes when the cart empties, but not all. If this matters to you, add a small script that clears the field when the cart item count hits zero.
Attributes are per-cart, not per-item. If someone buys three items and wants a different message on each, cart attributes won't do it. For that you need line item properties — fields named properties[Gift note] placed inside the product form on the product page, not the cart. That's a different build. For most stores, one message per order is what customers actually want.
Step 3: Show the Gift Message in Cart, Checkout, and Order Emails
Capturing the data is half the job. Now surface it so it isn't buried.
In the cart, read the attribute back so the customer can confirm what they wrote. In Liquid:
{% if cart.attributes['Gift note'] %}
<p><strong>Gift message:</strong> {{ cart.attributes['Gift note'] }}</p>
{% endif %}
At checkout, Shopify displays cart attributes automatically on the checkout page in most configurations. Test it — if your checkout doesn't show them, that's a checkout setting you can't edit on non-Plus plans, and you'll rely on the order confirmation email instead.
In order emails, edit the notification template under Settings → Notifications → Order confirmation. Add this where you want the message to appear:
{% if attributes['Gift note'] %}
<p><strong>Gift message:</strong> {{ attributes['Gift note'] }}</p>
{% endif %}
On the packing slip, do the same in the packing slip template. This is the one that actually matters for fulfillment — whoever packs the box needs to see the note and either hand-write it on a card or print it.
Here's a quick reference for where each piece of the setup lives:
| What you want | Where to edit | Liquid variable |
|---|---|---|
| Customer enters message | Cart form (section or snippet) | attributes[Gift note] |
| Customer sees it in cart | Cart template, below items | cart.attributes['Gift note'] |
| Staff sees it on order | Admin order page | Automatic |
| Buyer sees it in email | Settings → Notifications | attributes['Gift note'] |
| Packer sees it on slip | Packing slip template | attributes['Gift note'] |
Optional: Charge for Gift Messages or Gift Wrapping
If you want to charge for gift wrapping, the cleanest native method is a product variant called "Gift wrapping" priced at whatever you charge, added to the cart via a checkbox that triggers an /cart/add call. This keeps the fee as a real line item, so it shows in reports, gets taxed correctly, and refunds cleanly.
The messier alternative is a cart attribute plus a manual charge, which you should avoid — it creates accounting problems and customers hate surprise fees.
If you go the variant route, test that the wrapping line item doesn't trigger free-shipping thresholds in a way you don't want. Some themes and shipping rules count it; some don't.
Cheap App Fallback If You'd Rather Not Touch Code
If Liquid editing isn't your thing, several apps handle gift messages, gift wrapping, and scheduled delivery out of the box. Names worth looking at: Gift Note, Giftify, Ultimate Gift Options, and Gift Wrap. They differ in whether they charge per order, per month, or take a cut, and pricing changes — check current pricing on the Shopify App Store before committing, and read the recent reviews for themes similar to yours.
The tradeoff is real: an app is faster to set up and easier to maintain across theme updates, but it adds a script to your storefront and a monthly cost. For a store doing a handful of gift orders a week, the native build is usually worth the 30 minutes. For a store doing hundreds, the app's reporting and per-item gift options may justify the fee.
Testing Your Gift Message Setup Before You Go Live
Run through this list before you announce anything:
- Add a product to the cart, tick the gift box, type a message, and check out with a test order using Shopify's Bogus Gateway or a real card you refund afterward.
- Confirm the message appears in the order's Additional details in admin.
- Confirm it appears in the order confirmation email you receive.
- Confirm it appears on the packing slip — print one.
- Test on mobile. The textarea should be tappable and the keyboard shouldn't cover the checkout button.
- Test with an empty message and the box ticked. Decide what should happen; usually you want to treat it as no message.
- Empty the cart completely and reload. Make sure a stale message isn't sitting there.
- Test in your cart drawer and your
/cartpage if you have both.
That's the whole build. A gift message field is one of the highest-return small changes you can make to a Shopify cart — it takes half an hour, costs nothing, and removes a support email from every gift order you'd otherwise have to handle manually.
FAQ
Will cart attributes show up in Shopify's order export? Yes. Cart attributes appear in the order CSV export under the Notes column area, and in the order's Additional details in admin. If you use a third-party fulfillment service, check whether it reads attributes before you rely on it.
Can customers add a different gift message for each item in the cart? Not with cart attributes — those are per-order. Per-item messages require line item properties added on the product page. That's a bigger build, and most stores find one message per order is what buyers expect anyway.
Do I need a Shopify Plus plan for this? No. Cart attributes, the cart form, and notification template editing all work on every plan. The only checkout-level customization Plus unlocks is editing the checkout page markup itself, which this setup doesn't require.