Documentation
Web Components
Production-grade <mmm-*> custom elements that render with Shadow DOM encapsulation and ship as Redis-cached bundles served from GET /api/v1/web-component/*.
Core & SDK
Header
<mmm-header>
The full storefront header — logo, nav, search, account, and cart.
<mmm-header-logo>
Site logo image or wordmark with link-to-home behavior.
<mmm-header-search>
Inline search input with type-ahead suggestions.
<mmm-header-cart>
Cart icon and item counter that opens the cart slider.
<mmm-header-wishlist>
Wishlist icon and saved-item count.
<mmm-header-user-account>
Account icon, dropdown menu, and sign-in entry.
<mmm-header-navigation-desktop>
Multi-level desktop navigation with mega menus.
<mmm-header-navigation-mobile>
Hamburger trigger and mobile nav drawer.
Footer
<mmm-footer>
Composable footer container for the storefront.
<mmm-footer-brand>
Footer logo and tagline block.
<mmm-footer-menu>
Multi-column footer link menu.
<mmm-footer-newsletter>
Newsletter sign-up section with form layout.
<mmm-footer-newsletter-email>
Email input for the newsletter form.
<mmm-footer-newsletter-button>
Subscribe button paired with the email input.
<mmm-footer-social>
Social-media icon row with theme-aware sizing.
<mmm-footer-payment>
Accepted payment-method icon strip.
<mmm-footer-download-app>
App Store and Play Store badges.
<mmm-footer-copyright>
Copyright statement and legal-link strip.
Product
<mmm-product-card>
Product tile — media, title, price, and quick-add.
<mmm-product-media>
Product image, gallery, or video thumbnail.
<mmm-product-title>
Product name with truncation and link-out.
<mmm-product-price>
Price display — sale, compare-at, and ranges.
<mmm-product-discount-badge>
Discount percentage or savings badge overlay.
<mmm-product-rating>
Star rating with review-count summary.
<mmm-product-variants>
Variant picker — size, color, swatches.
<mmm-product-add-to-cart>
Add-to-cart button with quantity handling.
<mmm-product-wishlist>
Wishlist add/remove toggle on the card.
<mmm-product-filter>
Faceted filter UI for collection and search pages.
<mmm-product-pagination>
Page-number, infinite-scroll, and load-more pagination.
Product Detail (PDP)
<mmm-pdp-gallery>
Image gallery with thumbnails, swipe, and zoom.
<mmm-pdp-title>
Product title for the PDP layout.
<mmm-pdp-short-description>
Lead description above the fold.
<mmm-pdp-description>
Full product description block with rich text.
<mmm-pdp-price>
Price block — currency, compare-at, and savings.
<mmm-pdp-quantity>
Quantity stepper with min/max guards.
<mmm-pdp-variants>
Variant selectors aware of stock availability.
<mmm-pdp-rating>
Star rating with review summary on the PDP.
<mmm-pdp-add-to-cart-buy-now>
Primary CTAs — add to cart or buy now.
<mmm-pdp-sticky-add-to-cart>
Sticky bottom CTA pinned on mobile.
<mmm-pdp-wishlist>
Wishlist toggle for the active product.
<mmm-pdp-share>
Share menu with native share API and per-channel links.
<mmm-pdp-delivery>
Shipping and delivery estimate widget.
<mmm-pdp-hurry-up>
Stock urgency badge — e.g. "Only 3 left".
<mmm-pdp-offer>
Promotional offer banner on the PDP.
<mmm-pdp-offer-badge>
Inline offer badge attached to the gallery or price.
<mmm-pdp-custom-note>
Optional gift or instruction input passed to the order.
<mmm-pdp-placeholder-engine>
Skeleton renderer for slow-network states.
<mmm-pdp-placeholder-integration>
Wires placeholders to live data once loaded.
Cart & Checkout
<mmm-cart-slider>
Slide-out cart drawer with line-items and upsell slots.
<mmm-checkout-cart-info>
Cart summary panel at the top of checkout.
<mmm-checkout-login-signup-card>
Inline sign-in or guest-checkout choice.
<mmm-checkout-shipping-address>
Shipping address form with autofill.
<mmm-checkout-billing-address>
Billing address form, optionally same-as-shipping.
<mmm-checkout-shipping-method>
Shipping option selector with ETA and rate.
<mmm-checkout-delivery-method>
Delivery type selector — home, pickup, locker.
<mmm-checkout-payment>
Payment-method picker with inline payment forms.
<mmm-checkout-coupon>
Coupon entry and applied-discount list.
<mmm-checkout-price-summary>
Subtotal, shipping, tax, and total breakdown.
<mmm-checkout-tax-details>
Expandable tax line-item breakdown.
Order
Category
Blogs
Global
<mmm-address>
Reusable address form block with country awareness.
<mmm-cart>
Full cart page layout — distinct from the slider.
<mmm-contact-us>
Contact form with phone, email, and message fields.
<mmm-dialog>
Accessible modal dialog primitive.
<mmm-flash-bar>
Inline announcement or notification banner.
<mmm-form>
Form wrapper with client validation and submission.
<mmm-hotspot>
Pinpoint products on imagery for lookbooks.
<mmm-login>
Sign-in form with email, password, and OAuth.
<mmm-signup>
Account creation form and verification flow.
<mmm-reset-password>
Password reset request and confirmation flow.
<mmm-profile>
Customer profile editor — name, email, prefs.
<mmm-loop>
Iteration helper that repeats children from a data source.
<mmm-phone-input>
Country-aware phone input with dial-code dropdown.
<mmm-slider>
Carousel / image slider primitive built on Swiper.
<mmm-text-slider>
Marquee or rotating-text slider.
<mmm-testimonial>
Testimonial and customer-review cards.
<mmm-video>
Responsive video embed with poster and autoplay control.
<mmm-wishlist>
Wishlist page layout with saved items.
<mmm-testing>
Sandbox component used during component development.