Customize the InStore POS UI

InStore Add-On
Ask about this Page
Copy for LLM
View as Markdown

Customize the visual style and layout behavior of the InStore POS with tenant-level theme configuration.

How POS UI customization works

The InStore POS uses a theme to control visual decisions such as colors, typography, spacing, component styles, and layout behavior. You store the theme as JSON with the InStore Theming API. The POS fetches the stored theme when it loads and applies it across the POS application.

The theme follows the MUI theme structure and includes InStore-specific fields for POS layout behavior. You can update the theme without changing application code, but you should treat the theme payload as implementation configuration and keep your own backup of each applied payload.

What you can customize

You can customize the following areas:

  • Color palette and semantic color tokens.
  • Typography, spacing, shape, and breakpoints.
  • MUI component defaults, slot styles, and variants.
  • POS-specific surfaces that expose instore-* class hooks.
  • Responsive layout settings such as header visibility, footer visibility, and sidebar behavior.

Due to its hosted nature, the InStore POS supports only the theming strategies, fields, and components described in this documentation. Do not add custom theme tokens, components, variants, or other non-standard theming strategies. Non-standard theming is at risk of being overwritten by updates of the InStore POS.

For the complete list of theme fields, see Theme payload fields. To map a visible POS surface to the theme path that controls it, see the POS style reference.

Theme application model

The InStore POS ships with a bundled default theme. A tenant theme stored through the Theming API overlays that default theme. Values you set in the tenant theme apply; values you omit fall back to the bundled default. A components.MuiX block is handled differently from most fields: when you send a component block, the whole block is replaced.

Changes take effect the next time the POS loads. The Theming API stores only the active theme for a tenant, so keep your own version history of request and response payloads.

Next steps

Use the following resources to continue customizing the InStore POS UI:

  • Run InStore POS API requests to set the API host, Project, and tenant, get an access token, and send requests to InStore POS APIs.
  • Theme API reference to review the GET, PUT, and PATCH theme endpoints, request examples, response behavior, and validation rules.
  • Customize styles and behavior to create and update a theme with palette tokens, MUI component overrides, responsive layout tokens, and POS style hooks.
  • POS style reference to map POS surfaces to their class hooks, MUI components, slots, and behavior settings.
For general MUI concepts, see the MUI theming guide.