Is it possible to change the header color in the Shopping Hub?

Abhishek118 · 3 weeks ago

Hi Team,
Could you please confirm if it’s possible to update the theme or color of the header in the Shopping Hub? If yes, could you share the steps or process to do so?

For reference, please see the screenshot below.

Sarthak Kashyap · 3 weeks ago

Hi @Abhishek118 ,

Try to check below documentations maybe it will help you

https://www.servicenow.com/docs/bundle/washingtondc-source-to-pay-operations/page/product/sourcing-p...

https://www.servicenow.com/community/developer-forum/how-do-i-change-the-logo-and-branding-of-shoppi...

Please mark my answer correct and helpful if this works for you

Thanks and Regards,

Sarthak

nishant3101 · 3 weeks ago

Hi,

I did some research on this, and it looks like the “Apply Template” button in Project Workspace is not a classic UI Action — so changing its label via UI Action / Declarative Assignment won’t work. Most Workspace-buttons (and other UI shell elements) are defined via the Next Experience UI Framework (UI Builder / Action Sets / Theme styling). Because of that, the label or styling must be changed through those.

Here’s how you can customize the header / theme (or colors) — and a useful documentation link so you / others can explore further.

✅ How to update header/theme in ServiceNow

Use a custom Theme (for Next Experience)
- Navigate to Now Experience Framework → Themes in your instance. ServiceNow+2ServiceNow+2
- Create a new Theme (or clone an existing one). In the Theme you can override color variables and style definitions. (ServiceNow)
- In particular, you can override the CSS custom property --now-unified-nav_header--background-color to set a new header background color. (ServiceNow)
- Once the Theme is defined, apply it to your experience (e.g. Shopping Hub / Workspace) in UI Builder → Edit Experience Settings → Branding and Theming. (ServiceNow)
If using a portal or older UI (UI16 / Service Portal / Employee Center)
- The older theming method (like via Branding Editor or Basic Configuration UI16) applies only for legacy UI (not Next Experience). (ServiceNow)
- For Next Experience (your screenshot suggests a “modern” style), these old methods won’t apply — so the Theme/UX Style route is needed.
Customize styles via UX Style records (if needed)
- You can create a custom UX Style (table sys_ux_style) based on existing colors JSON. Then modify the header color variable (see step above). (ServiceNow)
- Link that style to a Theme (table sys_ux_theme) and apply it via system property glide.ui.polaris.theme.custom (if you’re doing a global override). (ServiceNow)

📚 Documentation / Reference

Official doc: Configuring Next Experience with Theme Builder — describes how to create/apply custom Themes to Workspace or Portal experiences. (ServiceNow)
Official doc: Customize your Shopping Hub theme — useful if you are working with Shopping Hub (since that appears to be your scenario). (ServiceNow)
Community-driven guidance: “How to change the header’s background color in the Next Experience UI” — with concrete steps to override --now-unified-nav_header--background-color. (ServiceNow)

nishant3101 · 3 weeks ago

Hi,

I did some research on this, and it looks like the “Apply Template” button in Project Workspace is not a classic UI Action — so changing its label via UI Action / Declarative Assignment won’t work. Most Workspace-buttons (and other UI shell elements) are defined via the Next Experience UI Framework (UI Builder / Action Sets / Theme styling). Because of that, the label or styling must be changed through those.

Here’s how you can customize the header / theme (or colors) — and a useful documentation link so you / others can explore further.

✅ How to update header/theme in ServiceNow

Use a custom Theme (for Next Experience)
- Navigate to Now Experience Framework → Themes in your instance.
- Create a new Theme (or clone an existing one). In the Theme you can override color variables and style definitions.
- In particular, you can override the CSS custom property --now-unified-nav_header--background-color to set a new header background color.
- Once the Theme is defined, apply it to your experience (e.g. Shopping Hub / Workspace) in UI Builder → Edit Experience Settings → Branding and Theming.
If using a portal or older UI (UI16 / Service Portal / Employee Center)
- The older theming method (like via Branding Editor or Basic Configuration UI16) applies only for legacy UI (not Next Experience).
- For Next Experience (your screenshot suggests a “modern” style), these old methods won’t apply — so the Theme/UX Style route is needed.
Customize styles via UX Style records (if needed)
- You can create a custom UX Style (table sys_ux_style) based on existing colors JSON. Then modify the header color variable (see step above).
- Link that style to a Theme (table sys_ux_theme) and apply it via system property glide.ui.polaris.theme.custom (if you’re doing a global override).

📚 Documentation / Reference

Official doc: Configuring Next Experience with Theme Builder — describes how to create/apply custom Themes to Workspace or Portal experiences.
Official doc: Customize your Shopping Hub theme — useful if you are working with Shopping Hub (since that appears to be your scenario).
Community-driven guidance: “How to change the header’s background color in the Next Experience UI” — with concrete steps to override --now-unified-nav_header--background-color.

likhithsrinivas · a week ago

Hi @Abhishek118

As stated in the product documentation below, ShoppingHub theme variables are sourced from the "ShoppingHub Portal Theme" record in sys_ux_theme.

To update the Header color in ShoppingHub, open the "PSM Overrides" UX style record under ShoppingHub Portal Theme and change "--now-canvas-menu--background-color" to your preferred color.

Product doc -> https://www.servicenow.com/docs/bundle/washingtondc-source-to-pay-operations/page/product/sourcing-p...