Web Components · Account
<mmm-profile>
Customer profile editor — name, email, phone, plus contact preferences. Persists edits via the SDK and dispatches commmerce:auth-changed on sign-out so the rest of the storefront can react.
Overview
Pre-fills from the currently-signed-in customer. Edits are saved in-place; no confirmation step is needed for non-sensitive fields. The sign-out button at the bottom triggers commmerce:auth-changed with loggedIn: false.
Quick start
<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>
<mmm-profile></mmm-profile>Attributes
AttributeTypeDefaultDescription
theme-modestringlightlight or dark — swaps the default palette.background-colorstring#f5f5f5 (light) / #121212 (dark)Page background.panel-backgroundstring#ffffff (light) / #121212 (dark)Profile / password-modal background.font-familystringtheme description fontCard font family.description-font-weightstringtheme description weight / 400Body text weight.heading-font-weightstringtheme heading weight / 600"Profile" heading weight.sub-heading-font-weightstringtheme sub-heading weight / 500Section heading weight.text-primary-colorstringtheme primary text / #111Primary text colour.text-secondary-colorstringtheme secondary text / #666Helper-text colour.input-stroke-colorstringtheme input stroke / #dddInput border colour.button-colorstringtheme button fill / #000Save / sign-out button background.border-colorstringtheme border / #e5e7ebCard border.border-radiusstringtheme border radiusBorder-radius for inputs and buttons.button-font-sizestringtheme button size / 14pxButton font size.button-font-weightstringtheme button weight / 500Button font weight.button-font-familystringtheme button font / inheritButton font family.Events
EventTargetPayload
commmerce:auth-changedwindow{ isLoggedIn: true, userName: string } (on profile update)Live preview
Examples
1. Default — account page wiring
<mmm-profile></mmm-profile>2. Sign-out redirect
window.addEventListener('commmerce:auth-changed', (e) => {
if (!e.detail.loggedIn) location.href = '/';
});