Add a Giftie gift message input to Shopify checkout
Use Giftie's Gift Message checkout block to let customers write a gift message before placing their order. The same block can also let them add a greeting card by picking a card design.
Before you start
- Install Giftie on the Shopify store you want to configure.
- Your store needs Shopify Plus to use this block in checkout. For testing, use a Plus development store. A Basic development store does not provide the same checkout access. See Shopify's checkout extension requirements.
- You need permission to customize the store's checkout.
Add the Gift Message block
- In Shopify admin, go to Settings → Checkout.
- Find the checkout configuration you want to edit and select Customize.
- Select the Checkout page in the editor.
- Open Apps, find Giftie, and add the Gift Message block.
- Place the block where you want customers to enter their message.
- Select Save.
If Gift Message is missing from the app list, confirm that Giftie is installed on this store and that the store has Shopify Plus checkout access. Giftie's other blocks, such as Scheduled gifts, serve different pages and do not add this input.
Show the input immediately
By default, customers turn on Add a gift message before the input appears.
To keep the input visible:
- Select the Gift Message block in the checkout editor.
- Turn off Show opt-in toggle.
- Select Save.
Customers can then type directly into the box without turning on a switch.
Configure the message field
The block's settings let you add helper text, set the maximum number of characters, and provide quick-pick suggestions, one per line. The default limit is 200 characters.
Textarea placeholder supplies example text shown below an empty input. Learn more URL adds an optional link below the field.
Messages save automatically. The field shows Saving..., followed by Saved when an update succeeds. Some accelerated checkout methods restrict attribute updates; use the standard checkout to test the field.
Offer greeting card designs
The block can show the designs of your Giftie greeting card product as small images. When a customer selects a design, Giftie adds that card to the cart at the card's normal price. Customers do not have to pick a card.
To turn this on:
- Select the Gift Message block in the checkout editor.
- Set Offer greeting card designs to True.
- To show the designs below the message field, set Show card designs below the message to True. Keep False to show them above it.
- Select Save.
Which designs customers see
Giftie finds your greeting card product automatically and shows every design of it. You do not choose the product or individual designs in the checkout editor.
Each design is one variant of the product, with its own image and price. To hide a design, make that variant unavailable for sale. Giftie skips variants that are not available for sale or have no image.
The product must be Active and available on the Online Store sales channel. If no designs appear, check both in Shopify admin.
In checkout
- Customers select a design to add the card. Selecting another design changes the card, and selecting the same design again removes it.
- Up to six designs show at a time. Arrows appear when there are more.
- The card appears in the order summary and on the order as a normal line item.
Test a message
- Open the storefront, add a product to the cart, and go to checkout.
- If the switch is visible, turn on Add a gift message.
- Enter a recognizable test message and wait for Saved. If you set up card designs, select one and check that the card appears in the order summary.
- Complete a test order using your development store's test payment gateway or an enabled manual payment method.
- Open the order in Shopify admin and check Additional details for the message. Giftie saves it as an order attribute, normally yuzuGiftMessage, or Gift Message when that existing attribute is being used. It is separate from the order's Notes field. A card you selected appears as its own line item on the order.
If the message is missing, check for a save error in checkout and confirm that you are viewing the order from the same test. Send the order number and a screenshot to team@yuzu.so if it still does not appear.