> For the complete documentation index, see [llms.txt](https://orbit-b2b.gitbook.io/orbit-b2b-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://orbit-b2b.gitbook.io/orbit-b2b-docs/b2b-customer-portal/design.md).

# Portal design customization

The portal pages (`/portal/orders` and `/portal/reorder`) ship with a clean default theme that mostly inherits your store's body font. For brands that want tighter visual control, the **Design** tab gives you every color, border radius, and an escape-hatch for custom CSS.

## Where to edit

**Apps → Orders → Reorder Settings → Design tab.**

The page splits left (controls) / middle (live preview) — change a color on the left, the preview on the right updates instantly. Click Save at the top when you're happy.

## Design tokens

| Group            | Tokens                                                                                       |
| ---------------- | -------------------------------------------------------------------------------------------- |
| **Page chrome**  | Page background, Heading color, Muted text color, Border color, Card border radius           |
| **Buttons**      | Primary background, Primary text, Secondary background, Secondary text, Button border radius |
| **B2B badge**    | Badge background, Badge text                                                                 |
| **Error states** | Banner background, Banner text, Banner border, Failed-row background, Failed-row border      |

All tokens are stored as CSS custom properties under `:root` and injected at page render. Customer browsers never download a separate stylesheet — the variables ship inline.

## Custom CSS escape hatch

For anything not exposed via tokens (typography weights, hover states, exotic layouts), use the **Custom CSS** text area. Whatever you paste appends after the design-variables block, so it can override anything above.

Use selectors prefixed with `.orb2b-reorder-*`:

* `.orb2b-reorder-page` — the page wrapper
* `.orb2b-reorder-order-row` — each row on the orders list
* `.orb2b-reorder-item` — each line item on the reorder preview
* `.orb2b-reorder-thumb` — product thumbnail
* `.orb2b-qty-stepper` — quantity stepper widget
* `.orb2b-btn--primary` / `.orb2b-btn--secondary` — buttons

### Examples

Centered page with bigger max-width:

```css
.orb2b-reorder-page { max-width: 1100px; }
```

Hide product images on cards:

```css
.orb2b-reorder-thumb { display: none; }
.orb2b-reorder-item { grid-template-columns: 24px 1fr auto auto; }
```

Brand-color CTA hover:

```css
.orb2b-btn--primary:hover {
  background: #1a1a2e !important;
  transform: translateY(-1px);
  transition: all .15s ease;
}
```

## Live preview parity

The admin preview uses the same CSS variables + same class names as the live storefront pages — so what you see in the preview matches what the customer sees pixel-for-pixel. Updates apply live; you don't have to deploy or refresh storefront.

## What the customer sees

**`/portal/orders`:**

* Header: "My orders" (translatable per locale)
* Filter toggle: "B2B only" (translatable)
* One row per order: order name, date, total, B2B badge, Reorder button
* Empty state if customer has no orders

**`/portal/reorder?order=<id>`:**

* Header: "Reorder items" (translatable) + order name + date
* Optional error banner (if some items couldn't be added)
* One row per item: checkbox, thumbnail, name + variant + price, qty stepper, status label
* Footer: Selected count + total + "Add selected to cart" button

The price on each item uses the customer's current B2B price (wholesale + volume tiers), not the historical order price.

## Next

* [Customize the email template](/orbit-b2b-docs/b2b-customer-portal/email-template.md)
* [Schedule (when reminders fire)](/orbit-b2b-docs/b2b-customer-portal/schedule.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://orbit-b2b.gitbook.io/orbit-b2b-docs/b2b-customer-portal/design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.