Commmerce Docs
← Web Components

Web Components · Header

<mmm-header-logo>

The brand logo. Renders an image (when logo is a URL) or a styled text wordmark (otherwise). Reads from CommmerceThemeSettings.branding.brandLogo by default; every attribute below overrides the theme setting inline.

Overview

Two display modes are auto-selected: an inline logo attribute that looks like a URL renders an <img>; anything else renders as text. When the attribute is omitted, the type comes from brandLogo.logoType in theme settings, falling back to a sample-store placeholder image.

The element auto-rebuilds when the editor dispatches commmerce:theme-settings-updated, so live logo edits show up without a reload.

When to use

  • Inside <mmm-header> as the home-link brand mark.
  • In the footer or anywhere else the brand needs to appear.
  • For text-only wordmark brands — set logo="Brand Name".
  • For image brands — set logo="https://…/logo.svg".

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-header-logo
  logo="https://cdn.commmerce.com/sample-store/logo.svg"
  logo-width="9.375rem"
  logo-height="3.75rem"
  href="/">
</mmm-header-logo>

Attributes

AttributeTypeDefaultDescription
logostringtheme / placeholderURL → image mode. Plain string → text mode. When omitted, reads brandLogo.logoUrl or brandLogo.logoText from theme settings.
logo-widthstring9.375remImage width (image mode). Theme default: brandLogo.logoWidth + logoWidthUnit.
logo-heightstring3.75remImage height. Theme default: brandLogo.logoHeight + logoHeightUnit.
logo-object-fitstringcontainCSS object-fit for the image — contain, cover, fill, none, scale-down.
logo-altstringBrand LogoAlt text for screen readers (image mode).
font-sizestring2.75remWordmark font size (text mode). Theme default: brandLogo.logoTextFontSize.
font-colorstring#000000Wordmark colour (text mode).
font-familystringinheritWordmark font-family. Theme default: brandLogo.logoTextFontFamily.
font-weightstring600Wordmark font-weight.
letter-spacingstringnormalWordmark letter-spacing.
text-transformstringnoneCSS text-transform — uppercase, lowercase, capitalize, none.
tablet-font-sizestring1.25remTablet (≤1024px) override for wordmark font size.
mobile-font-sizestring1.125remMobile (≤625px) override for wordmark font size.
hrefstring/Anchor href the logo wraps.
targetstring_selfAnchor target — _self, _blank, _parent, _top.

Live preview

store sample-store tag <mmm-header-logo>

Examples

1. Theme-driven (no overrides)

<mmm-header-logo></mmm-header-logo>

Reads logo, dimensions, alt, and text styling straight from the editor's Branding settings.

2. Text wordmark with custom styling

<mmm-header-logo
  logo="ACME & Co."
  font-size="1.5rem"
  font-weight="700"
  letter-spacing="0.06em"
  text-transform="uppercase"
  font-color="#ffffff">
</mmm-header-logo>

3. Image logo with responsive sizes

<mmm-header-logo
  logo="https://cdn.commmerce.com/sample-store/logo.svg"
  logo-width="200"
  logo-height="60"
  logo-object-fit="contain"
  href="/"
  tablet-font-size="1.5rem"
  mobile-font-size="1.125rem">
</mmm-header-logo>