How to Add a Gift Message Field to Shopify Cart
Why Add a Gift Message Field to Your Shopify Cart?
When a customer buys a gift, they need somewhere to write "Happy birthday, Sam — from Alex." Without a dedicated field, that message lands in the order notes, a follow-up email, or nowhere at all. You then have to chase the buyer, and the recipient gets a box with no explanation.
A gift message field solves three problems at once. It captures the message at the moment of purchase, attaches it to the order automatically, and shows it to whoever packs the box. It also reduces support tickets, since buyers stop emailing you after checkout to add a note.
Shopify handles this cleanly through cart attributes — key-value pairs stored on the cart that travel with the order. You can add one with a few lines of Liquid, or install an app if you'd rather not touch code. Both routes are covered below.
Option 1: Add a Gift Message Field with Theme Code (Free)
This approach costs nothing and works on any Shopify theme, including Online Store 2.0 themes like Dawn. You'll edit three things: the cart template, the cart form, and your order notification emails.
Before you start, duplicate your theme. In Shopify admin, go to Online Store → Themes → ... → Duplicate. Edit the copy, not your live theme.
Step 1: Edit Your Cart Template
Open your theme code editor: Online Store → Themes → ... → Edit code.
Find your cart section. In Dawn and most modern themes, that's sections/main-cart-items.liquid. In older themes it may be sections/cart-template.liquid or templates/cart.liquid. Search the file for <form to locate the cart form — the new field must sit inside it.
Add this markup inside the form, ideally near the checkout buttons or below the line items:
<div class="cart-attribute__field">
<label for="gift-message">Add a gift message (optional)</label>
<textarea
id="gift-message"
name="attributes[Gift message]"
maxlength="200"
placeholder="Happy birthday! — from Alex"
style="width:100%; min-height:80px;"
>{{ cart.attributes['Gift message'] }}</textarea>
</div>
The name="attributes[Gift message]" part is what makes this work. Anything inside attributes[...] is saved to the cart as a cart attribute and carried through to the order. The {{ cart.attributes['Gift message'] }} value re-populates the field if the customer reloads the cart page, so they don't lose what they typed.
If you also want a checkbox to hide prices on the packing slip, add a second field with name="attributes[Hide prices]" and a value of Yes.
Save the file and preview your cart. The field should appear immediately.
Step 2: Capture the Gift Message in Cart Attributes
Cart attributes update automatically when the form is submitted — but only if the field is inside the cart form and the customer triggers a cart update. On most themes, changing the textarea alone won't save it until they click "Update" or proceed to checkout.
For a smoother experience, add a small script that saves the attribute as the customer types. In your theme's main JavaScript file, or in a <script> tag at the bottom of the cart section:
document.addEventListener('DOMContentLoaded', function () {
const field = document.getElementById('gift-message');
if (!field) return;
field.addEventListener('change', function () {
fetch('/cart/update.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
attributes: { 'Gift message': field.value }
})
});
});
});
This posts the value to Shopify's Cart API whenever the customer leaves the field. It works on the cart page and on cart drawers, as long as the field ID matches.
Note that cart attributes apply to the entire cart, not individual line items. If a customer wants two gifts with two different messages, they need two separate orders — or you need a line-item property instead, which requires a different setup.
Step 3: Display the Gift Message in Orders and Emails
Cart attributes appear on the order automatically. To see them, open any order in Shopify admin and scroll to the Additional details or Notes area — attributes show as a list of key-value pairs.
To surface the message in your packing slip and order confirmation email, edit your notifications: Settings → Notifications. Open the Order confirmation email and the Packing slip template.
Add this where you want the message to appear:
{% if attributes['Gift message'] %}
<p><strong>Gift message:</strong><br>
{{ attributes['Gift message'] }}</p>
{% endif %}
On the packing slip, this is the line your fulfillment team needs. Print it in a larger font if you're handwriting messages onto cards.
One caveat: attributes are visible to the customer in their order status page. If you're using the field for internal notes, name it clearly (for example, attributes[Internal note]) and don't display it in customer-facing emails.
Option 2: Use a Free Shopify App for Gift Messages
If you'd rather not maintain theme code — or you need per-item gift messages, gift wrapping options, or a message field on the product page — an app is the faster route. Apps also survive theme updates, which hand-coded fields don't.
Apps worth evaluating in the Shopify App Store:
- Gift Note / Gift Message apps — search "gift message" in the App Store; several free and freemium options exist. Check current pricing, since tiers change.
- Shopify's own Cart and Checkout extensibility — on Shopify Plus, checkout UI extensions can add a gift message field directly in checkout.
- Product options apps such as Easify Product Options or Hulk Product Options — these add a gift message as a line-item property, so each product in the cart can carry its own message.
When comparing apps, check these criteria:
- Where the field appears — cart page, cart drawer, product page, or checkout
- Per-cart vs. per-item messages — this is the single biggest functional difference
- Whether it edits your theme files — apps that inject code can conflict with your existing setup
- Free plan limits — many "free" apps cap orders per month
- Email and packing slip output — confirm the message renders where you need it
Install one app at a time and test it on a duplicate theme before committing.
| Approach | Cost | Best for | Per-item messages | Survives theme updates |
|---|---|---|---|---|
| Theme code (cart attributes) | Free | One message per order, simple setups | No | No — reapply after updates |
| Free/freemium gift app | Free tier, paid upgrades | Non-technical merchants | Varies by app | Yes |
| Product options app | Paid (check current pricing) | Personalized products, per-item notes | Yes | Yes |
Testing Your Gift Message Field and Common Pitfalls
Run a real test order before you announce the feature. Use Shopify's Bogus Gateway in test mode, or place a small live order and refund it.
Your test checklist:
- Add an item to the cart, type a message, and reload the page — the text should still be there.
- Proceed to checkout and complete the order.
- Open the order in admin and confirm the attribute appears.
- Check the order confirmation email and packing slip for the message.
- Test with the field left empty — nothing should break.
- Test on mobile, where textareas often get squeezed by theme CSS.
Common pitfalls:
- Field outside the form. If the textarea isn't inside the
<form>tag, nothing saves. This is the most frequent mistake. - Missing
attributes[...]in the name. A plainname="gift_message"won't reach the order. - Theme update wipes your code. Duplicate your theme and keep a note of every file you edited.
- Long messages breaking layouts. Set a
maxlengthand test with 200 characters. - Discount or shipping apps overriding the cart form. If another app rebuilds the cart, your field may disappear.
- Message not printing. Confirm the
{% if attributes['Gift message'] %}block is in the right notification template, not just the order page.
Once it's working, mention the gift message option on your product pages and in your cart announcement bar. Customers rarely look for it unless you point it out.
Conclusion
Adding a gift message field to your Shopify cart takes about twenty minutes with theme code, or ten with an app, and it removes a recurring support headache for anyone selling gifts. Use cart attributes for a single message per order, and switch to a product options app if you need per-item notes. Test with a real order before you launch, and check your packing slip template — that's where the field earns its keep.
FAQ
Will the gift message field work on my current theme?
Yes, on any theme that uses a standard cart form, including Dawn, Refresh, and most paid themes. You only need to locate the correct cart template file, which may be named main-cart-items.liquid, cart-template.liquid, or cart.liquid depending on the theme.
Can customers add a different gift message for each item in the cart? Not with cart attributes — those apply to the whole order. For per-item messages, use a product options app that saves the message as a line-item property, or ask customers to place separate orders.
Do gift messages show up on the packing slip automatically?
No. Shopify stores the attribute on the order, but you must add a Liquid block such as {% if attributes['Gift message'] %} to your packing slip and order confirmation templates under Settings → Notifications.