Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer-brand>

The brand block in the footer — an image logo (URL) or a styled text wordmark. Same theme-aware fallback chain as <mmm-header-logo>; lives in the footer's layout column.

Overview

Reads CommmerceThemeSettings.branding.brandLogo by default. The inline brand-logo attribute overrides the theme; if the value looks like a URL the element renders an <img>, otherwise a text node. Live-updates on commmerce:theme-settings-updated.

When to use

  • Inside <mmm-footer> as a brand mark next to the menu columns.
  • For dual-logo themes — pair with a different inverted logo asset in the footer.

Quick start

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

<mmm-footer-brand
  brand-logo="https://cdn.commmerce.com/sample-store/logo-white.svg"
  brand-logo-width="180"
  brand-logo-height="48">
</mmm-footer-brand>

Attributes

AttributeTypeDefaultDescription
brand-logostringtheme / placeholderURL → image mode, plain string → text mode. When omitted, reads from theme brandLogo.logoUrl / logoText.
brand-logo-widthnumber150Image width (px) — applied via inline style.
brand-logo-heightnumber60Image height (px).
brand-logo-object-fitstringcontainCSS object-fit — contain, cover, fill, none, scale-down.
brand-logo-altstringBrand LogoAlt text (image mode).
brand-logo-font-familystringinheritWordmark font-family (text mode).
brand-logo-font-weightstringboldWordmark font-weight.
brand-logo-text-font-sizestring22pxWordmark font-size.
brand-logo-text-colorstringblackWordmark colour.
brand-logo-letter-spacingstringnormalWordmark letter-spacing.
brand-logo-text-transformstringuppercaseWordmark text-transform.

Events

No custom events. Listens to commmerce:theme-settings-updated on window to refresh.

Live preview

store sample-store tag <mmm-footer-brand>

Examples

1. Theme-driven

<mmm-footer-brand></mmm-footer-brand>

2. Text wordmark for dark footer

<mmm-footer-brand
  brand-logo="SAMPLE STORE"
  brand-logo-text-color="#fff"
  brand-logo-text-font-size="28px"
  brand-logo-letter-spacing="0.2em">
</mmm-footer-brand>

3. Image with explicit dimensions

<mmm-footer-brand
  brand-logo="https://cdn.commmerce.com/sample-store/logo-white.svg"
  brand-logo-width="200"
  brand-logo-height="56"
  brand-logo-object-fit="contain"
  brand-logo-alt="Sample Store">
</mmm-footer-brand>