> 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.