1. Customising your gift message widget
How to customize the gift message widget's wording and CSS styling, including where each setting lives since the September update.
Written By Giftnote Team
Last updated About 1 hour ago
You can change the wording, the colours and the layout of the gift message widget without touching your theme code. Most of it lives in the Giftnote app. A few options live in your Shopify theme editor, on the Giftnote Control Panel app embed.
Changing the wording
Every piece of customer-facing text in the widget is editable in your widget design. This includes the widget title and description, the add and edit button labels, the pop-up title, field labels and example text, and the delivery-method labels.
Edit the wording here rather than overriding it with CSS. Text set in the design stays correct across widget updates; text faked with CSS breaks the moment the markup changes.
Write for your own customers. The default copy is deliberately generic. Merchants get better completion rates when the button says something specific to their store, such as Add a handwritten-style note or Send this as a gift.
If you are not on Shopify Plus, use the design's text fields to explain shipping and contact expectations on the earlier step, since you cannot edit the checkout itself.
Changing colours and styling
Your theme settings include a Modal Styling (CSS) field, described as Apply custom CSS rules to the modal. Anything you put here applies to the gift message modal.
The modal's root element is #giftnote-modal. Target elements inside it from there.
A worked example
/* Match the modal to your brand */
#giftnote-modal {
font-family: "Your Brand Font", -apple-system, sans-serif;
}
#giftnote-modal button[type="submit"] {
background-color: #101219 !important;
border-radius: 4px !important;
}Let an AI assistant write the CSS for you
Copy this prompt into ChatGPT or Claude, fill in the bracketed parts, and paste what it returns into Modal Styling (CSS).
I sell on Shopify and use the Giftnote app. I want to restyle Giftnote's gift message
pop-up to match my brand. I'll paste your CSS into the "Modal Styling (CSS)" field on the
Giftnote Control Panel app embed in my Shopify theme editor.
My brand:
- Store URL: [your store URL] (if you can browse, look at my store for fonts and colours)
- Font: [font name, only one my store already loads]
- Button colour: [hex], button text colour: [hex]
- Corner style: [square / slightly rounded / rounded]
How the pop-up is built:
- Everything sits inside #giftnote-modal. The card is #content.
- Heading #giftnote-modal-title, intro text #giftnote-modal-description.
- Field boxes: #to-field, #from-field, #message-field, #email-field, #phone-field,
#date-field, #time-field. Inputs are inside them.
- Delivery method tabs: #method button. The selected one has .active.
- Save button: #content #save-button. Close: #close-button.
Rules:
- Only use the IDs above. Don't target generated utility classes.
- Add !important to every declaration.
- If you draw a border on a field box, also set outline: none and box-shadow: none on
the input inside it, or a blue box appears inside the field when it's selected.
- Keep text contrast at WCAG AA or better.
- Don't hide or restyle #powered (the "Powered by Giftnote" line).
Give me one complete CSS block I can paste in, with a short comment above each part.Paste the complete block each time you make a change, rather than appending fragments. Keep a copy outside the admin field so you always have the current version.
Rules that will save you time
Use !important liberally. The widget carries its own utility classes, and specificity conflicts are the most common reason a rule appears to do nothing.
Test in a private window. Settings are cached, so a stale page is the second most common reason a change looks like it failed.
Check your rule actually applied. View the page source and look for your CSS in the injected style block. If it is missing, the field did not save it. If it is present but not applying, it is a specificity problem.
Settings in your theme editor (Giftnote Control Panel)
In Shopify, go to Online Store → Themes → Customize, open App embeds and expand Giftnote Control Panel. The toggle next to it turns Giftnote on for the whole theme. If it's off, no gift message widget shows anywhere in your store.
Seeing "The metaobject definition required for this setting is not available" under Widget design? Leave Widget design empty. Your widget uses the design from the Giftnote app, which is what most stores want. If you need a different design on one theme, email support@giftnote.com.
Developer options
Leave these alone unless a developer asked you to change them.
Can I remove the "Powered by Giftnote" branding?
It depends on the surface.
On the checkout extension: no. Shopify controls that surface, so the branding there cannot be removed.
On the popup widget and the Multi Gift portal: removing "Powered by Giftnote" is available on the Professional plan. If you're not sure what's possible on your setup, chat with us using the chat button in the help centre or in the app, or email support@giftnote.com, and tell us which widget version you are running.
Changing where the widget appears
Widget placement is set in your theme editor rather than in CSS. Common placements are the product page, the cart drawer and, on Shopify Plus, the checkout itself.
Placement is worth more attention than styling. Moving the widget into the cart drawer has resolved conflicts with other apps for several merchants, and it often lifts completion because the customer has already decided to buy.
If another app's widget is colliding with Giftnote's on the product page, changing placement usually fixes it faster than CSS.
Frequently asked questions
Will my CSS survive a Giftnote update?
Rules targeting #giftnote-modal and stable ids are reliable. Rules targeting generated utility classes can break when the widget updates. Re-check your styling after any significant release.
Can I change the widget layout, not just its appearance?
No. CSS restyles what is there. Structural changes need the custom widget implementation, which is a developer route.
Can I use different styling on mobile?
Yes. Standard media queries work inside the Modal Styling field.
Nothing I put in Modal Styling has any effect. What should I check?
Confirm you saved the theme settings, clear your cache, test in a private window, and check the injected style block in the page source. If your CSS is absent from that block, the field is not receiving it and support should look.
Can I hide the widget on certain products with CSS?
Use product exclusions instead. See the separate article.