Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer>

The footer container. Composes the brand, newsletter, menu, download-app, payment, social, and copyright sub-components — or, if you pass legacy attributes only, it auto-creates the sub-components for you. Either layout style works.

Overview

Two usage modes are both supported:

  • Composable (recommended) — drop the sub-component tags as children. <mmm-footer> renders the surrounding box and distributes data from window.PREFERENCES / store config to each child.
  • Legacy single-tag — set all the attributes on <mmm-footer> and it auto-creates the sub-components on first connect, forwarding the matching attributes into each child. Old themes keep working.

When to use

  • Every storefront page — the canonical site footer.
  • When you want a single attribute (navigation-id) to drive the footer menu from the editor.
  • When you want a background image or solid colour to span the entire footer.

Quick start

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

<mmm-footer background-color="#0e1011" text-color="#f5f5f5" navigation-id="footer">
  <mmm-footer-brand></mmm-footer-brand>
  <mmm-footer-newsletter>
    <mmm-footer-newsletter-email></mmm-footer-newsletter-email>
    <mmm-footer-newsletter-button></mmm-footer-newsletter-button>
  </mmm-footer-newsletter>
  <mmm-footer-menu></mmm-footer-menu>
  <mmm-footer-download-app></mmm-footer-download-app>
  <mmm-footer-payment></mmm-footer-payment>
  <mmm-footer-social></mmm-footer-social>
  <mmm-footer-copyright></mmm-footer-copyright>
</mmm-footer>

Container attributes

AttributeTypeDefaultDescription
background-colorstringyellowFooter background colour. Legacy alias: footer-background-color.
text-colorstringtheme primary textDefault text colour for footer content. Legacy alias: footer-content-text-color.
font-familystringtheme description fontFont-family for the entire footer. Legacy alias: footer-content-font-family.
paddingstring2.5rem 6.25remPadding around the footer interior. Legacy alias: footer-padding.
background-imagestring—Optional background image URL. Spans the entire footer.
background-sizestringcoverCSS background-size.
background-positionstringcenterCSS background-position.
background-repeatstringno-repeatCSS background-repeat.
navigation-idstring—ID of a navigation menu in editor preferences. Distributed to <mmm-footer-menu> child.

Legacy auto-create toggles

When no sub-component children are present at connect time, the footer auto-creates them based on these toggles. Each is true by default — set "false" to skip that section entirely.

AttributeTypeDefaultDescription
show-brand-contentbooleantrueAuto-create <mmm-footer-brand>.
show-newsletter-sectionbooleantrueShow the newsletter header.
show-email-sectionbooleantrueAuto-create email input + subscribe button inside the newsletter.
show-json-sectionsbooleantrueAuto-create <mmm-footer-menu> (the column-link section).
show-download-app-sectionbooleantrueAuto-create <mmm-footer-download-app>.
show-payment-sectionbooleantrueAuto-create <mmm-footer-payment>.
show-social-sectionbooleantrueAuto-create <mmm-footer-social>.
show-copyright-sectionbooleantrueAuto-create <mmm-footer-copyright>.

Legacy attribute forwarding

In legacy mode, the following attributes pass through to the auto-created child of the matching type. They are skipped when you provide explicit sub-component children (set the attribute on the child directly instead).

Parent attributeForwarded toChild attributeNotes
brand-logommm-footer-brandbrand-logoLogo URL or wordmark.
brand-logo-widthmmm-footer-brandbrand-logo-width—
brand-logo-heightmmm-footer-brandbrand-logo-height—
brand-logo-font-familymmm-footer-brandbrand-logo-font-family—
brand-logo-font-weightmmm-footer-brandbrand-logo-font-weight—
brand-logo-object-fitmmm-footer-brandbrand-logo-object-fit—
brand-logo-text-font-sizemmm-footer-brandbrand-logo-text-font-size—
brand-logo-text-colormmm-footer-brandbrand-logo-text-color—
newsletter-headermmm-footer-newsletternewsletter-headerHeading text above the email field.
newsletter-placeholdermmm-footer-newsletter-emailplaceholder—
newsletter-subscribe-buttonmmm-footer-newsletter-buttonbutton-text—
newsletter-header-font-sizemmm-footer-newsletterheader-font-size—
email-input-background-colormmm-footer-newsletter-emailbackground-color—
email-input-text-colormmm-footer-newsletter-emailtext-color—
email-input-widthmmm-footer-newsletter-emailwidth—
email-input-font-sizemmm-footer-newsletter-emailfont-size—
email-button-font-sizemmm-footer-newsletter-buttonfont-size—
email-button-font-colormmm-footer-newsletter-buttoncolor—
email-button-background-colormmm-footer-newsletter-buttonbackground-color—
email-button-font-weightmmm-footer-newsletter-buttonfont-weight—
desktop-column-countmmm-footer-menudesktop-column-count—
tablet-column-countmmm-footer-menutablet-column-count—
mobile-column-countmmm-footer-menumobile-column-count—
small-mobile-column-countmmm-footer-menusmall-mobile-column-count—
menu-font-size / menu-font-color / menu-font-weightmmm-footer-menumenu-font-*Section heading styling.
menuList-font-size / menuList-font-colormmm-footer-menumenuList-font-*Link row styling.
map-img-width / map-img-heightmmm-footer-menumap-img-*Sizing for the optional "find us" map thumbnail.
download-app-text / download-app-text-showmmm-footer-download-apptitle-text / show-title—
downloadApp-links-img-width / -height / -object-fitmmm-footer-download-applinks-img-*App-store badge sizing.
we-accept-text / we-accept-text-showmmm-footer-paymenttitle-text / show-title—
payment-icons-img-width / -height / -object-fitmmm-footer-paymenticons-img-*Payment-method icon sizing.
connect-text / connect-text-showmmm-footer-socialtitle-text / show-title—
social-icons-img-height / -object-fitmmm-footer-socialicons-img-*—
copyright-text / copyright-text-left / copyright-text-rightmmm-footer-copyrightcopyright-text-*—
copy-right-font-size / copyright-colormmm-footer-copyrightfont-size / color—

Live preview

store sample-store tag <mmm-footer>

Examples

1. Composable (modern)

<mmm-footer background-color="#0e1011" text-color="#f5f5f5" padding="3rem 6rem">
  <mmm-footer-brand></mmm-footer-brand>
  <mmm-footer-menu navigation-id="footer" desktop-column-count="4"></mmm-footer-menu>
  <mmm-footer-social center-align="true"></mmm-footer-social>
  <mmm-footer-copyright copyright-text-left="© 2026 Sample Store" copyright-text-right="Powered by COMMMERCE.com"></mmm-footer-copyright>
</mmm-footer>

2. Single-tag (legacy)

<mmm-footer
  background-color="#fff"
  text-color="#111"
  brand-logo="https://cdn.commmerce.com/sample-store/logo.svg"
  newsletter-header="Subscribe for 10% off"
  newsletter-subscribe-button="Join"
  desktop-column-count="4"
  copyright-text-left="© 2026 Sample Store"
  show-download-app-section="false">
</mmm-footer>
<mmm-footer
  background-image="https://cdn.commmerce.com/sample-store/footer-bg.jpg"
  background-size="cover"
  background-position="bottom"
  text-color="#fff"
  padding="4rem 6rem">
  <mmm-footer-brand></mmm-footer-brand>
  <mmm-footer-copyright></mmm-footer-copyright>
</mmm-footer>