Customising the look of your Multi Gift portal

Your Multi Gift portal has a custom CSS field that lets you restyle the ordering pages, hide elements you do not want, and match the portal to your brand.

You will find it in your Giftnote admin under the shop settings for your portal.

Before you start: two rules that will save you an hour

Rule 1. Paste the whole block, every time.
The custom CSS field holds one block of CSS. Adding new rules means pasting the complete, updated block, not appending a fragment. Keep your current CSS in a text file so you always have the full version to work from.

Rule 2. Some CSS characters do not survive saving.
The custom CSS field escapes angle brackets. Any rule containing < or > will not apply after saving.

In practice this rules out:

• the child combinator >, as in div > span
• the sibling combinators ~ and +

Use descendant selectors and class names instead. Where you would write div > .item, write div .item and add a more specific class if you need the precision.

If a rule silently does nothing after you save, check it for these characters first.

How do I check my CSS actually applied?

View the page source and find the injected <style> block. If your rule is missing from it, the field stripped it on save. If the rule is present but not taking effect, it is a specificity problem, and adding !important usually resolves it.

Always test in a private or incognito window. Portal settings are cached, so a stale page is the second most common reason a change appears not to have worked.

Common customisations

Each block below is complete and can be pasted on its own. To use more than one, paste them together as a single block.

Hide the recipient toolbar when the list is empty

When a buyer first opens the portal, the search box, the filter and the 0/0 counter all show above an empty recipient list. Merchants have reported that this reads as broken.

/* Hide the search and filter toolbar while no recipients have been added */
div.space-y-0:has(div.border-dashed.flex-col) #recipient-search {
  display: none !important;
}

This uses :has(), which is supported in current browsers and contains no angle brackets, so it survives saving. If it does not apply, the toolbar simply stays visible and nothing breaks.

Restyle the order review page copy

Text on the approval and review pages can be replaced by zeroing the font size and using ::after with your own content.

Useful selectors

Verified against live portals in September 2026:

The distinction between the empty state and the no-results state matters. Targeting div.border-dashed alone will hide your search bar while somebody is searching.

Frequently asked questions

Can I change the portal layout, not just the styling?
No. The CSS field restyles what is there. Structural changes are a product change, so send the request to support and it will be considered for the roadmap.

Will my CSS break when Giftnote updates the portal?
It can. Class names in the portal can change between releases. Check your customisations after any significant update, and keep your CSS block saved somewhere outside the admin field.

Can I hide the Giftnote branding?
Branding on the gift message widget is controlled by the modal styling field in your theme settings, separately from the portal CSS.

Can I use custom CSS to stop Google indexing the portal?
No. CSS cannot control indexing. See the separate article on why the portal does not appear in search results.

Related articles

• Onboarding Multi Gift
• Multi Gift: fixing the most common order problems
• Why the Multi Gift portal does not appear in Google