Gift wrapping

A tick box in the cart adds gift wrapping; a textarea takes the message. It appears in both the cart drawer and the cart page, and the two stay in step with each other.

The wrap is a real product

This is the design decision that matters. Wrapping is a product you create in admin and select in theme settings — not a free cart attribute.

Which means it is priced, taxed, counted in inventory and fulfilled like anything else you sell. A wrap expressed as an attribute is a note that never reaches the packing bench, isn’t charged for, and doesn’t stop you promising wrapping after you’ve run out of boxes.

Setup

1. Create the product. In admin, add a product called Gift wrapping at whatever you charge. Give it a weight if you ship by weight.

2. Keep it out of the catalogue. Don’t add it to any collection you merchandise, and consider leaving it off the “All products” navigation. It should be reachable by the theme, not browsable.

3. Decide on inventory. Track it if boxes are finite and you’d rather sell out than over-promise. Leave tracking off if you’ll never run out.

4. Select it in the theme. Theme settings → Cart → Gift wrap product.

Settings

Theme settings → Cart

Setting	Type	Default	What it does
Gift wrap product	Product	(empty)	The wrap product. Leave empty to hide the option entirely
Gift wrap label	Text	Add gift wrapping	The tick box label
Allow a gift message	Checkbox	On	Shows the message textarea when wrapping is ticked

The control only renders when a product is selected and that product is available. An out-of-stock or unpublished wrap product hides the option rather than offering something that will fail at add.

How it behaves

• Ticking the box adds one of the wrap product to the cart.
• Unticking it finds that line by variant id and sets its quantity to zero.
• The state is read from the cart itself, not from a cookie — the theme checks whether the wrap is already in the bag, so the box is correctly ticked when a shopper returns to a cart that already has wrapping in it.
• Checking by variant means that if you swap the wrap product later, an old wrap line doesn’t leave the new box falsely ticked.
• Both copies stay in sync. The cart drawer and the cart page can both be on the page at once, and both controls are updated together. A failed request puts the control back where the cart actually is rather than leaving a tick that didn’t happen.

The gift message

The message is saved as a cart attribute named Gift message, which is what makes it appear on the order in admin where your packing team will see it.

It’s capped at 200 characters and saved on a 500 ms pause rather than on every keystroke, so typing a message is a handful of requests rather than one per letter. The textarea is revealed when wrapping is ticked and hidden when it isn’t.

Caution

The message is a cart attribute, so it belongs to the whole order, not to a particular line. A shopper buying three things and wrapping one gets one message on the order. If you need per-item messages, that’s an app.

Accessibility

• A real <input type="checkbox"> with a <label>, not a styled div — so it toggles with Space and is announced as a checkbox.
• The custom box styling keeps a visible :focus-visible outline.
• The textarea has a visually hidden label.
• Hiding the message field uses the hidden attribute rather than a class, so it’s removed from the accessibility tree rather than just from view.

Locale keys

cart.gift_message — the label and placeholder on the message field.

Note

Not to be confused with gift card recipient fields, which are a different thing: those appear on gift-card products inside the Buy buttons block and use Shopify’s native gift-card delivery. Gift wrapping is about the parcel; gift cards are about the product.