Customising your gift message widget

Change the wording, colours and placement of the gift message widget without touching your theme code.

Written By Giftnote Team

Last updated About 17 hours ago

You can change the wording, the colours and the layout of the gift message widget without touching your theme code. There are three places to do it, and they control different things.

What you want to changeWhere to do it
The words shown to customersLanguage settings
Colours, spacing, fonts, hiding elementsModal Styling (CSS) in your theme settings
Where the widget appearsWidget placement in your theme editor

Changing the wording

Every piece of customer-facing text in the widget is editable in your language settings. This includes the button label, the modal heading, field labels, helper text and validation messages.

Edit the wording here rather than overriding it with CSS. Text set in language settings 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 language settings 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;
}

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.

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: it depends on your widget version and your plan. Contact support, tell them which widget version you are running, and they will confirm what is possible on your setup.

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.

  • 2. Add Gift Message Widget
  • Custom Widget for Messages
  • Customizing SMS
  • Hide the gift message widget on specific products
  • Customising the look of your Multi Gift portal