Everyone

Portal Builder

Use the portal builder in Opterius Commerce to customise the client-facing portal's hero, colour, navigation, and section visibility.

Last updated 1776211200

Portal Builder

Admin → Settings → Client Portal

The portal builder is the central place to customise everything clients see on the public portal home page — from the hero headline to which sections are visible. Changes are live immediately; clients see them on their next page load.


What the Portal Builder Controls

Control Description
Hero Title Large headline text on the public home page
Hero Subtitle Supporting text below the title
Primary / Accent Colour Hex value applied as CSS variable --pa to the entire portal
Navigation Links Custom links added to the top nav (see Navigation Links)
Section Visibility Show/hide individual portal sections (see Section Toggles)

Colour Picker

The colour picker writes to the branding_accent_color setting (shared with Admin → Settings → Branding). It accepts hex values directly or via the colour wheel UI.

The value is injected as a CSS variable on every portal page:

<style>:root { --pa: #6366f1; }</style>

All Tailwind components in the portal theme are built to reference --pa. Changing the colour here recolours every button, active nav item, link hover, and focus ring automatically via color-mix().

[!TIP] If your brand colour is very light (e.g. #f0f0f0), text on buttons may become unreadable. Test contrast after changing the colour — aim for at least a 4.5:1 contrast ratio on button text.


Hero Section

The hero is the first section visible to unauthenticated visitors on the portal home page (/).

  • Hero Title: Typically your tagline — e.g. "Reliable Web Hosting, Built for Professionals"
  • Hero Subtitle: One or two sentences expanding on the title

The hero section is controlled by the portal_show_hero toggle. If it is disabled, the portal home page begins with the next enabled section.


Auto-Injected Navigation Links

When certain sections are enabled (Knowledge Base, FAQ, Status Page, Announcements), Commerce automatically adds a corresponding nav link to the portal navigation. You do not need to add these manually.

[!IMPORTANT] If you manually add a nav link for the Knowledge Base while portal_show_kb is also enabled, the link will appear twice in the nav. Use the auto-inject or add it manually — not both.


Previewing Changes

  1. Save your changes in the builder.
  2. Open a new browser tab and visit / (the portal home).
  3. If you are logged in to the admin panel as a staff member, open an incognito tab to see the unauthenticated public view.

There is no "preview mode" — the builder writes directly to live settings. Work during low-traffic hours if making significant layout changes.


Related