Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer-newsletter>

The newsletter sign-up wrapper. Holds a header line and a slot for the email input + subscribe button. Renders only the headline if you pass it nothing; auto-creates child <mmm-footer-newsletter-email> + <mmm-footer-newsletter-button> in legacy mode.

Overview

Two usage modes: pass <mmm-footer-newsletter-email> + <mmm-footer-newsletter-button> as children explicitly, or use legacy attributes only and let the component auto-create them. When children are present, the component just renders the heading and a slot for the inputs.

When to use

  • Inside <mmm-footer> when you want an email capture.
  • For promotion-driven stores (welcome discounts, drop alerts, restock notifications).

Quick start

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

<mmm-footer-newsletter newsletter-header="Get 10% off your first order">
  <mmm-footer-newsletter-email placeholder="you@example.com"></mmm-footer-newsletter-email>
  <mmm-footer-newsletter-button button-text="Subscribe"></mmm-footer-newsletter-button>
</mmm-footer-newsletter>

Attributes

AttributeTypeDefaultDescription
newsletter-headerstringSubscribe today and get 10% off your first purchaseHeading text rendered above the input row.
newsletter-text-transformstringnoneCSS text-transform for the heading — none, uppercase, lowercase, capitalize.
show-headerbooleantrueToggle the heading line.
show-emailbooleantrueToggle the email input + button row. When false the component renders only the heading.
font-familystringtheme description fontFont-family for the whole block.
text-colorstringtheme primary textBase text colour.
header-font-sizenumber15Heading font size (px). Auto-shrinks 2px on tablet, 3px on small mobile.
header-font-weightstringtheme sub-heading weightHeading font weight.

In legacy mode the parent <mmm-footer> passes newsletter-placeholder, email-input-*, email-button-*, and newsletter-subscribe-button through to the auto-created children.

Slots

Default slot — anything you place inside renders inside the centred email-row container. Usually a <mmm-footer-newsletter-email> + <mmm-footer-newsletter-button> pair.

Live preview

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

Examples

1. Composable

<mmm-footer-newsletter newsletter-header="Join the list">
  <mmm-footer-newsletter-email placeholder="you@example.com"></mmm-footer-newsletter-email>
  <mmm-footer-newsletter-button button-text="Subscribe"></mmm-footer-newsletter-button>
</mmm-footer-newsletter>

2. Header-only (no input)

<mmm-footer-newsletter
  newsletter-header="Follow us on Instagram for drops"
  show-email="false">
</mmm-footer-newsletter>
<mmm-footer-newsletter
  newsletter-header="Join the list"
  newsletter-text-transform="uppercase"
  text-color="#fff"
  header-font-size="13"
  header-font-weight="700">
  <mmm-footer-newsletter-email></mmm-footer-newsletter-email>
  <mmm-footer-newsletter-button button-text="Join"></mmm-footer-newsletter-button>
</mmm-footer-newsletter>