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
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:
Hide product images on cards:
Brand-color CTA hover:
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
Last updated
Was this helpful?