1. Customising the look of your Multi Gift portal
Restyle your Multi Gift storefront with the Custom CSS field: the two rules that stop CSS failing, how to check it applied, ready-made snippets, useful selectors and an AI prompt to write your own.
Written By Giftnote Team
Last updated About 1 hour ago
Your Multi Gift storefront (the ordering site your customers use) has a Custom CSS field. Use it to restyle pages, hide elements or match your brand more closely than the Branding tab's settings allow. CSS is the code that controls how a web page looks. If you don't write CSS, use the AI prompt below or ask your developer.
To find it, go to Settings → Multi Gifts in Giftnote, 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 field holds one block of CSS, and saving replaces it. To add a rule, paste your complete, updated block. Keep your current CSS in a text file so you always have the full version.
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 fine, including the combinators >, ~ and +. If your CSS won't save, check it for these first.
If a rule saves but does nothing, rewrite any combinator as a descendant selector and test again. For example, change div > .item to div .item, and add a more specific class if you need to.
Check your CSS applied
Open your storefront, view the page source and find the <style> block Giftnote adds. If your rule isn't in it, the field removed it on save. If the rule is there but has no effect, another style is winning: add !important to your rule.
Test in a private (incognito) window. Storefront settings are cached, so a normal window can show the old styling.
Common customisations
Each block below works on its own. To use more than one, paste them together as a single block.
You may not need CSS for this. The Show Recipient Toolbar switch (Branding tab, Display card) hides the search, filter and counter row completely. Use the CSS below only if you want to hide it while the list is empty and show it once recipients are added.
Hide the recipient toolbar when the list is empty
When a buyer first opens the storefront, the search box, filter and 0/0 counter show above an empty recipient list. Buyers can read this 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 current browsers support, and has no literal <, so it saves. In a browser that doesn't support it, the toolbar stays visible and nothing breaks.
Restyle the order review page copy
Change wording on the storefront's Language & Content tab first (Step 3 — Checkout, Order Confirmation, Buttons). If the text you want isn't there, you can replace text on the approval and review pages with CSS: set the original's font size to zero and add your own text with ::after and content.
Useful selectors
Verified against live portals in September 2026:
Keep the empty state and the no-results state apart. If you target div.border-dashed alone, the search bar disappears while someone is searching.
Write your CSS with AI
Paste this prompt into ChatGPT or Claude, fill in the brackets and use what comes back:
I'm restyling my Giftnote Multi Gift storefront (the gift ordering site for my Shopify store) with custom CSS. I'll paste your CSS into the Custom CSS field in Giftnote (Settings → Multi Gifts → Edit → Branding → Custom CSS).
My brand: [STORE NAME], [STORE URL]. Brand colours: [HEX CODES]. Fonts: [FONT NAMES]. If you can browse, look at my store and my storefront at [STOREFRONT URL] for style.
What I want to change: [DESCRIBE IT, e.g. "make the buttons square and dark green" or "hide the recipient search bar until a recipient is added"].
My current Custom CSS (keep it and add to it): [PASTE YOUR CURRENT CSS, OR WRITE "none"]
How the storefront is built:
- Recipient toolbar (counter, search, filter, total, review button): #recipient-search, also .stickySection
- Empty state, before any recipient is added: div.border-dashed.flex-col
- No search results state: div.border-dashed without flex-col
- Shared parent of the toolbar and the recipient list: div.space-y-0
- Other class names can change between releases, so use these selectors where you can.
Rules:
- Return ONE complete CSS block: my current CSS plus your changes. The field holds one block and replaces it on save.
- No literal < character, no @import and no expression(). The field rejects them.
- If a rule might not apply, use descendant selectors (div .item) instead of >, ~ or +.
- Add !important where the storefront's own styles might win.
- Keep text readable, with at least WCAG AA colour contrast.
- Don't try to change the page layout or search indexing. CSS can't do either.
Return only the CSS block, with a short comment above each rule saying what it does.Paste the whole block into the field each time, keep a copy outside Giftnote, and check the result in a private window.
Frequently asked questions
Can I change the layout, not just the styling?
No. CSS restyles what's already there. For layout changes, email support@giftnote.com and we'll consider it for the roadmap.
Will my CSS break when Giftnote updates the storefront?
It can, because class names can change between releases. Check your changes after each update, and keep your CSS saved outside Giftnote.
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 storefront?
No. CSS can't control indexing. See Why does the Multi Gift portal not appear in Google?.