2. Add Gift Message Widget

1. Add the Widget to a Product Page (Online Store 2.0)

Using the Theme Editor (Recommended)

• Go to Online Store > Themes > Customize

• Open any Product Page

• Click “Add Block” under Product Information

• Select “Gift Message” by Giftnote

• The button will appear on the page

• Click the block to update:

  • Button text

  • Font and colors

  • Add custom CSS if needed

Exclude Widget on Certain Products

• Use the Exclusion Tag setting

• Add this tag to any product in Shopify where you don’t want the widget to appear

Using a Manual Snippet (Legacy Themes)
If your theme doesn’t support Theme Editor blocks, paste the following into your product.liquid file:

<template id="__NAME_OF_BUTTON__"> <style> /* ADD CSS HERE */ </style> </template> <giftnote-button data-styles="__NAME_OF_BUTTON__" data-add="Add a gift message" data-edit="Edit gift message" ></giftnote-button> 

Need help? Email support@giftnote.com

2. Enable the Popup: App Embed

• In your Theme Editor, go to App Embeds

• Toggle on “Giftnote Control Panel”

• Click Save

This enables the popup to collect the gift message when the button is clicked.

3. Customize the Popup in the Giftnote App

In the Control Panel inside the Giftnote app, you can customize:

• Message copy

• Logo and branding

• Colors

• Enable/disable delivery method (email, SMS, on delivery or ahead of time)

4. Add the Widget to the Cart Page

Via Theme Editor
If your theme supports it:

• Navigate to your Cart Page in Theme Editor

• Follow the same steps as for the Product Page

Using a Manual Snippet
If Theme Editor doesn’t support block placement:

<template id="__NAME_OF_BUTTON__"> <style> /* ADD CSS HERE */ </style> </template> <giftnote-button data-styles="__NAME_OF_BUTTON__" data-add="Add a gift message" data-edit="Edit gift message" ></giftnote-button> 

5. Add to Cart Drawer

Most themes and apps (e.g. Rebuy) require a manual install:

• Add the snippet below into your cart-drawer.liquid or equivalent

<template id="__NAME_OF_BUTTON__"> <style> /* ADD CSS HERE */ </style> </template> <giftnote-button data-styles="__NAME_OF_BUTTON__" data-add="Add a gift message" data-edit="Edit gift message" ></giftnote-button> 

Contact support@giftnote.com if you need help targeting the right location

Troubleshooting

If the widget:

• Doesn’t appear

• Conflicts with another app

• Has styling issues

• Doesn’t open the popup

Reach out to support@giftnote.com with your theme name and store URL. We'll jump in and help you fix it quickly.