3. Add Gift Message Widget

Use this guide to install and customize the Giftnote gift message widget on your product pages, cart page and cart drawer. You can install it with the Shopify theme editor or manually with a snippet. It covers the Add the gift widget to your product page step of the Setup guide on the Giftnote Home page.

1. Add the widget to a product page (Online Store 2.0)

Using the theme editor (recommended)

• Go to Online Store > Themes > Customize. You can also click Edit on theme (or Add to theme, if you haven't added it yet) next to Message (Product page) on the Theme card in Settings → Gift Orders in the Giftnote app.
• Open any Product Page
• Click Add block under Product Information, type giftnote in the search box and open the Apps tab
• Select Gift Order Message (Giftnote: Engine for Gifting). Don't use Legacy Gift Card Message. That's an older gift card block.
• The button will appear on the page
• Click the block to update button text, font and colors, or add custom CSS

Exclude widget on certain products

• Use the Exclusion tags setting on the block
• Add this tag to any product in Shopify where you don't want the widget to appear

You can also hide the gift message option from the Giftnote app: Settings → Gift Orders → Advanced settings → Hidden products. See "How do I hide the gift message widget on specific products?".

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>

Change __NAME_OF_BUTTON__ to any name you like (use the same name in both places). Add your own CSS inside the <style> tag. data-add and data-edit set the button text before and after a message is added. The Giftnote Control Panel app embed (step 2) must be switched on for the button to open the popup.

Not sure where to paste it? Copy this prompt into ChatGPT or Claude, attach or paste your theme file, and it will tell you where the snippet goes:

I run a Shopify store on an older theme that doesn't support app blocks.
I need to add the Giftnote gift message button to my [product page / cart page / cart drawer].
Here is the snippet I need to add:
[paste the Giftnote snippet]
Here is my theme file ([product.liquid / cart.liquid / cart-drawer.liquid]):
[paste the file]
Tell me exactly where to paste the snippet so the button shows [just above the Add to cart button / below the cart items].
Don't change any other code. Return the full edited section with the snippet in place.

Duplicate your theme before editing code, so you can go back if something breaks. If you'd like help, chat with us using the chat button in the help centre or in the app, or email support@giftnote.com, with your theme name and store URL.

2. Enable the popup: app embed

• In your Theme Editor, go to App Embeds
• Toggle on "Giftnote Control Panel" and click Save

This enables the popup that collects the gift message when the button is clicked.

Style the pop-up to match your brand

Click Giftnote Control Panel in App Embeds to open its settings. The Modal Styling (CSS) field lets you change the pop-up's fonts, colours, borders and buttons.

You don't need to write the CSS yourself. Copy the prompt below into ChatGPT, Claude or another AI assistant, fill in the brackets, then paste the CSS it gives you into Modal Styling (CSS) and click Save.

I use the Giftnote gift message app on my Shopify store. Write custom CSS for the Giftnote gift message pop-up so it matches my brand. I'll paste it into the "Modal Styling (CSS)" field in the Giftnote app embed settings.

My store: [your store URL]

If you can browse the web, visit my store and match its fonts, colours, button style and corner rounding. Otherwise, use these:
- Heading font: [e.g. Playfair Display]
- Body font: [e.g. Poppins]
- Pop-up background colour: [e.g. #FFFFFF]
- Main text colour: [e.g. #111111]
- Button colour and button text colour: [e.g. #F97443 with #111111 text]
- Corner style: [square / slightly rounded / pill-shaped buttons]

How the pop-up is built:
- The pop-up card is #content. The outer wrapper is #giftnote-modal and the dimmed background behind it is #backdrop.
- Heading: #giftnote-modal-title. Intro text: #giftnote-modal-description.
- Input boxes: #to-field, #from-field, #message-field, #email-field, #phone-field, #date-field, #time-field. The text inside them is #content form input, #content form textarea and #content form select. Labels are #content form label.
- The delivery timing tabs are #method button. The selected tab has the class .active.
- The info box under the tabs is #methods.
- The save button is #save-button. Its text colour is set by #content .button-color.
- The close button is #close-button.

Rules:
- Only target the IDs above. Don't target utility classes such as .bg-white or .text-sm, because they can change when Giftnote updates.
- Add !important to every declaration, otherwise the pop-up's built-in styles will win.
- The input boxes draw their outline with box-shadow, not border. Style them with box-shadow: inset 0 0 0 1px [colour] and use :focus-within for the focused state.
- Only use fonts my store already loads. Don't add @import or font links.
- Keep all text readable against its background (WCAG AA contrast).
- Don't hide or restyle the "Powered by Giftnote" link.

Return one complete CSS block with short comments. After it, suggest a heading, intro line and save button label for the pop-up in my brand's voice.

Tips

• Paste the whole CSS block every time you make a change, and keep a copy outside Shopify.

• Check the result in a private browser window, because theme settings can be cached.

• Update the pop-up wording in the Giftnote app (see step 3), not with CSS.

For more detail, see Customising your gift message widget.

App embeds are switched on per theme. If you set Giftnote up in an unpublished copy of your theme first, check the embed is still on in that theme when you publish it.

3. Customize the popup in the Giftnote app

In the Giftnote app, go to Settings → Gift Orders and click Configure. On the Gift order designs page, open the design chosen for that surface under Where each design shows up (or click New design), then select the Theme, Checkout or Order status tab. From there you can customize:

• Message copy and language
• The default delivery method, and whether to hide the On Delivery option, the recipient phone field, or the widget for B2B customers

To turn delivery methods (Send Now, Send Later, On Delivery, On Fulfillment) on or off for the whole store, go to Settings → Gift Orders → Advanced settings.

The design has no colour or font controls. Set colours, font and light or dark style in your theme editor: App embeds → Giftnote Control Panel → Style settings. For anything more, use its Modal Styling (CSS) field. See "Customising your gift message widget".

The Giftnote Control Panel app embed also shows a default delivery method, Hide "On Delivery" and Hide phone input. The settings in your Giftnote design are the ones that apply, so change them in the app.

Logo, colours and fonts for notification emails are set at Settings → Notifications → Email design.

4. Add the widget to the cart page

Using the theme editor

If your theme supports it:

• Navigate to your Cart Page in the theme editor. On the Theme card in Settings → Gift Orders, the Message (Cart) row has an Add to theme button (Edit on theme once it's added).
• Follow the same steps as for the product page

Using a manual snippet

If your theme doesn't support block placement on the cart page, paste the same snippet into your cart template:

<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>

If you'd like help, chat with us using the chat button in the help centre or in the app, or email support@giftnote.com, with your theme name and store URL.

5. Add to cart drawer

Most themes and cart apps (for example Rebuy) need a manual install. In Settings → Gift Orders, the Message (Cart) row covers the cart page and cart drawer, but a cart drawer usually needs the snippet below rather than a theme editor block.

Add the snippet below into your cart-drawer.liquid file 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>

If you'd like help targeting the right location, chat with us using the chat button in the help centre or in the app, or email support@giftnote.com, with your theme name and store URL.

Using Rebuy Smart Cart? The setup happens in Rebuy. Use Rebuy's own Giftnote module first. If that doesn't suit your cart, open your Rebuy admin, go to Smart Cart › Widgets, add a Custom HTML widget where you want it, paste the <giftnote-button> snippet above into it, then save and publish your Smart Cart. See "Rebuy Integration" for both methods.

Troubleshooting

Is the widget installed?
In the Giftnote app, go to Settings → Overview. The Online store widgets card shows the Control Panel (the Giftnote Control Panel app embed) and each gift message widget, such as Message (Product page), as Active or Inactive, with Edit on theme or Add to theme and Help buttons. It only reflects your published theme. Changes on a draft theme appear once you publish it.

If the widget:

• Doesn't appear
• Conflicts with another app
• Has styling issues
• Doesn't open the popup

Chat with us using the chat button in the help centre (https://help.giftnote.com/en) or in the app, or email support@giftnote.com, with your theme name and store URL. We'll help you fix it quickly.

Related articles

• 4. Add eGift Cards
• 1. Customising your gift message widget
• 2. How do I hide the gift message widget on specific products?
• 4. Widget Not Appearing on My Store
• 7. Giftnote Go-Live Checklist