How to Add a Gift Message to Shopify Order Status Page
How to Add a Gift Message to Shopify Order Status Page
A customer buys a birthday gift, checks out, and then has no way to tell you what the card should say. The order arrives with no message, and you're stuck emailing back and forth to fix it. Adding a gift message field to your order status page solves this without a paid app: you collect the note at checkout, store it as an order attribute, and display it on the status page so the buyer can confirm it was received. This guide walks through the full setup using Shopify's native order notes and Liquid templating.
Why Add a Gift Message to the Order Status Page?
The order status page is the one page every customer visits after purchase, and it's the last touchpoint before the package ships. Showing the gift message there does three things:
- Confirms receipt. The buyer sees their message was captured, which cuts "did you get my note?" support emails.
- Gives a correction window. If they made a typo or want to change the wording, they can contact you before fulfillment rather than after.
- Builds the gifting experience. A clearly displayed message makes the purchase feel considered, which matters for repeat gift buyers around holidays.
It also keeps the message out of the packing slip if you don't want it printed there, since order attributes and order notes are stored separately from line item properties.
What You'll Need (No Paid Apps Required)
You need a Shopify plan that allows theme code editing (all standard plans do), access to your theme's Liquid files, and about 20 minutes. No third-party gift message app is required, though apps exist if you'd rather not touch code — check current pricing in the Shopify App Store if you go that route.
Two Shopify features do the heavy lifting:
| Feature | What it does | Where it lives |
|---|---|---|
| Order notes | A free-text field the customer fills at checkout | Checkout settings |
| Cart attributes | Key-value data stored on the order, readable in Liquid | Cart and order templates |
| Order status page template | Displays order data after checkout | Theme editor / customers/order.liquid or checkout extensibility |
Note that Shopify has been migrating checkout customization to Checkout Extensibility. If your store uses the new checkout, the order status page is edited through the checkout editor rather than raw Liquid. Check which system your store uses under Settings → Checkout before starting.
Step 1: Enable Order Notes in Shopify Checkout Settings
- In your Shopify admin, go to Settings → Checkout.
- Scroll to the Order processing section.
- Find Customer information and check Enable order notes (labeled "Allow customers to add a note to their order" in some versions).
- Optionally edit the field label text to read something like "Gift message (we'll include this in the package)."
- Click Save.
This adds a note field to the checkout's contact/shipping step. It's the simplest way to collect a gift message, and the text is stored on the order as the Note field, visible in the admin order timeline and accessible in Liquid as order.note.
If you want the message collected on the cart page instead — so it's captured before checkout — you'll use a cart attribute in Step 3.
Step 2: Edit Your Order Status Page Template
The order status page renders from your theme's templates/customers/order.liquid file in most themes, or from the checkout's thank-you and order status extension in newer setups.
- In admin, go to Online Store → Themes.
- Click Actions → Edit code on your live theme.
- Under Templates, open
customers/order.liquid. - If your theme doesn't have that file, check the Sections folder for
main-order.liquidor a similarly named order section. - Before editing, duplicate your theme (Actions → Duplicate) so you have a rollback point.
Locate the block that renders order details — usually a <div> with a class like order-details or a table of line items. You'll insert the gift message display just below the order summary.
Step 3: Add a Gift Message Field with Liquid Code
There are two paths here. Pick based on where you collect the note.
Path A: Using the native order note. Since Step 1 already captures the message, you only need to display it. Insert this where you want it to appear:
{% if order.note != blank %}
<div class="gift-message">
<h3>Gift Message</h3>
<p>{{ order.note | escape }}</p>
</div>
{% endif %}
The escape filter prevents any HTML in the customer's note from rendering on the page.
Path B: Using a cart attribute. Add this to your cart template (sections/main-cart.liquid or templates/cart.liquid) to collect the message before checkout:
<p class="cart-attribute__field">
<label for="gift-message">Gift message</label>
<textarea id="gift-message" name="attributes[Gift message]">{{ cart.attributes["Gift message"] }}</textarea>
</p>
Then display it on the order status page:
{% if order.attributes["Gift message"] != blank %}
<div class="gift-message">
<h3>Gift Message</h3>
<p>{{ order.attributes["Gift message"] | escape }}</p>
</div>
{% endif %}
Cart attributes persist through checkout and appear on the order, so this path gives you a labeled field with a clearer prompt than a generic note box.
Step 4: Save and Test Your Gift Message Feature
- Click Save in the code editor.
- Place a test order on your store — use Shopify's Bogus Gateway if the store is live, or a 100% off discount code on a draft order.
- Enter a gift message at checkout or in the cart, whichever path you built.
- Complete the order and land on the order status page.
- Confirm the message appears, renders correctly, and isn't cut off.
- Open the order in admin and verify the note or attribute is stored on the order record.
If the message shows in admin but not on the status page, the Liquid condition is failing — usually a mismatched attribute name or a blank order.note. If it shows nowhere, the checkout field isn't enabled or the attribute name doesn't match.
Optional: Style the Gift Message Field to Match Your Brand
Wrap the output in a styled container using your theme's existing CSS variables where possible:
.gift-message {
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 16px;
margin: 24px 0;
background: #fafafa;
}
.gift-message h3 {
margin: 0 0 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
Add this to your theme's base.css or theme.css asset rather than inline, so it stays maintainable. Match the border radius and font stack to your theme's buttons and cards for a consistent look.
Troubleshooting Common Issues
- Message doesn't appear on the status page. Check that the attribute name in your Liquid exactly matches the
namein your cart field, including capitalization and spaces. - Field missing at checkout. Confirm Enable order notes is saved under Settings → Checkout. On Checkout Extensibility stores, use the checkout editor instead of Liquid.
- Message appears twice. You may have both the native note and a cart attribute rendering. Remove one block.
- HTML or script tags showing as text. That's the
escapefilter working correctly — leave it in place. - Message not visible in admin. Look under the order's Additional details or Timeline; attributes appear as a list, notes under the order note field.
Conclusion
Adding a gift message to your Shopify order status page is a native, no-app job: enable order notes or a cart attribute, render it with a short Liquid block, and style it to match your theme. The payoff is fewer support emails and a better gifting experience for the customers who buy on someone else's behalf. Test with a real order before you call it done.
FAQ
Do I need a paid app to add a gift message to Shopify? No. Shopify's order notes and cart attributes are built in and free on standard plans. Apps exist for more advanced gifting flows, but check current pricing before assuming you need one.
Will the gift message print on the packing slip? Only if you add it to your packing slip template. Order notes and attributes don't print automatically, so you control whether fulfillment sees the message.
Does this work with Shopify's new Checkout Extensibility? Partially. Cart attributes still work, but order status page editing moves to the checkout editor rather than Liquid templates. Check Settings → Checkout to see which system your store uses.