Custom CSS

Growth plan and up

The editor's colour, font and layout settings cover most stores. If you want more control, you can add your own CSS to the return page. This is for people comfortable writing CSS.

Where to add it

1. In Falcon, go to Return page and click Customize.
2. Open the Style tab.
3. Scroll to Custom CSS for return page.
4. Type or paste your CSS in the box.
5. Check the preview, then click Save.

The box takes up to 10,000 characters. Paste plain CSS only. Don't wrap it in <style> tags. Falcon removes them.

On the Free and Starter plans, the box is locked and shows an upgrade badge.

How your CSS is applied

Your CSS is added after Falcon's own styles, on every page of the return flow: sign-in, orders, each step, the exchange shop and the status page.

When the page runs inside your theme

With Page frame set to Inside your store theme, the return page sits inside your theme's layout. Falcon keeps the two apart, so your theme's styles don't change the return page, and the return page's styles, including yours, don't change your theme.

To do that, Falcon limits every rule to the return page area:

• Rules for html, body or :root apply to the return page area instead of the whole page.
• Every other selector only matches elements inside the return page.
• Rules inside @media, @supports and @container are limited the same way.
• @keyframes and @font-face work as normal.
• Selectors that start with [dir=rtl] or [lang=...] still work, so you can write rules just for Hebrew or any other language.

This means you can't use custom CSS here to restyle your theme's header or footer. Use your theme editor for that.

When the page is full page

With Page frame set to Full page, the return page is a page of its own. Your CSS is applied as written.

Check both

The editor preview shows the page in full page style. If your return page runs inside your theme, open the live page with the eye icon to check your CSS there too.

Examples

Make headings tighter:

h1, h2 {
  letter-spacing: -0.01em;
}

A rule only for Hebrew:

[dir=rtl] h1 {
  font-family: Arial, sans-serif;
}

Class names can change

Falcon's own class names may change when the return page is updated. Keep custom CSS small, and check your return page after Falcon updates.

If you change plans

If your store moves to a plan without custom CSS, your return page stops using it. Your CSS is kept and comes back if you upgrade again.

Related

• Return page editor
• Return page overview
• Languages
• Plans and billing