Chrome stable classes

The platform supplies default parts for the brand, cart, user menu, promo bar, chat, locale banner and product cards. Themes render them through the SDK or through the platform blocks in their header and footer. Restyle these parts through the stable classes below. The classes exist only on the platform's parts, not on markup a theme or merchant writes.

Each class is a bare kebab-case token on the element's className. It carries no styling of its own and is part of the theme contract: the platform may change the Tailwind utilities around it, never the token.

The override patternCopy Anchor Link

Write the rules in your theme's src/styles/theme.css, unlayered, with :where():

:where(.header-brand) {
  letter-spacing: 0.08em;
}

:where(.cart-count) {
  background: var(--color-surface);
  border-color: var(--color-line);
}

Two things make this work:

• Unlayered CSS beats Tailwind. The platform's utilities live in @layer utilities. An unlayered rule wins against every layered one regardless of specificity, so you need neither !important nor a more specific selector.
• :where() keeps specificity at 0. Your rule stays the easiest thing in the cascade to override, so a later rule of your own, or a state class on the same element, still wins. Source order becomes the override mechanism.

header-brand sits on the link drawn by Brand and Logo from @poltura/theme-sdk/chrome and by the logo block. Those also render in most theme footers, so a bare .header-brand rule reaches the footer logo too. Scope footer-only rules through your own footer class.

The classesCopy Anchor Link

The full list of chat widget classes is on Chat widget chrome.

Header statesCopy Anchor Link

The header is a section group (layout/header.json), so its pieces are elements that carry the merchant's own style settings rather than class hooks. Its scroll state is exposed as attributes for CSS:

:where([data-theme-chrome='header'][data-header-scrolled]) [data-header-section] {
  box-shadow: 0 1px 0 var(--border);
}

useHeaderVisibility() from @poltura/theme-sdk/chrome reads the same scrolled and hidden states in code.

Floating elementsCopy Anchor Link

Anything a theme pins to the bottom of the viewport (a sticky buy bar, a floating button, its own banner) adds three offsets to its bottom, each 0px when unset:

:where(.my-sticky-buy) {
  position: fixed;
  bottom: calc(
    var(--banner-bottom-offset, 0px) + var(--preview-bar-offset, 0px) +
      var(--poltura-editor-inset-bottom, 0px)
  );
}

The platform's chat launcher, back-to-top button, banners and cookie bar already do this. --poltura-editor-inset-bottom exists only inside the Customizer, so the live storefront is unchanged. Without it, an element pinned to the bottom sits under the Customizer's tab bar or settings sheet on a phone.

What is not hookedCopy Anchor Link

The header's menu, search and language blocks, MainNav, MobileNav, MegaMenu, MobileMenu, HeaderSearch and LocaleSwitcher carry no class hooks. Style them through the element's style settings, the className and classes props the SDK parts take (see the chrome, navigation and search references), the header attributes above, or their containers.

NextCopy Anchor Link

• Header mega-menus: wide header dropdowns built from blocks.
• Chat widget chrome: every class and part of the chat widget.