1. Customising the look of your Multi Gift portal
CSS techniques to customize your Multi Gift portal's look, including the native toggle and CSS option for hiding the recipient toolbar.
Written By Giftnote Team
Last updated About 1 hour ago
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 the Giftnote app under Settings → Multi Gifts: select Edit on your storefront, open the Branding tab, and scroll to Custom CSS in the Theme card.
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 is rejected on save.
The field rejects anything that could run a script, such as a literal <, @import or expression(). Ordinary CSS is allowed, including the child combinator > and the sibling combinators ~ and +.
If your CSS will not save, check it for these patterns first.
If a rule saves but silently does nothing, rewrite any combinator as a descendant selector and test again. Where you would write div > .item, write div .item and add a more specific class if you need the precision.
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.
There is now a native toggle for this. On your storefront's Branding tab, the Show Recipient Toolbar switch in the Display card hides the same search/filter/counter row shown below without any CSS. Use the CSS approach only if you need to hide it conditionally (e.g. only when empty) rather than always — the native toggle is all-or-nothing.
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 literal <, so it saves. If it does not apply, the toolbar simply stays visible and nothing breaks.
Restyle the order review page copy
Most storefront copy no longer needs CSS. Edit it first on the storefront's Language & Content tab (Step 3 — Checkout, Order Confirmation, Buttons). If the text you want isn't there, 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?
Yes. Removing the "Powered by Giftnote" branding is available on the Professional plan.
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.