Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer-social>

A row of circular social-media icons. Each platform comes from STORE_INFO_DATA.navigations.footer.SOCIAL.platforms (or the parent footer's distributed data); icons render only when the platform has a valid image URL.

Overview

When dropped on a page standalone, the element fetches its data from CommmerceUtils.getStoreConfig(). When wrapped in <mmm-footer>, the parent calls setData() directly with the curated list — both paths render the same row.

If no platforms have a valid image URL the element renders nothing — there is no empty-state placeholder.

When to use

  • Inside <mmm-footer> for the social-icon row.
  • Standalone in headers or sidebars when the storefront exposes social links.

Quick start

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

<mmm-footer-social title-text="Follow us" center-align="true"></mmm-footer-social>

Attributes

AttributeTypeDefaultDescription
show-titlebooleantrueShow the section heading above the icons.
title-textstringSocialHeading text. Store data can override via section_title.
icons-img-heightnumber18Width & height of each icon image (px).
icons-img-object-fitstringcontainCSS object-fit for icon images.
font-weightstringtheme button weightSection-heading font-weight.
border-colorstringtheme borderBorder colour of the circular icon buttons.
hover-fillstringtheme button hover fillBackground on hover.
hover-strokestringtheme button hover strokeBorder colour on hover.
center-alignbooleanfalseCentre the heading and icon row horizontally.

Live preview

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

Examples

1. Default left-aligned row

<mmm-footer-social title-text="Follow us"></mmm-footer-social>

2. Centred row with no heading

<mmm-footer-social
  show-title="false"
  center-align="true"
  icons-img-height="20"></mmm-footer-social>
<mmm-footer-social
  title-text="Follow us"
  border-color="#2a2e33"
  hover-fill="#c8a8ff"
  hover-stroke="#c8a8ff"></mmm-footer-social>