Theme Editor - Header bar - TWICE Commerce

Colors

Setting	Inherits from	Default	Description
Background	Global Background	`#FFFFFF`	Background fill of the header.
Text	Global Text	`#111826`	Text colour for navigation links and the store name.
Icon	—	`#111826`	Cart, account, and menu icons. Always an explicit value; does not inherit.
Border	Global Border	`#E4E6EB`	Bottom border separating the header from page content.

Inheritance

Background, Text, and Border inherit their value from the corresponding global colour on the Colors panel by default. Set a value to override the global colour for the header only.

Icon colour is independent — it always has an explicit value and does not fall back to a global colour.

Reset

Click Reset on the Header bar panel to restore all four settings to their defaults. Background, Text, and Border return to inheriting the global colours. Icon resets to #111826.

CSS variables

Every header bar colour maps to a CSS variable you can reference in Custom CSS:

:root {
  --storefront-header-background-color: #FFFFFF;
  --storefront-header-text-color: #111826;
  --storefront-header-icon-color: #111826;
  --storefront-header-border-color: #E4E6EB;
}

CSS variables always output the resolved value. If a setting inherits from the global colour, the variable reflects the current global value — not null or empty.

Welcome to TWICE Docs

Navigating in TWICE

Understand the system

Theme Editor - Header bar

Colors

Inheritance

Reset

CSS variables

Colors

Custom CSS

​Colors

​Inheritance

​Reset

​CSS variables

​Related

Colors

Custom CSS

Colors

Inheritance

Reset

CSS variables

Related